You really don’t need all that JavaScript, I promise

A presentation at JSCamp in September 2019 in Bucharest, Romania by Stuart Langridge

Slide 1

Slide 1

Dear Niamh, Hello, darling daughter! I thought I’d take this time to write to you while I’m here on my own with a comfortable chair and nobody’s listening. I’m in Romania! It’s great here! @sil @sil | kryogenix.org kryogenix.org 1

Slide 2

Slide 2

@sil @sil | kryogenix.org kryogenix.org 2

Slide 3

Slide 3

@sil @sil | kryogenix.org kryogenix.org 3

Slide 4

Slide 4

PERFORMANCE @sil @sil | kryogenix.org kryogenix.org 4

Slide 5

Slide 5

@sil @sil | kryogenix.org kryogenix.org 5

Slide 6

Slide 6

@sil @sil | kryogenix.org kryogenix.org 6

Slide 7

Slide 7

@sil @sil | kryogenix.org kryogenix.org 7

Slide 8

Slide 8

First meaningful paint @sil @sil | kryogenix.org kryogenix.org 8

Slide 9

Slide 9

…with lots of HTML @sil @sil | kryogenix.org kryogenix.org 9

Slide 10

Slide 10

Zach Leatherman @zachleat Which has a better First Meaningful Paint time? ① a raw 8.5MB HTML file with the full text of every single one of my 27,506 tweets ② a client rendered React site with exactly one tweet on it (Spoiler: @____lighthouse reports 8.5MB of HTML wins by about 200ms) 6 Sept 2019 @sil @sil | kryogenix.org kryogenix.org twitter.com/zachleat/status/1169998370041208832 10

Slide 11

Slide 11

Code highlighting @sil @sil | kryogenix.org kryogenix.org 11

Slide 12

Slide 12

Although the single HTML le is larger with SSR, total transfer size on the SSR version is ~10K smaller. There is practically zero impact on parsing time even though we know the parsed HTML is twice the size when SSR is in play. remysharp.com/2019/04/09/code-highlighting-server-or-client @sil @sil | kryogenix.org kryogenix.org 12

Slide 13

Slide 13

Outsourcing @sil @sil | kryogenix.org kryogenix.org 13

Slide 14

Slide 14

Alex Russell @slightlylate The takeaway here is that you literally can’t afford desktop or iphone levels of JS if you’re trying to make good web experiences for anyone but the world’s richest users 14 Jun 2019 @sil @sil | kryogenix.org kryogenix.org twitter.com/slightlylate/status/1159551977178591233 14

Slide 15

Slide 15

…SO SERVE LESS…? @sil @sil | kryogenix.org kryogenix.org 15

Slide 16

Slide 16

THE NETWORK @sil @sil | kryogenix.org kryogenix.org 16

Slide 17

Slide 17

@sil @sil | kryogenix.org kryogenix.org 17

Slide 18

Slide 18

AVAILABILITY @sil @sil | kryogenix.org kryogenix.org 18

Slide 19

Slide 19

1.1% OF PEOPLE AREN’T GETTING JAVASCRIPT ENHANCEMENTS gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascriptenhancement/ @sil @sil | kryogenix.org kryogenix.org 19

Slide 20

Slide 20

@sil @sil | kryogenix.org kryogenix.org 20

Slide 21

Slide 21

@sil @sil | kryogenix.org kryogenix.org 21

Slide 22

Slide 22

The proportion of people that have explicitly disabled JavaScript or use a browser that doesn’t support JavaScript only makes up a small slice of people that don’t run JavaScript. gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascriptenhancement/ @sil @sil | kryogenix.org kryogenix.org 22

Slide 23

Slide 23

Everyone has JavaScript, right? YOUR USER REQUESTS YOUR WEB APP HAS THE PAGE LOADED YET? “All your users are non-JS while they’re downloading your JS” — Jake Archibald @sil @sil | kryogenix.org kryogenix.org 23

Slide 24

Slide 24

@sil @sil | kryogenix.org kryogenix.org IT’S LIKE THIS. 24

Slide 25

Slide 25

@sil @sil | kryogenix.org kryogenix.org OR WORSE, THIS. 25

Slide 26

Slide 26

IT’S UNNECESSARILY DIFFICULT @sil @sil | kryogenix.org kryogenix.org 26

Slide 27

Slide 27

@sil @sil | kryogenix.org kryogenix.org 27

Slide 28

Slide 28

Increasingly, there seems to be a sense of fatigue within our industry. Just when you think you’ve got a handle on whatever the latest tool or technology is, something new comes out to replace it. @sil @sil | kryogenix.org kryogenix.org Drew McLellan, 24ways.org/2017/all-that-glisters/ 28

Slide 29

Slide 29

I’ve discovered how many others have felt similarly, overwhelmed by the choices we have as modern developers, always feeling like there’s something we should be doing better. The web is incredible these days, but I’m not sure every app needs to be a Reactbased single-page application, because the complexity is so great in a product’s infancy. Owen Williams, char.gd/blog/2019/you-dont-need-that-hipster-web-framework @sil @sil | kryogenix.org kryogenix.org 29

Slide 30

Slide 30

@sil @sil | kryogenix.org kryogenix.org SASS, JavaScript dialects, NPM, and build tools solve some shortcomings with front-end technologies, but at what cost? I’d argue that for every hour these new technologies have saved me, they’ve cost me another in troubleshooting or 30

Slide 31

Slide 31

@sil @sil | kryogenix.org kryogenix.org In the meantime, I could have broken out any text editor and FTP program and built a full site with plain HTML and CSS in the time it took me to get it all running. And the site would have been easier to maintain in the long-run. 31

Slide 32

Slide 32

@sil @sil | kryogenix.org kryogenix.org I can still take a complete beginner and teach them to build a simple webpage with HTML and CSS, in a day. We don’t need to talk about tools or frameworks, learn how to make a pull request or drag vast amounts of code onto our computer 32

Slide 33

Slide 33

1 <script type=”text/javascript”> 2 function ajaxLoader(url,id) { 3 if (document.getElementById) { 4 var x = (window.ActiveXObject) ? 5 new ActiveXObject(“Microsoft.XMLHTTP”) : new XMLHttpRequest(); 6 } 7 if (x) { showLoader(); x.onreadystatechange = function() { 8 9 10 if (x.readyState == 4 && x.status == 200) { el = document.getElementById(id); el.innerHTML = x.responseText; hideLoader(); }} 11 x.open(“GET”, url, true); 12 x.send(null); 13 }} 14 </script> 15 <span class=”link” onclick=”ajaxLoader(‘page2.html’,’contentLYR’)”>page 2</span> @sil @sil | kryogenix.org kryogenix.org 33

Slide 34

Slide 34

1 <a href=”p2.html”>go to page 2</a> @sil @sil | kryogenix.org kryogenix.org 34

Slide 35

Slide 35

1 var Component = React.createClass({ 2 getInitialState: function() { return {query: ”} }, 3 queryChange: function(evt) { 4 5 }, 6 handleSearch: function() { 7 window.location = ‘/search/’+this.state.query+’/some-action’; 8 }, 9 render: function() { 10 11 @sil @sil | kryogenix.org kryogenix.org this.setState({query: evt.target.value}); return ( <div classname=”component-wrapper”> 12 <input type=”text” value=”{this.state.query}”> 13 <button onclick=”{this.handleSearch()}” classname=”button”>Search</button> 14

</div> 15 ); } }); 35

Slide 36

Slide 36

WHY @sil @sil | kryogenix.org kryogenix.org 36

Slide 37

Slide 37

component reuse libraries of existing code consistent starting point organisational structure best practices @sil @sil | kryogenix.org kryogenix.org 37

Slide 38

Slide 38

AFTER THE FACT @sil @sil | kryogenix.org kryogenix.org 38

Slide 39

Slide 39

@sil @sil | kryogenix.org kryogenix.org 39

Slide 40

Slide 40

@sil @sil | kryogenix.org kryogenix.org 40

Slide 41

Slide 41

link @sil @sil | kryogenix.org kryogenix.org 41

Slide 42

Slide 42

LOSS OF CONTROL @sil @sil | kryogenix.org kryogenix.org 42

Slide 43

Slide 43

@sil @sil | kryogenix.org kryogenix.org 43

Slide 44

Slide 44

LOSS OF CONTROL @sil @sil | kryogenix.org kryogenix.org 44

Slide 45

Slide 45

loss of control reuse HTML different URLs fetch() virtual DOM client-side routing framework @sil @sil | kryogenix.org kryogenix.org 45

Slide 46

Slide 46

@sil @sil | kryogenix.org kryogenix.org 46

Slide 47

Slide 47

@sil @sil | kryogenix.org kryogenix.org 47

Slide 48

Slide 48

CONTROL LOADING @sil @sil | kryogenix.org kryogenix.org 48

Slide 49

Slide 49

@sil @sil | kryogenix.org kryogenix.org 49

Slide 50

Slide 50

<portal> @sil @sil | kryogenix.org kryogenix.org 50

Slide 51

Slide 51

@sil @sil | kryogenix.org kryogenix.org 51

Slide 52

Slide 52

a quick demo @sil @sil | kryogenix.org kryogenix.org 52

Slide 53

Slide 53

1 const portal = document.createElement(‘portal’); 2 portal.src = ‘https://jscamp.ro’; 3 document.body.append(portal); 4 portal.activate(); 5 … @sil @sil | kryogenix.org kryogenix.org 53

Slide 54

Slide 54

1 const portal = document.createElement(‘portal’); 2 portal.src = ‘https://jscamp.ro’; 3 document.body.append(portal); 4 … do whatever you want … 5 portal.activate(); @sil @sil | kryogenix.org kryogenix.org 54

Slide 55

Slide 55

so for example, you could animate it @sil @sil | kryogenix.org kryogenix.org 55

Slide 56

Slide 56

1 portal { 2 position: fixed; 3 width: 100%; 4 height: 100%; 5 transform: scale(0.3); 6 transform-origin: 90% 90%; 7 transition: transform 300ms ease-out; 8 box-shadow: 3px 3px 5px black; 9 } 10 portal.expand { 11 transform: scale(1); 12 } @sil @sil | kryogenix.org kryogenix.org 56

Slide 57

Slide 57

1 const portal = document.createElement(‘portal’); 2 portal.src = ‘https://jscamp.ro’; 3 document.body.append(portal); 4 portal.classList.add(‘expand’); 5 portal.addEventListener(‘transitionend’, evt => { 6 portal.activate(); 7 }); @sil @sil | kryogenix.org kryogenix.org 57

Slide 58

Slide 58

solve actual problems @sil @sil | kryogenix.org kryogenix.org 58

Slide 59

Slide 59

@sil @sil | kryogenix.org kryogenix.org 59

Slide 60

Slide 60

separate pages? forgets the scroll position ☹ @sil @sil | kryogenix.org kryogenix.org 60

Slide 61

Slide 61

<frameset>? @sil @sil | kryogenix.org kryogenix.org 61

Slide 62

Slide 62

@sil @sil | kryogenix.org kryogenix.org 62

Slide 63

Slide 63

<frameset>? doesn’t change the URL ☹ @sil @sil | kryogenix.org kryogenix.org 63

Slide 64

Slide 64

SPA? all of this talk up to now ☹ @sil @sil | kryogenix.org kryogenix.org 64

Slide 65

Slide 65

a bunch of hacky JS? ☹ @sil @sil | kryogenix.org kryogenix.org 65

Slide 66

Slide 66

<portal> and postMessage @sil @sil | kryogenix.org kryogenix.org 66

Slide 67

Slide 67

another demo @sil @sil | kryogenix.org kryogenix.org 67

Slide 68

Slide 68

no code in the pages. no change to the pages. just enhance how they work. if your browser supports it. @sil @sil | kryogenix.org kryogenix.org 68

Slide 69

Slide 69

if (“HTMLPortalElement” in window) { document.querySelector(“aside”).addEventListener(“click”, function(e) { if (e.target.nodeName.toLowerCase() == “a”) { e.preventDefault(); } let sidebarScrollPosition = document.querySelector(“aside”).scrollTop; var portal = document.createElement(‘portal’); portal.hidden = true; var u = new URL(e.target.href); u.hash = “”; portal.addEventListener(“message”, e => { portal.activate({data: {sidebarScrollPosition: sidebarScrollPosition}}); }) portal.src = u.href; document.body.appendChild(portal); }, false); window.addEventListener(“portalactivate”, function(e) { if (e.data.sidebarScrollPosition) { document.querySelector(“aside”).scrollTop = e.data.sidebarScrollPosition; } }, false) if (window.portalHost) { window.portalHost.postMessage({done: true, frm: location.pathname}); } } @sil @sil | kryogenix.org kryogenix.org 69

Slide 70

Slide 70

Add React to a Website Use as little or as much React as you need. React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Perhaps you only want to add some “sprinkles of interactivity” to an existing page. React components are a great way to do that. The majority of websites aren’t, and don’t need to be, single-page apps. With a few lines of code and no build tooling, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets. Add React in One Minute @sil @sil | kryogenix.org kryogenix.org 70

Slide 71

Slide 71

Systems status Web server Back end Debruceifier Using coderdiaz/vue-status-indicator. @sil @sil | kryogenix.org kryogenix.org 71

Slide 72

Slide 72

<table><tbody> <tr> <td>Debruceifier</td> <td class=”status”><status-indicator status=”negative”>Negative</status-indicator></td> </tr> </tbody></table> <script src=”vue-status-indicator.min.js”>>/script> <script> for (let el of document.querySelectorAll(“td.status”)) { new Vue({el: el, components: { VueStatusIndicator: VueStatusIndicator } }); } </script> @sil @sil | kryogenix.org kryogenix.org 72

Slide 73

Slide 73

HTML: smarter than it used to be @sil @sil | kryogenix.org kryogenix.org 73

Slide 74

Slide 74

<datalist> <input list=”thelist”> <datalist id=”thelist”> <option>Bruce</option>

<option>Stuart</option> </datalist> Best dressed speaker? @sil @sil | kryogenix.org kryogenix.org 74

Slide 75

Slide 75

<fieldset disabled> disable/enable Enter your name Oranges @sil @sil | kryogenix.org kryogenix.org Apples 75

Slide 76

Slide 76

CSS scroll-snap parent { scroll-snap-type: y mandatory; } child { scroll-snap-align: start; } @sil @sil | kryogenix.org kryogenix.org 76

Slide 77

Slide 77

Ana Tudor @anatudor Just because you don’t understand a simple little CSS solution, it doesn’t mean it’s “weird”/ “crazy”. Goes the other way as well. Adding a ton of extra elements just for the sake of having a pure CSS solution when updating a value from the JS would suffice is just silly. 14 Sept 2019 @sil @sil | kryogenix.org kryogenix.org twitter.com/anatudor/status/1172891778032316416 77

Slide 78

Slide 78

stay in touch @sil @sil | kryogenix.org kryogenix.org 78

Slide 79

Slide 79

flaki @slsoftworks Not knowing stuff is normal. Not using new and shiny tech is okay. Feeling bad for all of these is common. You are not alone. But you are also completely and perfectly fine, and you are adequate. 💖 15 Sept 2019 @sil @sil | kryogenix.org kryogenix.org twitter.com/slsoftworks/status/1173224870362021888 79

Slide 80

Slide 80

ght the good right ght @sil @sil | kryogenix.org kryogenix.org 80

Slide 81

Slide 81

the great thing about standards @sil @sil | kryogenix.org kryogenix.org 81

Slide 82

Slide 82

THE LEADING EDGE @sil @sil | kryogenix.org kryogenix.org 82

Slide 83

Slide 83

So, O darling daughter, you asked, and you probably got a longer answer than you bargained for! @sil @sil | kryogenix.org kryogenix.org 83

Slide 84

Slide 84

So, O darling daughter, you asked, and you probably got a longer answer than you bargained for! Still, now you know! @sil @sil | kryogenix.org kryogenix.org 84

Slide 85

Slide 85

So, O darling daughter, you asked, and you probably got a longer answer than you bargained for! Still, now you know! It’s valuable, what we do as an industry. @sil @sil | kryogenix.org kryogenix.org 85

Slide 86

Slide 86

So, O darling daughter, you asked, and you probably got a longer answer than you bargained for! Still, now you know! It’s valuable, what we do as an industry. We have the power to bring knowledge to the whole world. @sil @sil | kryogenix.org kryogenix.org 86

Slide 87

Slide 87

Still, now you know! It’s valuable, what we do as an industry. We have the power to bring knowledge to the whole world. To connect people together (when they want it), @sil @sil | kryogenix.org kryogenix.org 87

Slide 88

Slide 88

It’s valuable, what we do as an industry. We have the power to bring knowledge to the whole world. To connect people together (when they want it), to be the greatest repository of information that’s ever been known. @sil @sil | kryogenix.org kryogenix.org 88

Slide 89

Slide 89

We have the power to bring knowledge to the whole world. To connect people together (when they want it), to be the greatest repository of information that’s ever been known. I want to keep it that way. @sil @sil | kryogenix.org kryogenix.org 89

Slide 90

Slide 90

To connect people together (when they want it), to be the greatest repository of information that’s ever been known. I want to keep it that way. That’s what I think is important about the web. @sil @sil | kryogenix.org kryogenix.org 90

Slide 91

Slide 91

I want to keep it that way. That’s what I think is important about the web. I love you. @sil @sil | kryogenix.org kryogenix.org 91

Slide 92

Slide 92

the web. I love you. Daddy. @sil @sil | kryogenix.org kryogenix.org 92

Slide 93

Slide 93

the web. I love you. Stuart. @sil @sil | kryogenix.org kryogenix.org 93