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
200
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
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
180
datadog-distribution-of-opentelemetry-collector-intro
tetsuya28
0
240
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
4
1.7k
人を動かすことについて考える
ichimichi
2
320
[kickflow]20250319_少人数チームでのAutify活用
otouhujej
0
210
DeNA での思い出 / Memories at DeNA
orgachem
PRO
2
900
株式会社ARAV 採用案内
maqui
0
310
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.6k
OpenAPIから画面生成に挑戦した話
koinunopochi
0
150
どこで動かすか、誰が動かすか 〜 kintoneのインフラ基盤刷新と運用体制のシフト 〜
ueokande
0
180
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
15
5k
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
525
40k
The Language of Interfaces
destraynor
160
25k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
560
How to Ace a Technical Interview
jacobian
279
23k
Navigating Team Friction
lara
189
15k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Statistics for Hackers
jakevdp
799
220k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
Practical Orchestrator
shlominoach
190
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
A better future with KSS
kneath
239
17k
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