Things you should know about Frontend Development in 2022

Transcript

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

   View Slide

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

   View Slide

3. Good old times!
   

   View Slide

4. Disclaimer
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. webweekly.email
   

   View Slide

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

   View Slide

10. It's fine to disagree...
    (Back then and today)
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. The state
    of the platform
    

    View Slide

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!
    

    View Slide

18. AVIF arrived!
    2000 x 1333px
    Original
    333KB
    MozJPG
    115KB
    Webp
    72KB
    AVIF
    32KB
    

    View Slide

19. *
    caniuse.com/avif
    * Partial support
    

    View Slide

20. 55!
    

    View Slide

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()
    

    View Slide

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()
    

    View Slide

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
    

    View Slide

24. :has()
    The parent family selector
    Game changer alert!
    

    View Slide

25. form:has(:focus) {}
    form:has(:invalid) {}
    form:has(:valid) {}
    form:has(:placeholder-shown) {}
    Form handling
    codepen.io/jh3y/pen/YzYJLvy
    

    View Slide

26. figure:has(> figcaption) { /$ ..& *( }
    a:not(:has(> svg)) { /$ ..& *( }
    article:has(>h1):has(>h2) { /$ ..& *( }
    h1:has(+ p) { /$ ..& *( }
    form:has(:focus-visible) { /$ ..& *( }
    

    View Slide

27. Hello
    World!
    
    Hello<*div>
    world!<*div>
    <*div>
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. We yet have to discover all
    the new :has() patterns!
    

    View Slide

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

    View Slide

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

    View Slide

36. @container
    Container queries
    Game changer alert!
    

    View Slide

37. 
    Hello world!<*section>
    <*div>
    .container {
    container-type: inline-size;
    container-name: article;
    }
    Hello world!
    

    View Slide

38. 
    Hello world!<*section>
    <*div>
    .container {
    container: article / inline-size;
    }
    Hello world!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

44. 100 vw
    100 vh
    100 cqw
    100 cqh
    New units!
    

    View Slide

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

    View Slide

46. web.dev/viewport-units/
    

    View Slide

47. .posts {
    container-name: posts;
    }
    @container posts (background-color: #f8a100) {
    .post {
    color: #fff;
    }
    }
    The future — Container Style Queries
    

    View Slide

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

    View Slide

49. *
    caniuse.com/css-container-queries
    * Staring with version 109 shipping Jan 2023.
    Container Size Queries
    

    View Slide

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!
    

    View Slide

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!!!
    

    View Slide

52. Nevertheless, the web needs
    more components!
    

    View Slide

53. open-ui.org
    

    View Slide

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
    

    View Slide

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
    

    View Slide

56. 
    
    Pick one<*button>
    <*span>
    <*div>
    
    
    Benedek<*option>
    Carmen<*option>
    Jeremias<*option>
    <*div>
    <*div>
    <*selectmenu>
    selectmenu and popup
    open-ui.org/prototypes/selectmenu Not ready yet...
    

    View Slide

57. microsoftedge.github.io/Demos/selectmenu/
    

    View Slide

58. const dialog = document.querySelector('dialog');
    dialog.showModal();
    // to close the dialog use `close`
    dialog.close();
    A new Dialog API
    

    View Slide

59. web.dev/building-a-dialog-component/
    

    View Slide

60. View transitions
    Huge game changer alert!
    

    View Slide

61. async function navigate(data) {
    if (!document.createDocumentTransition) {
    await updateTheDOMSomehow(data);
    return;
    }
    const transition = document.createDocumentTransition();
    await transition.start(async () =. {
    await updateTheDOMSomehow();
    });
    }
    

    View Slide

62. View transitions
    SPA
    

    View Slide

63. MPA
    

    View Slide

64. github.com/WICG/view-transitions
    

    View Slide

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

    View Slide

66. TypeScript
    goes mainstream...
    

    View Slide

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

    View Slide

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

    View Slide

69. Do I really need this?
    

    View Slide

70. View Slide

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
    }
    

    View Slide

72. function someMethod(
    p1: string, p2?: string, p3?: string, p4 = "test"
    ): string {
    // TODO
    }
    

    View Slide

73. TypeScript
    Less time spent in docs
    Fewer bugs
    Max developer productivity
    

    View Slide

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

    View Slide

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

    View Slide

76. View Slide

77. trpc.io
    

    View Slide

78. The state of the web
    

    View Slide

79. View Slide

80. Everybody uses React
    because everybody uses React
    because everybody uses React.
    

    View Slide

81. But what for?
    

    View Slide

82. Video platforms Blogs Shops
    Image & Illustration software
    Marketing sites Games
    Productivity Apps PWAs
    Streaming sites Social Networks
    

    View Slide

83. Website Web App
    

    View Slide

84. Website Web App
    Grey zone
    

    View Slide

85. Website Web App
    Grey zone
    

    View Slide

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

    View Slide

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!
    

    View Slide

88. 
    
    <*Sidebar>
    
    <*Main>
    
    <*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")
    

    View Slide

89. 
    
    <*Sidebar>
    
    <*Main>
    
    <*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?
    

    View Slide

90. You can make your server fast,
    but you can't control
    the user's network.
    Remix docs
    

    View Slide

91. The JAMStack era
    

    View Slide

92. The Jamstack era
    

    View Slide

93. The modern web
    development era?
    

    View Slide

94. View Slide

95. SSR
    Server Side
    Rendering
    

    View Slide

96. SSR
    Server Side
    Rendering
    CSR
    Client Side
    Rendering
    

    View Slide

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

    View Slide

98. SSR
    Server Side
    Rendering
    CSR
    Client Side
    Rendering
    SSG
    Static Site
    Rendering
    DPR
    Incremental Static
    Regeneration
    Distributed Persistent
    Rendering
    ISR
    

    View Slide

99. What should you use?
    As always, it depends...
    

    View Slide

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

     View Slide

101. View Slide

102. View Slide

103. View Slide

104. View Slide

105. View Slide

106. View Slide

107. View Slide

108. Islands
     

     View Slide

109. View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

115. View Slide

116. View Slide

117. View Slide

118. We yet have to learn what
     "edge" means but
     frameworks will lead the way.
     

     View Slide

119. Tooling advances and
     moves away from JavaScript
     

     View Slide

120. esbuild.github.io
     

     View Slide

121. swc.rs rome.tools
     

     View Slide

122. Testing evolved
     

     View Slide

123. Slide from my 2019 talk
     

     View Slide

124. View Slide

125. View Slide

126. View Slide

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/");
     });
     });
     

     View Slide

128. npx playwright test -,workers 4
     // playwright.config.js
     const config = {
     workers: process.env.CI ? 2 : undefined,
     };
     module.exports = config;
     

     View Slide

129. const button = page.locator('button')
     await page.locator(click)
     expect(button).toBeHidden()
     Auto-wait and web-first assertions make
     waitFor statements redundant.
     

     View Slide

130. Playwright testing
     (one moment in time)
     Playwright monitoring
     (over time)
     

     View Slide

131. Will we move
     up the stack?
     

     View Slide

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

     View Slide

133. Higher level components
     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
     

     View Slide

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>
     )
     }
     next/image
     Higher level components
     

     View Slide

135. Let's see where
     we'll go next...
     

     View Slide

136. Container Queries :has()
     View Transitions AVIF
     Playwright
     Rendering patterns
     Popup Edge Compute
     End-to-end Type Safety
     Rust/Go Tooling
     

     View Slide

137. How to stay
     up to date?
     

     View Slide

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

     View Slide

139. webweekly.email
     

     View Slide

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

     View Slide

141. www.stefanjudis.com/blogroll/
     

     View Slide

142. View Slide

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

     View Slide

144. ... use what
     works for you!
     

     View Slide

145. @stefanjudis
     www.stefanjudis.com
     Thanks.
     

     View Slide