ng4 webpack and yarn in JHipster
Download as PPTX, PDF3 likes1,056 views
This document discusses using Angular 4, Webpack, and Yarn in JHipster applications. It covers JHipster architecture options, migrating from AngularJS to Angular, using TypeScript, Angular routing, Webpack bundling, testing with Karma, and some tips for development. The document demonstrates setting up a sample application using JHipster and related tools.
ng4 webpack and yarn in JHipster
- 1. Angular 4 / Webpack/ Yarn in JHipster Sendil Kumar N
- 2. Sendil Kumar N Developer | JHipster ngx lead @sendilkumarn https://sendilkumarn.js.org
- 3. About you Anyone using Typescript ? Anyone using Angular ? Have you used JHipster before ?
- 11. Microservices
- 12. Devops ( CI-CD )
- 14. Code Time Lets create an application
- 15. Tools - JDL Studio
- 16. Code Time Lets spin up some entities...
- 17. NG1 Builders View Testers Client Side NGx
- 18. Server Side
- 19. Developed for developers by developers, to enrich developer experience...
- 20. Migrating from AngularJs to Angular 1.x 4.x
- 21. Angular
- 22. TypeScript Javascript that scales Typed superset of JS Compiles to pure JS Use latest syntax worry free
- 23. TypeScript
- 24. Controller to Component 1.x 4.x
- 26. Angular Router Based on Browser model Easier to do lazy loading More workarounds were needed.
- 27. Webpack
- 28. Why Webpack
- 29. Webpack - an overview Entry Output Plugins Loaders
- 30. Webpack Bundling Compiles & Bundles app into static assets Lot of plugins and options
- 31. Code Time Switch to demo mode...
- 32. Yar n
- 34. Bootstrap
- 35. Sass
- 36. Browsersync
- 38. Karma
- 39. Testing Karma based testing In TypeScript Protractor testing
- 40. Few tricks Distance yourself from DOM Use AOT for super-minified JS Use lazy loading Browsersync for better development experience Careful about library migration
- 41. Code Time Switch to demo mode...
- 42. Whats Next ?
- 43. Questions?
- 44. Thank You
Editor's Notes
- #20: What we require in modern web app You can solve by adding front end and backend separately but amt of work? Increase dev ex app will have more user exp
- #23: Angular library itself written on typescript. That enables seamless integration when you write in typescript. One thing to note here is you do have an option, to use things like JS / Dart. But it has its own limits. In case of JS, you have to make sure that you write in ES5/6, which has a lot of boilerplate code. Code is inturn converted into JS (ES3-5) but it is the job of the transpiler.
- #24: Angular library itself written on typescript. That enables seamless integration when you write in typescript. One thing to note here is you do have an option, to use things like JS / Dart. But it has its own limits. In case of JS, you have to make sure that you write in ES5/6, which has a lot of boilerplate code. Code is inturn converted into JS (ES3-5) but it is the job of the transpiler.
- #26: Much cleaner, readable aligned code.
- #27: Few Hacks for example pop up routing. Populating page title.