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.

Hot Module Replacement

448 views

Published on

Presentation with GitHub code example of ES6 modules, Webpack, Vue, Vuex, and Hot Module Replacement.

Published in: Software
  • Login to see the comments

Hot Module Replacement

  1. 1. HOT MODULE REPLACEMENT Anze Znidarsic, Flycom d.o.o.
  2. 2. WHAT DO WE DO? more: http://www.flycom.si/software-solutions/
  3. 3. WHO USES MODULES? ES6, COMMONJS,AMD
  4. 4. WHO USES WEBPACK? http://webpack.github.io/
  5. 5. HOW DID WE GET HERE? • Let’s useVueJS • We have complex app, let’s bring inVuex - state management • Why do we have Bower? Let’s kick it out and use only NPM • We should use modules and not global objects. Let’s refactor to modules • Let’s replace Gulp with Webpack and NPM scripts only • Finally we can have proper HMR :)
  6. 6. HOT MODULE REPLACEMENT • HMR exchanges, adds, or removes modules without a page reload
  7. 7. LET’S SEE IT IN PRACTICE https://github.com/anzeznidarsic/es6-modules-webpack-hmr- example
  8. 8. WHAT ABOUTVUE,VUEX…?
  9. 9. LET’S SEE IT IN PRACTICE https://github.com/anzeznidarsic/es6-webpack-vue-vuex-hmr- example
  10. 10. BUT WE USE LARAVEL, HTTPS, VAGRANT, ETC.
  11. 11. READING • https://webpack.github.io/docs/webpack-dev- server.html#hot-module-replacement • https://medium.com/@rajaraodv/webpack-hot- module-replacement-hmr-e756a726a07 • http://vuejs.org/guide/ • http://vuex.vuejs.org/en/index.html
  12. 12. work related: anze@flycom.si other: a@anze.com Thank you link to slides will be posted on: twitter.com/anzeznidarsic

×