With the progressive growing of Web Applications in the last few years, the new version of this super framework has some awesome new things. Change detection? Syntax sugar? ES6? Native APIs?
26. Introduction to Angular 2, DevMT Meetup, April 2016
AngularJS (1.x)
→ Design decisions (not so good)
→ Web platform evolution
More at http://blog.jhades.org/introduction-to-angular2-the-main-goals
27. Introduction to Angular 2, DevMT Meetup, April 2016
Design Decisions
→ Third-party libraries (interoperability)
→ Directive Definition Object
→ $scope and $digest cycles
28. Introduction to Angular 2, DevMT Meetup, April 2016
Web platform evolution → Web Workers
→ Web Components
→ ES6, ES7, TypeScript, Dart…
→ Offline Apps (Service Workers)
→ Mobile Apps
40. Introduction to Angular 2, DevMT Meetup, April 2016
Components
Template
Directive
Controller Component
ng1 ng2
41. Introduction to Angular 2, DevMT Meetup, April 2016
Edge Web API
✓ Component encapsulation (emulated or native)
✓ Plain JS Classes + Metadata
(TypeScript decorators are optionals)
43. Introduction to Angular 2, DevMT Meetup, April 2016
Angular 1: Template syntax
Entry property
Entry property
Out property
<my-card title="{{ title }}"
visible="visible"
remove="onRemove()"></my-card>
scope: {
title: '@',
visible: '=',
on-remote: '&'
}
44. Introduction to Angular 2, DevMT Meetup, April 2016
Templates
Binding Example
Properties
Events
Two-way
https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax
<input [value]="firstName">
<button (click)="save($event)">
<input [(ng-model)]="firstName">
45. Introduction to Angular 2, DevMT Meetup, April 2016
Angular 2: Template syntax
Entry property
Entry property
Out property
properties: [
'title',
'visible'
]
@Output() remove = new EventEmitter();
<my-card [title]=“title"
[visible]=“visible”
(remove)=“onRemove()”></my-card>
46. Introduction to Angular 2, DevMT Meetup, April 2016
Template Syntax
✓ Simpler API to memorize
✓ Valid HTML
✓ Syntax more semantic
47. Introduction to Angular 2, DevMT Meetup, April 2016
Change Detection
✓ Cyclic graphsx Cyclic graphs
✓ Tree of components
48. Introduction to Angular 2, DevMT Meetup, April 2016
Angular 1: Cyclic graphs
x Dirty checking
x Unpredictable watchers
x Unpredictable digest cycle runs
http://blog.jhades.org/introduction-to-angular2-the-main-goals/#howangular1implementsbinding
49. Introduction to Angular 2, DevMT Meetup, April 2016
Angular 2: Tree of components
✓ Predictable watchers
✓ Independent change detector
✓ Switchable strategies for each CD
(great for immutability)
@Component({
changeDetection: ChangeDetectionStrategy.OnPush
})
http://victorsavkin.com/post/110170125256/change-detection-in-angular-2
50. Introduction to Angular 2, DevMT Meetup, April 2016
Change Detection
✓ Faster changes detections (3x ~ 5x)
✓ Independent component CD
✓ Switchable change strategies
(can be more faster yet 3x ~ 8x)
✓ Tree of components
53. Introduction to Angular 2, DevMT Meetup, April 2016
Isomorphic Rendering
https://github.com/angular/universal
54. Introduction to Angular 2, DevMT Meetup, April 2016
Web Workers Support ✓ Sandbox untrusted code
✓ Awesome for mobile
✓ Concurrency & Parallelism
https://github.com/angular/angular/blob/master/modules/angular2/docs/web_workers/web_workers.md
55. Introduction to Angular 2, DevMT Meetup, April 2016
Unidirectional Data Flow
✓ Easier to debug
✓ Interoperable (RxJS, Flux, Redux…)
✓ Faster
75. Introduction to Angular 2, DevMT Meetup, April 2016
Ionic Framework
✓ Apps featured by Google & Apple
✓ Battle-tested by lots of startups
✓ 1.2M+ apps built since 02/2014
76. Introduction to Angular 2, DevMT Meetup, April 2016
Ionic v2 built upon Angular 2
✓ Use modern Web APIs like Web Workers
✓ Express Ionic as a more traditional GUI architecture
✓ Dramatically improve render performance
✓ Reduce the barrier to entry (it’s mostly vanilla javascript)
http://ionic.io/2
77. Introduction to Angular 2, DevMT Meetup, April 2016
New features
✓ Material design support
✓ New animation and scrolling
✓ Overhauled navigation
✓ Powerful theming system
✓ New components and templates