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
310
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
130
Fast Angular Apps from End to End
mgechev
1
150
The State of Angular
mgechev
1
170
The State of Angular
mgechev
1
290
Software Engineering as a Superpower
mgechev
1
150
Introduction to Angular
mgechev
1
150
Internals of the Angular CLI
mgechev
2
1.2k
The State of Angular
mgechev
1
160
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.8k
Other Decks in Programming
See All in Programming
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
940
Lookerは可視化だけじゃない。UIコンポーネントもあるんだ!
ymd65536
1
130
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
7
1.4k
快速入門可觀測性
blueswen
0
490
PHPカンファレンス 2024|共創を加速するための若手の技術挑戦
weddingpark
0
130
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
1k
カンファレンス動画鑑賞会のススメ / Osaka.swift #1
hironytic
0
160
ESLintプラグインを使用してCDKのセオリーを適用する
yamanashi_ren01
2
210
Swiftコンパイラ超入門+async関数の仕組み
shiz
0
170
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
290
Flatt Security XSS Challenge 解答・解説
flatt_security
0
700
Package Traits
ikesyo
1
200
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
89
5.8k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3.1k
Optimising Largest Contentful Paint
csswizardry
33
3k
A better future with KSS
kneath
238
17k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Site-Speed That Sticks
csswizardry
2
250
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Designing for humans not robots
tammielis
250
25k
Measuring & Analyzing Core Web Vitals
bluesmoon
5
200
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
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