Things you should know about Frontend Development in 2022

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?
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!.
77. trpc.io
78. The state of the web
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?
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!!
108. Islands
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
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
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/
143. You can't always be cutting edge...
144. ... use what works for you!
145. @stefanjudis www.stefanjudis.com Thanks.