Challenges of the modern web

Rodrigo Boniatti VP of Engineering - Vanta @boniattirodrigo

Early days

Tim Berners-Lee

Early days • Lack of standards for tools and systems
• Isolated data • Information was challenging to share

HyperText

HyperText • HTML (HyperText Markup Language) • HTTP (HyperText Transfer
Protocol) • URL (Uniform Resource Locator)

Server-side rendering (SSR)

CERN httpd (European Organization for Nuclear Research)

NCSA httpd (National Center for Supercomputing Applications)

Common Gateway Interface (CGI)

http://localhost/cgi-bin/hello.pl

#! /usr/bin/perl print "Content-type: text/html\n\n"; print "<html><body><h1>Hello, Simple CGI! </
h1> </ body> </ html>\n"; exit 0;

"a patchy server"

Rasmus Lerdorf

Personal Home Page

"I have absolutely no idea how to write a programming
language. I just kept adding the next logical step on the way.” Rasmus Lerdorf

Marc Andreessen

Netscape • Faster and friendly • JavaScript • Cookies •
SSL (Secure Sockets Layer)

Internet Explorer • Pre-installed on Windows • Di ff i
cult to uninstall • Access to proprietary software

United States v. Microsoft Corp.

United States v. Microsoft Corp. • Break up the company

United States v. Microsoft Corp. • Break up the company
• Release the APIs to all apps • PC manufacturers could add any apps they wanted • Make default browser change easier

United States v. Microsoft Corp. • Netscape becomes open source
• New browsers join the market • Mozilla (Mosaic + Godzilla) • IE keeps dominating the market for more than 10 years

Client-side rendering (CSR)

Brendan Eich

LiveScript

JavaScript

JScript

https://javascript.tm/

ECMAScript

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

How JavaScript was perceived at the time • Uncommon syntax
• Lack of more advanced functionalities • No video and audio support • No graphics and animations • Browsers inconsistency

Java applet

New web technologies arrive • HTML5 • CSS3 • ES5
(ECMAScript 2009) • V8 JavaScript Engine • iOS

"Flash was created during the PC era – for PCs
and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short." Steve Jobs

Single Page Application (SPA)

Challenges • Each browser implemented a di ff erent JS
version • Low-end devices • Limited internet connection

JS support in 2013

JS support in 2014

JS support in 2015

JS support in 2016

Transpiling

class User constructor: (@name, @role) -> isAdmin: -> @role is
'admin' greet: -> console.log "Hi, I'm #{ @name}"

var User; User = (function() { function User(name, role) {
this.name = name; this.role = role; } User.prototype.isAdmin = function() { return this.role === 'admin'; }; User.prototype.greet = function() { return console.log("Hi, I'm " + this.name); }; return User; })();

// Input (modern syntax/ES6) const greet = (name = 'world')
=> `Hello, ${name}!`; // Output (ES5-friendly) "use strict"; var greet = function(name) { if (name === void 0) { name = "world"; } return "Hello, " + name + "!"; };

Poly fi lls

[1, 2, 3].includes(2);

TypeError: [1, 2, 3].includes is not a function

if (!Array.prototype.includes) { Array.prototype.includes = function (searchElement) { return this.indexOf(searchElement)
!== -1; }; }

$('#btn').on('click', function() { console.log('Clicked:', this.id); // Always works });

Browserslist

targets: [ '> 0.5%, not dead', 'chrome >= 90' ]

Mini fi cation

// Output (ES5-friendly) minified "use strict";var greet=function(name){if(name === void 0)
{name="world";}return"Hello,"+name+"!";}; // Output (ES5-friendly) "use strict"; var greet = function(name) { if (name === void 0) { name = "world"; } return "Hello, " + name + "!"; };

Mangling

// Output (ES5-friendly) minified and mangled "use strict";var greet=function(r){return"Hello,"+ (r=void
0 === r?"world":r)+"!"}; // Output (ES5-friendly) minified "use strict";var greet=function(name){if(name === void 0) {name="world";}return"Hello,"+name+"!";};

Tree-shaking

Bundle splitting

Lazy loading

Server-side rendering (SSR)

SSR Bene fi ts • Faster FCP (First Contentful Paint)
• Better SEO • Sharing support (Open Graph, Twitter Cards) • Consistent rendering in environments with limited JS

Hydration

patterns.dev

<end />

Challenges of the modern web

Challenges of the modern web

More Decks by Rodrigo Boniatti

Other Decks in Technology

Featured

Transcript