Building fast web applications Thierry Sans Users respond to speed - - PowerPoint PPT Presentation

▶

Jan 22, 2023 347 likes •561 views

Building fast web applications Thierry Sans Users respond to speed Amazon found every 100ms of latency cost them 1% in sales Google found an extra . 5 seconds in search page generation time dropped traffic by 20% A broker could

SLIDE 1

Building fast web applications

Thierry Sans

SLIDE 2

Users respond to speed

“Amazon found every 100ms of latency cost them 1% in sales” “Google found an extra .5 seconds in search page generation time dropped traffic by 20%” “A broker could lose $4 million in revenues per millisecond if their electronic trading platform is 5 milliseconds behind the competition”

http://blog.gigaspaces.com/amazon-found-every-100ms-of-latency-cost-them-1-in-sales/

SLIDE 3

Several Techniques

Backend templates
Frontend packing
HTTP/2
Long polling

SLIDE 4

Backend Templates

SLIDE 5

Our application so far

HTML, CSS  JS, media

Backend Frontend

GET / GET /API/

Static Content API Content

SLIDE 6

Dynamic content (using HTML templates)

Static Content API Content Dynamic content

CSS, JS, media

Backend Frontend

GET / HTML  templates

SLIDE 7

Advantages of using templates in the backend

Better code reuse and maintenance
Faster loading time (avoid unnecessary ajax requests)

SLIDE 8

Better code reuse and maintenance

Some pages might share

headers (title, JS and CSS)
page organization (div tags structuring the page)
footers (if any)

SLIDE 9

Faster loading time

Dynamic pages are built on the server and can be retrieved

with 1 HTTP requests (instead of 2 with the ajax API call)

Dynamic pages can be cached on the server

SLIDE 10

Template engines compatible with Express

Pug
Moustache
EJS
Jade
... and others https://expressjs.com/en/guide/using-template-engines.html

SLIDE 11

Frontend packing

SLIDE 12

The problem

Backend Frontend

GET / GET /js/lib.js GET /js/index.js GET /style/index.css GET /style/generic.css

SLIDE 13

The solution - using a frontend packer

Backend Frontend

GET / GET /js/bundle.js

e.g. webpack.js

SLIDE 14

HTTP/2

SLIDE 15

HTTP/2

HTTP/2 enables multiplexing

➡ send multiple HTTP responses for a given request (a.ka push)

Proposed by Google (called SPDY)
Adopted as an standard in 2015 (RFC 7540)
HTTP/2 is compatible with HTTP/1 (same protocol)

SLIDE 16

HTTP 2.0 HTTP 1.1

GET / GET /js/bundle.js GET / 200 push 200 200 200

SLIDE 17

HTTP/3 (standard draft)

➡ Use UDP instead of TCP

Chrome in Dec'19 Firefox in Jan'20

syn syn/ack ack TLS ClientHello ack TLS ServerHello ack TLS Finished ack HTTP Request ack HTTP Response ack fin ack fin ack

TCP handshake TLS handshake HTTP TCP handshake

quic quic quic HTTP Request HTTP Response

TLS handshake HTTP

HTTP/1 & 2 HTTP/3

SLIDE 18

Long Polling

SLIDE 19

Short Polling vs Long Polling

Short Polling

The frontend request an update from the backend every few seconds
The backend replies right away regardless if there is an update or not

๏ Many request/responses are wasted

Long Polling

The frontend request an update from the backend and wait for the response
The backend replies to the update request only when there is an update

✓ No request/response wasted ✓ Updates are processed as soon as they arrived

SLIDE 20

Long Polling

Web App

GET /update GET /update GET /update GET /update POST /messages GET /update