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 et plus : le futur du développement d'applications en entreprise

542 views

Published on

Présentation réalisée pour notre Matinée Pour Comprendre sur Angular : Angular v2 et plus : le futur du développement d'applications en entreprise.

Published in: Technology
  • Be the first to comment

Angular v2 et plus : le futur du développement d'applications en entreprise

  1. 1. Angular Morning to understand 1
  2. 2. Hello! I am Maxime ROBERT Web developper Javascript & Angular lover Working at Linagora on an Angular project since 8+ months You can find me at maxime1992 on 2
  3. 3. It’s just Angular 1 . x . y : AngularJs 2+ . x . y : Angular 3 https://angular.io/presskit.html
  4. 4. 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 4
  5. 5. What’s new in Angular1 5
  6. 6. 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 6
  7. 7. 2.x.y 7
  8. 8. 4.0.0Wait … What ? 8
  9. 9. 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 9
  10. 10. 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 10
  11. 11. Predictable, transparent & incremental evolutions ● Patch version every week ● Minor version every month ● Major version every 6 months 11
  12. 12. Typescript ◇ Typed Javascript 12 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
  13. 13. Web components 13 ◇ 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
  14. 14. Focus on performance 14 HTMLJavascript Component Compile HTML x30, x50, x100, + ? Render Javascript Component Compile HTML Render JIT AOT Ahead Of Time compilation
  15. 15. 15 JIT 625 kB AOT 300 kB Core (118 kB) Core (112 kB)Compiler (318 kB) Tree Shaking
  16. 16. Focus on performance 16 ◇ 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 !
  17. 17. 17 Chunk size : 56.8 KB Chunks size : 574.6 KB Do not preload lazy loaded routes Preload lazy loaded routes
  18. 18. More than a framework a platform2 18 Prelude
  19. 19. Javascript ecosystem, 2014 to 2016 19 Tired …I’m just tired
  20. 20. 20
  21. 21. I HAVE A DREAM THAT ONE DAY I’LL BE ABLE TO FOCUS ON CODE 21
  22. 22. 22 New project
  23. 23. Time spent on a project Find the appropriate tool(s) Setup Code Bug fix Deliver 23
  24. 24. Code Deliver Other project ... ... Time spent on a project 24
  25. 25. Code Tests Bug fix Opti° Deliver Time spent on a project 25
  26. 26. Find the appropriate tool(s) Setup Code Bug fix Deliver Time spent on a project 26
  27. 27. More than a framework a Platform2 27
  28. 28. 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 28
  29. 29. 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 29
  30. 30. Angular Material ◇ Material components ready to use ◇ API to interact with them (in and out) ◇ Ready for production but not every components available yet 30
  31. 31. 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 31
  32. 32. Angular Universal ◇ Better performance ◇ Render HTML at first paint ◇ Optimized SEO (Search Engine Optimization) 32
  33. 33. 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 33
  34. 34. State management and Data flow 3 34
  35. 35. 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 35 cc Rob Wormald’s slides
  36. 36. http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html 36 Stream 2 a b c d e f Street Secure building Stream 1 Stream 2 Stream 1
  37. 37. 37 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
  38. 38. { 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 38 Birthday (mutable) Birthday (immutable) #1 #1 #2 { firstname : 'Maxime' , lastname : 'Robert' , age: 24 } #1 Immutability debugging tools
  39. 39. Let’s eat Pizza Sync The absolute tool at Linagora Toulouse maxime1992/pizza-sync 39 demo, shall we ?
  40. 40. How it feels to use Time travelling to debug 40
  41. 41. Conclusion ◇ It’s just Angular ◇ Typescript is a perfect replacement for Javascript ◇ Angular has better performance than AngularJs especially on small devices ◇ Components for clarity and reusability ◇ Angular doesn’t come alone Platform offers a huge boost for devs Focus on business code ◇ Angular is stable and can be used in production ◇ Developers will the syntax, the architecture & the ecosystem ◇ Lot of things to learn, lot of things to get in return 41
  42. 42. Thanks! Any questions? 42

×