Webpack & WebAssembly - Speaker Deck

Slide 1

Slide 1 text

Webpack @sendilkumarn WebAssembly

Slide 2

Slide 2 text

Sendil Kumar N • Full stack developer @Xebialabs

Slide 3

Slide 3 text

Sendil Kumar N • Full stack developer @Xebialabs • Core dev team member @JHipster

Slide 4

Slide 4 text

Sendil Kumar N • Full stack developer @Xebialabs • Core dev team member @JHipster • Team member @webpack

Slide 5

Slide 5 text

Sendil Kumar N • Full stack developer @Xebialabs • Core dev team member @JHipster • Team member @webpack • Part of rust-wasm Working Group

Slide 6

Slide 6 text

Sendil Kumar N • Full stack developer @Xebialabs • Core dev team member @JHipster • Team member @webpack • Part of rust-wasm Working Group • Big open source lover

Slide 7

Slide 7 text

Full stack developers?

Slide 8

Slide 8 text

C++ devs?

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

WebAssembly ?

Slide 12

Slide 12 text

What is WebAssembly?

Slide 13

Slide 13 text

Binary instruction format 1010110 1010110 1010110 1010110 1010 1010110 1010110 1010110 1010110 1010

Slide 14

Slide 14 text

stack based machines 1010110 1010110 1010110 1010110 1010 1010110 1010110 1010110 1010110 1010 Binary instruction format for

Slide 15

Slide 15 text

Most efﬁcient representation of instructions in binary 1010110 1010110 1010110 1010110 1010 1010110 1010110 1010110 1010110 1010

Slide 16

Slide 16 text

What, well in other words?

Slide 17

Slide 17 text

Run your native code in web.

Slide 18

Slide 18 text

Implementation detail for high level languages

Slide 19

Slide 19 text

Why WebAssembly?

Slide 20

Slide 20 text

Where “Performance” matters

Slide 21

Slide 21 text

JavaScript ?

Slide 22

Slide 22 text

WebAssembly is not a replacement to Javascript

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

❤ We

Slide 25

Slide 25 text

❤

Slide 26

Slide 26 text

❤ We

Slide 27

Slide 27 text

Javascript is fast

Slide 28

Slide 28 text

Interpreted language Write it Execute it

Slide 29

Slide 29 text

It is compiled too Write it Execute it Compile it Optimise it

Slide 30

Slide 30 text

Then what is the beneﬁt with WebAssembly ?

Slide 31

Slide 31 text

Where you need “Maintainable Performance”

Slide 32

Slide 32 text

Wait, What is maintainable performance?

Slide 33

Slide 33 text

High performance with Maintainable code

Slide 34

Slide 34 text

Geeky code

Slide 35

Slide 35 text

Uncertainties

Slide 36

Slide 36 text

Performance loopholes

Slide 37

Slide 37 text

Okay, I am writing Javascript for 15 years.

Slide 38

Slide 38 text

Well, lets test it

Slide 39

Slide 39 text

Tell me which is having higher performance

Slide 40

Slide 40 text

A B

Slide 41

Slide 41 text

A B ✅

Slide 42

Slide 42 text

Optional args will have an impact on your performance…

Slide 43

Slide 43 text

Monomorphisation

Slide 44

Slide 44 text

Memoization

Slide 45

Slide 45 text

Debug with proﬁler

Slide 46

Slide 46 text

Used Webpack?

Slide 47

Slide 47 text

❤Webpack❤

Slide 48

Slide 48 text

Okay, isn’t webpack a JS bundler?

Slide 49

Slide 49 text

Webpack is a bundler for your frontend.

Slide 50

Slide 50 text

Webpack is a new LLVM Unpopular

Slide 51

Slide 51 text

It bundles / packs everything that you need

Slide 52

Slide 52 text

Actually, how your application needs

Slide 53

Slide 53 text

Actually, how your application needs code-splitting / DCE

Slide 54

Slide 54 text

WP 4 - announced WebAssembly support.

Slide 55

Slide 55 text

From WP4.8 we have a better WebAssembly support

Slide 56

Slide 56 text

WP5 will have even better WebAssembly support

Slide 57

Slide 57 text

Demo time lets pack and roll with webpack

Slide 58

Slide 58 text

Demo agenda

Slide 59

Slide 59 text

Create a Rust project

Slide 60

Slide 60 text

Use Wasm bindgen to create wasm ﬁles + binding JS ﬁles.

Slide 61

Slide 61 text

Make that rust project into node project

Slide 62

Slide 62 text

Add web pack + web pack serve to it

Slide 63

Slide 63 text

Run it…

Slide 64

Slide 64 text

Enough demo it…

Slide 65

Slide 65 text

Other mentions

Slide 66

Slide 66 text

Streaming compilation

Slide 67

Slide 67 text

WP internals may be / will be in Rust

Slide 68

Slide 68 text

In future

Slide 69

Slide 69 text

Garbage collection

Slide 70

Slide 70 text

Dom Manipulation

Slide 71

Slide 71 text

JVM devs ?

Slide 72

Slide 72 text

Kotlin ?

Slide 73

Slide 73 text

Questions?

Slide 74

Slide 74 text

Happy Hacking