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

Things you should know about Frontend Development in 2022

stefan judis
December 08, 2022

Things you should know about Frontend Development in 2022

stefan judis

December 08, 2022
Tweet

More Decks by stefan judis

Other Decks in Technology

Transcript

  1. @stefanjudis Everything You Should Know About Web Development in 2022

  2. @stefanjudis Things You Should Know About Frontend Development in 2022

  3. Good old times!

  4. Disclaimer

  5. css-tricks.com/the-great-divide/

  6. Use the platform JavaScript all the way! Apps Sites

  7. @stefanjudis stefanjudis.com Heyo, I'm Stefan!

  8. webweekly.email

  9. TypeScript GraphQL Grid webp Font Display :focus-within ESM Lazy Loading

    PWA JAMStack Zero-Config JavaScript Cypress Serverless Web Components
  10. It's fine to disagree... (Back then and today)

  11. ... and I'll miss topics you consider important. (Back then

    and today)
  12. TypeScript GraphQL Grid webp Font Display :focus-within ESM Lazy Loading

    PWA JAMStack Zero-Config JavaScript Cypress Serverless Web Components
  13. TypeScript GraphQL Grid webp Font Display :focus-within ESM Lazy Loading

    PWA JAMStack Zero-Config JavaScript Cypress Serverless Web Components Played out
  14. TypeScript GraphQL Grid webp Font Display :focus-within ESM Lazy Loading

    PWA JAMStack Zero-Config JavaScript Cypress Serverless Web Components Evolved
  15. TypeScript GraphQL Grid webp Font Display :focus-within ESM Lazy Loading

    PWA JAMStack Zero-Config JavaScript Cypress Serverless Web Components Sorta played out
  16. The state of the platform

  17. .grid { grid-template-columns: [a] auto [b] minmax(min-content, 1fr) [b c

    d] repeat(2, [e] 40px) repeat(5, auto); } CSS Grid and its incredible power arrived!
  18. AVIF arrived! 2000 x 1333px Original 333KB MozJPG 115KB Webp

    72KB AVIF 32KB
  19. * caniuse.com/avif * Partial support

  20. 55!

  21. :fullscreen :modal :picture-in-picture :auto-fill :enabled :disabled :read-only :read-write :placeholder-shown :default

    :checked :indeterminate :blank :valid :invalid :in-range :out-of-range :required :optional :user-invalid :dir() :lang() :any-link :link :visited :local-link :target :target-within :scope :playing :paused :current :past :future :root :empty :nth-child :nth-last-child :first-child :last-child :only-child :nth-of-type :nth-last-of-type :first-of-type :last-of-type :only-of-type :hover :active :focus :focus-visible :focus-within :is() :not() :where() :has()
  22. :fullscreen :modal :picture-in-picture :auto-fill :enabled :disabled :read-only :read-write :placeholder-shown :default

    :checked :indeterminate :blank :valid :invalid :in-range :out-of-range :required :optional :user-invalid :dir() :lang() :any-link :link :visited :local-link :target :target-within :scope :playing :paused :current :past :future :root :empty :nth-child :nth-last-child :first-child :last-child :only-child :nth-of-type :nth-last-of-type :first-of-type :last-of-type :only-of-type :hover :active :focus :focus-visible :focus-within :is() :not() :where() :has()
  23. section h1, article h1, aside h1, nav h1 { font-size:

    25px; } :is(section, article, aside, nav) h1 { font-size: 25px; } :where(section, article, aside, nav) h1 { font-size: 25px; } :is() and :where() Specificity: 0,0,2 Specificity: 0,0,1
  24. :has() The parent family selector Game changer alert!

  25. form:has(:focus) {} form:has(:invalid) {} form:has(:valid) {} form:has(:placeholder-shown) {} Form handling

    codepen.io/jh3y/pen/YzYJLvy
  26. figure:has(> figcaption) { /$ ..& *( } a:not(:has(> svg)) {

    /$ ..& *( } article:has(>h1):has(>h2) { /$ ..& *( } h1:has(+ p) { /$ ..& *( } form:has(:focus-visible) { /$ ..& *( }
  27. Hello World! <div> <div>Hello<*div> <div>world!<*div> <*div>

  28. Hello World! <div> <div>Hello<*div> <div>world!<*div> <*div> div { background: blue;

    color: white; }
  29. Hello World! <div> <div>Hello<*div> <div>world!<*div> <*div> div > div {

    background: blue; color: white; }
  30. Hello World! <div> <div>Hello<*div> <div>world!<*div> <*div> div:has(> div) { background:

    blue; color: white; }
  31. Hello <div> <div>Hello<*div> <div>world!<*div> <*div> div + div { background:

    blue; color: white; } World!
  32. Hello World! <div> <div>Hello<*div> <div>world!<*div> <*div> div:has(+ div) { background:

    blue; color: white; }
  33. We yet have to discover all the new :has() patterns!

  34. * caniuse.com/css-has * Behind layout.css.has-selector.enabled flag

  35. developer.chrome.com/blog/has-m105/ webkit.org/blog/13096/css-has-pseudo-class/

  36. @container Container queries Game changer alert!

  37. <div class="container"> <section>Hello world!<*section> <*div> .container { container-type: inline-size; container-name:

    article; } Hello world!
  38. <div class="container"> <section>Hello world!<*section> <*div> .container { container: article /

    inline-size; } Hello world!
  39. .container { container: article / inline-size; } section { background:

    blue; } Hello world! <div class="container"> <section>Hello world!<*section> <*div>
  40. .container { container: article / inline-size; } section { background:

    blue; } @container article (min-width: 200px) { section { background: red; } } Hello world! <div class="container"> <section>Hello world!<*section> <*div>
  41. .container { container: article / inline-size; } section { background:

    blue; } @container article (min-width: 200px) { section { background: red; } } Hello world! <div class="container"> <section>Hello world!<*section> <*div> 150px
  42. .container { container: article / inline-size; } section { background:

    blue; } @container article (min-width: 200px) { section { background: red; } } Hello world! <div class="container"> <section>Hello world!<*section> <*div> 250px
  43. .container { container: article / inline-size; } section { background:

    blue; } @container article (min-width: 200px) { section { background: red; } } Hello world! <div class="container"> <section>Hello world!<*section> <*div> 150px
  44. 100 vw 100 vh 100 cqw 100 cqh New units!

  45. Speaking of units... All browsers ship large, small, and dynamic

    viewport units!
  46. web.dev/viewport-units/

  47. .posts { container-name: posts; } @container posts (background-color: #f8a100) {

    .post { color: #fff; } } The future — Container Style Queries
  48. .posts { container-name: posts; } @container posts (-,mode: blue) {

    .post { color: #fff; } } The future — Container Style Queries
  49. * caniuse.com/css-container-queries * Staring with version 109 shipping Jan 2023.

    Container Size Queries
  50. Truly Component-driven CSS Container queries enable you to style elements

    based on their size whereas :has() lets you style them based on their content!
  51. Truly Component-driven CSS Container queries enable you to style elements

    based on their size whereas :has() lets you style them based on their content! THIS IS HUGE!!!
  52. Nevertheless, the web needs more components!

  53. open-ui.org

  54. Alert Avatar Badge Breadcrumb Button Card Checkbox Datepicker Dialog File

    Flex Focusgroup Icon Image Menu Popup Radio Button Select Skeleton Slider Switch Table Tabs Text Toast Tooltip
  55. Alert Avatar Badge Breadcrumb Button Card Checkbox Datepicker Dialog File

    Flex Focusgroup Icon Image Menu Popup Radio Button Select Skeleton Slider Switch Table Tabs Text Toast Tooltip
  56. <selectmenu id="ambassadors" class="ambassador"> <div slot="button"> <button behavior="button">Pick one<*button> <span behavior="selected-value"><*span>

    <*div> <div popup slot="listbox" behavior="listbox"> <div class="grid"> <option value="benedek" checked>Benedek<*option> <option value="carmen">Carmen<*option> <option value="jeremias">Jeremias<*option> <*div> <*div> <*selectmenu> selectmenu and popup open-ui.org/prototypes/selectmenu Not ready yet...
  57. microsoftedge.github.io/Demos/selectmenu/

  58. const dialog = document.querySelector('dialog'); dialog.showModal(); // to close the dialog

    use `close` dialog.close(); A new Dialog API
  59. web.dev/building-a-dialog-component/

  60. View transitions Huge game changer alert!

  61. async function navigate(data) { if (!document.createDocumentTransition) { await updateTheDOMSomehow(data); return;

    } const transition = document.createDocumentTransition(); await transition.start(async () =. { await updateTheDOMSomehow(); }); }
  62. View transitions SPA

  63. MPA

  64. github.com/WICG/view-transitions

  65. front-end.social/@jensimmons/109423185383982313

  66. TypeScript goes mainstream...

  67. 2021.stateofjs.com/en-US/opinions

  68. octoverse.github.com/2022/top-programming-languages

  69. Do I really need this?

  70. None
  71. /** * @param {string} p1 - A string param. *

    @param {string=} p2 - An optional param (Closure syntax) * @param {string} [p3] - Another optional param (JSDoc syntax). * @param {string} [p4="test"] - An optional param with a default value * @return {string} This is the result *( function someMethod(p1, p2, p3, p4 = 'test') { // TODO }
  72. function someMethod( p1: string, p2?: string, p3?: string, p4 =

    "test" ): string { // TODO }
  73. TypeScript Less time spent in docs Fewer bugs Max developer

    productivity
  74. github.com/tc39/proposal-type-annotations

  75. TypeScript is the language we need for complex stu!.

  76. None
  77. trpc.io

  78. The state of the web

  79. None
  80. Everybody uses React because everybody uses React because everybody uses

    React.
  81. But what for?

  82. Video platforms Blogs Shops Image & Illustration software Marketing sites

    Games Productivity Apps PWAs Streaming sites Social Networks
  83. Website Web App

  84. Website Web App Grey zone

  85. Website Web App Grey zone

  86. MPA vs. SPA Multi Page App Single Page App

  87. First render (All of it!) index.html main.css jQuery.js A Fetch-Render

    Waterfall some-spaghetti.js DB Calls API Calls API Calls API Calls Server Browser index.html DB Calls API Calls API Calls API Calls All done!
  88. <App> <Sidebar> <Nav /1 <*Sidebar> <Main> <TweetBox /1 <Tweets /1

    <*Main> <SideBar> <Trends /1 <OtherNonSense /1 <*SideBar> <*App> App Sidebar Nav Main TweetBox Tweets SideBar Trends OtherNonSense Data for OtherNonSense Data for Trends Data for Tweets A Render-Fetch Waterfall (aka "fetch as you render")
  89. <App> <Sidebar> <Nav /1 <*Sidebar> <Main> <TweetBox /1 <Tweets /1

    <*Main> <SideBar> <Trends /1 <OtherNonSense /1 <*SideBar> <*App> App Sidebar Nav Main TweetBox Tweets SideBar Trends OtherNonSense Data for OtherNonSense Data for Trends Data for Tweets A Render-Fetch Waterfall (aka "fetch as you render") Network? CPU? Memory?
  90. You can make your server fast, but you can't control

    the user's network. Remix docs
  91. The JAMStack era

  92. The Jamstack era

  93. The modern web development era?

  94. None
  95. SSR Server Side Rendering

  96. SSR Server Side Rendering CSR Client Side Rendering

  97. SSR Server Side Rendering CSR Client Side Rendering SSG Static

    Site Rendering
  98. SSR Server Side Rendering CSR Client Side Rendering SSG Static

    Site Rendering DPR Incremental Static Regeneration Distributed Persistent Rendering ISR
  99. What should you use? As always, it depends...

  100. ... but every tech choice has trade o!!

  101. None
  102. None
  103. None
  104. None
  105. None
  106. None
  107. None
  108. Islands

  109. None
  110. www.patterns.dev/posts/islands-architecture/ jasonformat.com/islands-architecture/

  111. We'll live on the edge Partially at least

  112. Server delivering HTML CSS, JavaScript, Images coming from a CDN

  113. HTML, CSS, JavaScript, Images coming from a CDN

  114. HTML, CSS, JavaScript, Images coming from a CDN Edge compute

  115. None
  116. None
  117. None
  118. We yet have to learn what "edge" means but frameworks

    will lead the way.
  119. Tooling advances and moves away from JavaScript

  120. esbuild.github.io

  121. swc.rs rome.tools

  122. Testing evolved

  123. Slide from my 2019 talk

  124. None
  125. None
  126. None
  127. // @ts-check const { test, expect } = require("@playwright/test"); test.describe("navigation",

    () =. { test.beforeEach(async ({ page }) =. { // Go to the starting url before each test. await page.goto("https://playwright.dev/"); }); test("main navigation", async ({ page }) =. { // Assertions use the expect API. await expect(page).toHaveURL("https://playwright.dev/"); }); });
  128. npx playwright test -,workers 4 // playwright.config.js const config =

    { workers: process.env.CI ? 2 : undefined, }; module.exports = config;
  129. const button = page.locator('button') await page.locator(click) expect(button).toBeHidden() Auto-wait and web-first

    assertions make waitFor statements redundant.
  130. Playwright testing (one moment in time) Playwright monitoring (over time)

  131. Will we move up the stack?

  132. www.youtube.com/watch?v=hWjT_OOBdOc

  133. Higher level components <Image alt="Mountains" src="/mountains.jpg" placeholder="blur" blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={700}

    height={475} style={{ maxWidth: '100%', height: 'auto', }} /1 next/image
  134. // pages/_app.js import { Inter } from '@next/font/google' // If

    loading a variable font, you don't need to specify the font weight const inter = Inter({ subsets: ['latin'] }) export default function MyApp({ Component, pageProps }) { return ( <main className={inter.className}> <Component {..&pageProps} /1 <*main> ) } next/image Higher level components
  135. Let's see where we'll go next...

  136. Container Queries :has() View Transitions AVIF <selectmenue> Playwright Rendering patterns

    Popup Edge Compute End-to-end Type Safety Rust/Go Tooling
  137. How to stay up to date?

  138. github.com/mdn/browser-compat-data/releases

  139. webweekly.email

  140. javascriptweekly.com wdrl.info esnextnews.com webtoolsweekly.com bytes.dev

  141. www.stefanjudis.com/blogroll/

  142. None
  143. You can't always be cutting edge...

  144. ... use what works for you!

  145. @stefanjudis www.stefanjudis.com Thanks.