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
93
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
170
Bug Hunt
mukkoo
0
99
Survive heisenbug in micro service architecture
mukkoo
1
89
WordFlow (WordPress WorkFlow)
mukkoo
0
88
What is git?
mukkoo
0
97
Git a life
mukkoo
0
280
Talk sui talk
mukkoo
1
170
Road to ES6
mukkoo
1
140
Middleman
mukkoo
0
200
Other Decks in Programming
See All in Programming
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
290
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
エンジニア向け採用ピッチ資料
inusan
0
140
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
0
280
Passkeys for Java Developers
ynojima
3
870
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
GoのGenericsによるslice操作との付き合い方
syumai
2
670
WindowInsetsだってテストしたい
ryunen344
1
190
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
240
SODA - FACT BOOK
sodainc
1
1.1k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
41
28k
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
190
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Agile that works and the tools we love
rasmusluckow
329
21k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Optimizing for Happiness
mojombo
379
70k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Statistics for Hackers
jakevdp
799
220k
It's Worth the Effort
3n
184
28k
KATA
mclloyd
29
14k
Practical Orchestrator
shlominoach
188
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
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