demystifying angular 2 - doag deutsche oracle ... · demystifying angular 2 philipp tarasiewicz,...
TRANSCRIPT
SPAs for the Web of Tomorrow
Demystifying Angular 2
Philipp Tarasiewicz, JavaLand, 08.03.2016
About MePhilipp Tarasiewicz
Consultant / Trainer / Developer
Web Dev / Distributed Systems15 yr.
Consultant & coach5 yr.
Perl / CGI » Java, PHP» JavaScript / Go
@justphilmusic
AngularJS: Eine praktische Einführung in das JS-Framework
● First German AngularJS book● dpunkt.verlag● April 2014● ca. 360 pages
http://dpunkt.de/buecher/4489/angularjs.html
Agenda
(What is Angular?)Why Angular 2 ?! Angular 2 in a Nutshell
Migration Strategies Angular 2 Progress
1 2
3 4
(What is Angular?)
JS Framework for SPAs
Angular Overview
Services
Directives
Modules
ScopesData Binding
Dependency Injection
Animation
Validation
Routing
Angular
Filters
Expressions
Controllers
Angular Overview
Services
Directives
Modules
ScopesData Binding
Dependency Injection
Animation
Validation
Routing
Angular
Filters
Expressions
Controllers
Very good testability!
Why Angular 2 ?!
Angular Recap
2009
Angular Recap
2009
Angular Recap
2009
Main Focus Then
Main Focus Then
Cross Browser Compatibility
What do we want today?
What do we want today?
Offline First!
What do we want today?
API
Client
Server
Your App
Isomorphic JavaScript
Emerging Web Tech
So Angular 1.X appears rusty, right?!
Oldie but Goldie!
Angular 2 in a Nutshell
Components
<my-app>
<user-list> <navigation>
<user-image> <user-info> <nav-item> <nav-item>
Components
<my-app>
<user-list> <navigation>
<user-image> <user-info> <nav-item> <nav-item>
An app is just a tree of components!
Components
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
class AppComponent {}
Components
Component
@Input
@Outputdirectives
providers
template[Url]
selector
...
Components
<user-info [firstname]="user.name"
(change)="onChange($event)">
</user-info>
Directives
Directive
providers
selector
Directives
Directive
providers
selector
A directive is a component’s little sister!
Directives
Most Angular 1.X directives are obsolete in Angular 2.
Some exceptions:
ngRepeat » NgFor
ngClass » NgClass
TypeScript
TypeScriptES6ES5
TypeScript
Do we really want to have static typing?
Compile-Time Security
Docs Tooling Refactoring
Dependency Injection
Root Injector
Child Injector Child Injector
Child Injector
Child Injector
Child Injector
Child Injector
Injector Hierarchy
Change Detection
AppComp
MyComp1 MyComp2
SubComp11 SubComp12 SubComp21 SubComp22
Directed Graph
Change Detection
AppComp
MyComp1 MyComp2
SubComp11 SubComp12 SubComp21 SubComp22
By default change detection happenson every browser event.
Change Detection
AppComp
MyComp1 MyComp2
SubComp11 SubComp12 SubComp21 SubComp22
Massive optimizations possibleby using Observables and Immutables!
Unidirectional Data Flow
Faster
Easier to debug
Easier to reason about
Better suited for Rx & Flux
Isomorphic JavaScript
Angular Universal
Preboot
Prerender app on the server to speed up client-side app loading.
Angular 2 Cheatsheet
https://angular.io/cheatsheet
“This cheat sheet is provisionaland may change.”
Angular 2 in a Nutshell
Angular 2 in a Nutshell
Simple
Angular 2 in a Nutshell
Built for SpeedSimple
Angular 2 in a Nutshell
Built for SpeedSimple Productive
Angular 2 in a Nutshell
Built for SpeedSimple ProductiveIncreased Developer Happiness!
Migration Strategies
Migration Strategies
A1 Preparations
angular.component()Router
ngForwardngUpgrade
A1 / A2 Interop
A1 in A2A2 in A1
Angular 2 Progress
Alpha Final
Fast
Simple
Productive
Available!
Your Feedback
Dev @ Google
Angular 2 Progress
Beta
Docs
P1 Issues
Alpha Final
Fast
Simple
Productive
Available!
Your Feedback
Dev @ Google
Angular 2 Progress
Beta
Docs
P1 Issues
Questions to Ask
Do I need to deliver or do I have time to experiment?
Which browsers do I need to support?
Which devices do I need to support?
Do I heavily rely on 3rd-party libraries?
We are facing a bright future!
Thank you!Philipp TarasiewiczConsultant / Trainer / Developer
@justphilmusic