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
83
Fast Angular Apps from End to End
mgechev
0
110
The State of Angular
mgechev
1
160
The State of Angular
mgechev
1
210
Software Engineering as a Superpower
mgechev
1
110
Introduction to Angular
mgechev
1
120
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
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
530
「コンパイル時のユニットテスト」導入するとユニットテストを 書かなくてよくなるのか?
tomohisa
9
2.2k
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
130
Learning PHP and Static Analysis with PHP Parser
inouehi
1
250
受託開発でGitLab CI を活用していく
xiombatsg
1
130
LPIXEL×CADDi_kaerururu
kaerururu
3
300
Crafting a Own PHP - ウキウキ手作りミニマリストPHP
uzulla
4
1.1k
WebComponentsで フレームワークを1ページに共存させる
webuilder240
0
150
Data Contracts In Practice With Debezium and Apache Flink (Kafka Summit London)
gunnarmorling
2
280
Some Quick Ideas To Improve Your Tests ( #jassttokyo )
teyamagu
PRO
2
2.3k
孤独のCTOグルメという やや奇抜な企画をやった目的と効果
shoheimitani
3
1k
Featured
See All Featured
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
Documentation Writing (for coders)
carmenintech
59
3.8k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
Optimizing for Happiness
mojombo
369
69k
Web Components: a chance to create the future
zenorocha
304
41k
Unsuck your backbone
ammeep
661
56k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
How STYLIGHT went responsive
nonsquared
92
4.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
The Mythical Team-Month
searls
214
42k
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