Alexey Kupriyanenko "The State of Modern JavaScript and Web in 2020...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

The State of Modern JavaScript
and Web in 2020
Alexey Kupriyanenko, R&D manager
Wix.com

The frontend world is moving really fast
% of Pages Loaded via HTTPS

Modern JavaScript is optimized

What you build is super rich and
complex

USE NOW
DON’T WAIT!

Service Workers -
benefits and
costs
make your app work much
faster.

Well known
benefits
▪ Requests can skip the network entirely
▪ Stale response can be returned
immediately

Automatically store the bytecode
representation of JS in the cache
parse compile execute

Automatically store the bytecode
representation of JS in the cache
parse compile execute
cached

But, Service Worker startup time
isn’t free
Best case
SW asleep
Slow
cache
No SW
Cache
miss
Worst case
SW Cache latency Ne...

Header
Navigation request for full content
Content
Navigation Request
Navigation request for partial content using streams...

…
Service-Worker-Navigation-Preload: true
GET /index.html HTTP/2

Streaming
Best case
SW asleep
Slow
cache
No SW
Cache
miss
Worst case
Streaming
w/ Nav
Preloading
No SW
SW Cache latency Ne...

Offscreen Canvas
Now you can render your
graphics off the main thread
with OffscreenCanvas!

Unblock main thread
const offscreen = document.querySelector('canvas').transferControlToOffscreen();
const worker = new Wo...

The AV1 Standart
royalty-free more efficient way to
compress videos.

Video codecs
▪ H.264/MPEG-4
▪ Theora/Ogg
▪ VP9/WebM
▪ H.265/MPEG-H HEVC
▪ AV1/WebM

Video codecs
▪ H.264/MPEG-4
▪ Theora/Ogg
▪ VP9/WebM
▪ H.265/MPEG-H HEVC
▪ AV1/WebM

You can try it
ffmpeg -i input.mp4 -c:v libaom-av1 -crf 30 -b:v 0 -strict
experimental av1_test.mkv
AV1 by 30% better comp...

One excuse
AV1 transcoding is about 10 000 times slower

Site Isolation
so each <iframe> (not website) is a
single thread.
More secure way for the Web

Independent process for iframes

NEW FEATURES & APIs
COMING SOON

Virtual Scroller
native out-of-the-box handling for TMI.

<script type="module">
import 'std:virtual-scroller';
const scroller = document.querySelector('virtual-scroller');
scrolle...

<script type="module">
import 'std:virtual-scroller';
const scroller = document.querySelector('virtual-scroller');
scrolle...

<script type="module">
import 'std:virtual-scroller';
const scroller = document.querySelector('virtual-scroller');
scrolle...

<script type="module">
import 'std:virtual-scroller';
const scroller = document.querySelector('virtual-scroller');
...
get...

The proof-of-concept

so you can set priority for
each and every JS call.
Task
Scheduling API

Input handlers rAFs Document Lifecycle
(Style, Layout, Paint)
Next Frame
User-blocking tasks Default
tasks
Idle tasks
Task...

CSS Houdini
so you could build your own
CSS rules.

// main.js
CSS.paintWorklet.addModule('my-paint.js');

// main.js
CSS.paintWorklet.addModule('my-paint.js');
// my-paint.js
registerPaint('circle', class {
paint(ctx, geom, prop...

// index.html
<style>
.element {
background-image: paint(circle);
}
</style>

CSS Houdini
OFF THE MAIN THREAD

WebAssembly
and Threads
so you can communicate
between threads directly.

Web App
JS Engine
Worker
JS Engine
Create Worker
Worker
JS Engine
Workers don't talk to each other

Web App
JS Engine
Worker
Wasm Module
Worker
Workers don't talk to each other
SharedArrayBuffer

Great coffee
machine
so workers will make you the
cappuccino.

Great coffee
machine
so workers will make you the
cappuccino.
BUT NO :(

USE NOW
DON’T WAIT!
NEW
COMING SOON
#1 SERVICE WORKERS &
SMART CACHING
#2 OFFSCREEN CANVAS
#3 AV1
#4 SITE ISOLATION
#1 VIR...

Thank You
Alexey Kupriyanenko, alexeyk@wix.com
Slides bit.ly/fwd-web20

Q&A
Alexey Kupriyanenko, alexeyk@wix.com
Slides bit.ly/fwd-web20

N/A

...but performance is
a real blocker to deal with.
Regular phone High-end phone

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

2024 Trend Updates: What Really Wor... by Search Engine Jou... 1062387 views
Storytelling For The Web: Integrate... by Chiara Aliotta 980817 views
Artificial Intelligence, Data and C... by OECD Directorate ... 921734 views
How to Leverage AI to Boost Employe... by SocialHRCamp 391483 views
2024 State of Marketing Report – by... by Marius Sescu 221384 views
Everything You Need To Know About C... by Expeed Software 237443 views

View on Slideshare

1 of 50 Ad

View on Slideshare

1 of 50 Ad