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.5k
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
130
Fast Angular Apps from End to End
mgechev
1
150
The State of Angular
mgechev
1
170
The State of Angular
mgechev
1
290
Software Engineering as a Superpower
mgechev
1
150
Introduction to Angular
mgechev
1
150
Internals of the Angular CLI
mgechev
2
1.2k
The State of Angular
mgechev
1
160
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.8k
Other Decks in Technology
See All in Technology
.NET AspireでAzure Functionsやクラウドリソースを統合する
tsubakimoto_s
0
180
2025年の挑戦 コーポレートエンジニアの技術広報/techpr5
nishiuma
0
130
新しいスケーリング則と学習理論
taiji_suzuki
10
3.8k
0→1事業こそPMは営業すべし / pmconf #落選お披露目 / PM should do sales in zero to one
roki_n_
PRO
1
750
AWS Community Builderのススメ - みんなもCommunity Builderに応募しよう! -
smt7174
0
150
【NGK2025S】動物園(PINTO_model_zoo)に遊びに行こう
kazuhitotakahashi
0
170
OPENLOGI Company Profile for engineer
hr01
1
18k
今年一年で頑張ること / What I will do my best this year
pauli
1
210
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
1
16k
My small contributions - Fujiwara Tech Conference 2025
ijin
0
1.3k
The future we create with our own MVV
matsukurou
0
1.9k
Evolving Architecture
rainerhahnekamp
3
250
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
173
50k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Building Applications with DynamoDB
mza
93
6.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
Rails Girls Zürich Keynote
gr2m
94
13k
Speed Design
sergeychernyshev
25
730
Faster Mobile Websites
deanohume
305
30k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
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