JavaScriptures 5 - Babel & Webpack

Slide 1

Slide 1 text

Babel/Webpack Be fruitful, and bundle JavaScriptures V Chris

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

But first, what is JavaScript?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Then Google Maps happened

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

JavaScript quickly went from being a “toy language” to something that was understood to be capable of real power

Slide 9

Slide 9 text

But there were problems...

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

NodeJS opened up the world of JavaScript to a new community

Slide 16

Slide 16 text

(But the language had problems)

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

However, server-side JavaScript started to be used in all sorts of creative ways

Slide 19

Slide 19 text

It started to rewrite itself

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

CoffeeScript was the spark. It showed the world that if you didn’t like the language you could change it, and you didn’t need the browser vendors to do so

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax without waiting for browser support

Slide 26

Slide 26 text

Before browser vendors implemented support for modern JavaScript this was essential

Slide 27

Slide 27 text

Babel unlocked JavaScript’s potential as a language that can be enjoyable to use

Slide 28

Slide 28 text

It also created a platform for real-time, open-source language development and exploration

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Language proposals are submitted by TC39, and prototyped with Babel

Slide 31

Slide 31 text

These proposals are then moved in stages through the approval process

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Once a proposal has reached Stage IV it is considered stable and will be incorporated into the language

Slide 34

Slide 34 text

How does this apply to Artsy?

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Our JavaScript projects incorporate many language features, some of which are not a part of the official JavaScript spec

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

“JavaScript that Scales” (it’s true)

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

These language features don’t run natively in the browser

Slide 42

Slide 42 text

They need to be transpiled into something that the browser (or the server) can understand

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

With JavaScript’s low and high-level language features, anything is possible

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

4. You are expected to expect the unexpected every minute, every hour of every day and of every night. - John C. Lilly

Slide 47

Slide 47 text

And things move fast....

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Things that were previously impossible to imagine have become possible, as well as common

Slide 50

Slide 50 text

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.

Slide 51

Slide 51 text

JavaScript frameworks can make use of WebAssembly to confer massive performance advantages and new features while still making functionality easily available to web developers.

Slide 52

Slide 52 text

But how does one manage this outward-spiraling complexity?

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

Webpack is a Module Bundler that runs during development

Slide 56

Slide 56 text

It builds a dependency graph of your application and combines those assets into one or more bundles to be consumed by a target

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Simply put…

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

It provides a common set of tools for managing application complexity

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

Because of its robust dependency graph architecture, powerful developer tooling can be built on top of it

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

And the overall developer experience highly optimized

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

However, Webpack configuration can be complex

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

It is designed for planet scale

Slide 70

Slide 70 text

But it can also be simple

Slide 71

Slide 71 text

webpack --mode development --output dist/bundle.js --watch

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

Webpack 4 can run without configuration via the “development” --mode flag

Slide 74

Slide 74 text

What does a basic Webpack config look like?

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

What about a server?

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

Thanks!

Slide 84

Slide 84 text

No content