FRONTEND
WEB DEVELOPMENT
IN 2021+
Arnelle Balane
@arnellebalane
Slide 2
Slide 2 text
Arnelle Balane
Tech Lead @ Newlogic
Google Developers Expert
for Web Technologies
@arnellebalane
UncaughtException
@uncaughtxcptn
Subscribe to our channel!
/UncaughtException
Slide 3
Slide 3 text
bit.ly/fe-web-in-2021
Slide 4
Slide 4 text
Shawn Wang
swyx.io/js-third-age
Slide 5
Slide 5 text
The First Age
1997 - 2007
Building out the JavaScript
language
Slide 6
Slide 6 text
The First Age
1997 - 2007
1
2
3
4
☠
Slide 7
Slide 7 text
The First Age
1997 - 2007
Slide 8
Slide 8 text
The First Age
1997 - 2007
Slide 9
Slide 9 text
The First Age
1997 - 2007
Slide 10
Slide 10 text
Exploring and expanding the
JavaScript language
The Second Age
2009 - 2019
Slide 11
Slide 11 text
The Second Age
2009 - 2019
5
Slide 12
Slide 12 text
The Second Age
2009 - 2019
Slide 13
Slide 13 text
The Second Age
2009 - 2019
Web frameworks
Slide 14
Slide 14 text
The Second Age
2009 - 2019
Task runners
Slide 15
Slide 15 text
The Second Age
2009 - 2019
Bundlers
Slide 16
Slide 16 text
The Second Age
2009 - 2019
UI libraries / frameworks
Slide 17
Slide 17 text
The Second Age
2009 - 2019
Metaframeworks
Slide 18
Slide 18 text
The Second Age
2009 - 2019
Code quality tools
Slide 19
Slide 19 text
The Second Age
2009 - 2019
2015 2018
2016 2019
2017 2020
Slide 20
Slide 20 text
The Second Age
2009 - 2019
Slide 21
Slide 21 text
The Second Age
2009 - 2019
Desktop and mobile
Slide 22
Slide 22 text
Clearing away legacy assumptions
Collapsing layers of tooling
The Third Age
2020 and beyond
Slide 23
Slide 23 text
● Synchronous, designed for server
environments
● Doesn’t natively work on browsers
● Doesn’t work too well with static
analysis tools
Clearing away legacy assumptions
Reliance on CommonJS
Slide 24
Slide 24 text
● Works on both server and browser
environments
● Works well with static analysis
tools, tree-shakeable
Moving to ES Modules
Slide 25
Slide 25 text
● “You should be able to use a bundler because you
want to, and not because you need to”
● Provides unbundled ES Modules that run in the
browser
● Streaming imports: convert bare imports into CDN
imports from Skypack
Snowpack
Slide 26
Slide 26 text
Snowpack
Source code
Loaded in browser
Slide 27
Slide 27 text
● Uses native primitives of the Web platform
● Relies on packages being compatible with native
ES Modules
● Streaming imports: safely import packages from
npm or Skypack without installation
wmr
Slide 28
Slide 28 text
wmr
Import from npm
Import from Skypack
Slide 29
Slide 29 text
● Opts for ES Modules using absolute or relative
URLs, even for its standard library
Deno
Slide 30
Slide 30 text
Deno
Import from npm
Slide 31
Slide 31 text
Pros in using JS
● Easier to contribute to
projects
● Rich ecosystem
Clearing away legacy assumptions
JS tools must be written in JS
Pros in using non-JS
● Compile to native
binaries
● Usually faster
Slide 32
Slide 32 text
● Bundler and minifier written in Go
● 10x - 100x faster than JS-based tools
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
● JavaScript / TypeScript compiler written in Rust
swc
Slide 35
Slide 35 text
The Third Age
Collapsing layers of tooling
One thing doing many things
well, instead of many things
doing one thing well
Slide 36
Slide 36 text
Frontend
Decision Fatigue
● Animations
● Testing
● Linting
● Code formatting
● Bundling
● Frontend framework / library
● Client side routing
● State management
● Form management
● Data fetching
● Styling
Slide 37
Slide 37 text
Frontend
Metaframeworks
Slide 38
Slide 38 text
● Whole new runtime
● Comes with TypeScript support, linting, formatting,
testing, bundling, and a standard library out of the box
Deno
Slide 39
Slide 39 text
Deno
Slide 40
Slide 40 text
● Designed to replace Babel, ESLint, webpack, Prettier,
Jest, etc.
● Bundling, compiling, docs generation, formatting,
linting, minification, testing, type checking, etc.
Rome
Slide 41
Slide 41 text
Rome
Slide 42
Slide 42 text
● Collapsing everything from reactivity, state
management, and animations into a compiler
● No more Virtual DOM layer
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
Web Development
in 2021 and beyond
● Faster tools
● Better DX and UX
● ES Modules-first
● Collapsed layers
● More secure
Slide 47
Slide 47 text
Thank you!
Frontend Web Development in 2021+
Arnelle Balane
@arnellebalane