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
170
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
120
Let's build a video streaming app using Web technologies
arnellebalane
0
140
Let's build a video calling app with Web technologies and Firebase!
arnellebalane
0
140
Ridiculous Scientific Names
arnellebalane
0
230
Fishes With Terrestrial-Animal Names
arnellebalane
0
150
Making the Web more capable with Project Fugu
arnellebalane
0
120
Extending CSS using Houdini
arnellebalane
0
110
Securing user accounts with WebAuthn
arnellebalane
0
40
Other Decks in Technology
See All in Technology
プロダクトエンジニアリングで開発の楽しさを拡張する話
barometrica
0
210
コミュニティと計画的偶発性理論 - 出会いが人生を変える / Life-Changing Encounters
soudai
PRO
7
900
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
okdt
PRO
8
280
React Server ComponentsでAPI不要の開発体験
polidog
PRO
1
350
PFEM Online Feature Flag @ newmo
shinyaishitobi
2
170
Claude Codeは仕様駆動の夢を見ない
gotalab555
23
7.3k
UDDのススメ - 拡張版 -
maguroalternative
1
640
Telemetry APIから学ぶGoogle Cloud ObservabilityとOpenTelemetryの現在 / getting-started-telemetry-api-with-google-cloud
k6s4i53rx
0
160
キャリアを支え組織力を高める「多層型ふりかえり」 / 20250821 Kazuki Mori
shift_evolve
PRO
2
190
自治体職員がガバクラの AWS 閉域ネットワークを理解するのにやって良かった個人検証環境
takeda_h
2
340
九州の人に知ってもらいたいGISスポット / gis spot in kyushu 2025
sakaik
0
210
ウォンテッドリーのアラート設計と Datadog 移行での知見
donkomura
0
220
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Thoughts on Productivity
jonyablonski
69
4.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Visualization
eitanlees
146
16k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
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