Talk at the #7 DarmstadtJS Meetup https://www.meetup.com/DarmstadtJS/events/236840187

1. Angular (2)
A Story from the Trenches
Johannes Rudolph, MSc
Software Platform & Development @ Meshcloud
jrudolph@meshcloud.io
www.meshcloud.io

2. What is Meshcloud?

3. Cloud Platform Integration
Overview
MeshPanel
User Interface
Platform Modules
Service Modules
Identity Broker
MeshFed
Project Management
User Management
Cloud Platform Access
direct API access

4. 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

5. Meshpanel
● Concourse CI
● CloudFoundry
using Staticfile
Buildpack
Deployment

6. 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

7. 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

8. 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

9. Demo Time
Angular CLI

10. Excursion: Lazy Loading
OS Module
Module Structure
Core (Sessions, Routing, ...)
Auth-Mesh Auth-Direct
OS Module CF Module
Nova Cinder ...
Projects Registration
BillingApps Services

11. Excursion: Lazy Loading
Full AOT and Tree Shaking for Production
Angular+libs
First bundle
Preloading
Feature
Modules

12. 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!

13. Angular
The 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

14. 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

15. Angular + HATEOAS
Use TypeScript 2.1 Tricks to encode HAL Models
Demo

16. 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

17. Lessons Learned
The 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

18. 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

19. Thank you!
We are hiring, ask me ;-)
Johannes Rudolph
jrudolph@meshcloud.io
www.meshcloud.io
@meshstack
@meshstack