Moderne Frontend Entwicklung

Moderne Frontend Entwicklung

Browser bieten heute mehr Features als je zuvor. Sie ermöglichen uns, moderne, schicke Anwendungen zu bauen, die für alle benutzbar sind und durch gute Architektur wartbar sind. Und das, ohne von irgendwelchen Frameworks abhängig zu sein.
In diesem interaktiven Workshop zeigen wir, wie sich ein Webfrontend in wiederverwendbare Komponenten zerlegen lässt. Danach setzen wir ein paar dieser Komponenten beispielhaft um und nutzen dafür moderne Tools, Entwicklungsmethodiken und Architekturmuster. Ansprechen werden wir auch die besonderen Herausforderungen, die bei verteilten Systemen mit Microservices oder Self-Contained-Systems zu Tage treten.

Aa3555d7ac4b01847ec9f60a930f5ccd?s=128

Joy Heron

March 09, 2020
Tweet

Transcript

  1. Moderne Frontend- Entwicklung 2020 / 03 / 09
 SOFTWARE ARCHITECTURE

    SUMMIT Joy Heron @iamjoyheron Lucas Dohmen @moonbeamlabs
  2. 2

  3. The role of JS in modern Web applications 3 Moderne

    Frontend Entwicklung
  4. 4 Moderne Frontend Entwicklung State Business Logic Routing Rendering Logic

    Look & Presentation Logic Server Client HTML Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  5. 5 Moderne Frontend Entwicklung State Business Logic Routing Rendering Logic

    Look & Presentation Logic Server Client JSON Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  6. 6 Moderne Frontend Entwicklung State Business Logic Routing Rendering Logic

    Look & Presentation Logic Server Client JSON JSON API JSON Client Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  7. Why Routing? Solution:
 Store some app
 state in the URI!

    Bookmarks? Deep links? Reload? Browser Server GET / 200 OK… GET /app.js 200 OK… App start… Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  8. 8 Moderne Frontend Entwicklung State Business Logic Routing Rendering Logic

    Look & Presentation Logic Server Client JSON JSON API JSON Client Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  9. 9 Moderne Frontend Entwicklung State Business Logic Routing Rendering Logic

    Look & Presentation Logic Server Client JSON JSON API JSON Client Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  10. Searchability Crawler Server GET / Static HTML Snapshot API run

    App AJAX Fun… Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  11. State Business Logic Routing Rendering Logic Look & Presentation Logic

    Server Client JSON JSON API JSON Client Rendering Logic Routing HTML Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  12. Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs State

    Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client Rendering Logic Routing HTML Same Code
  13. 13 Moderne Frontend Entwicklung “All your users are non-JS users

    while they‘re downloading your JS” Jake Archibald, developer advocate for Google Chrome
  14. Prerendering Browser Server GET / Static HTML Snapshot API run

    App AJAX Fun… FCP TTI load & run App AJAX Fun… Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  15. Hydration How to simulate readiness? What about Events (Clicks etc)?

    How to match server-side HTML to client-side DOM? Browser GET / Static HTML Snapsho FCP TTI load & run App Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  16. State Business Logic Routing Rendering Logic Look & Presentation Logic

    Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  17. State Business Logic Routing Rendering Logic Look & Presentation Logic

    Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML Hydration Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  18. Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs JSON

    API Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON Client (Pre-)Rendering Logic Routing HTML Hydration Business Logic State Business Logic Same functionality,
 different languages! State
  19. Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs State

    Business Logic JSON API Business Logic State Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON Client (Pre-)Rendering Logic Routing HTML Hydration high control, high observability low control, low observability
  20. Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs State

    Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON Client (Pre-)Rendering Logic Routing HTML Hydration Business Logic JSON API State Business Logic Much, much more client side JavaScript
  21. 21 Resilience customElement.define( "my-element", MyElement ); Modern API in JS

    Modern API in CSS .item { display: contents; } Firefox 63: It works Firefox 63: It works Chrome 69: Exception Chrome 69: Skips that line Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  22. 22 Moderne Frontend Entwicklung “JavaScript is the most expensive part

    of your page” Addy Osmani, Speed team lead for Google Chrome
  23. Cost of JavaScript on Reddit.com Pixel 3 Moto G4 Alcatel

    2X 5059D 0 seconds 1 second 2 seconds Main thread Worker thread The cost of JavaScript in 2019
  24. Web Component Design 24 Test your app on real, low-cost

    devices and slow networks (No, an emulator is not enough)
  25. 25 Moderne Frontend Entwicklung Joy Heron / @iamjoyheron & Lucas

    Dohmen / @moonbeamlab
  26. Web Component Design 26 RAGE CLICKS “15% of users tried

    to interact sometime between onload and interactive.” Akamai: Metrics That Matter RAGE CLICKS
  27. 27 Moderne Frontend Entwicklung Hydration is not a progressive enhancement,

    it‘s an uncanny valley Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  28. Now what?

  29. 29 Moderne Frontend Entwicklung • Client-side state handling • Better

    offline support • Closer to desktop model • Better performance • Server-side state handling • Simpler • More resilient & observable • Smaller client footprint • Better performance Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  30. 30 Moderne Frontend Entwicklung Lucas' First Law of Web Development

    If you move routing to the client, a lot of JavaScript will follow. Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  31. 31 Moderne Frontend Entwicklung State Business Logic Routing Rendering Logic

    Look & Presentation Logic Server Client HTML Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  32. 32 Moderne Frontend Entwicklung State Business Logic Routing Rendering Logic

    Look & Presentation Logic Server Client HTML Rendering Logic Look & Presentation Logic JSON/ HTML Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  33. Web Component Design 33 Let's use the technologies from SPAs,

    but keep the architecture of the Web.
  34. 34 Moderne Frontend Entwicklung Pure SPA SSR+RC Pure SSR •

    Large number of users • Basic UX needs • Support for past, present and future devices • Complex global client state • Offline support • Controlled device landscape • Like SSR, but with • more UX needs • Complex component state • Basic offline support Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  35. Web Component Design 35 The core concept: components

  36. 36 Moderne Frontend Entwicklung What is a web component? HTML

    CSS probably JavaScript possibly make it pretty make it better make it work FOR ALL USERS! Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  37. 37 Moderne Frontend Entwicklung Single Responsibility Principle Each Component should

    do ONE thing REALLY WELL If you need more functionality, write a new component and compose them! Benefit of HTML First: HTML composes naturally! Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  38. Finding the Components (The Design Part) 38 Moderne Frontend Entwicklung

  39. 39 Moderne Frontend Entwicklung How can we find web components?

    Atomic Design: http://atomicdesign.bradfrost.com/ Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  40. 40 ACTIVITY: Let’s find some web components! Moderne Frontend Entwicklung

  41. 41 Can you spot the components?

  42. 42 First: Try to find the atoms!

  43. 43 Page Category Page Title Button Table Sort Table Search

    Emphasized Table Cell Table Cell Muted Table Cell Nav Item Logo Amount Progress Bar Label Toggler
  44. 44 Now: Let’s try to find the molecules!

  45. 45 Primary Navbar Secondary Navbar Table Header Toggler Button Group

  46. 46 Any organisms?

  47. 47 Sortable Table - Tabelle! Main Layout

  48. 48 Moderne Frontend Entwicklung What’s the difference between an organism

    and a molecule? Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  49. 49 Moderne Frontend Entwicklung Our understanding of the component boundary

    may change over time! Over the life-cycle of the component, it may seem more “moleculey” or more “organismy” If the metaphor doesn’t work for you, find a different one! (but naming is hard ) Structure is helpful and atomic design is better than no structure! Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  50. 50 because this can change, avoid binding your technical structure

    too closely to atomic design DEMO in aiur Moderne Frontend Entwicklung
  51. 51 Finally: Templates

  52. 52 NAVBAR REGION SECONDARY NAVBAR REGION MAIN CONTENT AREA

  53. 53 Moderne Frontend Entwicklung We’ve broken it into components… which

    ones should we start with? Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  54. 54 Moderne Frontend Entwicklung mobile-first ❤ Joy Heron / @iamjoyheron

    & Lucas Dohmen / @moonbeamlabs
  55. 55 Moderne Frontend Entwicklung Layout Tip: Develop your layout components

    first, so that they behave responsively. Then test the responsive behavior as you add each component! Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  56. 56 Moderne Frontend Entwicklung Develop components in this order… 1.

    Templates / Layout Containers 2. Atoms 3. Molecules 3. Organisms Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  57. 57 Moderne Frontend Entwicklung Joy’s First Law of Web Development

    If you sneak responsive behavior into your web application, somebody will be grateful for it in the future. Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  58. 58 Moderne Frontend Entwicklung But we only need a desktop

    application… …until the you suddenly need mobile too! Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  59. 59 Moderne Frontend Entwicklung Intrinsic Web Design* The default behavior

    of the web (flow+wrap when not enough space) is a good thing! Develop components which adjust their layout based on their available space * Term coined by Jen Simmons Also look have a look at: Every Layout Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  60. 60 Moderne Frontend Entwicklung Create a concept for responsive design

    Where should the content be shown on mobile? Where does it move to on desktop? Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  61. 61 DEMO: let’s look at this component! Moderne Frontend Entwicklung

  62. Building the Components (The Implementation Part) 62 Moderne Frontend Entwicklung

  63. 63 Moderne Frontend Entwicklung I N P U T C

    O M P O N E N T Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  64. 64 make it work Moderne Frontend Entwicklung

  65. 65 Moderne Frontend Entwicklung Filter Field Component Step 1: make

    it work GET /search? col1=my+search+str& col2=Option+1 What we need <input type=“text” name=“col1” /> <select name=“col2”> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> <form action=“/search”> <button type=“submit”>Search</button> </form> How to get it Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  66. 66 it works! Moderne Frontend Entwicklung FOR ALL USERS??

  67. 67 Moderne Frontend Entwicklung Accessibility Tip: If you want to

    make sure you are accessible ACTUALLY USE A SCREEN READER Read this book for more tips!
  68. 68 Moderne Frontend Entwicklung Currently <input type=“text” name=“col1” /> Edit

    Text.
 You are currently on a text field inside of web content… Solution Filter Field Component Step 1.2: make it accessible <input type=“text” name=“col1” aria-label=“Filter Column 1” /> Filter Column 1, Edit Text.
 You are currently on a text field inside of web content… ❤ Let’s test our component with a screen reader to see how it sounds! s
  69. 69 Moderne Frontend Entwicklung HTML it works FOR ALL USERS!

    Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  70. 70 make it pretty Moderne Frontend Entwicklung

  71. 71 CSS is harder to OVERRIDE than it is to

    WRITE Moderne Frontend Entwicklung Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  72. 72 Moderne Frontend Entwicklung CSS Tip: Use minimal CSS to

    make it easy to override your styles later! Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  73. 73 Moderne Frontend Entwicklung CSS Tip: SCOPE your CSS correctly

    to avoid style clashes. (Unfortunately, CSS always has a global scope) Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  74. 74 Moderne Frontend Entwicklung <input class=“tabelle-input” type=“text” name=“col1” aria-label=“Filter Column

    1”/> Add a CSS class to our component which provides a SCOPE for all styles that we add to this component. Filter Field Component Step 2: make it pretty Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  75. 75 Moderne Frontend Entwicklung Add all CSS Rules within the

    correct scope Filter Field Component Step 2: make it pretty .tabelle-input { border: 1px solid #24244c; padding: 0.25rem 0.5rem; } <input class=“tabelle-input” type=“text” name=“col1” aria-label=“Filter Column 1”/> + = Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  76. 76 Moderne Frontend Entwicklung How can I recognize if my

    CSS is incorrectly scoped? What can I do to fix it? Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  77. 77 Moderne Frontend Entwicklung CSS Code Smell Having to override

    styles because your default style doesn’t make sense p { font-size: 2rem; } /* 1rem or 16px is actually the browser default */ .component1 p { font-size: 1rem; } .component2 p { font-size: 1rem; } Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  78. 78 Moderne Frontend Entwicklung Refactoring poorly scoped CSS p {

    font-size: 2rem; } 1. consider in which context you defined the problematic rule I think I defined this for the header area… 2. create a scoped component for that use case .header-area p { font-size: 2rem; } /* no longer have to override back to the default in other components! */ Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  79. 79 Moderne Frontend Entwicklung HTML it works FOR ALL USERS!

    CSS it’s pretty! JS? make it better? ? Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  80. 80 Moderne Frontend Entwicklung CSS it’s pretty! JS no need!

    HTML it works FOR ALL USERS! Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  81. 81 Moderne Frontend Entwicklung S O R T I N

    G C O M P O N E N T Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  82. 82 make it work Moderne Frontend Entwicklung

  83. 83 Moderne Frontend Entwicklung Sort Button Component Step 1: make

    it work GET /search?sort=col1_asc What we need <input id=“col1_asc” type=“radio” name=“sort” value=“col1_asc” /> <label for=“col1_asc”>Sort Column 1 Ascending</label> <form action=“/search”> <button type=“submit”>Search</button> </form> How to get it HTML Element? <input id=“col1_desc” type=“radio” name=“sort” value=“col1_desc” /> <label for=“col1_desc”>Sort Column 2 Descending</label> Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  84. 84 Moderne Frontend Entwicklung Sort Column 1 Ascending, radio button,

    1 of 2
 You are currently on a radio button, 1 of 2, … ❤ Sort Button Component Step 1.2: make it accessible Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  85. 85 Moderne Frontend Entwicklung HTML it works FOR ALL USERS!

    Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  86. 86 make it pretty Moderne Frontend Entwicklung

  87. 87 Moderne Frontend Entwicklung HTML Tip: You can select an

    input element by clicking on it’s HTML label Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  88. 88 Moderne Frontend Entwicklung Visually hide radio buttons and style

    their labels. Sort Button Component Step 2: make it pretty %visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } .sr-only { @extend %visually-hidden; } Source: https://snook.ca/archives/html_and_css/hiding-content-for-accessibility Move content offscreen so it is not visible but can still be read by a screen reader. SCSS Placeholder Selector & Util CSS Class Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  89. 89 Moderne Frontend Entwicklung <input class=“arrow” id=“col1_asc” … /> <label

    class=“arrow—asc” for=“col1_asc”> Sort Column 1 Ascending </label> <input class=“arrow” id=“col1_desc” … /> <label class=“arrow—desc” for=“col1_desc”> Sort Column 1 Descending </label> Visually hide radio buttons and style their labels. .arrow { @extend %visually-hidden; } .arrow—asc { @include icon-before(‘up.svg’, #acacac); cursor: pointer; } .arrow—desc { @include icon-before(‘down.svg’, #acacac); cursor: pointer; } So far, so good: Sort Button Component Step 2: make it pretty Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  90. 90 Moderne Frontend Entwicklung • Style checked, focused, and hover

    input states! • Because our label follows our input, we can style this using pure CSS with a ‘+’! .arrow:checked + .arrow—asc::before, .arrow:checked + .arrow—desc::before { background-color: #535353; } .arrow:focus + .arrow—asc::before, .arrow:focus + .arrow—desc::before, .arrow:hover + .arrow—asc::before, .arrow:hover + .arrow—desc::before { background-color: #6882cb; } Result: focused: checked: Sort Button Component Step 2: make it pretty Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  91. 91 Moderne Frontend Entwicklung Hide our labels visually <input class=“arrow”

    id=“col1_asc” type=“radio” name=“sort” value=“col1_asc” /> <label class=“arrow—asc” for=“col1_asc”> <span class=“visually-hidden”>Sort Column 1 Ascending<span/> </label> <input class=“arrow” id=“col1_desc” type=“radio” name=“sort” value=“col1_desc” /> <label class=“arrow—desc” for=“col1_desc”> <span class=“visually-hidden”>Sort Column 1 Descending<span/> </label> base: checked: focused: Sort Button Component Step 2: make it pretty Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  92. 92 Moderne Frontend Entwicklung Sort Button Component Step 2.2: Double-check

    accessibility Sort Column 1 Ascending, radio button, 1 of 2
 You are currently on a radio button, 1 of 2, … ❤ Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  93. 93 Moderne Frontend Entwicklung HTML it works FOR ALL USERS!

    CSS it’s pretty! JS? make it better? ? Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  94. 94 Moderne Frontend Entwicklung HTML it works FOR ALL USERS!

    CSS it’s pretty! JS we’re ok for now! Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  95. 95 Moderne Frontend Entwicklung H E A D E R

    C O M P O N E N T Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  96. 96 make it work Moderne Frontend Entwicklung

  97. 97 Moderne Frontend Entwicklung Table Header Component Joy Heron /

    @iamjoyheron & Lucas Dohmen / @moonbeamlab Step 1: make it work <th> Principal <Arrows name=“prinz” label=“Principal” /> <Input name=“prinz” label=“Principal” /> </th>
  98. 98 Moderne Frontend Entwicklung Table Header Component Joy Heron /

    @iamjoyheron & Lucas Dohmen / @moonbeamlab Step 1.2: make it accessible Sale Order Name → Sort Sale Order Name Ascending, radio button 1 of 6 Sort Sale Order Name Ascending → → Sort Sale Order Name Descending, radio button 2 of 6 Sort Sale Order Name Descending → Filter Sale Order Name, edit text → → Kunde → Sort Kunde, radio button 3 of 6 Sort Kunde Ascending → → Sort Kunde Descending, radio button 4 of 6 → … We could add a label which is a bit more descriptive, but it sounds ok!…
  99. 99 Moderne Frontend Entwicklung Joy Heron / @iamjoyheron & Lucas

    Dohmen / @moonbeamlab HTML it works FOR ALL USERS!
  100. 100 make it pretty Moderne Frontend Entwicklung

  101. R.I.P Whack-A-Mole CSS 101 Moderne Frontend Entwicklung Joy Heron /

    @iamjoyheron & Lucas Dohmen / @moonbeamlab
  102. 102 Moderne Frontend Entwicklung Tip #8 Design CSS like a

    box of chocolates Design your container with love and place your components inside it. (use Flexbox or CSS Grid) Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlab
  103. 103 Moderne Frontend Entwicklung Table Header Component Joy Heron /

    @iamjoyheron & Lucas Dohmen / @moonbeamlab Step 2: make it pretty Define a CSS Grid for Layout HEADER ▲ ▼ SEARCH .tabelle-header { display: grid; grid-template-areas: “header arrow-asc” “header arrow-desc” “search search”; } 1fr Takes up a proportional amount of grid auto grid-template-columns: 1fr auto;
  104. 104 Moderne Frontend Entwicklung Table Header Component Joy Heron /

    @iamjoyheron & Lucas Dohmen / @moonbeamlab Step 2: make it pretty Place children items in grid HEADER ▲ ▼ SEARCH .tabelle-header { .header { grid-area: header; } .arrow—asc { grid-area: arrow-asc; } .arrow—desc { grid-area: arrow-desc; } .tabelle-input { grid-area: search; } } .tabelle-header { grid-template-areas: “header arrow-asc” “header arrow-desc” “search search”; }
  105. 105 Moderne Frontend Entwicklung Table Header Component Joy Heron /

    @iamjoyheron & Lucas Dohmen / @moonbeamlab Step 2: make it pretty Add new styling classes <table> <th> <div class=“tabelle-header” > <span class=“header” >Principal</span> … </div> </th> </table> Note: We have to add an extra <div> here because if we set `display: grid;` on a th, it no longer behaves like a header Almost there!!!
  106. 106 Moderne Frontend Entwicklung Table Header Component Joy Heron /

    @iamjoyheron & Lucas Dohmen / @moonbeamlab Step 2: make it pretty Center table header vertically .tabelle-header { .header { align-self: center; } } ❤
  107. 107 Moderne Frontend Entwicklung Joy Heron / @iamjoyheron & Lucas

    Dohmen / @moonbeamlab HTML it works FOR ALL USERS! CSS it’s pretty! JS? make it better? ?
  108. 108 Moderne Frontend Entwicklung Joy Heron / @iamjoyheron & Lucas

    Dohmen / @moonbeamlab Joy Heron / @iamjoyheron HTML it works FOR ALL USERS! CSS it’s pretty! JS no need!
  109. 109 Moderne Frontend Entwicklung T A B E L L

    E C O M P O N E N T …the one in which we actually use JavaScript Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  110. 110 Moderne Frontend Entwicklung make it work

  111. 111 Moderne Frontend Entwicklung Tabelle Step 1: make it work

    <form action=“/search”> <table> <thead> <tr> <th> <TabelleHeader name=“col1” label=“Column 1” /> </th> <th> <TabelleHeader name=“col2” label=“Column 2” /> </th> <th> <TabelleHeader name=“col3” label=“Column 3” /> </th> </tr> </thead> <tbody>…</tbody> </table> <button type=“submit”>Perform Search</button> </form> Wrap in a form so that we can submit user filter queries Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  112. 112 DEMO: let’s see how it works without JS! Moderne

    Frontend Entwicklung ❤ The magic of FORMS
  113. 113 Moderne Frontend Entwicklung HTML it works FOR ALL USERS!

    CSS make it pretty? ? Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  114. 114 Moderne Frontend Entwicklung HTML it works FOR ALL USERS!

    CSS use styling from corporate design Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  115. 115 make it better Moderne Frontend Entwicklung

  116. 116 Moderne Frontend Entwicklung JavaScript Tip: Submit forms asynchronously and

    replace your DOM with the result from the server Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  117. 117 Moderne Frontend Entwicklung Tabelle Step 3: make it better

    Submitting forms asynchronously // stringify form data as `application/x-www-form-urlencoded` function serializeForm (form) { … } function submit (form) { const uri = serializeForm(form) return fetch(uri) .then(response => response.text()) } ⚠ Only the application happy path is being considered here. Source: https://github.com/FND/uitil Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  118. 118 Moderne Frontend Entwicklung Tabelle Step 3: make it better

    Replacing the tbody with response HTML function template2dom (htmlString, selector) { let tmp = document.createElement(‘template’) tmp.innerHTML = htmlString.trim() return tmp.content.querySelector(selector) } function replaceTbody (tbody, htmlResponse) { let newTbody = template2dom(htmlResponse, ‘tbody’) tbody.innerHTML = newTBody.innerHTML } ⚠ Only the application happy path is being considered here. Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  119. 119 Moderne Frontend Entwicklung Tabelle Step 3: make it better

    Override default submit behavior function doSubmit (component, form) { let tbody = component.querySelector(‘tbody’) submit(form) .then(html => replaceTBody(tbody, html)) } function initializeSubmit (component, form) { form.addEventListener(‘submit’, ev => { doSubmit(component, form) ev.preventDefault() }) } ⚠ Only the application happy path is being considered here. Who calls the initialize function? Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  120. 120 Moderne Frontend Entwicklung Historically: adding a component dynamically used

    to require BOTH the HTML Markup and a function to initialize it Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  121. 121 Moderne Frontend Entwicklung JavaScript Tip: Use Custom Elements to

    define a custom HTML Element AND define how to initialize it. The browser will then initialize your component for you! Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  122. 122 Moderne Frontend Entwicklung Tabelle Step 3: make it better

    Custom Elements allow you to define how the component needs to be initialized. class Tabelle extends HTMLElement { connectedCallback () { let form = this.form initializeSubmit(this, form) } get form () { return this.querySelector(‘form’) } } customElements.define('ta-belle', Tabelle) <ta-belle> … </ta-belle> As soon as ta-belle appears in the DOM, connectedCallback will be called! ✨ Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  123. 123 Moderne Frontend Entwicklung Tabelle Step 3: make it better

    Custom Elements provide scope: this is bound to the HTML Element itself and it’s native JavaScript API class Tabelle extends HTMLElement { connectedCallback () { let form = this.form initializeSubmit(this, form) } get form () { return this.querySelector(‘form’) } } customElements.define('ta-belle', Tabelle) Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  124. 124 Moderne Frontend Entwicklung Tabelle Step 3: make it better

    Make the implementation more dynamic by triggering submits when an input element changes import { debounce } from ‘util’ class Tabelle extends HTMLElement { connectedCallback () { … form.addEventListener(‘change’, () => doSubmit(this, form)) form.addEventListener(‘keyup’, debounce(300, ev => doSubmit(this, form))) } } Make sure to debounce ‘keyups’ for input[type=text] elements! https://davidwalsh.name/javascript-debounce-function ⚠ Only the application happy path is being considered here. Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  125. 125 …and much more… Moderne Frontend Entwicklung

  126. 126 DEMO: let’s see how it works with JS! Moderne

    Frontend Entwicklung
  127. 127 Moderne Frontend Entwicklung HTML it works FOR ALL USERS!

    CSS it’s pretty! JS faster & dynamic Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  128. 128 Moderne Frontend Entwicklung Joy Heron / @iamjoyheron & Lucas

    Dohmen / @moonbeamlab C O N T A I N E R C O M P O N E N T …the one which we implement together!
  129. 129 Moderne Frontend Entwicklung Joy Heron / @iamjoyheron & Lucas

    Dohmen / @moonbeamlabs Main Layout Component Start with the mobile version page category page title buttons main content
  130. 130 Moderne Frontend Entwicklung Main Layout Component And then consider

    it on a larger viewport page category page title buttons main content Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  131. 131 Moderne Frontend Entwicklung How can I get consistent spacing

    in my design? page category page title buttons main content Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  132. 132 Moderne Frontend Entwicklung Spacing Tip: Use a collection of

    predefined spacing variables to achieve a consistent design. Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  133. 133 Moderne Frontend Entwicklung Predefined Spacing Variables Use a scale

    to define spacing variables // 1rem == 16px $spacer-xxs: 0.25rem; $spacer-xs: 0.5rem; $spacer-sm: 0.75rem; $spacer-md: 1.25rem; $spacer-base: 2rem; $spacer-lg: 3.25rem; $spacer-xl: 5.25rem; $spacer-xxl: 8.5rem; :root { —spacer-xxs: #{$spacer-xxs}; —spacer-xs: #{$spacer-xs}; —spacer-sm: #{$spacer-sm}; —spacer-md: #{$spacer-md}; —spacer-base: #{$spacer-base}; —spacer-lg: #{$spacer-lg}; —spacer-xl: #{$spacer-xl}; —spacer-xxl: #{$spacer-xxl}; } Scale Based on Fibonacci See Also: Modular Scale Sass Variables CSS Custom Properties Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  134. 134 DEMO: let’s implement this component together! Moderne Frontend Entwicklung

  135. Maintaining the Components (The Architecture Part) 135 Moderne Frontend Entwicklung

  136. 136 Moderne Frontend Entwicklung Introducing Architecture Pattern: Shared Component Library

    Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  137. 137 Moderne Frontend Entwicklung Joy Heron / @iamjoyheron & Lucas

    Dohmen / @moonbeamlab Shared Component Library Step 1: Develop components using a pattern library Possible Tools: • aiur • fractal • Pattern Lab • Storybook
  138. 138 Moderne Frontend Entwicklung Shared Component Library Step 2: Use

    a templating language which works both in your pattern library and all of your services Possible Templating languages: • complate • handlebars pattern library Alert.jsx Button.jsx Collapser.jsx Navbar.jsx SCS 1 /* uses JSX templates */ SCS 2 /* uses JSX templates */ SCS 2 /* uses JSX templates */ Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  139. 139 Moderne Frontend Entwicklung Joy Heron / @iamjoyheron & Lucas

    Dohmen / @moonbeamlab
  140. 140 faucet-pipeline Moderne Frontend Entwicklung simple asset pipeline for JS,

    Sass, and static assets opinionated configuration that just works for most basic use cases https://www.faucet-pipeline.org/
  141. pattern library - v0.5.0 Badge.jsx 141 Moderne Frontend Entwicklung Shared

    Component Library Step 3: Publish your library using semantic versioning pattern library - v0.4.0 Alert.jsx Button.jsx Collapser.jsx Navbar.jsx Alert.jsx Button.jsx Collapser.jsx Navbar.jsx pattern library - v0.120.0 Badge.jsx Alert.jsx Alert.jsx Alert.jsx Alert.jsx Alert.jsx Alert.jsx Alert.jsx Collapser.jsx Navbar.jsx ⏱ Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  142. 142 Moderne Frontend Entwicklung Shared Component Library Step 4: Services

    use templates from published library v3.0.65 v3.24.0 SCS 4 v3.4.0 SCS 3 SCS 2 SCS 1 Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  143. 143 Moderne Frontend Entwicklung Shared Component Library Avoid breaking changes

    AS MUCH AS POSSIBLE! v3.0.65 v3.24.0 SCS 4 v3.4.0 SCS 3 SCS 2 SCS 1 SCS only have to pull a new version when they need the changes!! THANKS TO BACKWARD COMPATIBILITY Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  144. 144 Moderne Frontend Entwicklung Benefits of HTML Templates for web

    components Change ONCE, modify all instances Easier to MAINTAIN components over time PUBLISHING templates as a library allows for maximal reuse in projects Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  145. Title Text 145 Web Component Design Photo by Jens Lelie

    on Unsplash We need a big mental shift: From “Let’s Build a Website” to “Let’s maintain a product which other products use as a dependency” - Brad Frost
  146. 146 Moderne Frontend Entwicklung How to make a component backward

    compatible When adding new parameters, make them OPTIONAL or add a default value Instead of breaking a component, create a COPY of the existing implementation and give it a NEW NAME Avoid DEPENDING too strongly on the structure of the component when using it in other components or in UI Tests Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  147. 147 Moderne Frontend Entwicklung Shared Component Library
 in summary: 1.

    Develop components using a pattern library 2. Use a templating language which works both the pattern library and all services 3. Publish library using semantic versioning 4. Use templates in all services guiding principle:
 Avoid breaking changes AS MUCH AS POSSIBLE! Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  148. 148 Moderne Frontend Entwicklung But this is all technical! Where

    are the people? How does this work in a team? Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  149. Components provide a language between backend and frontend 149 Moderne

    Frontend Entwicklung Cross-functional Team Backend Database Platform Frontend Design & UX Design- Dev Fullstack-Dev Fullstack-Dev Frontend- Dev Backend-Dev Devops-Dev Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  150. 150 Moderne Frontend Entwicklung A simple team Joy Heron /

    @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  151. 151 Moderne Frontend Entwicklung A new product with the same

    design system? But what happens when we have to split our teams? Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  152. 152 Moderne Frontend Entwicklung Collaboration with split teams AVOID throwing

    components over the wall! Namespace .star-… Namespace .heart-… Namespace .global-… When combining CSS from different systems, use unique CSS prefixes for all CSS rules! Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  153. 153 Moderne Frontend Entwicklung Designated team to develop component library

    according to corporate design Namespace .star-… Namespace .heart-… Namespace .global-… Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  154. 154 Moderne Frontend Entwicklung There are loads of different team

    constellations but in all of them we want… to RELEASE new versions of our component library quickly as we develop new ideas to UPGRADE to new versions of our component library quickly WITHOUT worrying about breaking changes that's why backwards compatibility is so important Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs
  155. 155 DEMO: modify template and view changes in the app

    Moderne Frontend Entwicklung
  156. 156 Modern Frontend Design faucet-pipeline.org https://github.com/moonglum/aiur Thank you! Joy Heron

    @iamjoyheron Lucas Dohmen @moonbeamlabs https://github.com/innoq/invoicing-example complate.org