Download - Angular2 - A story from the trenches
![Page 1: Angular2 - A story from the trenches](https://reader031.vdocuments.us/reader031/viewer/2022022412/58f2a41e1a28ab370d8b4567/html5/thumbnails/1.jpg)
Angular (2)A Story from the Trenches
Johannes Rudolph, MScSoftware Platform & Development @ Meshcloud
![Page 2: Angular2 - A story from the trenches](https://reader031.vdocuments.us/reader031/viewer/2022022412/58f2a41e1a28ab370d8b4567/html5/thumbnails/2.jpg)
What is Meshcloud?
![Page 3: Angular2 - A story from the trenches](https://reader031.vdocuments.us/reader031/viewer/2022022412/58f2a41e1a28ab370d8b4567/html5/thumbnails/3.jpg)
Cloud Platform IntegrationOverview
MeshPanelUser Interface
Platform ModulesService Modules
Identity Broker
MeshFedProject Management
User ManagementCloud Platform Access
direct API access
![Page 4: Angular2 - A story from the trenches](https://reader031.vdocuments.us/reader031/viewer/2022022412/58f2a41e1a28ab370d8b4567/html5/thumbnails/4.jpg)
Meshpanel
● Target Evergreen Browsers Only (Edge, FF, Safari, Chrome)● SPA with Angular 2● Angular-CLI (webpack2) for builds● SCSS● Bootstrap 4 (alpha!)● yarn as package manager
Tech Stack
![Page 5: Angular2 - A story from the trenches](https://reader031.vdocuments.us/reader031/viewer/2022022412/58f2a41e1a28ab370d8b4567/html5/thumbnails/5.jpg)
Meshpanel
● Concourse CI
● CloudFoundry using Staticfile Buildpack
Deployment
![Page 6: Angular2 - A story from the trenches](https://reader031.vdocuments.us/reader031/viewer/2022022412/58f2a41e1a28ab370d8b4567/html5/thumbnails/6.jpg)
Angular (2)
● Announced at ng-Europe 09/2014○ Complete rewrite○ Embraces ES6 / TypeScript○ Ahead-of-time Compiler for Component Templates
■ No more $scope, controllers■ -> No generic change detector checking the whole $scope■ -> Generates Monomorphic Change Detector Code
○ One-way data flow○ Modular Framework: tree-shaking
● Beta in 12/2015● 1.0 (ha! 2.0 of course) in 09/2016
A short recap of its turbulent history
![Page 7: Angular2 - A story from the trenches](https://reader031.vdocuments.us/reader031/viewer/2022022412/58f2a41e1a28ab370d8b4567/html5/thumbnails/7.jpg)
Ohhh the Betas!
● Development started on RC.1○ Multiple breaking changes○ Complete rewrite for RC.6
● Angular CLI○ Switched build system
(broccoli->webpack) midway○ Broke multiple times○ Performance was an issue (not
anymore)● Bootstrap 4
○ Relatively painless, minor bugs remain
The price of living on the leading edge
Cliff Lookout by David Niblack. CC License
![Page 8: Angular2 - A story from the trenches](https://reader031.vdocuments.us/reader031/viewer/2022022412/58f2a41e1a28ab370d8b4567/html5/thumbnails/8.jpg)
Angular
● Drastically simplified core concepts○ Component (js+css+html) and Component Tree○ Directive (attaches to DOM)○ Service (injectable via DI)○ Module (Lazy Loading + Tree Shaking)
● Semantic Versioning works○ Upgrades v2.x.y painless so far
● Deep integration with RXJS● Module Structure and Lazy Loading
The good Parts I
![Page 9: Angular2 - A story from the trenches](https://reader031.vdocuments.us/reader031/viewer/2022022412/58f2a41e1a28ab370d8b4567/html5/thumbnails/9.jpg)
Demo TimeAngular CLI
![Page 10: Angular2 - A story from the trenches](https://reader031.vdocuments.us/reader031/viewer/2022022412/58f2a41e1a28ab370d8b4567/html5/thumbnails/10.jpg)
Excursion: Lazy Loading
OS Module
Module Structure
Core (Sessions, Routing, ...)
Auth-Mesh Auth-Direct
OS Module CF Module
Nova Cinder ...
Projects Registration
BillingApps Services
![Page 11: Angular2 - A story from the trenches](https://reader031.vdocuments.us/reader031/viewer/2022022412/58f2a41e1a28ab370d8b4567/html5/thumbnails/11.jpg)
Excursion: Lazy LoadingFull AOT and Tree Shaking for Production
Angular+libsFirst bundle
PreloadingFeature
Modules
![Page 12: Angular2 - A story from the trenches](https://reader031.vdocuments.us/reader031/viewer/2022022412/58f2a41e1a28ab370d8b4567/html5/thumbnails/12.jpg)
Excursion: Observables
● Has a learning curve○ hot/cold Observables○ complete/error/next
● Version confusion strikes again○ https://github.com/Reactive-Extensions/RxJS v4 “legacy”○ https://github.com/ReactiveX/rxjs => v5 and current
● Operations neatly composable○ Error propagation just works○ Avoids bugs○ Can quickly implement complex behaviors
RXJS ftw!
![Page 13: Angular2 - A story from the trenches](https://reader031.vdocuments.us/reader031/viewer/2022022412/58f2a41e1a28ab370d8b4567/html5/thumbnails/13.jpg)
AngularThe good Parts II
● TypeScript gives huge productivity boost○ IntelliSense / Code Completion○ Live type-checking in the Editor
● AOT Compilation + Tree Shaking○ Great Performance○ Type Checking of Module Dependencies
● Data-Bindings are Lintable○ Type Checking at compile time with tslint/codelyzer
● Angular CLI○ Generates scaffolding○ Abstracts away webpack2
![Page 14: Angular2 - A story from the trenches](https://reader031.vdocuments.us/reader031/viewer/2022022412/58f2a41e1a28ab370d8b4567/html5/thumbnails/14.jpg)
Angular + HATEOAS
● “Level 3” REST API● No Client-Side Link Building
○ Server offers all Links● Why?
○ “Discoverable API”○ No URL fiddling in clients○ Easy API Versioning○ Enforcing API Consistency
● HAL Models○ Hypertext Application
Language
Hypermedia as the Engine of Application State
![Page 15: Angular2 - A story from the trenches](https://reader031.vdocuments.us/reader031/viewer/2022022412/58f2a41e1a28ab370d8b4567/html5/thumbnails/15.jpg)
Angular + HATEOASUse TypeScript 2.1 Tricks to encode HAL Models
Demo
![Page 16: Angular2 - A story from the trenches](https://reader031.vdocuments.us/reader031/viewer/2022022412/58f2a41e1a28ab370d8b4567/html5/thumbnails/16.jpg)
Lessons Learned
● Module Boundaries not enforced○ Angular Modules only relevant for AOT, DI and lazy loading○ TS Files are still individual modules
● Dependency Injection○ Singletons only, no Lifetime Scopes
● Debugging is difficult○ Zone.js stacktraces hard to read and debug○ Observable-chains are hard to debug○ => Challenges are similar to async code
● Performance Debugging Tools
Angular Shortcomings
![Page 17: Angular2 - A story from the trenches](https://reader031.vdocuments.us/reader031/viewer/2022022412/58f2a41e1a28ab370d8b4567/html5/thumbnails/17.jpg)
Lessons LearnedThe pleasures of CORS
● REST APIs + CORS don’t mix well○ Nobody uses Cookies anyway○ APIs are meant to be called
from multiple origins● Server Setup is complex and
has lots of details● Lots of misinformation floating
around the Internet
![Page 18: Angular2 - A story from the trenches](https://reader031.vdocuments.us/reader031/viewer/2022022412/58f2a41e1a28ab370d8b4567/html5/thumbnails/18.jpg)
Links
● REST Maturity Model: https://martinfowler.com/articles/richardsonMaturityModel.html● File-ext-switcher VSCode extension:
https://github.com/JohannesRudolph/vscode-file-ext-switcher● Angular CLI https://github.com/angular/angular-cli● HAL Models Gist:
https://gist.github.com/JohannesRudolph/55160d2503b2369444a529429ff8a746● Monomorpic JS: http://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
Mentioned in this Talk
![Page 19: Angular2 - A story from the trenches](https://reader031.vdocuments.us/reader031/viewer/2022022412/58f2a41e1a28ab370d8b4567/html5/thumbnails/19.jpg)
Thank you!
We are hiring, ask me ;-)Johannes Rudolph
@meshstack
@meshstack