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.

Angular (v2 and up) - Morning to understand - Linagora

330 views

Published on

Slides of the talk about Angular, at the "Matinée Pour Comprendre" organized by Linagora the 22/03/17.

Discover what's new in Angular, why is it more than just a framework (platform) and how to manage your data with RxJs and Redux.

Published in: Software
  • Be the first to comment

Angular (v2 and up) - Morning to understand - Linagora

  1. 1. Angular Morning to understand
  2. 2. About LINAGORA Services Software Assurance Software Editor
  3. 3. Hello! I am Maxime ROBERT Web developper Javascript & Angular lover Working at Linagora on an Angular project since 6+ months You can find me at maxime1992 on
  4. 4. It’s just Angular 1 . x . y : AngularJs 2+ . x . y : Angular https://angular.io/presskit.html
  5. 5. Table of content 1. What’s new in Angular ? ■ Semantic versioning ■ Typescript ■ Web components ■ Focus on performance 2. More than a framework, a platform ■ Cli ■ Material ■ Mobile kit ■ Universal ■ Protractor 3. State management and data flow ■ RxJs ■ Redux
  6. 6. What’s new in Angular1
  7. 7. Semantic Versioning Breaking Major : 4.0.0 ◇ New features ◇ Potential breaking changes Feature Minor : 4.1.0 ◇ New features ◇ No breaking changes Fix Patch : 4.0.1 ◇ No features ◇ No breaking changes
  8. 8. 2.x.y
  9. 9. 4.0.0Wait … What ?
  10. 10. Why v3 has been skipped ? @angular/core 2.x.y @angular/compiler 2.x.y @angular/http 2.x.y @angular/router 3.x.y Misalignment of the router package version
  11. 11. Why v3 has been skipped ? @angular/core 4.x.y @angular/compiler 4.x.y @angular/http 4.x.y @angular/router 4.x.y
  12. 12. Predictable, transparent & incremental evolutions ● Patch version every week ● Minor version every month ● Major version every 6 months
  13. 13. Typescript ◇ Typed Javascript
  14. 14. Typescript ◇ Typed Javascript ◇ Avoid runtime errors as much as possible
  15. 15. Typescript ◇ Typed Javascript ES6 ES5 Compatibility ◇ Avoid runtime errors as much as possible ◇ ES6 features compiled into ES5
  16. 16. Typescript ◇ Typed Javascript ES6 ES5 ◇ Avoid runtime errors as much as possible ◇ ES6 features compiled into ES5 ◇ Documentation
  17. 17. Typescript ◇ Typed Javascript ES6 ES5 Compatibility ◇ Syntax similar to Java Classes, inheritance, decorators, interfaces, etc ◇ Avoid runtime errors as much as possible ◇ ES6 features compiled into ES5 ◇ Documentation
  18. 18. Web components ◇ A component has it’s own : App Comp 1 Comp 2 Comp 3 Comp 4 - Style (.css | .less | .sass) ◇ Angular app → component tree - Template (.html) - Logic (.ts) Comp 4 ◇ Reuse components
  19. 19. Focus on performance HTMLJavascript Component Compile HTML x30, x50, x100, + ? Render Javascript Component Compile HTML Render JIT AOT Ahead Of Time compilation
  20. 20. JIT 625 kB AOT 300 kB Core (118 kB) Core (112 kB)Compiler (318 kB) Tree Shaking
  21. 21. Focus on performance ◇ Split your code by modules (good practice) ◇ Load only the modules you need when you need them ◇ Nice on desktop Must have for tablets and mobiles Lazy loading made easy !
  22. 22. Chunk size : 56.8 KB Chunks size : 574.6 KB Do not preload lazy loaded routes Preload lazy loaded routes
  23. 23. More than a framework a platform2 Prelude
  24. 24. Javascript ecosystem, 2014 to 2016 Tired …I’m just tired
  25. 25. I HAVE A DREAM THAT ONE DAY I’LL BE ABLE TO FOCUS ON CODE
  26. 26. New project
  27. 27. Time spent on a project Find the appropriate tool(s) Setup Code Bug fix Deliver
  28. 28. Code Deliver Other project ... ... Time spent on a project
  29. 29. Code Tests Bug fix Opti° Deliver Time spent on a project
  30. 30. Find the appropriate tool(s) Setup Code Bug fix Deliver Time spent on a project
  31. 31. More than a framework a Platform2
  32. 32. Angular ecosystem ◇ Cli ◇ Material ◇ Mobile kit ◇ Universal ◇ Protractor https://cli.angular.io https://material.angular.io https://mobile.angular.io https://universal.angular.io https://protractor.angular.io
  33. 33. Angular Cli ◇ Start a new project < 3mn ◇ Same footprint, easier to operate on ≠ projects ◇ Webpack : Import, export, build for production ◇ Generate components, services, modules, etc ◇ Livereload, Sass, Less
  34. 34. Angular Material ◇ Material components ready to use ◇ API to interact with them (in and out) ◇ Ready for production but not every components available yet
  35. 35. Angular Mobile ◇ Keep the discoverability of the web ◇ Automatic Progressive Web Apps ◇ App Shell, Service Worker, Application Manifest Ex : https://ng2-weather-pwa2.firebaseapp.com ◇ Not ready yet with the CLI but integration on the way
  36. 36. Angular Universal ◇ Better performance ◇ Render HTML at first paint ◇ Optimized SEO (Search Engine Optimization)
  37. 37. Angular Protractor ◇ Write actions to do in a browser like a user would ◇ Make sure your final product is working well at anytime ◇ Continuous integration : Check on every commit
  38. 38. Before we take a break ◇ It’s just Angular ◇ Typescript is a perfect replacement for Javascript ◇ Angular has better performance than AngularJs ◇ Components for clarity and reusability ◇ Angular doesn’t come alone Platform offers a huge boost for devs Focus on business code What you should keep in mind from part 1 & 2 What’s coming next ? ◇ How to handle our data ? ◇ How to create sustainable web apps ? ◇ How to de like ?
  39. 39. State management and Data flow 3
  40. 40. RxJs Reactive Programming Why you’ll love it ! ◇ Think of your data as an event or a stream : They evolve over time ◇ Functional programming ◇ Great documentation ◇ More than 60 operators, just look for what you need What could go wrong ? ◇ Big learning curve ◇ Potential memory leaks if devs don’t fully understand what they’re doing cc Rob Wormald’s slides
  41. 41. http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html Stream 2 a b c d e f Street Secure building Stream 1 Stream 2 Stream 1
  42. 42. When the input changes Debounce 400ms T = 400ms T = 400ms T < 400ms Continue only if input has changed Fetch Wikipedia with the text to search Display values over time cc Thoughtram article and the demo
  43. 43. { firstname : 'Maxime' , lastname : 'Robert' , age: 24 } Redux { firstname : 'Maxime' , lastname : 'Robert' , age: 25 } Why you’ll love it ! ◇ Centralized store ◇ Plays well with asynchronous ◇ API to introduce middlewares ◇ Nice documentation ◇ Pure functions, easy to test ◇ Huge community ◇ Powerful debugging tools { firstname : 'Maxime' , lastname : 'Robert' , age: 25 } Handle application state Birthday (mutable) Birthday (immutable) #1 #1 #2 { firstname : 'Maxime' , lastname : 'Robert' , age: 24 } #1 Immutability debugging tools
  44. 44. Let’s eat Pizza Sync The absolute tool at Linagora Toulouse maxime1992/pizza-sync demo, shall we ?
  45. 45. How it feels to use Time travelling to debug
  46. 46. ◇ Angular is stable and can be used in production ◇ Angular platform allows us to focus on business code and final product ◇ Better performances especially on small devices ◇ Developers will the syntax, the architecture, the ecosystem ◇ Lot of things to learn, lot of things to get in return Conclusion
  47. 47. Thanks! Any questions?
  48. 48. Internal project: PetalsCockpit Customer project
  49. 49. PetalsCockpit A WebApp that manages ● Configuration ● Operation ● Monitoring of Petals Enterprise Service Bus Petals ESB is a middleware solution for Service Oriented Integration - Multi-servers architecture - Configuration on the fly - XML files - Command line - SSH - API Jmx
  50. 50. Objectives: - A Rich Internet Application - - Responsive ( PC / Tablet / mobile ) Technical Architecture: - Full Stack JS - Web component - Lazy Loading - NoSql Starting with a POC (end-2015)
  51. 51. - Rich Client - Single Page Application - Material Design - Responsive - Quick prototyping - testing Results Pros Cons - Hard to define file structure - $scope easy to use but hard to debug - Business logic in controller hard to maintain - Complexity of some features ( DI, Factories / Services) - Router is limited - Need to adopt good style guide (JohnPapa) Server-Side: NodeJS were not easy to plug with back-end Java / JMX Back-end Java team rejection
  52. 52. Project re-start (sept-2016) PIVOTE { Lean Startup } Redux - Reactive programming - functional programming Syntax, programming patterns similar to Java - Typed Javascript - Compiled : less runtime error - Classes, inheritance, decorators, interfaces, etc - Web Component - Reuse Components - Performance - CLI, Material, Protoactor - dev, demo, prod - Application State - Centralize Store - Debug tools
  53. 53. Back-end focus Front-end team /index.html /main.js /assets/.. /api /users /workspaces /etc.. REST Quasar JMX Dropwizard Back-end team Similar syntax and programming patterns empower collaborations
  54. 54. Customer project ◇ Interface for disruptive IoT product ◇ Multi-platform ◇ Modern fancy design ◇ Evolutive and maintainable ◇ Connected to Django backend : REST and websocket
  55. 55. Challenge 1 : industrialisation A template to activate the framework ◇ Project automation : Angular CLI ◇ Tree for pages, components, assets, environments, styles, etc. ◇ Reactive mechanisms : reducers ◇ Mapping app structure with Angular features: side panels, menus, etc
  56. 56. Challenge 2 : skills staffing ◇ Skills development ◇ Embracing reactive way of thinking ◇ Embracing the framework
  57. 57. Challenge 3 : easy deployment ◇ Environments : dev, demo, prod ◇ Easy mock-up implementation for development environment ◇ Electron for packaging Windows app frontend frontend backend
  58. 58. Questions ?

×