Introduction to angular 2

Introduction to Angular 2, DevMT Meetup, April 2016
Introduction to Angular 2
Dhyego Fernando

Meetup?

@dhyegofernando
full-stack dev

Agenda
✓ How to prepare yourself?
✓ Short history about SPA
✓ Why Angular 2?

the beginning

youtube.com @2005

Single Page Applications

Web Apps FTW

GetAngular
Misko Hevery
Adam Abrons

✓ Directives
✓ Data-binding
✓ MVWhatever

Data-binding
<input type="text" ng-model="yourName">
<h1>Hello {{yourName}}!</h1>

MVW

Directives
<tabset>
<tab heading="Title 1">
<p>Content 1 goes here</p>
</tab>
</tab>
</tab>
</tabset>

48k+ stars

Angular 1 Releases

Google products in Angular 1

madewithangular.com

+mobile platform apps

Angular 2
Officialy announced at ng-europe 2014

Why Angular 2?

AngularJS (1.x)
→ Design decisions (not so good)
→ Web platform evolution
More at http://blog.jhades.org/introduction-to-angular2-the-main-goals

Design Decisions
→ Third-party libraries (interoperability)
→ Directive Definition Object
→ $scope and $digest cycles

Web platform evolution → Web Workers
→ Web Components
→ ES6, ES7, TypeScript, Dart…
→ Offline Apps (Service Workers)
→ Mobile Apps

So, what’s new?

What’s new?
Edge Web API Template Syntax Change Detection

Edge Web API
x Directives + Content Transclusion✓ Directives + Content Transclusion
✓ Components + Content Projection

Angular 1 Directives + Content Transclusion

Angular 1: Directives + Content Transclusion
My Title
My Content
Property binding
Content transclusion
<my-card title="My Title">
<p>My Content</p>
</my-card>

Property binding
app.directive('myCard', function() {
// ...
scope: {
title: '@'
},
transclude: true
});

Property binding
<div class="my-card">
<h1>{{ title }}</h1>
<div ng-transclude></div>
</div>

Angular 2 Components + Content Projection

Angular 2: Components + Content Projection
Property binding
<my-card [title]=“‘My Title’">
<p>My Content</p>
</my-card>

Property binding
<div class="my-card">
<h1>{{ title }}</h1>
<content></content>
</div>

Property binding
@Component({
selector: 'my-card',
properties: ['title']
})
@View({
// ...
encapsulation: ViewEncapsulation.Native
})
class MyCard { }

Components
Template
Directive
Controller Component
ng1 ng2

Edge Web API
✓ Component encapsulation (emulated or native)
✓ Plain JS Classes + Metadata 
(TypeScript decorators are optionals)

Template Syntax

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: '&'
}

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">

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>

Template Syntax
✓ Simpler API to memorize
✓ Valid HTML
✓ Syntax more semantic

Change Detection
✓ Cyclic graphsx Cyclic graphs
✓ Tree of components

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

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

Change Detection
✓ Faster changes detections (3x ~ 5x)
✓ Independent component CD
✓ Switchable change strategies 
(can be more faster yet 3x ~ 8x)
✓ Tree of components

Are we done?

Isomorphic Rendering
https://github.com/angular/universal

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

Unidirectional Data Flow
✓ Easier to debug
✓ Interoperable (RxJS, Flux, Redux…)
✓ Faster

Simpler to Learn

Multi Languages Support

ES5 ES6 TypeScript Dart

No Compile Compile

No Types Types

JavaScript-Based Syntax No JS

ES6ES5 TypeScript Dart
No JS
ES6
JavaScript-Based Syntax

TypeScriptES6ES5 Dart
No JS
TypeScriptES6
JavaScript-Based Syntax

Tools

Angular CLI
https://github.com/angular/angular-cli

Batarangle ✓ Template navigation
✓ Debugging
✓ Performance analysis
http://go.rangle.io/batarangle

Cross Platform

Cross Platform
Mobile Web MobileDesktop

Angular
Universal
Web
Workers
Mobile Web
Material
Design

Mobile

Ionic Framework
Max Lynch 
Adam Bradley

Ionic Framework
✓ Apps featured by Google & Apple
✓ Battle-tested by lots of startups
✓ 1.2M+ apps built since 02/2014

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

New features
✓ Material design support
✓ New animation and scrolling
✓ Overhauled navigation
✓ Powerful theming system
✓ New components and templates

The Path to Angular 2

ng1
ng2

...

ngUpgrade
http://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html
https://github.com/angular/angular/tree/master/modules/playground/src/upgrade

ngUpgrade
Left
Top Nav
Main View
1
1
1 1
1 1 1
1 1 1
1 1 1

ngUpgrade
Left
Top Nav
Main View
1
1
1 1
1 1 1
1 1 1
1 1 1
2 2
2
2
2 2 2
2 2 2
2 2 2

Learning Angular 2

Supported Browsers
4.1+
9, 10, 11

Release Status
https://splintercode.github.io/is-angular-2-ready/

Live Demo
https://github.com/johnpapa/angular2-tour-of-heroes

Want to talk too?
http://devmt.herokuapp.com/
+

http://frontincuiaba.com.br/

http://hackinarena.com.br/

Feedbacks?
@dhyegofernando

Introduction to angular 2

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Introduction to angular 2

Similar to Introduction to angular 2 (20)

Recently uploaded

Recently uploaded (20)

Introduction to angular 2