Slide 1

Slide 1 text

With more complexity comes more freedom

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

What about the web?

Slide 6

Slide 6 text

Webpack

Slide 7

Slide 7 text

1. What is Webpack 2. Cool things it can do 3. How we use it at Octopus

Slide 8

Slide 8 text

1. What is Webpack

Slide 9

Slide 9 text

“Webpack is a build tool that puts all of your assets, including Javascript, images, fonts, and CSS, in a dependency graph.” - Andy Ray

Slide 10

Slide 10 text

Dependency graph main.js jQuery plugins SITE main.css jQuery

Slide 11

Slide 11 text

Dependency graph 1 2

Slide 12

Slide 12 text

Dependency graph 3

Slide 13

Slide 13 text

Dependency graph 4

Slide 14

Slide 14 text

2. Cool things it can do

Slide 15

Slide 15 text

a. Code splitting b. Hot module replacement c. Environment Variables

Slide 16

Slide 16 text

a. Code splitting “This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel.”

Slide 17

Slide 17 text

a. Code splitting

Slide 18

Slide 18 text

a. Code splitting

Slide 19

Slide 19 text

a. Code splitting

Slide 20

Slide 20 text

a. Code splitting

Slide 21

Slide 21 text

b. Hot module replacement (HMR) “It allows all kinds of modules to be updated at runtime without the need for a full refresh”

Slide 22

Slide 22 text

b. Hot module replacement (HMR) 1 2 3

Slide 23

Slide 23 text

b. Hot module replacement (HMR) 4

Slide 24

Slide 24 text

b. Hot module replacement (HMR)

Slide 25

Slide 25 text

c. Environment Variables “Allows you to have different behaviour between development builds and release builds.”

Slide 26

Slide 26 text

c. Environment Variables 1 2

Slide 27

Slide 27 text

c. Environment Variables 3 4

Slide 28

Slide 28 text

And much more…

Slide 29

Slide 29 text

3. How we use it at Octopus

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

dev bundle prod bundle API Thin Client

Slide 32

Slide 32 text

What does that look like in code?

Slide 33

Slide 33 text

In Conclusion

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Questions?

Slide 37

Slide 37 text

When and why to use Webpack https://blog.andrewray.me/webpack-when-to-use-and-why/ Require vs ES6 import/export https://stackoverflow.com/questions/31354559/using-node-js-require-vs- es6-import-export Code splitting with react and Webpack https://medium.freecodecamp.org/straightforward-code-splitting-with- react-and-webpack-4b94c28f6c3f Sources