FUTURE OF THE WEB PLATFORM 2 WELCOME TO MY TED TALK IM AG_DUBS 3 - - PowerPoint PPT Presentation

▶
future of the web platform
SMART_READER_LITE
LIVE PREVIEW

FUTURE OF THE WEB PLATFORM 2 WELCOME TO MY TED TALK IM AG_DUBS 3 - - PowerPoint PPT Presentation

Nov 05, 2022 805 likes •2.01k views

1 WEBASSEMBLY AND THE FUTURE OF THE WEB PLATFORM 2 WELCOME TO MY TED TALK IM AG_DUBS 3 THE RIGHT LANGUAGE FOR THE JOB 4 THE RIGHT LANGUAGE FOR THE JOB? 5 THE RIGHT LANGUAGE FOR THE JOB? 6 THE RIGHT LANGUAGE FOR

slide-1
SLIDE 1

FUTURE OF THE WEB PLATFORM

WEBASSEMBLY AND THE

1

slide-2
SLIDE 2

I’M AG_DUBS

WELCOME TO MY TED TALK

2

slide-3
SLIDE 3

THE RIGHT LANGUAGE FOR THE JOB

3

slide-4
SLIDE 4

THE RIGHT LANGUAGE FOR THE JOB?

4

slide-5
SLIDE 5

THE RIGHT LANGUAGE FOR THE JOB?

5

slide-6
SLIDE 6

THE RIGHT LANGUAGE FOR THE JOB?

6

slide-7
SLIDE 7

WEBASSEMBLY IS A LANGUAGE THAT WILL REDEFINE THE JOBS WE DO AND THE LANGUAGES WE DO THEM IN

AG_DUBS

HYPOTHESIS 7

slide-8
SLIDE 8

PLAN

LET’S GET READY TO RUMBLE

▸ Why is WebAssembly different? ▸ What is WebAssembly? ▸ What is the Web Platform? ▸ How is WebAssembly going to change the Web Platform? ▸ Where we are now, where we going in the future

8

slide-9
SLIDE 9

HISTORY OF PROGRAMMING LANGUAGE DEVELOPMENT

AN EXTREMELY BRIEF AND INCOMPLETE

9

slide-10
SLIDE 10 1970 1980 1990 2000 2010 2020 X86 (1972) Rust (2010) Python (1991) C (1972) C++ (1985) Ruby (1995) Go (2009) Swift (2014) Kotlin (2011) Java (1995) JavaScript (1995) Erlang (1995) Haskell (1990) Scala (2004)

10

Wasm (2017) ARM (1985) C# (2000)

🤙

slide-11
SLIDE 11 1970 1980 1990 2000 2010 2020 X86 (1972) Rust (2010) Python (1991) C (1972) C++ (1985) Ruby (1995) Wasm (2017) Go (2009) Swift (2014) C# (2000) Kotlin (2011) Java (1995) JavaScript (1995) Erlang (1995) Haskell (1990) Scala (2004)

11

ARM (1985)

🤙

slide-12
SLIDE 12 C# (2000) 1970 1980 1990 2000 2010 2020 X86 (1972) Rust (2010) Python (1991) C (1972) C++ (1985) Ruby (1995) Go (2009) Swift (2014) Kotlin (2011) Java (1995) JavaScript (1995) Erlang (1995) Haskell (1990) Scala (2004)

32 YEARS!

12

ARM (1985) Wasm (2017)

🤙

slide-13
SLIDE 13

ASSEMBLY LANGUAGE?

WHAT IS AN

13

slide-14
SLIDE 14

😁 💼

Rust💭

💦x86

slide-15
SLIDE 15

😁 💼

Rust💭

💦x86

slide-16
SLIDE 16

😁 💼

Rust💭

💦x86 🦁🐊

fn main() { let sum = 1 + 1; }

100101010010

slide-17
SLIDE 17

😁 💼

Rust💭

💦x86 🦁🐊

fn main() { let sum = 1 + 1; }

100101010010

ADD MEM1 MEM2
slide-18
SLIDE 18

😁 💼

Rust💭

💦x86 🦁 🐊

fn main() { let sum = 1 + 1; }

100101010010

ADD MEM1 MEM2

💼 💦ARM

101100010011

AÑADIR MEM1 MEM2
slide-19
SLIDE 19

WEBASSEMBLY?

WHAT IS

19

slide-20
SLIDE 20

😁 💼

Rust💭

💦x86 🦁 🐊

fn main() { let sum = 1 + 1; }

100101010010

ADD MEM1 MEM2

💼 💦ARM

101100010011

AÑADIR MEM1 MEM2
slide-21
SLIDE 21

WEBASSEMBLY

  • COMPACT BINARY FORMAT
  • MULTIPLE “HUMAN-READABLE” TEXT FORMATS
  • BUILT IN THE OPEN VIA WEB STANDARDS COMMITTEE
  • INTEGRATES WITH EXISTING JAVASCRIPT VIS

HTTPS://WEBASSEMBLY.ORG/

slide-22
SLIDE 22

20 00 42 00 51 04 7E 42 01 05 20 00 20 00 42 01

FACTORIAL

slide-23
SLIDE 23

RESOURCES

  • HTTP://AST.RUN/
  • HTTPS://WEBASSEMBLY.STUDIO/
  • HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/

WEBASSEMBLY

slide-24
SLIDE 24

NO GC (YET)

slide-25
SLIDE 25

SMALL AND FAST

slide-26
SLIDE 26

IT’S COOL THAT WEBASSEMBLY IS FAST, BUT IT’S KILLER FEATURE IS ITS PREDICTABILITY.

AG_DUBS

WHO ELSE IS ON CALL RIGHT NOW? 26

slide-27
SLIDE 27
slide-28
SLIDE 28

BUT WHY???

slide-29
SLIDE 29

WEB PLATFORM?

WHAT IS THE

29

slide-30
SLIDE 30

WHAT IS A PLATFORM?

ISA (INSTRUCTION SET ARCHITECTURE) RUNTIME TOOLING

slide-31
SLIDE 31

JAVA

ISA (INSTRUCTION SET ARCHITECTURE) JAVA BYTE CODE RUNTIME JVM TOOLING JAVAC

slide-32
SLIDE 32

X86 ON UNIX

ISA (INSTRUCTION SET ARCHITECTURE) X86 RUNTIME UNIX TOOLING SHELL, C, GCC

slide-33
SLIDE 33

WEB PLATFORM

ISA (INSTRUCTION SET ARCHITECTURE) ???? RUNTIME JAVASCRIPT, PLATFORM APIS TOOLING SO MUCH.

slide-34
SLIDE 34

HISTORY OF THE WEB PLATFORM

AN EXTREMELY BRIEF AND INCOMPLETE

34

slide-35
SLIDE 35

THE WEB PLATFORM IS UNUSUAL IN THAT IT WAS DEVELOPED OUT OF ORDER AND IT HAS, HISTORICALLY, HAD MISSING PIECES.

@steveklabnik

slide-36
SLIDE 36 1970 1980 1990 2000 2010 2020 JavaScript (1995) IE (1995) Browser War I (1995-2001) Netscape (1994) HTML (1993) Wasm (2017) Chrome (2008) Firefox (2002) Safari (2003) Browser War II (2008-2017) CSS (1996) First Website (1991)
slide-37
SLIDE 37 JavaScript (1995) HTML (1993) Wasm (2017) NodeJS (2009) V8 (2008) JQuery (2006) React (2012) 1970 1980 1990 2000 2010 2020 Angular (2010) Ember (2011) Google Maps (2004) CSS (1996) AJAX (2009) SPA (2003) TraceMonkey (2009) First Website (1991)
slide-38
SLIDE 38 IE (1995) Netscape (1994) Chrome (2008) Firefox (2002) Safari (2003) JavaScript (1995) HTML (1993) CSS (1996) Wasm (2017) NodeJS (2009) V8 (2008) React (2012) 1970 1980 1990 2000 2010 2020 Angular (2010) Ember (2011) Google Maps (2004) Adobe Flash (1996) NaCL (2011) Java Applets (1995) JQuery (2006)

SPEED OF COMPUTATION IN THE BROWSER

AJAX (2009) TraceMonkey (2009) SPA (2003) First Website (1991)
slide-39
SLIDE 39 IE (1995) Netscape (1994) Chrome (2008) Firefox (2002) Safari (2003) JavaScript (1995) HTML (1993) CSS (1996) Wasm (2017) NodeJS (2009) V8 (2008) React (2012) 1970 1980 1990 2000 2010 2020 Angular (2010) Ember (2011) Google Maps (2004) Adobe Flash (1996) NaCL (2011) Java Applets (1995) JQuery (2006)

SPEED OF COMPUTATION IN THE BROWSER

AJAX (2009) TraceMonkey (2009) SPA (2003)

*JIT compilers

First Website (1991)
slide-40
SLIDE 40

JAVASCRIPT AS AN ISA?

slide-41
SLIDE 41

I WAS NOT DESIGNED FOR THIS TASK.

JavaScript

slide-42
SLIDE 42

WEB PLATFORM

ISA (INSTRUCTION SET ARCHITECTURE) WEB ASSEMBLY RUNTIME JAVASCRIPT, PLATFORM APIS TOOLING SO MUCH.

slide-43
SLIDE 43

INTERPRETERS AND COMPILERS

43

slide-44
SLIDE 44

BROWSER ENGINES ARE FRIGGIN MAGICAL OK?

AG_DUBS

THIS SLIDE IS FOR BENEDIKT MEUER 44

slide-45
SLIDE 45

EVEN?

HOW DO BROWSERS

45

slide-46
SLIDE 46

JIT?

WHAT IS A

46

slide-47
SLIDE 47

FAST?

WHY IS WEBASSEMBLY

47

Lin Clark. https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
slide-48
SLIDE 48

HOW DOES COMPUTATION ON THE WEB WORK NOW

48

slide-49
SLIDE 49

SERVER ORIENTED

 😁 😁 😁 😁

slide-50
SLIDE 50

SERVER ORIENTED

 😁 😁 😁 😁

slide-51
SLIDE 51

SERVER ORIENTED

🍖 🍖 🍖 🍖  😁 😁 😁 😁

slide-52
SLIDE 52

SERVER ORIENTED

🍖 🍖 🍖 🍖  😁 😁 😁 😁

slide-53
SLIDE 53

SERVER ORIENTED

🍖 🍖 🍖 🍖  😁 😁 😁 😁

slide-54
SLIDE 54

SERVER ORIENTED

 😁 😁 😁 😁 🧻 🧻 WITH CACHE

slide-55
SLIDE 55

 😁 😁 😁 😁 🧻 🧻

SERVER ORIENTED

WITH CACHE

slide-56
SLIDE 56

🍖🍖  😁 😁 😁 😁 🧻 🧻

SERVER ORIENTED

WITH CACHE

slide-57
SLIDE 57

🍖🍖  😁 😁 😁 😁 🧻 🧻

SERVER ORIENTED

WITH CACHE

slide-58
SLIDE 58

🍖 🍖  😁 😁 😁 😁 🧻 🧻

SERVER ORIENTED

WITH CACHE

slide-59
SLIDE 59

🍖 🍖  😁 😁 😁 😁 🧻 🧻 🍖 🍖

SERVER ORIENTED

WITH CACHE

slide-60
SLIDE 60

 😁 😁 😁 😁 🍖 🍖 🧻 🧻

SERVER ORIENTED

WITH CACHE 🍖 🍖

slide-61
SLIDE 61

 😁 😁 😁 😁 🍖 🍖 🧻 🧻 🍖 🍖

SERVER ORIENTED

WITH CACHE 🍖 🍖

slide-62
SLIDE 62

 😁 😁 😁 😁 🍖 🍖 🧻 🧻 🍖 🍖

SERVER ORIENTED

WITH CACHE 🍖 🍖

slide-63
SLIDE 63

CLIENT ORIENTED

 😁 😁 😁 😁

slide-64
SLIDE 64

 😁 😁 😁 😁

CLIENT ORIENTED

slide-65
SLIDE 65

 😁 😁 😁 😁

CLIENT ORIENTED

slide-66
SLIDE 66

 😁 😁 😁 😁

CLIENT ORIENTED

slide-67
SLIDE 67

 😁 😁 😁 😁

CLIENT ORIENTED

   

slide-68
SLIDE 68

 😁 😁 😁 😁

CLIENT ORIENTED

    🍖 🍖 🍖 🍖

slide-69
SLIDE 69

 😁 😁 😁 😁 🧻 🧻

CLIENT ORIENTED

WITH CACHE

slide-70
SLIDE 70

 😁 😁 😁 😁 🧻 🧻

CLIENT ORIENTED

WITH CACHE

slide-71
SLIDE 71

 😁 😁 😁 😁 🧻 🧻    

CLIENT ORIENTED

WITH CACHE

slide-72
SLIDE 72

 😁 😁 😁 😁 🧻 🧻    

CLIENT ORIENTED

WITH CACHE

slide-73
SLIDE 73

 😁 😁 😁 😁 🧻 🧻     🍖 🍖

CLIENT ORIENTED

WITH CACHE

slide-74
SLIDE 74

 😁 😁 😁 😁 🧻 🧻     🍖 🍖  

CLIENT ORIENTED

WITH CACHE

slide-75
SLIDE 75

 😁 😁 😁 😁 🧻 🧻     🍖 🍖  

CLIENT ORIENTED

WITH CACHE

slide-76
SLIDE 76

CLIENT ORIENTED

 😁 😁 😁 😁 🧻 🧻     🍖 🍖   🍖 🍖 WITH CACHE

slide-77
SLIDE 77

HOW COULD COMPUTATION ON THE WEB WORK

77

slide-78
SLIDE 78

 😁 😁 😁 😁 🧻 🧻

EDGE COMPUTE

https://gimme.pizza.now
slide-79
SLIDE 79

😁 😁 😁 😁 🧻 🧻    

EDGE COMPUTE

🍖 🍖

https://gimme.pizza.now
slide-80
SLIDE 80

😁 😁 😁 😁 🧻 🧻    

EDGE COMPUTE

🍖 🍖

https://gimme.pizza.now
slide-81
SLIDE 81

😁 😁 😁 😁 🧻 🧻  

EDGE COMPUTE

🍖 🍖

https://gimme.pizza.now
slide-82
SLIDE 82

😁 😁 😁 😁 🧻 🧻    

EDGE COMPUTE

🍖 🍖

https://gimme.pizza.now

🍖 🍖

slide-83
SLIDE 83

😁 😁 😁 😁 🧻 🧻    

EDGE COMPUTE

🍖 🍖 🍖 🍖

https://gimme.pizza.now
slide-84
SLIDE 84

BUT WHY???

slide-85
SLIDE 85

WEBASSEMBLY AND JS AS A UNIFIED WEB PLATFORM MAKES OFFERING EDGE COMPUTE MORE ECONOMICALLY FEASIBLE

slide-86
SLIDE 86

BUT WHY???

slide-87
SLIDE 87

LESS LATENCY MEANS MORE ACCESS FOR MORE PEOPLE

slide-88
SLIDE 88

HOW CAN I USE WEB ASSEMBLY TODAY?

88

slide-89
SLIDE 89

EMSCRIPTEN?

WHAT IS

89

slide-90
SLIDE 90

EMSCRIPTEN

  • LLVM BACKEND THAT MAKES ASM.JS OR WEBASSEMBLY
  • USED BY PNACL
  • USED BY UNITY, UNREAL, DOSBOX
  • C, C++, RUST

HTTPS://EMSCRIPTEN.ORG/

slide-91
SLIDE 91

REWRITE IT IN RUST?

SHOULD I

91

slide-92
SLIDE 92

YES!

slide-93
SLIDE 93

RUSTWASM

  • RUST COMPILER (W/LLVM) TARGETING WEBASSEMBLY
  • GENERATES JAVASCRIPT BINDINGS TO WASM
  • INTEROPERATES WITH JS TOOLS: NPM, WEBPACK,

GREENKEEPER

  • HEAVY FOCUS ON DEVELOPER TOOLS AND EXPERIENCE

HTTPS://RUSTWASM.GITHUB.IO/

slide-94
SLIDE 94
slide-95
SLIDE 95
slide-96
SLIDE 96

HTTPS://RUSTWASM.GITHUB.IO/WASM-PACK

slide-97
SLIDE 97

DEMO TIME

slide-98
SLIDE 98

JAVASCRIPT?

WHAT ABOUT

98

slide-99
SLIDE 99

CAN JS COMPILE TO WEBASSEMBLY?

  • ANYTHING CAN COMPILE TO WEBASSEMBLY
  • ONE MUST COMPILE THE RUNTIME IN ADDITION TO THEIR

PROGRAM WHEN USING AN INTERPRETED LANGUAGE

slide-100
SLIDE 100

ASSEMBLYSCRIPT?

WHAT IS

100

slide-101
SLIDE 101

ASSEMBLYSCRIPT

  • SUBSET OF TYPESCRIPT COMPILES WEBASSEMBLY VIA

BINARYEN

  • LOWEST BARRIER TO ENTRY FOR JS DEVELOPERS

HTTPS://ASSEMBLYSCRIPT.ORG/

slide-102
SLIDE 102

EVERY PLATFORM WILL BECOME THE WEB PLATFORM.

AG_DUBS

THE SUN IS NEVER GONNA SET ON THE V8 EMPIRE 102

slide-103
SLIDE 103

UNIVERSAL BINARIES

THE DREAM OF

103

slide-104
SLIDE 104

I WANT A WEBASSEMBLY OPERATING SYSTEM AND I WANT IT YESTERDAY.

AG_DUBS

TEXT 104

slide-105
SLIDE 105

SOON, "WEB APPLICATION" DOES NOT NEED TO BE SYNONYMOUS WITH "NETWORKED APPLICATION" OR "WEB PAGE" OR ANYTHING ELSE WE ASSOCIATE WITH THE WEB PLATFORM TODAY.

@steveklabnik

slide-106
SLIDE 106

“NO INSTALL NEEDED”

slide-107
SLIDE 107

WE SHOULD BE DESIGNING LANGUAGES TODAY FOR THE WEBASSEMBLY TOMORROW

107

slide-108
SLIDE 108

DEVELOPER EXPERIENCE MATTERS

slide-109
SLIDE 109

RUNTIMES ARE EXPENSIVE

slide-110
SLIDE 110

RUNTIMES ARE CONFUSING

slide-111
SLIDE 111

CODE FOR HUMANS IS DIFFERENT THAN CODE FOR COMPUTERS

slide-112
SLIDE 112

WE CAN MAKE PROGRAMMING AND PROGRAMS MORE ACCESSIBLE WITH THE POWER OF COMPILERS

slide-113
SLIDE 113

I WELCOME OUR COMPILED FUTURE

slide-114
SLIDE 114

WEBASSEMBLY IS A LANGUAGE THAT WILL REDEFINE THE JOBS WE DO AND THE LANGUAGES WE DO THEM IN

AG_DUBS

HYPOTHESIS 114

slide-115
SLIDE 115
slide-116
SLIDE 116

SUPPORT MORE HARDWARE WITH LESS

slide-117
SLIDE 117

LESS LATENCY MEANS MORE ACCESS FOR MORE PEOPLE

slide-118
SLIDE 118

WEBASSEMBLY MEANS A MORE DEMOCRATIC INTERNET

118

slide-119
SLIDE 119

@AG_DUBS

THANKS!