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
150
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
91
Color Palettes Of The Most Colorful Birds
arnellebalane
0
100
Let's build a video streaming app using Web technologies
arnellebalane
0
120
Let's build a video calling app with Web technologies and Firebase!
arnellebalane
0
130
Ridiculous Scientific Names
arnellebalane
0
180
Fishes With Terrestrial-Animal Names
arnellebalane
0
140
Making the Web more capable with Project Fugu
arnellebalane
0
100
Extending CSS using Houdini
arnellebalane
0
94
Securing user accounts with WebAuthn
arnellebalane
0
31
Other Decks in Technology
See All in Technology
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.5k
プロセス改善による品質向上事例
tomasagi
1
1.6k
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
Bounded Context: Problem or Solution?
ewolff
1
210
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
1
110
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
Featured
See All Featured
Code Review Best Practice
trishagee
66
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Documentation Writing (for coders)
carmenintech
67
4.6k
Automating Front-end Workflow
addyosmani
1367
200k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Done Done
chrislema
182
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Embracing the Ebb and Flow
colly
84
4.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
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