Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular2 - A story from the trenches

229 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

Angular2 - A story from the trenches

  1. 1. Angular (2) A Story from the Trenches Johannes Rudolph, MSc Software Platform & Development @ Meshcloud jrudolph@meshcloud.io www.meshcloud.io
  2. 2. What is Meshcloud?
  3. 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. 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. 5. Meshpanel ● Concourse CI ● CloudFoundry using Staticfile Buildpack Deployment
  6. 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. 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. 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. 9. Demo Time Angular CLI
  10. 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. 11. Excursion: Lazy Loading Full AOT and Tree Shaking for Production Angular+libs First bundle Preloading Feature Modules
  12. 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. 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. 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. 15. Angular + HATEOAS Use TypeScript 2.1 Tricks to encode HAL Models Demo
  16. 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. 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. 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. 19. Thank you! We are hiring, ask me ;-) Johannes Rudolph jrudolph@meshcloud.io www.meshcloud.io @meshstack @meshstack

×