Angular

Keynote
September 27, 2016
Jules Kremer
@jules_kremer
Miško Hevery
@mhevery
Stephen Fluin
@stephenfluin

One framework
Mobile & desktop

Source: State of Octoverse 2016
Contributors

1
0.5
0
Angular 1
Oct 2015
Angular 1
Sept 2016
Angular 2
Sept 2016
1.1M
1.2M
623k
Based on 30-day active visitors to Angular docs
Community Size

2 0 0. .
Major . Minor . Patch
Incompatible
Changes
Backwards
Compatible
Bug Fixes
semver.org

STABLE
EXPERIMENTAL
20172016
2.0 3.0 4.0
Stability
Major Release Cycle

Declarative Templating
Change Detection
Dependency Injection
Component Model
Ahead-of-Time Compilation
DOM Independence
Angular Core

Angular Material
i18n
Router
Forms
Animations
ngUpgrade
Left
Nav
Top Nav
Main View
Angular Extensions

Angular CLI
by
Angular Augury Language Services
Developer Tools
Protractor

Miško Hevery
Miško Hevery
@mhevery
Performance

Performance
is not a single number
First Time
Render
Change
Detection

Smaller
Lazy
Multi
Threaded
Do Less

HTML
CSS
@Ann
HTML
Compiler &
Expression
Parser
DI Runtime
View
Runtime
Change
detection
Runtime
Your Application
Renderer
Interpreted
CD / View

Build Step
HTML
CSS
@Ann
HTML
Compiler &
Expression
Parser
DI Runtime
View
Runtime
Change
detection
Runtime
Your Application
Renderer
Generated
CD / View

Offline
compile
Inline
modules
Tree-shake Minify

@Component({
template: 'Hello {{name}}!'
})
class Greeter {
name: string = 'World';
}
while(r) {
var v=r.obj[r.prop];
if(v!=r.last) {
r.node.textContent
= r.last = v;
}
r = r.next;
}

MyAppModule
Template
Pipes
Providers
Template
Component
Pipes
Pipes
Providers
Providers
BrowserModule
MaterialModule
...Module

ElementElement
RouterComponent
NgModule
Lazy Loading
BoundaryNgModule
ElementElement
Component
Platform

@Component({
template: 'Hello {{name}}!'
})
class Greeter {
name: string = 'World';
}

while(r) {
var v=r.obj[r.prop];
if(v!=r.last) {
r.node.textContent
= r.last = v;
}
r = r.next;
}
var last_name;
var v = ctx.name;
if(v!=last_name){
nameTextNode
.textContent
= last_name
= v;
}

var ctx: Greeter = ...;
var last_name: typeof ctx.name;
var v: typeof ctx.name = ctx.name;
if (v != last_name) {
...
}

es6_bundle.min.js:2 Uncaught EXCEPTION: Error in app.html:1:5
es6_bundle.min.js:6 Error: OH NOES
at t.Object.defineProperty.get [as name] (es6_bundle.min.js:7)
at HelloWorldFactory.detectChangesInternal (es6_bundle.min.js:8)
...

1 <div
2 tabIndex="1"
3 [label]="hint"
4 (slide)="doSomething()">
5 </span>

Single Pass (/w dev-mode check)
Top to bottom data flow
CheckAlways
Detached
OnPush
OnDirty
(Before/After)ChildInit
(Before/After)ChildChecked
(Before/After)ContentInit
(Before/After)ContentChecked

Change
Detection
Data
Structures

Serialize RendererDeserialize
● Application Logic
● XHR
● Rendering
● Animations

Benchpress
Execution Time
Render Time
GC Pressure
Update Speed

Ben Dilts
Co-founder & CTO
Ryan Stringham
Senior Engineer
Angular 2 Lead

One of the first rich graphical applications on the web
Hand-written Javascript (ES5)

Why Angular 2?
<div class="input-wrapper" lucid-callout>
<input
#dateInput
class="date-input"
type="text"
[value]="value | date:'MM/dd/yy'"
(change)="setDate(dateInput.value)"
[class.error]="dateError"
/>
...

Why Angular 2?
.input-wrapper {
display:inline-block;
}
.date-input {
width:60px;
}
...

Why Angular 2?
describe('lucid.view.ng2.common.input.ToggleButton', () => {
it('should turn on and off when clicked', ...)
it('should be neither on or off when invalid', ...)
it('should be neither on or off when disabled', ...)
it('should be able to use non-boolean values', ...)
...

Now: Everything but the WebGL canvas is built in Angular 2

templateUrl: './gui.html',
providers: [
MenuItems,
MenuBarItems,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GUI {
Huge win over Angular 1: Change detection

Ahead-of-time template compiler

Angular 2 editor Legacy editor
AOT
compiler

AOT
compiler
Closure advanced
compilation

AOT
compiler
Closure advanced
compilation
27KB Hello
World App!

Stephen Fluin
@stephenfluin
Stephen Fluin

Mobile Scenarios
Performance matters more on Mobile
70% of web usage in many cases

Desktop Scenarios
File system & feature integrations
Many people use desktop
applications every day

Scenarios
Progressive Web Apps Mobile Desktop
PWA

NPR One
Nara Kasbergen
@xiehan
NPR Developer Blog @ https://npr.codes

Our team proposed
using Angular 2 for
the rebuild of the
webapp.

We had the rare opportunity to start a project from scratch, which
opened up our options
The "all-in-one" nature fit well with our project as a self-contained unit,
separate from NPR.org
As a team with no embedded QA resource, a high level of test
coverage was critical
Why we picked Angular 2

January 31, 2016
Initial commit for the new NPR One webapp
Angular 2 is in beta2

March 31, 2016
Official launch of the new NPR One webapp
Angular 2 is in beta13

end-to-end tests
using Protractor (protractortest.org)

React and Angular 2 share many of
the same core ideas
There is a place in every team's
stack for both

We used ES6 instead of TypeScript
We added Redux-like state management functionality
using the plugin @ngrx/store
github.com/ngrx/store
The React developers have been able to participate
fully in all of our code reviews
Our hypothesis was correct

"Is Angular 2 ready
for production?"

Check out
one.npr.org &
decide for yourself.

Data
GraphQL Real-time ngrx/store ngRedux

Apollo & GraphQL
Uri Goldshtein
@urigoldshtein
github.com/urigo

Caching results and Preloading

API Documentation
Multiple round trips and complex joins on the client
Server developers decide on how the API would look
Dependency on the server
API problems

Make everything feel instant (Optimistic UI)
Small, Open, Client Only, Integrated Gradually
Pluggable Immutable Local Cache (Redux, RxJS)
Modern Data Protocol - GraphQL
Apollo - Network Data Management Library

Client asks for and
gets exactly what
it needs
GraphQL

GraphQL
Multiple resources
in single request

Server
Template
Template
UI Components

Angular

Recommended

More Related Content

What's hot (20)

Similar to Angular (20)

Recently uploaded (20)

Angular