Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Frontend Web Development in 2021+

Frontend Web Development in 2021+

32c638e7a3a466d182705fb4370cbb2e?s=128

Arnelle Balane

April 24, 2021
Tweet

More Decks by Arnelle Balane

Other Decks in Technology

Transcript

  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
  33. None
  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
  43. None
  44. None
  45. None
  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