Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Angular as an Integrated Development Platform
Minko Gechev
November 10, 2019
Programming
0
230
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
29
Fast Angular Apps from End to End
mgechev
0
59
The State of Angular
mgechev
1
92
The State of Angular
mgechev
1
170
Software Engineering as a Superpower
mgechev
1
43
Introduction to Angular
mgechev
1
69
Internals of the Angular CLI
mgechev
2
810
The State of Angular
mgechev
1
88
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.4k
Other Decks in Programming
See All in Programming
TDX22: User-Mode DB Ops
ca_peterson
3
1.1k
UI State Modeling 어떤게 좋을까?
laco2951
1
200
人類には難しいZynqで組み込みRust
ikemori
0
480
CIでAndroidUIテストの様子を録画してみた
mkeeda
0
140
Named Document って何?
harunakano
0
260
Kotlin KSP - Intro
taehwandev
1
460
Becoming an Android Librarian
skydoves
3
420
脱オブジェクト指向講座(5分LT資料)
kishida
8
11k
C言語でメモリ管理を考えた話
hkawai
0
180
ゴーファーくんと学ぶGo言語の世界/golang-world-with-gopher
iwasiman
1
140
もしも、 上司に鬼退治を命じられたら~プロジェクト計画編~
higuuu
0
270
Reactでアプリケーションを構築する多様化
sakito
4
3k
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
24
6.2k
How STYLIGHT went responsive
nonsquared
85
3.9k
Embracing the Ebb and Flow
colly
73
3.3k
BBQ
matthewcrist
74
7.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
11k
Why You Should Never Use an ORM
jnunemaker
PRO
47
5.5k
Web development in the modern age
philhawksworth
197
9.3k
Robots, Beer and Maslow
schacon
152
7.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.3k
Debugging Ruby Performance
tmm1
65
10k
GitHub's CSS Performance
jonrohan
1020
410k
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