Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Around Angular2
Search
Filippo Gangi Dino
October 27, 2016
Programming
0
100
Around Angular2
A talk about the features around Angular2 stack.
Filippo Gangi Dino
October 27, 2016
Tweet
Share
More Decks by Filippo Gangi Dino
See All by Filippo Gangi Dino
talk_sui_talk_WP_Meetup.pdf
mukkoo
0
180
Bug Hunt
mukkoo
0
110
Survive heisenbug in micro service architecture
mukkoo
1
99
WordFlow (WordPress WorkFlow)
mukkoo
0
92
What is git?
mukkoo
0
110
Git a life
mukkoo
0
300
Talk sui talk
mukkoo
1
180
Road to ES6
mukkoo
1
150
Middleman
mukkoo
0
210
Other Decks in Programming
See All in Programming
CSC509 Lecture 06
javiergs
PRO
0
240
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
970
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.3k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
150
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
150
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
490
Model Pollution
hschwentner
1
180
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
690
明日から始めるリファクタリング
ryounasso
0
120
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
980
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
400
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
110
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Navigating Team Friction
lara
189
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Code Review Best Practice
trishagee
72
19k
How GitHub (no longer) Works
holman
315
140k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Embracing the Ebb and Flow
colly
88
4.8k
Faster Mobile Websites
deanohume
310
31k
Gamification - CAS2011
davidbonilla
81
5.5k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Producing Creativity
orderedlist
PRO
347
40k
Transcript
AROUND ANGULAR 2 the hard way
@MUKKOO
None
None
None
STARTING WITH NG2
WHAT WE NEED TO LEARN
REDUX WEBPACK NODEJS IMMUTABLEJS TESTING STACK
ES6 & TYPESCRIPT RXJS ZONEJS ANGULAR 2
ES6 AND TYPESCRIPT
TS IS A ES6 SUPERSET
ES6 ES5 TS
ES6 CLASSES export class Hero { id: number; name: string;
}
ES6 TEMPLATE STRINGS template: ` <h1>${title}</h1> <h2>{{hero.name}}</h2> `
ES6 ARROW FUNCTIONS heroes => { this.heroes = heroes }
TS TYPE INFORMATIONS add(a: number, b?: number) => { return
a + b; } let list: number[] = [1,2,3]; let isDone: boolean = false;
TS CLASSES CAN BE TYPES class Bar { bar: Foo
} let bar = new Bar(new Foo()) // valid let bar = new Bar(new Baz()) // error
TS INTERFACES interface Person { firstName: string[]; lastName: string; }
let mat_gan:Person = { firstName: ['Mohandas', 'Karamchand'], lastName: 'Gandhi' }
TS DECORATORS @Component({ selector: 'hero', templateUrl: 'hero.component.html', }) export class
HeroComponent { … }
ES6 AND TYPESCRIPT recap
CLASSES TEMPLATE STRINGS TYPES DECORATORS
RXJS AKA OBSERVABLE
OBSERVABLE ARE THE NEW PROMISES
ASYNCHRONOUS DATA STREAMS
THIS IS REACTIVE PROGRAMMING
MANAGE DATA STREAM
this.http.get(url) .retryWhen(err => err.delay(500)) .timeout(2000, new Error(‘…’)) .map( data =>
{ return data.json(); }) .catch(this.handleError);
RXJS AKA OBSERVABLE recap
REACTIVE PROGRAMMING
ZONEJS
IT’S AN EXECUTION CONTEXT
ASYNC JAVASCRIPT // code a(); setTimeout(b, 0); setTimeout(c, 0); d();
// run order // queue a b c d
TIMING // code start(); a(); setTimeout(b, 0); setTimeout(c, 0); d();
stop(); // start a d // stop b // missed! c // missed!
CONTEXT zone.run(function() { a(); setTimeout(b, 0); setTimeout(c, 0); d(); });
ASYNC TASKS IN THE SAME ZONE
TRANSITIVE function first() { setTimeout(second, 0); } function second() {
setTimeout(third, 0); } function third() { … } zone.run(first);
PATCH CODE AT RIGHT TIME
DEBUG
PROFILING
ZONEJS recap
EXECUTION CONTEXT FOR ASYNC TASKS
ANGULAR IS HARD
ANGULAR IS HUGE
THERE IS A LOT OF INTERESTING THINGS
None
Q&A @MUKKOO