Tweet
Tweet

Slide 1

Slide 1 text

Moderne Frontend- Entwicklung 2020 / 03 / 09
 SOFTWARE ARCHITECTURE SUMMIT Joy Heron @iamjoyheron Lucas Dohmen @moonbeamlabs

Slide 2

Slide 2 text

2

Slide 3

Slide 3 text

The role of JS in modern Web applications 3 Moderne Frontend Entwicklung

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Searchability Crawler Server GET / Static HTML Snapshot API run App AJAX Fun… Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

13 Moderne Frontend Entwicklung “All your users are non-JS users while they‘re downloading your JS” Jake Archibald, developer advocate for Google Chrome

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

22 Moderne Frontend Entwicklung “JavaScript is the most expensive part of your page” Addy Osmani, Speed team lead for Google Chrome

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Web Component Design 24 Test your app on real, low-cost devices and slow networks (No, an emulator is not enough)

Slide 25

Slide 25 text

25 Moderne Frontend Entwicklung Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlab

Slide 26

Slide 26 text

Web Component Design 26 RAGE CLICKS “15% of users tried to interact sometime between onload and interactive.” Akamai: Metrics That Matter RAGE CLICKS

Slide 27

Slide 27 text

27 Moderne Frontend Entwicklung Hydration is not a progressive enhancement, it‘s an uncanny valley Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 28

Slide 28 text

Now what?

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Web Component Design 33 Let's use the technologies from SPAs, but keep the architecture of the Web.

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Web Component Design 35 The core concept: components

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Finding the Components (The Design Part) 38 Moderne Frontend Entwicklung

Slide 39

Slide 39 text

39 Moderne Frontend Entwicklung How can we find web components? Atomic Design: http://atomicdesign.bradfrost.com/ Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 40

Slide 40 text

40 ACTIVITY: Let’s find some web components! Moderne Frontend Entwicklung

Slide 41

Slide 41 text

41 Can you spot the components?

Slide 42

Slide 42 text

42 First: Try to find the atoms!

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

44 Now: Let’s try to find the molecules!

Slide 45

Slide 45 text

45 Primary Navbar Secondary Navbar Table Header Toggler Button Group

Slide 46

Slide 46 text

46 Any organisms?

Slide 47

Slide 47 text

47 Sortable Table - Tabelle! Main Layout

Slide 48

Slide 48 text

48 Moderne Frontend Entwicklung What’s the difference between an organism and a molecule? Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

50 because this can change, avoid binding your technical structure too closely to atomic design DEMO in aiur Moderne Frontend Entwicklung

Slide 51

Slide 51 text

51 Finally: Templates

Slide 52

Slide 52 text

52 NAVBAR REGION SECONDARY NAVBAR REGION MAIN CONTENT AREA

Slide 53

Slide 53 text

53 Moderne Frontend Entwicklung We’ve broken it into components… which ones should we start with? Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 54

Slide 54 text

54 Moderne Frontend Entwicklung mobile-first ❤ Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

58 Moderne Frontend Entwicklung But we only need a desktop application… …until the you suddenly need mobile too! Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

61 DEMO: let’s look at this component! Moderne Frontend Entwicklung

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

63 Moderne Frontend Entwicklung I N P U T C O M P O N E N T Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 64

Slide 64 text

64 make it work Moderne Frontend Entwicklung

Slide 65

Slide 65 text

65 Moderne Frontend Entwicklung Filter Field Component Step 1: make it work GET /search? col1=my+search+str& col2=Option+1 What we need Option 1 Option 2 Option 3 Search How to get it Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 66

Slide 66 text

66 it works! Moderne Frontend Entwicklung FOR ALL USERS??

Slide 67

Slide 67 text

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!

Slide 68

Slide 68 text

68 Moderne Frontend Entwicklung Currently Edit Text.
 You are currently on a text field inside of web content… Solution Filter Field Component Step 1.2: make it accessible 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

Slide 69

Slide 69 text

69 Moderne Frontend Entwicklung HTML it works FOR ALL USERS! Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 70

Slide 70 text

70 make it pretty Moderne Frontend Entwicklung

Slide 71

Slide 71 text

71 CSS is harder to OVERRIDE than it is to WRITE Moderne Frontend Entwicklung Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 72

Slide 72 text

72 Moderne Frontend Entwicklung CSS Tip: Use minimal CSS to make it easy to override your styles later! Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

74 Moderne Frontend Entwicklung 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

Slide 75

Slide 75 text

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; } + = Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

80 Moderne Frontend Entwicklung CSS it’s pretty! JS no need! HTML it works FOR ALL USERS! Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

82 make it work Moderne Frontend Entwicklung

Slide 83

Slide 83 text

83 Moderne Frontend Entwicklung Sort Button Component Step 1: make it work GET /search?sort=col1_asc What we need Sort Column 1 Ascending Search How to get it HTML Element? Sort Column 2 Descending Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

85 Moderne Frontend Entwicklung HTML it works FOR ALL USERS! Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 86

Slide 86 text

86 make it pretty Moderne Frontend Entwicklung

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

89 Moderne Frontend Entwicklung Sort Column 1 Ascending Sort Column 1 Descending 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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

91 Moderne Frontend Entwicklung Hide our labels visually Sort Column 1 Ascending Sort Column 1 Descending base: checked: focused: Sort Button Component Step 2: make it pretty Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

96 make it work Moderne Frontend Entwicklung

Slide 97

Slide 97 text

97 Moderne Frontend Entwicklung Table Header Component Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlab Step 1: make it work Principal

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

99 Moderne Frontend Entwicklung Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlab HTML it works FOR ALL USERS!

Slide 100

Slide 100 text

100 make it pretty Moderne Frontend Entwicklung

Slide 101

Slide 101 text

R.I.P Whack-A-Mole CSS 101 Moderne Frontend Entwicklung Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlab

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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;

Slide 104

Slide 104 text

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”; }

Slide 105

Slide 105 text

105 Moderne Frontend Entwicklung Table Header Component Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlab Step 2: make it pretty Add new styling classes
Principal …
Note: We have to add an extra
here because if we set `display: grid;` on a th, it no longer behaves like a header Almost there!!!

Slide 106

Slide 106 text

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; } } ❤

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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!

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

110 Moderne Frontend Entwicklung make it work

Slide 111

Slide 111 text

111 Moderne Frontend Entwicklung Tabelle Step 1: make it work … Perform Search Wrap in a form so that we can submit user filter queries Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 112

Slide 112 text

112 DEMO: let’s see how it works without JS! Moderne Frontend Entwicklung ❤ The magic of FORMS

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

114 Moderne Frontend Entwicklung HTML it works FOR ALL USERS! CSS use styling from corporate design Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 115

Slide 115 text

115 make it better Moderne Frontend Entwicklung

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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) … As soon as ta-belle appears in the DOM, connectedCallback will be called! ✨ Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

125 …and much more… Moderne Frontend Entwicklung

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

127 Moderne Frontend Entwicklung HTML it works FOR ALL USERS! CSS it’s pretty! JS faster & dynamic Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 128

Slide 128 text

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!

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

132 Moderne Frontend Entwicklung Spacing Tip: Use a collection of predefined spacing variables to achieve a consistent design. Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

134 DEMO: let’s implement this component together! Moderne Frontend Entwicklung

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

136 Moderne Frontend Entwicklung Introducing Architecture Pattern: Shared Component Library Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

139 Moderne Frontend Entwicklung Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlab

Slide 140

Slide 140 text

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/

Slide 141

Slide 141 text

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

Slide 142

Slide 142 text

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

Slide 143

Slide 143 text

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

Slide 144

Slide 144 text

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

Slide 145

Slide 145 text

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

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

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

Slide 148

Slide 148 text

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

Slide 149

Slide 149 text

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

Slide 150

Slide 150 text

150 Moderne Frontend Entwicklung A simple team Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

Slide 151

Slide 151 text

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

Slide 152

Slide 152 text

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

Slide 153

Slide 153 text

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

Slide 154

Slide 154 text

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

Slide 155

Slide 155 text

155 DEMO: modify template and view changes in the app Moderne Frontend Entwicklung

Slide 156

Slide 156 text

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