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
Angular 2: Quick Web Start
Search
Minko Gechev
March 10, 2016
Technology
4
2.6k
Angular 2: Quick Web Start
Minko Gechev
March 10, 2016
Tweet
Share
More Decks by Minko Gechev
See All by Minko Gechev
Change the World With Open Source Software
mgechev
0
190
Fast Angular Apps from End to End
mgechev
1
190
The State of Angular
mgechev
1
200
The State of Angular
mgechev
1
370
Software Engineering as a Superpower
mgechev
1
190
Introduction to Angular
mgechev
1
210
Internals of the Angular CLI
mgechev
2
1.3k
The State of Angular
mgechev
1
210
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.9k
Other Decks in Technology
See All in Technology
AIエージェントを現場で使う / 2025.08.07 著者陣に聞く!現場で活用するためのAIエージェント実践入門(Findyランチセッション)
smiyawaki0820
5
390
クマ×共生 HACKATHON - 熊対策を『特別な行動」から「生活の一部」に -
pharaohkj
0
290
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
1.1k
【CEDEC2025】『ウマ娘 プリティーダービー』における映像制作のさらなる高品質化へ!~ 豊富な素材出力と制作フローの改善を実現するツールについて~
cygames
PRO
0
230
Kiroから考える AIコーディングツールの潮流
s4yuba
4
650
JAWS AI/ML #30 AI コーディング IDE "Kiro" を触ってみよう
inariku
3
260
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
130
Oracle Cloud Infrastructure:2025年7月度サービス・アップデート
oracle4engineer
PRO
1
110
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
340
LLM開発を支えるエヌビディアの生成AIエコシステム
acceleratedmu3n
0
370
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
860
Foundation Model × VisionKit で実現するローカル OCR
sansantech
PRO
0
280
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Gamification - CAS2011
davidbonilla
81
5.4k
The Language of Interfaces
destraynor
158
25k
Automating Front-end Workflow
addyosmani
1370
200k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Producing Creativity
orderedlist
PRO
346
40k
Done Done
chrislema
185
16k
Git: the NoSQL Database
bkeepers
PRO
431
65k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Balancing Empowerment & Direction
lara
1
520
Transcript
ngular 2: quick web start Minko Gechev github.com/mgechev twitter.com/mgechev blog.mgechev.com
None
None
None
github.com/mgechev twitter.com/mgechev blog.mgechev.com
None
Agenda
https://www.flickr.com/photos/jackson22/16706843701 Tooling…
Angular 2 is language agnostic
Angular 2 with ES5
angular2-seed
Seed project for Angular 2 apps with statically typed build
Seed project for Angular 2 apps with statically typed build
Seed project… • Development and production builds • TypeScript transpilation
• BrowserSync support • Karma with Jasmine integration • e2e testing with protractor • Test coverage • Follows best practices • ng2lint
Seed project… • Development and production builds • TypeScript transpilation
• BrowserSync support • Karma with Jasmine integration • e2e testing with protractor • Test coverage • Follows best practices • ng2lint
Seed project… • Development and production builds • TypeScript transpilation
• BrowserSync support • Karma with Jasmine integration • e2e testing with protractor • Test coverage • Follows best practices • ng2lint
Seed project… • Development and production builds • TypeScript transpilation
• BrowserSync support • Karma with Jasmine integration • e2e testing with protractor • Test coverage • Follows best practices • ng2lint
Seed project… • Development and production builds • TypeScript transpilation
• BrowserSync support • Karma with Jasmine integration • e2e testing with protractor • Test coverage • Follows best practices • ng2lint
Seed project… • Development and production builds • TypeScript transpilation
• BrowserSync support • Karma with Jasmine integration • e2e testing with protractor • Test coverage • Follows best practices • ng2lint
Seed project… • Development and production builds • TypeScript transpilation
• BrowserSync support • Karma with Jasmine integration • e2e testing with protractor • Test coverage • Follows best practices • ng2lint
None
None
Introducing Best Practices
Section agenda • Use common style & best practices •
Angular 2 (will) have great IDE support • Use static code analysis for less bugs
None
None
None
Angular 2 has “runtime-type checking”
None
Why not build-time
None
None
None
ng2lint
“ng2lint is a project which aims to enforce common style
and verify correctness of your program”
Angular in Web Workers
– MDN “Web Workers provide a simple means for web
content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface.”
– MDN “Web Workers provide a simple means for web
content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface.”
Angular 2 is platform agnostic
Angular 2 can run… • In the browser • On
the server • In WebWorkers • In native mobile apps
Angular 2 can run… • In the browser • On
the server • In WebWorkers • In native mobile apps
Angular 2 can run… • In the browser • On
the server • In WebWorkers • In native mobile apps
Angular 2 can run… • In the browser • On
the server • In WebWorkers • In native mobile apps
Angular 2 can run… • In the browser • On
the server • In WebWorkers • In native mobile apps
WebWorker UI thread App Change Detection Web Worker renderer …
UI Renderer Do whatever you want
JSON WebWorker UI thread App Change Detection Web Worker renderer
… UI Renderer Do whatever you want
…but
Can’t touch DOM
What about? document.body.style .backgroundImage = 'url(background.png)';
None
…at least…? document.querySelectorAll('.foo');
None
WebWorkers recap • Angular is platform agnostic • Running apps
in background • WebWorkers can’t touch the DOM
angular/offline
angular/offline: • Offline access to static content • Notifications for
new versions • Efficient download of deltas • Support off push notifications
angular/offline: • Offline access to static content • Notifications for
new versions • Efficient download of deltas • Support off push notifications
angular/offline: • Offline access to static content • Notifications for
new versions • Efficient download of deltas • Support off push notifications
angular/offline: • Offline access to static content • Notifications for
new versions • Efficient download of deltas • Support off push notifications
angular/offline: • Offline access to static content • Notifications for
new versions • Efficient download of deltas • Support of push notifications
angular/offline: • Offline access to static content • Notifications for
new versions • Efficient download of deltas • Support of push notifications
None
– MDN “Service workers essentially act as proxy servers that
sit between web applications, and the browser and network (when available)....”
None
– MDN “HTML5 provides an application caching mechanism that lets
web-based applications run offline. Developers can use the Application Cache...”
AppCache Service Workers AppCache Service Workers = ~91.8%
In progress integration with angular2-seed
Alright…but when?
None
Soon…
STANG2 50% off
Use with us
Thank you! github.com/mgechev twitter.com/mgechev blog.mgechev.com