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
280
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
88
Fast Angular Apps from End to End
mgechev
0
120
The State of Angular
mgechev
1
160
The State of Angular
mgechev
1
230
Software Engineering as a Superpower
mgechev
1
120
Introduction to Angular
mgechev
1
130
Internals of the Angular CLI
mgechev
2
1.1k
The State of Angular
mgechev
1
130
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.7k
Other Decks in Programming
See All in Programming
How to implement a RubyVM with PHP?
memory1994
PRO
2
1.2k
Hi, have you met Kotlin Multiplatform? | Kotlin User Group Berlin
prof18
0
100
The World is a Network (and We Are Just Nodes)
whatyouhide
0
110
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
75k
Runtime Objects in Rust
mitsuhiko
0
220
教えて!スクラムコーチ品質とスピードのバランスはどうすりゃいいの?
pinboro
0
170
slow types ってなんだろう?
karad
0
210
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
460
The Final Frontier of Web Development: React Server Components vs Jakarta EE
ivargrimstad
0
280
仕様と実装で学ぶOpenTelemetry
drumato
2
1.3k
JS RPCを理解する
yusukebe
5
320
mb_trim関数を作りました
youkidearitai
PRO
1
260
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
176
21k
Rails Girls Zürich Keynote
gr2m
91
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Designing Experiences People Love
moore
136
23k
KATA
mclloyd
16
12k
Building Applications with DynamoDB
mza
88
5.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
84
45k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Web Components: a chance to create the future
zenorocha
306
41k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
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