Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Frontend Web Development in 2021+
Search
Arnelle Balane
April 24, 2021
Technology
0
160
Frontend Web Development in 2021+
Arnelle Balane
April 24, 2021
Tweet
Share
More Decks by Arnelle Balane
See All by Arnelle Balane
Introduction to building Chrome Extensions
arnellebalane
0
110
Color Palettes Of The Most Colorful Birds
arnellebalane
0
110
Let's build a video streaming app using Web technologies
arnellebalane
0
130
Let's build a video calling app with Web technologies and Firebase!
arnellebalane
0
140
Ridiculous Scientific Names
arnellebalane
0
220
Fishes With Terrestrial-Animal Names
arnellebalane
0
150
Making the Web more capable with Project Fugu
arnellebalane
0
110
Extending CSS using Houdini
arnellebalane
0
110
Securing user accounts with WebAuthn
arnellebalane
0
37
Other Decks in Technology
See All in Technology
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
280
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
Connect 100+を支える技術
kanyamaguc
0
100
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
0
210
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
230
AI導入の理想と現実~コストと浸透〜
oprstchn
0
130
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
0
150
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
220
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
5
580
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
130
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
570
Geminiとv0による高速プロトタイピング
shinya337
0
160
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
We Have a Design System, Now What?
morganepeng
53
7.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Agile that works and the tools we love
rasmusluckow
329
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Statistics for Hackers
jakevdp
799
220k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Transcript
FRONTEND WEB DEVELOPMENT IN 2021+ Arnelle Balane @arnellebalane
Arnelle Balane Tech Lead @ Newlogic Google Developers Expert for
Web Technologies @arnellebalane UncaughtException @uncaughtxcptn Subscribe to our channel! /UncaughtException
bit.ly/fe-web-in-2021
Shawn Wang swyx.io/js-third-age
The First Age 1997 - 2007 Building out the JavaScript
language
The First Age 1997 - 2007 1 2 3 4
☠
The First Age 1997 - 2007
The First Age 1997 - 2007
The First Age 1997 - 2007
Exploring and expanding the JavaScript language The Second Age 2009
- 2019
The Second Age 2009 - 2019 5
The Second Age 2009 - 2019
The Second Age 2009 - 2019 Web frameworks
The Second Age 2009 - 2019 Task runners
The Second Age 2009 - 2019 Bundlers
The Second Age 2009 - 2019 UI libraries / frameworks
The Second Age 2009 - 2019 Metaframeworks
The Second Age 2009 - 2019 Code quality tools
The Second Age 2009 - 2019 2015 2018 2016 2019
2017 2020
The Second Age 2009 - 2019
The Second Age 2009 - 2019 Desktop and mobile
Clearing away legacy assumptions Collapsing layers of tooling The Third
Age 2020 and beyond
• 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
• Works on both server and browser environments • Works
well with static analysis tools, tree-shakeable Moving to ES Modules
• “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
Snowpack Source code Loaded in browser
• 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
wmr Import from npm Import from Skypack
• Opts for ES Modules using absolute or relative URLs,
even for its standard library Deno
Deno Import from npm
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
• Bundler and minifier written in Go • 10x -
100x faster than JS-based tools
None
• JavaScript / TypeScript compiler written in Rust swc
The Third Age Collapsing layers of tooling One thing doing
many things well, instead of many things doing one thing well
Frontend Decision Fatigue • Animations • Testing • Linting •
Code formatting • Bundling • Frontend framework / library • Client side routing • State management • Form management • Data fetching • Styling
Frontend Metaframeworks
• Whole new runtime • Comes with TypeScript support, linting,
formatting, testing, bundling, and a standard library out of the box Deno
Deno
• Designed to replace Babel, ESLint, webpack, Prettier, Jest, etc.
• Bundling, compiling, docs generation, formatting, linting, minification, testing, type checking, etc. Rome
Rome
• Collapsing everything from reactivity, state management, and animations into
a compiler • No more Virtual DOM layer
None
None
None
Web Development in 2021 and beyond • Faster tools •
Better DX and UX • ES Modules-first • Collapsed layers • More secure
Thank you! Frontend Web Development in 2021+ Arnelle Balane @arnellebalane