Frontend Web Development in 2021+

1. FRONTEND WEB DEVELOPMENT IN 2021+ Arnelle Balane @arnellebalane
2. Arnelle Balane Tech Lead @ Newlogic Google Developers Expert for Web Technologies @arnellebalane UncaughtException @uncaughtxcptn Subscribe to our channel! /UncaughtException
3. bit.ly/fe-web-in-2021
4. Shawn Wang swyx.io/js-third-age
5. The First Age 1997 - 2007 Building out the JavaScript language
6. The First Age 1997 - 2007 1 2 3 4 ☠
7. The First Age 1997 - 2007
8. The First Age 1997 - 2007
9. The First Age 1997 - 2007
10. Exploring and expanding the JavaScript language The Second Age 2009 - 2019
11. The Second Age 2009 - 2019 5
12. The Second Age 2009 - 2019
13. The Second Age 2009 - 2019 Web frameworks
14. The Second Age 2009 - 2019 Task runners
15. The Second Age 2009 - 2019 Bundlers
16. The Second Age 2009 - 2019 UI libraries / frameworks
17. The Second Age 2009 - 2019 Metaframeworks
18. The Second Age 2009 - 2019 Code quality tools
19. The Second Age 2009 - 2019 2015 2018 2016 2019 2017 2020
20. The Second Age 2009 - 2019
21. The Second Age 2009 - 2019 Desktop and mobile
22. Clearing away legacy assumptions Collapsing layers of tooling The Third Age 2020 and beyond
23. • 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
24. • Works on both server and browser environments • Works well with static analysis tools, tree-shakeable Moving to ES Modules
25. • “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
26. Snowpack Source code Loaded in browser
27. • 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
28. wmr Import from npm Import from Skypack
29. • Opts for ES Modules using absolute or relative URLs, even for its standard library Deno
30. Deno Import from npm
31. 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
32. • Bundler and minifier written in Go • 10x - 100x faster than JS-based tools
34. • JavaScript / TypeScript compiler written in Rust swc
35. The Third Age Collapsing layers of tooling One thing doing many things well, instead of many things doing one thing well
36. Frontend Decision Fatigue • Animations • Testing • Linting • Code formatting • Bundling • Frontend framework / library • Client side routing • State management • Form management • Data fetching • Styling
37. Frontend Metaframeworks
38. • Whole new runtime • Comes with TypeScript support, linting, formatting, testing, bundling, and a standard library out of the box Deno
39. Deno
40. • Designed to replace Babel, ESLint, webpack, Prettier, Jest, etc. • Bundling, compiling, docs generation, formatting, linting, minification, testing, type checking, etc. Rome
41. Rome
42. • Collapsing everything from reactivity, state management, and animations into a compiler • No more Virtual DOM layer
46. Web Development in 2021 and beyond • Faster tools • Better DX and UX • ES Modules-first • Collapsed layers • More secure
47. Thank you! Frontend Web Development in 2021+ Arnelle Balane @arnellebalane