Embed Size (px)
Citation preview
Angular (2)A Story from the Trenches
Johannes Rudolph, MScSoftware Platform & Development @ Meshcloud
What is Meshcloud?
Cloud Platform IntegrationOverview
MeshPanelUser Interface
Platform ModulesService Modules
Identity Broker
MeshFedProject Management
User ManagementCloud Platform Access
direct API access
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
Meshpanel
● Concourse CI
● CloudFoundry using Staticfile Buildpack
Deployment
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
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
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
Demo TimeAngular CLI
Excursion: Lazy Loading
OS Module
Module Structure
Core (Sessions, Routing, ...)
Auth-Mesh Auth-Direct
OS Module CF Module
Nova Cinder ...
Projects Registration
BillingApps Services
Excursion: Lazy LoadingFull AOT and Tree Shaking for Production
Angular+libsFirst bundle
PreloadingFeature
Modules
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!
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
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
Angular + HATEOASUse TypeScript 2.1 Tricks to encode HAL Models
Demo
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
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
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
Thank you!
We are hiring, ask me ;-)Johannes Rudolph
@meshstack
@meshstack
