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.

Transcript

1. Moderne Frontend- Entwicklung 2020 / 03 / 09
 SOFTWARE ARCHITECTURE SUMMIT Joy Heron @iamjoyheron Lucas Dohmen @moonbeamlabs
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