The document discusses the concept of hot module replacement (HMR) in modern JavaScript development, particularly with Vue.js and Webpack. It emphasizes transitioning from global objects to modules, as well as refactoring build tools like Gulp to use Webpack and npm scripts for improved efficiency. Practice examples and further resources are provided for implementation, along with contact information for the author.

1. HOT MODULE REPLACEMENT
Anze Znidarsic, Flycom d.o.o.

2. WHAT DO WE DO?
more: http://www.flycom.si/software-solutions/

3. WHO USES MODULES?
ES6, COMMONJS,AMD

4. WHO USES WEBPACK?
http://webpack.github.io/

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. HOT MODULE REPLACEMENT
• HMR exchanges, adds, or removes modules
without a page reload

7. LET’S SEE IT IN PRACTICE
https://github.com/anzeznidarsic/es6-modules-webpack-hmr-
example

8. WHAT ABOUTVUE,VUEX…?

9. LET’S SEE IT IN PRACTICE
https://github.com/anzeznidarsic/es6-webpack-vue-vuex-hmr-
example

10. BUT WE USE LARAVEL, HTTPS,
VAGRANT, ETC.

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. work related: anze@flycom.si
other: a@anze.com
Thank you
link to slides will be posted on: twitter.com/anzeznidarsic