Angular (v2 and up) - Morning to understand - Linagora
4 likes486 views
The document discusses recent developments in Angular, focusing on new features, performance enhancements, and the advantages of using TypeScript for JavaScript development. It also highlights Angular's ecosystem, including tools like CLI, Material, and Protractor, emphasizing the platform's capabilities for creating responsive, maintainable applications. Additionally, it covers state management using RxJS and Redux for efficient data flow and app architecture.
Angular (v2 and up) - Morning to understand - Linagora
- 2. About LINAGORA Services Software Assurance Software Editor
- 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. It’s just Angular 1 . x . y : AngularJs 2+ . x . y : Angular https://angular.io/presskit.html
- 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. What’s new in Angular1
- 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. 2.x.y
- 9. 4.0.0Wait … What ?
- 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. 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. Predictable, transparent & incremental evolutions ● Patch version every week ● Minor version every month ● Major version every 6 months
- 14. Typescript ◇ Typed Javascript ◇ Avoid runtime errors as much as possible
- 15. Typescript ◇ Typed Javascript ES6 ES5 Compatibility ◇ Avoid runtime errors as much as possible ◇ ES6 features compiled into ES5
- 16. Typescript ◇ Typed Javascript ES6 ES5 ◇ Avoid runtime errors as much as possible ◇ ES6 features compiled into ES5 ◇ Documentation
- 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. 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. Focus on performance HTMLJavascript Component Compile HTML x30, x50, x100, + ? Render Javascript Component Compile HTML Render JIT AOT Ahead Of Time compilation
- 20. JIT 625 kB AOT 300 kB Core (118 kB) Core (112 kB)Compiler (318 kB) Tree Shaking
- 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. Chunk size : 56.8 KB Chunks size : 574.6 KB Do not preload lazy loaded routes Preload lazy loaded routes
- 23. More than a framework a platform2 Prelude
- 24. Javascript ecosystem, 2014 to 2016 Tired …I’m just tired
- 26. I HAVE A DREAM THAT ONE DAY I’LL BE ABLE TO FOCUS ON CODE
- 27. New project
- 28. Time spent on a project Find the appropriate tool(s) Setup Code Bug fix Deliver
- 29. Code Deliver Other project ... ... Time spent on a project
- 30. Code Tests Bug fix Opti° Deliver Time spent on a project
- 31. Find the appropriate tool(s) Setup Code Bug fix Deliver Time spent on a project
- 32. More than a framework a Platform2
- 33. 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
- 34. 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
- 35. Angular Material ◇ Material components ready to use ◇ API to interact with them (in and out) ◇ Ready for production but not every components available yet
- 36. 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
- 37. Angular Universal ◇ Better performance ◇ Render HTML at first paint ◇ Optimized SEO (Search Engine Optimization)
- 38. 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
- 39. 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 ?
- 41. 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
- 42. 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
- 43. 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
- 44. { 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
- 45. Let’s eat Pizza Sync The absolute tool at Linagora Toulouse maxime1992/pizza-sync demo, shall we ?
- 46. How it feels to use Time travelling to debug
- 47. ◇ 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
- 50. 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
- 51. 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)
- 52. - 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
- 53. 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
- 54. 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
- 55. Customer project ◇ Interface for disruptive IoT product ◇ Multi-platform ◇ Modern fancy design ◇ Evolutive and maintainable ◇ Connected to Django backend : REST and websocket
- 56. 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
- 57. Challenge 2 : skills staffing ◇ Skills development ◇ Embracing reactive way of thinking ◇ Embracing the framework
- 58. Challenge 3 : easy deployment ◇ Environments : dev, demo, prod ◇ Easy mock-up implementation for development environment ◇ Electron for packaging Windows app frontend frontend backend
- 59. Questions ?