Where The Web Is Going @jaredthenerd jaredthenerd.com Where The - - PowerPoint PPT Presentation

▶
where the web is going
SMART_READER_LITE
LIVE PREVIEW

Where The Web Is Going @jaredthenerd jaredthenerd.com Where The - - PowerPoint PPT Presentation

Jan 08, 2023 334 likes •998 views

Where The Web Is Going @jaredthenerd jaredthenerd.com Where The Web Is Going by Jared Faris is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. https://creativecommons.org/licenses/by-sa/4.0/ How the Web L b

slide-1
SLIDE 1

Where The Web Is Going

@jaredthenerd jaredthenerd.com

Where The Web Is Going by Jared Faris is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. https://creativecommons.org/licenses/by-sa/4.0/

slide-2
SLIDE 2
slide-3
SLIDE 3
slide-4
SLIDE 4
slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7
slide-8
SLIDE 8

Your serve rvers s sit here

How the Web L b Literall lly* y* Works

and what we’ll be talking about

*figu gurative vely

slide-9
SLIDE 9
slide-10
SLIDE 10
slide-11
SLIDE 11
slide-12
SLIDE 12
slide-13
SLIDE 13
slide-14
SLIDE 14

BBQLOL

slide-15
SLIDE 15
slide-16
SLIDE 16

SELFIE! New Yorker – The Group That Rules The Web

http://bit.ly/RulesTheWeb

slide-17
SLIDE 17
slide-18
SLIDE 18

Web b Sta tandar ndards ds People

  • ple Swe

wear r A Lo Lot

slide-19
SLIDE 19
slide-20
SLIDE 20

“Consensus is not a useful value in Web spec development, because it doesn't accurat ately ely refl flect ect th the powe wer r dynamics ics at t wo work. k. In practi ctice, e, implement ementers ers have ve th the ulti timat ate e say, not t spec editor

  • rs,

s, not t auth thor

  • rs,

s, not t users, rs, and not t interest ested ed bysta tande nder r sta tandar ardi distas. stas. The W3 W3C a C and th the WH WHATWG WG th thus have ve no powe wer. . (The e WH WHATWG WG is built t arou

  • und

nd th that t reali alization ation; ; th the W3C 3C, howe wever er, is built t on th the assump mptio tion n th that t it t does have powe wer. . That' t's s how w it t ends up making ng mista takes es like e RDF, XForms, or XHTML2.)”

Ian Hickson – April 23, 2014

slide-21
SLIDE 21

<3 OPEN STAND Me Too!

http://bit.ly/WHATWGIPR

slide-22
SLIDE 22

.1

Cont ntext xt Menus us Expand nding ing Deta tail il Panels ls Form rm Validatio ation n & F Forced Spellche lcheck ck Date e Pickers

slide-23
SLIDE 23

.1

slide-24
SLIDE 24

http://bit.ly/HTML5Implementation

slide-25
SLIDE 25

.2

slide-26
SLIDE 26

More Stuff

slide-27
SLIDE 27

CSS Gri rid

slide-28
SLIDE 28

CSS Vari riab ables les

slide-29
SLIDE 29

UMMMMMMMM… WHAT?

slide-30
SLIDE 30
  • HTML Templates
  • Shadow DOM
  • Custom Elements
  • HTML Imports/ES6 Modules

Web b Com

  • mponen

ponents ts

slide-31
SLIDE 31

Web b Com

  • mponents

ponents In In Acti tion

  • n

These get incl clude des with h Polyme ymer and Shady dy DOM. That t is its own talk! k!

slide-32
SLIDE 32

http tps: s:// //www ww.w .webc bcomp

  • mpon
  • nent

nts.or s.org/ g/

slide-33
SLIDE 33

"ECMAScript was always an unwanted trade name that sounds like a skin disease.“ – Brendan Eich

slide-34
SLIDE 34
slide-35
SLIDE 35
slide-36
SLIDE 36
slide-37
SLIDE 37
slide-38
SLIDE 38

Array.includes ** operator

ES 2016

slide-39
SLIDE 39

Array.contains ???

“You're telling me I should ship a browser that chokes on thousands of web sites that work fine today. That would be bad for our users, so I'm not planning on doing that." "Patching 3.5 million websites is not a 'small fix' in any relevant sense.“ – Jason Orendorff (Mozilla)

slide-40
SLIDE 40

SMOOSH? Seriously?

slide-41
SLIDE 41

https://github.com/staltz/prevent-smoosh

slide-42
SLIDE 42

Array.includes ** operator

ES 2016

Async Lots of little stuff

(Not an actual feature name. Object.values, String Padding, not breaking on trailing commas, etc.)

ES 2017

slide-43
SLIDE 43

Shared Memory & Atomics Async Iteration Rest/Spread… operators RegExp features

ES 20 2018 18

Array.prototype.{flat,flatMap} String.prototype.{trimStart, trimEnd} Some string and JSON improvements

ES 20 2019 19

slide-44
SLIDE 44

JavaScr aScript ipt Develope velopers rs Swe wear r A Lot Lot

slide-45
SLIDE 45

Fetch

slide-46
SLIDE 46
slide-47
SLIDE 47

HTT TTP P Reque quests sts

slide-48
SLIDE 48

Servi rvice e Wor

  • rker
slide-49
SLIDE 49

Not Google

Prog

  • gress

essive ive Web b Apps ps

slide-50
SLIDE 50

Not Google

  • 65% increase in pages per session
  • 75% increase in Tweets sent
  • 20% decrease in bounce rate
slide-51
SLIDE 51

Twitter Is Complicated…

Here’s a dumb example

slide-52
SLIDE 52

Offline?

slide-53
SLIDE 53

What about Web Assembly?

“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-54
SLIDE 54

How we code the web today*

* not shown: 400 npm packages and a complicated build system

C#, Rust, C# (sorta), Java, Python, etc. etc. Too lazy to draw a ton of language icons ;)

+

How Web Assembly works

Modules… remember those?

slide-55
SLIDE 55

“Why would I …?” Good question Most use cases are dumb… today

slide-56
SLIDE 56

“Oh, good…”

  • Build high performing applications

(video chat, gaming, CAD, etc.)

  • Re-use complicated business logic
  • Build things like ML or VR
  • Avoid writing JavaScript
slide-57
SLIDE 57

In Internet rnet Enginee gineering ring Task k For

  • rce

Tube be

slide-58
SLIDE 58
slide-59
SLIDE 59

Bin inary ary Fr Frami ming ng La Layer er

slide-60
SLIDE 60

Security urity Resear earchers chers Swe wear r A Lot Lot

slide-61
SLIDE 61

And what about…? In Internet rnet Exchr chrome

  • medgium

dgium!* !*

* Not offici cial title

slide-62
SLIDE 62

Th This is im impacts: cts:

  • In

Interoper

  • perabili

ability ty

  • Sta

tandar ndards ds com

  • mpli

plianc ance

  • Develop

veloper er expe xperi rienc ence It doesn’t directly change:

  • Platf

atform

  • rm fu

functionality ctionality

  • Sta

tandar ndards ds developme velopment nt

slide-63
SLIDE 63

htt ttps:/ ps://w /www ww.micr microsoft

  • softed

edgeinsid geinsider er.c .com

  • m
slide-64
SLIDE 64
slide-65
SLIDE 65

THANK YOU!

@jaredthenerd jaredthenerd.com