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
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
390
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.6k
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
420
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
380
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
140
VS Code Update for GitHub Copilot
74th
1
460
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
300
GraphRAGの仕組みまるわかり
tosuri13
8
500
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.7k
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
580
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Being A Developer After 40
akosma
90
590k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Git: the NoSQL Database
bkeepers
PRO
430
65k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
What's in a price? How to price your products and services
michaelherold
246
12k
Adopting Sorbet at Scale
ufuk
77
9.4k
Designing Experiences People Love
moore
142
24k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
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