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.
Let’s talk about
Aleksandr Tkalenko
JS developer
DataArt Dnepropetrovsk
Dnepropetrovsk 2015
1
JS modules
2
- encapsulation
- organization
JS modules PURPOSES
3
- encapsulation
- organization
JS modules PURPOSES
● no global scope pollution
● different library versions use
● security...
- encapsulation
- organization
JS modules PURPOSES
● convenient using
● decoupling
● re-use / DRY principle
5
- global variables / namespace / tag
- AMD
- AMD with CommonJS
- CommonJS
WAYS TO DEFINE MODULES
6
- global variables
- AMD
- AMD with CommonJS
- CommonJS
WAYS TO DEFINE MODULES
7
- global variables
- AMD
- AMD with CommonJS
- CommonJS
WAYS TO DEFINE MODULES
8
- global variables
- AMD
- AMD with CommonJS
- CommonJS
WAYS TO DEFINE MODULES
9
- global variables
- AMD
- AMD with CommonJS
- CommonJS
WAYS TO DEFINE MODULES
- ES6 Modules
10
JS MODULE TOOLS
- RequireJS
- Browserify
- wreq
- curl
- jspm
11
WEBPACK
module bundler
12
installation and use
Installs as a npm package
Could be runned from CLI
… or as NodeJS package from
script
WEBPACK
13
- PLUGINS
WEBPACK
- DEV TOOLS
provides
- CODE SPLITTING
- LOADERS
14
code splitting WEBPACK
+ get only what you need
- many requests => much overhead
- request latency
+ one request, less lat...
WEBPACK
+ get only what you need
+ less requests, less overhead
MODULES TO CHUNKS
code splittingto organize modules as chu...
WEBPACK
Defining splitting point
code splittingto organize modules as chunks
17
WEBPACK
PNG
PNG
less
CSS
sass
jade
hbs
haml
woff
ttf
eofJS
JSX
coffee
what parts modern webapp consists of?
JS
HTML
PNG
CS...
WEBPACKloadersto treat any static asset as a module
19
WEBPACKloadersto treat any static asset as a module
20
WEBPACKloadersto treat any static asset as a module
… and to run tests
21
WEBPACK
list of loaders
loadersto treat any static asset as a module
60+
22
rich plugin system WEBPACK
to get inside the process
wanna some
dependency injection
bower modules
uglified javascript wit...
24
rich plugin system WEBPACK
to get inside the process
PLUGINS!
25
rich plugin system WEBPACK
to get inside the process
26
rich plugin system WEBPACK
to get inside the process
27
rich plugin system WEBPACK
to get inside the process
28
rich plugin system WEBPACK
to get inside the process
29
rich plugin system WEBPACK
to get inside the process
smart common chunks extraction
p1.entry.chunk.js
p2.entry.chunk.js
p3...
rich plugin system WEBPACK
to get inside the process
list of plugins
20+
31
dev tools and other stuff WEBPACK
to make work fun and easy
- DEV SERVER
- HOT MODULE REPLACEMENT
- DEPENDENCIES VISUALIZA...
dev tools and other stuff WEBPACK
to make work fun and easy
33
COMPARISON
feature WEBPACK RequireJS Browserify
CommonJS yes wrapping in yes
AMD yes yes no
Chunks on demand yes yes no
ex...
Q/A
???
“ Let’s talk about Webpack ”
Aleksandr Tkalenko
DataArt Dnepropetrovsk
2015
35
Upcoming SlideShare
Loading in …5
×

Webpack

5,026 views

Published on

Алексадр Ткаленко, Senior Java Script developer

Published in: Software

Webpack

  1. 1. Let’s talk about Aleksandr Tkalenko JS developer DataArt Dnepropetrovsk Dnepropetrovsk 2015 1
  2. 2. JS modules 2
  3. 3. - encapsulation - organization JS modules PURPOSES 3
  4. 4. - encapsulation - organization JS modules PURPOSES ● no global scope pollution ● different library versions use ● security 4
  5. 5. - encapsulation - organization JS modules PURPOSES ● convenient using ● decoupling ● re-use / DRY principle 5
  6. 6. - global variables / namespace / tag - AMD - AMD with CommonJS - CommonJS WAYS TO DEFINE MODULES 6
  7. 7. - global variables - AMD - AMD with CommonJS - CommonJS WAYS TO DEFINE MODULES 7
  8. 8. - global variables - AMD - AMD with CommonJS - CommonJS WAYS TO DEFINE MODULES 8
  9. 9. - global variables - AMD - AMD with CommonJS - CommonJS WAYS TO DEFINE MODULES 9
  10. 10. - global variables - AMD - AMD with CommonJS - CommonJS WAYS TO DEFINE MODULES - ES6 Modules 10
  11. 11. JS MODULE TOOLS - RequireJS - Browserify - wreq - curl - jspm 11
  12. 12. WEBPACK module bundler 12
  13. 13. installation and use Installs as a npm package Could be runned from CLI … or as NodeJS package from script WEBPACK 13
  14. 14. - PLUGINS WEBPACK - DEV TOOLS provides - CODE SPLITTING - LOADERS 14
  15. 15. code splitting WEBPACK + get only what you need - many requests => much overhead - request latency + one request, less latency - get all bunch REQUEST PER MODULE ALL IN ONE REQUEST to organize modules as chunks 15
  16. 16. WEBPACK + get only what you need + less requests, less overhead MODULES TO CHUNKS code splittingto organize modules as chunks 16
  17. 17. WEBPACK Defining splitting point code splittingto organize modules as chunks 17
  18. 18. WEBPACK PNG PNG less CSS sass jade hbs haml woff ttf eofJS JSX coffee what parts modern webapp consists of? JS HTML PNG CSS loadersto treat any static asset as a module 18
  19. 19. WEBPACKloadersto treat any static asset as a module 19
  20. 20. WEBPACKloadersto treat any static asset as a module 20
  21. 21. WEBPACKloadersto treat any static asset as a module … and to run tests 21
  22. 22. WEBPACK list of loaders loadersto treat any static asset as a module 60+ 22
  23. 23. rich plugin system WEBPACK to get inside the process wanna some dependency injection bower modules uglified javascript with sourceMaps ?smart chunks loading 23
  24. 24. 24
  25. 25. rich plugin system WEBPACK to get inside the process PLUGINS! 25
  26. 26. rich plugin system WEBPACK to get inside the process 26
  27. 27. rich plugin system WEBPACK to get inside the process 27
  28. 28. rich plugin system WEBPACK to get inside the process 28
  29. 29. rich plugin system WEBPACK to get inside the process 29
  30. 30. rich plugin system WEBPACK to get inside the process smart common chunks extraction p1.entry.chunk.js p2.entry.chunk.js p3.entry.chunk.js common.chunk.js 30
  31. 31. rich plugin system WEBPACK to get inside the process list of plugins 20+ 31
  32. 32. dev tools and other stuff WEBPACK to make work fun and easy - DEV SERVER - HOT MODULE REPLACEMENT - DEPENDENCIES VISUALIZATION 32
  33. 33. dev tools and other stuff WEBPACK to make work fun and easy 33
  34. 34. COMPARISON feature WEBPACK RequireJS Browserify CommonJS yes wrapping in yes AMD yes yes no Chunks on demand yes yes no expressions in require yes no no Runtime overhead 243b + 20b per module + 4b per dependency 14.7kb + 0b per module + (3b + X) per dependency 415b + 25b per module + (6b + 2X) per dependency 34
  35. 35. Q/A ??? “ Let’s talk about Webpack ” Aleksandr Tkalenko DataArt Dnepropetrovsk 2015 35

×