Angular Keynote - Microsoft... · Angular 6 & 7 Building a better developer experience. ... Router...
Transcript of Angular Keynote - Microsoft... · Angular 6 & 7 Building a better developer experience. ... Router...
Angular Keynote
Brad Green
AngularMix, October 2018
@bradlygreenhttp://bit.ly/AngularMix-2018
@
First eng review:Nov 16, 2010
You are all liars!
Urs Hölzle
Later that day...
Check out the framework Urs doesn't want you to use!
Angular in 2018
Used by more Google
developers than any
other front end framework
Angular Everywhere
Startups Choosing Angular
news.crunchbase.com/news/popular-web-frameworks-seed-early-stage-startups/
30-day active visitors to angular.io
40%
?
30-day active visitors to angular.io
40%
Help us grow
"Brad will never go to college and will likely
never have a full-time job"
ngGirls
Individual Sponsorship
Sponsor
patreon.com/ngGirls
Mentoring
Volunteer
ng-girls.org/#descrption
Create excellent interactions
Daddy, do you pick your nose?
When you were a kid, did you pick your nose and eat your boogers?
Do you want to see me eat my boogers?
Then don't look at me...
Mostly good stuff happens
goodbad
inte
ract
ions
Code of Conduct Area
What we're after
goodbad
inte
ract
ions
What to do
Bad Stuff
Tell us
Good Stuff
Tell everyone!
799 Worldwide Meetupsangular.meetup.com
Creating a Successful Meetup at Your Company
Building meetups at work
Friendships / networks
New concepts
Company-wide visibility
Personal confidence
Angular 6 & 7Building a better developer experience
Fully supported, fully integrated
Angular Protractor Forms PWA Augury Language Services Router Elements CDK
Universal Karma Labs Compiler i18n Http Material Animations CLI
Angular Universal
Angular Universal
req
html
js
The cause for server side rendering
SpeedPreview SEO
The cause for server side rendering
Speed SEOPreview
Good Fast Popular
ShoppingExpress
2.3x Faster!
Migration Assistant
AngularJS Angular
Migration Assistant
Outlines prep work
Analyzes AngularJS apps
Recommends migration path
Extensible CLI Ecosystem
new generate update add
componentdirective
pipeservice
...
Using 'ng add'
\> ng add @angular/pwa
> ng add @angular/elements
> ng add @angular/material
> ng add @ng-bootstrap/schematics
> ng add @clr/angular
> ng add @nativescript/schematics
Per-library 'generate' schematics
\> ng g @angular/material:material-nav --name=main-nav
Ecosystem supporting 'ng add'
Elements PWAMaterial
ng-bootstrap Clarity NativeScript
NativeScript
Code sharing with native mobile
ng serve
Web App
npm run ios npm run android
Native Apps
Code sharing with native mobile
docs.nativescript.org/angular/code-sharing/intro
Angular Console
One-step install
CLI Graphical UI
Interactive command discovery
StackBlitz
Angular Language Service
CLI Schematics Extensions
Faster than desktop
CLI Docs now in angular.io
Material & CDK
Angular Material Design Components
date-picker
menu
badge bottom sheet button card
dialog grid-list icon
radio select sidenav
auto-complete
expansion
progress
checkbox
input
slide toggle
chips
list
slider
snack bar table tabs toolbarstepper tooltip tree
Behaviors
Angular Component DevKit (CDK)
Accessibility
Layout Observers Overlay
Bidirectionality
Portal Scrolling Virtual Scroll
Drag & Drop
Generic Components
Stepper
Table
Tree
Virtual Scroll & Drag-n-Drop
Angular Prototyping Tool 3:40 pm
Me
Steve
Angular FutureSmaller, faster, easier
Bazel
Scale
Speed
Multi-language
In the CLI (later)
Fast, stable builds
BazelAccepting early access
Used by Angular itself
Office hours tomorrow!
Fast, stable builds
In Angular Labs
Expanding Angular Use CasesIvy Renderer + Angular Elements
Lightweight
Websites
Expanding Angular Use Cases
Applications
Industrial strength
Angular Universal
Optimization & lazy loading
Angular Elements
Ivy Renderer
Embed anywhere with Angular Elements
Self bootstrapping
Standards-based
Works everywhere
Available now
Ivy Renderer
Faster compilation
Smaller
Dead-simple debugging
25 Kb
20 Kb
10 Kb
5 Kb
0
30 Kb
7.3 Kb2.7 Kb
IvyMinified
IvyCompressed
Cake Goal
10 Kb
'Hello, World' Cake Threshold36 Kb
Today (compressed)(no-zone.js)
Smaller
Backwards Compatible
Firebase GoogleAnalytics
GoogleExpress
GoogleCloud
Platform
+600 more
...
Ivy Runtime
Template Compiler
Verification @ Google
Roadmap
Today ReleaseLabs
Stay in touch
twitter.com/angular youtube.com/angular
What about Urs?
Thanks!
@bradlygreen http://bit.ly/AngularMix-2018