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 as an Integrated Development Platform
Search
Minko Gechev
November 10, 2019
Programming
0
320
Angular as an Integrated Development Platform
Minko Gechev
November 10, 2019
Tweet
Share
More Decks by Minko Gechev
See All by Minko Gechev
Change the World With Open Source Software
mgechev
0
150
Fast Angular Apps from End to End
mgechev
1
160
The State of Angular
mgechev
1
180
The State of Angular
mgechev
1
310
Software Engineering as a Superpower
mgechev
1
160
Introduction to Angular
mgechev
1
170
Internals of the Angular CLI
mgechev
2
1.2k
The State of Angular
mgechev
1
170
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.9k
Other Decks in Programming
See All in Programming
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
470
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
280
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
220
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
楽しく向き合う例外対応
okutsu
0
710
React 19アップデートのために必要なこと
uhyo
8
1.5k
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
55
19k
Introduction to kotlinx.rpc
arawn
0
770
Rubyと自由とAIと
yotii23
6
1.8k
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
技術を改善し続ける
gumioji
0
150
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
440
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
How to Ace a Technical Interview
jacobian
276
23k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
It's Worth the Effort
3n
184
28k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Speed Design
sergeychernyshev
27
810
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Transcript
ngular github.com/mgechev twitter.com/mgechev blog.mgechev.com Integrated Development Platform
agenda
What is Angular
None
None
Mobile • Web apps • Ionic • NativeScript
None
Desktop • Web apps • Electron
core (zones, di, abstractions, etc.)
core (zones, di, abstractions, etc.) animations
compiler core (zones, di, abstractions, etc.) animations
http compiler core (zones, di, abstractions, etc.) animations
forms http compiler core (zones, di, abstractions, etc.) animations
forms http compiler core (zones, di, abstractions, etc.) router animations
forms http compiler core (zones, di, abstractions, etc.) router i18n
animations
forms http compiler core (zones, di, abstractions, etc.) router ngUpgrade
i18n animations
PWA forms http compiler core (zones, di, abstractions, etc.) router
ngUpgrade i18n animations
Universal PWA forms http compiler core (zones, di, abstractions, etc.)
router ngUpgrade i18n animations
components Universal PWA forms http compiler core (zones, di, abstractions,
etc.) router ngUpgrade i18n animations
CLI components Universal PWA forms http compiler core (zones, di,
abstractions, etc.) router ngUpgrade i18n animations
language services CLI components Universal PWA forms http compiler core
(zones, di, abstractions, etc.) router ngUpgrade i18n animations
angularfire2 language services CLI components Universal PWA forms http compiler
core (zones, di, abstractions, etc.) router i18n ngUpgrade animations
angularfire2 language services CLI components Universal PWA forms http compiler
core (zones, di, abstractions, etc.) router i18n ngUpgrade animations
angular-cli
$ npm i -g @angular/cli $ ng new hello-world
$ cd hello-world $ ng serve
None
Angular Core
Core • Components • Ultrafast Change Detection • More abstractions
as you need them
@Component({ selector: 'hello-world', template: '<h1>Hello, {{user.name}}!</h1>' }) class HelloWorldComponent {
getData() { fetch('https://example.com/data.json') .then(response => response.json()) .then(data => this.user = data); } } Hello world in Angular
Compiler
“Compiles your templates to JavaScript instructions”
template.html <section> Howdy! Here’s a list: <ul> <li>First</li> <li>Second</li> </ul>
</section>
compiled.js elementStart(0, "section"); text(1, " Howdy! Here's a list: ");
elementStart(2, "ul"); elementStart(3, "li"); text(4, "First"); elementEnd(); elementStart(5, "li"); text(6, "Second"); elementEnd(); elementEnd(); elementEnd();
compiled.js e(0, "section"); t(1, " Howdy! Here's a list: ");
e(2, "ul"); e(3, "li"); t(4, "First"); n(); e(5, "li"); t(6, "Second"); n(); n(); n();
compiled.js e(0,"section"),t(1,"Howdy! Here's a list: "),e(2,"ul"),e(3,"li"),t(4,"First"),n(),e(5,"l i"),t(6,"Second"),n(),n(),n();
Development experience
Typical JavaScript experience
Angular is… • Built with TypeScript • Compile-time type checking
• Great IDE/text editors support • Analyzable templates
Type-checking and IntelliSense in templates
None
None
codelyzer
“codelyzer is a project which aims to enforce common style
and verify correctness of your program”
None
None
Client Server
Client Server
Client Server GET / GET * loop
Client Server GET / GET * loop Running JavaScript
Client Server GET / GET * loop GET * loop
Client Server GET / GET * loop GET * loop
server-side rendering
Client Server
Client Server
Client Server GET /
Client Server GET / Running JavaScript
Client Server GET / GET * loop
Client Server GET / GET * loop Running JavaScript
Client Server GET / GET * loop
❤ Angular Community ❤
ngAtlanta " ngIndia # Angular NL $ ng-conf " ngVikings
% Angular Day & Angular in Depth ' ngDenver " NG-MY ( ng-japan ) NG-DE * ng-SriLanka + Angular Connect , ngSpain - NGRome & NG Honduras . ngTaiwan / ngTalks ' NG-BE 0 ngBolivia 1 AngularMix " ngPoland 2 AngularUP 3 ngChina 4
Thank you! github.com/mgechev twitter.com/mgechev blog.mgechev.com