1. Let’s talk about
Aleksandr Tkalenko
JS developer
DataArt Dnepropetrovsk
Dnepropetrovsk 2015
1

2. JS modules
2

3. - encapsulation
- organization
JS modules PURPOSES
3

4. - encapsulation
- organization
JS modules PURPOSES
● no global scope pollution
● different library versions use
● security
4

5. - encapsulation
- organization
JS modules PURPOSES
● convenient using
● decoupling
● re-use / DRY principle
5

6. - global variables / namespace / tag
- AMD
- AMD with CommonJS
- CommonJS
WAYS TO DEFINE MODULES
6

7. - global variables
- AMD
- AMD with CommonJS
- CommonJS
WAYS TO DEFINE MODULES
7

8. - global variables
- AMD
- AMD with CommonJS
- CommonJS
WAYS TO DEFINE MODULES
8

9. - global variables
- AMD
- AMD with CommonJS
- CommonJS
WAYS TO DEFINE MODULES
9

10. - global variables
- AMD
- AMD with CommonJS
- CommonJS
WAYS TO DEFINE MODULES
- ES6 Modules
10

11. JS MODULE TOOLS
- RequireJS
- Browserify
- wreq
- curl
- jspm
11

12. WEBPACK
module bundler
12

13. installation and use
Installs as a npm package
Could be runned from CLI
… or as NodeJS package from
script
WEBPACK
13

14. - PLUGINS
WEBPACK
- DEV TOOLS
provides
- CODE SPLITTING
- LOADERS
14

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. WEBPACK
+ get only what you need
+ less requests, less overhead
MODULES TO CHUNKS
code splittingto organize modules as chunks
16

17. WEBPACK
Defining splitting point
code splittingto organize modules as chunks
17

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. WEBPACKloadersto treat any static asset as a module
19

20. WEBPACKloadersto treat any static asset as a module
20

21. WEBPACKloadersto treat any static asset as a module
… and to run tests
21

22. WEBPACK
list of loaders
loadersto treat any static asset as a module
60+
22

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

25. rich plugin system WEBPACK
to get inside the process
PLUGINS!
25

26. rich plugin system WEBPACK
to get inside the process
26

27. rich plugin system WEBPACK
to get inside the process
27

28. rich plugin system WEBPACK
to get inside the process
28

29. rich plugin system WEBPACK
to get inside the process
29

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. rich plugin system WEBPACK
to get inside the process
list of plugins
20+
31

32. dev tools and other stuff WEBPACK
to make work fun and easy
- DEV SERVER
- HOT MODULE REPLACEMENT
- DEPENDENCIES VISUALIZATION
32

33. dev tools and other stuff WEBPACK
to make work fun and easy
33

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. Q/A
???
“ Let’s talk about Webpack ”
Aleksandr Tkalenko
DataArt Dnepropetrovsk
2015
35