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
180
Fast Angular Apps from End to End
mgechev
1
180
The State of Angular
mgechev
1
190
The State of Angular
mgechev
1
360
Software Engineering as a Superpower
mgechev
1
190
Introduction to Angular
mgechev
1
200
Internals of the Angular CLI
mgechev
2
1.3k
The State of Angular
mgechev
1
200
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.9k
Other Decks in Technology
See All in Technology
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
270
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
1
600
推し書籍📚 / Books and a QA Engineer
ak1210
0
120
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
210
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
290
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
250
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
270
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
210
TLSから見るSREの未来
atpons
2
190
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
22k
データ基盤からデータベースまで?広がるユースケースのDatabricksについて教えるよ!
akuwano
3
150
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
980
Featured
See All Featured
How to Ace a Technical Interview
jacobian
278
23k
The Invisible Side of Design
smashingmag
301
51k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Agile that works and the tools we love
rasmusluckow
329
21k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Site-Speed That Sticks
csswizardry
10
690
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
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