Let’s talk about

Aleksandr TkalenkoJS 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

4

- 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 Modules10

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

11

WEBPACK

module bundler12

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 latency- get all bunch

REQUEST PER MODULE ALL IN ONE REQUEST

to organize modules as chunks

15

WEBPACK

+ get only what you need+ less requests, less overhead

MODULES TO CHUNKS

code splitting to organize modules as chunks

16

WEBPACK

Defining splitting point

code splitting to 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

CSS

loadersto treat any static asset as a module

18

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 WEBPACKto get inside the process

wanna somedependency injection

bower modulesuglified javascript with sourceMaps ?smart chunks loading

23

24

rich plugin system WEBPACKto get inside the process

PLUGINS!

25

rich plugin system WEBPACKto get inside the process

26

rich plugin system WEBPACKto get inside the process

27

rich plugin system WEBPACKto get inside the process

28

rich plugin system WEBPACKto get inside the process

29

rich plugin system WEBPACKto get inside the process

smart common chunks extraction

p1.entry.chunk.js

p2.entry.chunk.js

p3.entry.chunk.js

common.chunk.js

30

rich plugin system WEBPACKto get inside the process

list of plugins

20+31

dev tools and other stuff WEBPACKto make work fun and easy

- DEV SERVER- HOT MODULE REPLACEMENT- DEPENDENCIES VISUALIZATION

32

dev tools and other stuff WEBPACKto make work fun and easy

33

COMPARISONfeature 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 overhead243b + 20b per module + 4b

per dependency

14.7kb + 0b per module + (3b +

X) per dependency

415b + 25b per module +

(6b + 2X) per dependency

34

Q/A

???“ Let’s talk about Webpack ”

Aleksandr TkalenkoDataArt Dnepropetrovsk

2015

35