SlideShare a Scribd company logo

Angular + JHipster - JHipster Conf

•
•
William Marques
William Marques

Want to know more about the JHipster's webpack configuration and how to improve your application performance using Lazy loading? Let's discover this together!

1 of 28
Download to read offline
What’s new in Angular with JHipster ? William Marques - JHipster Conf
About me William MARQUES 24 years old JHipster Core Team Member Java lover <3 Ippon Technologies @wylmarq Script lover <3
JHipster objectives Keep the configuration simple Provide the best practices Make your production build as small as possible Make your dev workflow fast
What did we do ? 1. Upgrade to Webpack 4 2. Setup Lazy Loading 3. Add some optimizations 4. Migrate to Jest
Webpack 4 upgrade
Upgrade to Webpack 4 Webpack 4 announced main features: ● Better performances => Faster build times ● Easier configuration ● Many others !
Build times JHipster 4 (webpack 3.10.0) JHipster 5 (webpack 4.8.0) yarn start (dev) 12s 7s Incremental (dev) 2s 0.7s yarn build (prod) 29s 49s target/www size 3,6M 2,9M
Let’s explore Webpack !
Lazy Loading
Why Lazy Loading ? Purpose: Render only what’s useful for the user ie: A normal user shouldn’t have to wait for the admin module ! Results: ● Smaller files to load on application startup ● Faster loading
Why smaller files ? https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/
How do I do that in Angular ?
Lazy Loading in Angular Easy as 1, 2, 3 ! 1. Make sure you don’t import same providers in many places 2. Use loadChildren in your route config 3. Remove your Module imports from AppModule
The importance of a Core Module Angular will create one provider instance per Lazy Loaded Modules if your import your providers into them. This can be annoying if you think your providers as singletons ! Solution: ● Import your singletons providers in a Core Module ● Import this Core Module only in your App Module A Core Module is already present in JHipster 5 !
Example Architecture Core Module App Module (root) Feature Module B Shared Module Feature Module A Core Module Providers are accessibl from Lazy Loaded Modules via the root injection tree
JHipster Routing Module
Other optimizations
MomentJS Optimizations Moment is an awesome library… But it’s HUGE By default, it includes all the locales Source: https://bundlephobia.com/result?p=moment@2.22.2
MomentJS Optimizations We used the moment-locales-plugin for Webpack => Keep only the used locales in your prod build ! Julien is happy now !
Font Awesome v5 Has been rewritten from scratch Now uses SVG with JS instead of plain CSS ≈ 420kb minified ! ≈ 3s to load on 3G
Font Awesome v5 in JHipster Imports only the icons you need in the generated app in vendor.ts Then Webpack does the magic tree shaking
Jest Migration
Jest vs Karma/Jasmine Uses a Virtual DOM Uses a real browser Run tests in parallel Run tests one by one All In One (Runner, framework, coverage) One tool for each thing Uses preprocessor Uses webpack
Jest Migration in JHipster Remove webpack.test.js and karma.conf.js Add Jest Config file from a fresh generated app Use jest-codemods to migrate from Jasmine to Jest See: https://facebook.github.io/jest/docs/en/migration-guide.html JHipster PR: https://github.com/jhipster/generator-jhipster/pull/7663/files
Time Comparison
Time Comparison First run 15s 37s Second run 10s 37s
What about “real browser” tests ? Jest uses a virtual DOM (jsdom) instead of a real browser You can still have end-to-end tests with Protractor with various real browsers The point of Unit Tests is to test your code, not the browser TypeScript already compiles your code into ES5 so it will be compatible with most browsers https://caniuse.com/#feat=es5
Thank you !

More Related Content

Angular + JHipster - JHipster Conf

  • 1. What’s new in Angular with JHipster ? William Marques - JHipster Conf
  • 2. About me William MARQUES 24 years old JHipster Core Team Member Java lover <3 Ippon Technologies @wylmarq Script lover <3
  • 3. JHipster objectives Keep the configuration simple Provide the best practices Make your production build as small as possible Make your dev workflow fast
  • 4. What did we do ? 1. Upgrade to Webpack 4 2. Setup Lazy Loading 3. Add some optimizations 4. Migrate to Jest
  • 6. Upgrade to Webpack 4 Webpack 4 announced main features: ● Better performances => Faster build times ● Easier configuration ● Many others !
  • 7. Build times JHipster 4 (webpack 3.10.0) JHipster 5 (webpack 4.8.0) yarn start (dev) 12s 7s Incremental (dev) 2s 0.7s yarn build (prod) 29s 49s target/www size 3,6M 2,9M
  • 10. Why Lazy Loading ? Purpose: Render only what’s useful for the user ie: A normal user shouldn’t have to wait for the admin module ! Results: ● Smaller files to load on application startup ● Faster loading
  • 11. Why smaller files ? https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/
  • 12. How do I do that in Angular ?
  • 13. Lazy Loading in Angular Easy as 1, 2, 3 ! 1. Make sure you don’t import same providers in many places 2. Use loadChildren in your route config 3. Remove your Module imports from AppModule
  • 14. The importance of a Core Module Angular will create one provider instance per Lazy Loaded Modules if your import your providers into them. This can be annoying if you think your providers as singletons ! Solution: ● Import your singletons providers in a Core Module ● Import this Core Module only in your App Module A Core Module is already present in JHipster 5 !
  • 15. Example Architecture Core Module App Module (root) Feature Module B Shared Module Feature Module A Core Module Providers are accessibl from Lazy Loaded Modules via the root injection tree
  • 18. MomentJS Optimizations Moment is an awesome library… But it’s HUGE By default, it includes all the locales Source: https://bundlephobia.com/result?p=moment@2.22.2
  • 19. MomentJS Optimizations We used the moment-locales-plugin for Webpack => Keep only the used locales in your prod build ! Julien is happy now !
  • 20. Font Awesome v5 Has been rewritten from scratch Now uses SVG with JS instead of plain CSS ≈ 420kb minified ! ≈ 3s to load on 3G
  • 21. Font Awesome v5 in JHipster Imports only the icons you need in the generated app in vendor.ts Then Webpack does the magic tree shaking
  • 23. Jest vs Karma/Jasmine Uses a Virtual DOM Uses a real browser Run tests in parallel Run tests one by one All In One (Runner, framework, coverage) One tool for each thing Uses preprocessor Uses webpack
  • 24. Jest Migration in JHipster Remove webpack.test.js and karma.conf.js Add Jest Config file from a fresh generated app Use jest-codemods to migrate from Jasmine to Jest See: https://facebook.github.io/jest/docs/en/migration-guide.html JHipster PR: https://github.com/jhipster/generator-jhipster/pull/7663/files
  • 26. Time Comparison First run 15s 37s Second run 10s 37s
  • 27. What about “real browser” tests ? Jest uses a virtual DOM (jsdom) instead of a real browser You can still have end-to-end tests with Protractor with various real browsers The point of Unit Tests is to test your code, not the browser TypeScript already compiles your code into ES5 so it will be compatible with most browsers https://caniuse.com/#feat=es5