{"id":302876,"date":"2020-02-13T08:13:56","date_gmt":"2020-02-13T15:13:56","guid":{"rendered":"https:\/\/css-tricks.com\/?p=302876"},"modified":"2020-02-14T15:28:44","modified_gmt":"2020-02-14T22:28:44","slug":"why-javascript-is-eating-html","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/why-javascript-is-eating-html\/","title":{"rendered":"Why JavaScript is Eating HTML"},"content":{"rendered":"\n<p>Web development is always changing. One trend in particular has become very popular lately, and it fundamentally goes against the conventional wisdom about how a web page should be made. It is exciting for some but frustrating for others, and the reasons for both are difficult to explain.<\/p>\n\n\n\n<p>A web page is traditionally made up of three separate parts with separate responsibilities: <strong>HTML code<\/strong> defines the structure and meaning of the content on a page, <strong>CSS code<\/strong> defines its appearance, and <strong>JavaScript code<\/strong> defines its behavior. On teams with dedicated designers, HTML\/CSS developers and JavaScript developers, this <a href=\"https:\/\/en.wikipedia.org\/wiki\/Separation_of_concerns\" rel=\"noopener\">separation of concerns<\/a> aligns nicely with job roles: Designers determine the visuals and user interactions on a page, HTML and CSS developers reproduce those visuals in a web browser, and JavaScript developers add the user interaction to tie it all together and \u201cmake it work.\u201d People can work on one piece without getting involved with all three.<\/p>\n\n\n\n<p>In recent years, JavaScript developers have realized that by defining a page\u2019s structure in JavaScript instead of in HTML (using frameworks such as <a href=\"https:\/\/reactjs.org\/\" rel=\"noopener\">React<\/a>), they can simplify the development and maintenance of user interaction code that is otherwise much more complex to build. Of course, when you tell someone that the HTML they wrote needs to be chopped up and mixed in with JavaScript they don\u2019t know anything about, they can (understandably) become frustrated and start asking what the heck we\u2019re getting out of this.<\/p>\n\n\n\n<p>As a JavaScript developer on a cross-functional team, I get this question occasionally and I often have trouble answering it. All of the materials I\u2019ve found on this topic are written for an audience that is already familiar with JavaScript \u2014 which is not terribly useful to those who focus on HTML and CSS. But this <strong>HTML-in-JS<\/strong> pattern (or something else that provides the same benefits) will likely be around for a while, so I think it\u2019s an important thing that everyone involved in web development should understand.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>This article will include code examples for those interested, but my goal is to explain this concept in a way that can be understood without them.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"background-html-css-and-javascript\">Background: HTML, CSS, and JavaScript<\/h3>\n\n\n<p>To broaden the audience of this article as much as possible, I want to give a quick background on the types of code involved in creating a web page and their traditional roles. If you have experience with these, you can skip ahead.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"html-is-for-structure-and-semantic-meaning\">HTML is for structure and semantic meaning<\/h4>\n\n\n<p>HTML (HyperText Markup Language) code defines the structure and meaning of the content on a page. For example, this article&#8217;s HTML contains the text you&#8217;re reading right now, the fact that it is in a paragraph, and the fact that it comes after a heading and before a CodePen.<\/p>\n\n\n\n<p>Let\u2019s say we want to build a simple shopping list app. We might start with some HTML like this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExaoyRG\" src=\"\/\/codepen.io\/anon\/embed\/ExaoyRG?height=350&amp;theme-id=1&amp;slug-hash=ExaoyRG&amp;default-tab=html,result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExaoyRG\" title=\"CodePen Embed ExaoyRG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We can save this code in a file, open it in a web browser, and the browser will display the rendered result. As you can see, the HTML code in this example represents a section of a page that contains a heading reading \u201cShopping List (2 items),\u201d a text input box, a button reading \u201cAdd Item,\u201d and a list with two items reading \u201cEggs\u201d and \u201cButter.\u201d In a traditional website, a user would navigate to an address in their web browser, then the browser would request this HTML from a server, load it and display it. If there are already items in the list, the server could deliver HTML with the items already in place, like they are in this example.<\/p>\n\n\n\n<p>Try to type something in the input box and click the \u201cAdd Item\u201d button. You\u2019ll notice nothing happens. The button isn\u2019t connected to any code that can change the HTML, and the HTML can\u2019t change itself. We\u2019ll get to that in a moment.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"css-is-for-appearance\">CSS is for appearance<\/h4>\n\n\n<p>CSS (Cascading Style Sheets) code defines the appearance of a page. For example, this article&#8217;s CSS contains the font, spacing, and color of the text you&#8217;re reading.<\/p>\n\n\n\n<p>You may have noticed that our shopping list example looks very plain. There is no way for HTML to specify things like spacing, font sizes, and colors. This is where CSS (Cascading Style Sheets) comes in. On the same page as the HTML above, we could add CSS code to style things up a bit:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dyPJXjb\" src=\"\/\/codepen.io\/anon\/embed\/dyPJXjb?height=350&amp;theme-id=1&amp;slug-hash=dyPJXjb&amp;default-tab=css,result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dyPJXjb\" title=\"CodePen Embed dyPJXjb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>As you can see, this CSS changed the font sizes and weights and gave the section a nice background color (designers, please don\u2019t @ me; I know this is still ugly). A developer can write style rules like these and they will be applied consistently to any HTML structure: if we add more <code>&lt;section&gt;<\/code>, <code>&lt;button&gt;<\/code> or <code>&lt;ul&gt;<\/code> elements to this page, they will have the same font changes applied.<\/p>\n\n\n\n<p>The button still doesn\u2019t do anything, though: that\u2019s where JavaScript comes in.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"javascript-is-for-behavior\">JavaScript is for behavior<\/h4>\n\n\n<p>JavaScript code defines the behavior of interactive or dynamic elements on a page. For example, the embedded CodePen examples in this article are powered by JavaScript.<\/p>\n\n\n\n<p>Without JavaScript, to make the Add Item button in our example work would require us to use special HTML to make it submit data back to the server (<code>&lt;form action=\"...\"&gt;<\/code>, if you\u2019re curious). Then the browser would discard the entire page and reload an updated version of the entire HTML file. If this shopping list was part of a larger page, anything else the user was doing would be lost. Scrolled down? You\u2019re back at the top. Watching a video? It starts over. This is how all web applications worked for a long time: any time a user interacted with a webpage, it was as if they closed their web browser and opened it again. That\u2019s not a big deal for this simple example, but for a large complex page which could take a while to load, it\u2019s not efficient for either the browser or the server.<\/p>\n\n\n\n<p><strong>If we want anything to change on a webpage without reloading the entire page, we need JavaScript<\/strong> (<a href=\"https:\/\/www.seguetech.com\/java-vs-javascript-difference\/\" rel=\"noopener\">not to be confused with Java, which is an entirely different language<\/a>\u2026 don\u2019t get me started). Let\u2019s try adding some:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOOdeLY\" src=\"\/\/codepen.io\/anon\/embed\/gOOdeLY?height=325&amp;theme-id=1&amp;slug-hash=gOOdeLY&amp;default-tab=js,result\" height=\"325\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOOdeLY\" title=\"CodePen Embed gOOdeLY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now when we type some text in the box and click the \u201cAdd Item\u201d button, our new item is added to the list and the item count at the top is updated! In a real app, we would also add some code to send the new item to the server in the background so that it will still show up the next time we load the page.<\/p>\n\n\n\n<p>Separating JavaScript from the HTML and CSS makes sense in this simple example. Traditionally, even more complicated interactions would be added this way: HTML is loaded and displayed, and JavaScript runs afterwards to add things to it and change it. As things get more complex, however, we start needing to keep better track of things in our JavaScript.<\/p>\n\n\n\n<p>If we were to keep building this shopping list app, next we\u2019d probably add buttons for editing or removing items from the list. Let\u2019s say we write the JavaScript for a button that removes an item, but we forget to add the code that updates the item total at the top of the page. Suddenly we have a bug: after a user removes an item, the total on the page won\u2019t match the list! Once we notice the bug, we fix it by adding that same <code>totalText.innerHTML<\/code> line from our \u201cAdd Item\u201d code to the \u201cRemove Item\u201d code. Now we have the same code duplicated in more than one place. Later on, let\u2019s say we want to change that code so that instead of \u201c(2 items)\u201d at the top of the page it reads \u201cItems: 2.\u201d We\u2019ll have to make sure we update it in all three places: in the HTML, in the JavaScript for the \u201cAdd Item\u201d button, and in the JavaScript for the \u201cRemove Item\u201d button. If we don\u2019t, we\u2019ll have another bug where that text abruptly changes after a user interaction.<\/p>\n\n\n\n<p>In this simple example, we can already see how quickly these things can get messy. There are ways to organize our JavaScript to make this kind of problem easier to deal with, but as things continue to get more complex, we\u2019ll need to keep restructuring and rewriting things to keep up. As long as HTML and JavaScript are kept separate, a lot of effort can be required to make sure everything is kept in sync between them. That\u2019s one of the reasons why new JavaScript frameworks, like React, have gained traction: they are designed to show the relationships between things like HTML and JavaScript. To understand how that works, we first need to understand just a teeny bit of computer science.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"two-kinds-of-programming\">Two kinds of programming<\/h3>\n\n\n<p>The key concept to understand here involves the distinction between two common programming styles. (There are other programming styles, of course, but we\u2019re only dealing with two of them here.) Most programming languages lend themselves to one or the other of these, and some can be used in both ways. It&#8217;s important to grasp both in order to understand the main benefit of HTML-in-JS from a JavaScript developer&#8217;s perspective.<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/en.wikipedia.org\/wiki\/Imperative_programming\" rel=\"noopener\"><strong>Imperative programming<\/strong><\/a>: The word &#8220;imperative&#8221; here implies commanding a computer to do something. A line of imperative code is a lot like <a href=\"https:\/\/www.learngrammar.net\/a\/examples-of-imperative-sentence\" rel=\"noopener\">an imperative sentence<\/a> in English: it gives the computer a specific instruction to follow. In imperative programming, we must tell the computer exactly <em>how<\/em> to do every little thing we need it to do. In web development, this is starting to be considered &#8220;the old way&#8221; of doing things and it&#8217;s what you do with vanilla JavaScript, or libraries like jQuery. The JavaScript in my shopping list example above is imperative code.<ul><li>Imperative: \u201cDo X, then do Y, then do Z\u201d.<\/li><li>Example: When the user selects this element, add the <code>.selected<\/code> class to it; and when the user de-selects it, remove the <code>.selected<\/code> class from it.<\/li><\/ul><\/li><li><a href=\"https:\/\/en.wikipedia.org\/wiki\/Declarative_programming\" rel=\"noopener\"><strong>Declarative programming<\/strong><\/a>: This is a more abstract layer above imperative programming. Instead of giving the computer instructions, we instead &#8220;declare&#8221; <em>what<\/em> we want the results to be after the computer does something. Our tools (e.g. React) figure out the <em>how<\/em> for us automatically. These tools are built with imperative code on the inside that we don&#8217;t have to pay attention to from the outside.<ul><li>Declarative: \u201cThe result should be XYZ. Do whatever you need to do to make that happen.\u201d<\/li><li>Example: This element has the <code>.selected<\/code> class if the user has selected it.<\/li><\/ul><\/li><\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"html-is-a-declarative-language\">HTML is a declarative language<\/h4>\n\n\n<p>Forget about JavaScript for a moment. Here&#8217;s an important fact: <strong>HTML on its own is a declarative language<\/strong>. In an HTML file, you can <strong>declare<\/strong> something like:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"language-markup\" data-line=\"\" class=\"wp-block-csstricks-code-block\"><code markup=\"tt\">&lt;section>\n  &lt;h1>Hello&lt;\/h1>\n  &lt;p>My name is Mike.&lt;\/p>\n&lt;\/section><\/code><\/pre>\n\n\n\n<p>When a web browser reads this HTML, it will figure out these <strong>imperative steps<\/strong> for you and execute them:<\/p>\n\n\n\n<ol><li>Create a section element<\/li><li>Create a heading element of level 1<\/li><li>Set the inner text of the heading element to \u201cHello\u201d<\/li><li>Place the heading element into the section element<\/li><li>Create a paragraph element<\/li><li>Set the inner text of the paragraph element to \u201cMy name is Mike\u201d<\/li><li>Place the paragraph element into the section element<\/li><li>Place the section element into the document<\/li><li>Display the document on the screen<\/li><\/ol>\n\n\n\n<p>As a web developer, the details of how a browser does these things is irrelevant; all that matters is that it does them. This is a perfect example of the difference between these two kinds of programming. In short, <strong>HTML is a declarative <\/strong><a href=\"https:\/\/en.wikipedia.org\/wiki\/Abstraction_(computer_science)\" rel=\"noopener\"><strong>abstraction<\/strong><\/a><strong> wrapped around a web browser&#8217;s imperative display engine.<\/strong> It takes care of the &#8220;how&#8221; so you only have to worry about the &#8220;what.&#8221; You can enjoy life writing declarative HTML because the fine people at Mozilla or Google or Apple wrote the imperative code for you when they built your web browser.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"javascript-is-an-imperative-language\">JavaScript is an imperative language<\/h4>\n\n\n<p>We\u2019ve already looked at a simple example of imperative JavaScript in the shopping list example above, and I mentioned how the complexity of an app\u2019s features has ripple effects on the effort required to implement them and the potential for bugs in that implementation. Now let\u2019s look at a slightly more complex feature and see how it can be simplified by using a declarative approach.<\/p>\n\n\n\n<p>Imagine a webpage that contains the following:<\/p>\n\n\n\n<ul><li>A list of labelled checkboxes, each row of which changes to a different color when it is selected<\/li><li>Text at the bottom like &#8220;1 of 4 selected&#8221; that should update when the checkboxes change<\/li><li>A &#8220;Select All&#8221; button which should be disabled if all checkboxes are already selected<\/li><li>A &#8220;Select None&#8221; button which should be disabled if no checkboxes are selected<\/li><\/ul>\n\n\n\n<p>Here\u2019s an implementation of this in plain HTML, CSS and imperative JavaScript:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOYveOp\" src=\"\/\/codepen.io\/anon\/embed\/gOYveOp?height=500&amp;theme-id=1&amp;slug-hash=gOYveOp&amp;default-tab=js,result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOYveOp\" title=\"CodePen Embed gOYveOp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"explanation\">There isn\u2019t much CSS code here because I\u2019m using the wonderful <a href=\"https:\/\/www.patternfly.org\/\" rel=\"noopener\">PatternFly design system<\/a>, which provides most of the CSS for my example. I imported their CSS file in the CodePen settings.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"all-the-small-things\">All the small things<\/h4>\n\n\n<p>In order to implement this feature with imperative JavaScript, we need to give the browser several granular instructions. This is the English-language equivalent to the code in my example above:<\/p>\n\n\n\n<ul><li>In our HTML, we declare the initial structure of the page:<ul><li>There are four row elements, each containing a checkbox. The third box is checked.<\/li><li>There is some summary text which reads &#8220;1 of 4 selected.&#8221;<\/li><li>There is a &#8220;Select All&#8221; button which is enabled.<\/li><li>There is a &#8220;Select None&#8221; button which is disabled.<\/li><\/ul><\/li><li>In our JavaScript, we write instructions for what to change when each of these events occurs:<ul><li>When a checkbox changes from unchecked to checked:<ul><li>Find the row element containing the checkbox and add the <code>.selected<\/code> CSS class to it.<\/li><li>Find all the checkbox elements in the list and count how many are checked and how many are not checked.<\/li><li>Find the summary text element and update it with the checked number and the total number.<\/li><li>Find the &#8220;Select None&#8221; button element and enable it if it was disabled.<\/li><li>If all checkboxes are now checked, find the &#8220;Select All&#8221; button element and disable it.<\/li><\/ul><\/li><li>When a checkbox changes from checked to unchecked:<ul><li>Find the row element containing the checkbox and remove the <code>.selected<\/code> class from it.<\/li><li>Find all the checkbox elements in the list and count how many are checked and not checked.<\/li><li>Find the summary text element and update it with the checked number and the total number.<\/li><li>Find the &#8220;Select All&#8221; button element and enable it if it was disabled.<\/li><li>If all checkboxes are now unchecked, find the &#8220;Select None&#8221; button element and disable it.<\/li><\/ul><\/li><li>When the &#8220;Select All&#8221; button is clicked:<ul><li>Find all the checkbox elements in the list and check them all.<\/li><li>Find all the row elements in the list and add the <code>.selected<\/code> class to them.<\/li><li>Find the summary text element and update it.<\/li><li>Find the &#8220;Select All&#8221; button and disable it.<\/li><li>Find the &#8220;Select None&#8221; button and enable it.<\/li><\/ul><\/li><li>When the &#8220;Select None&#8221; button is clicked:<ul><li>Find all the checkbox elements in the list and uncheck them all.<\/li><li>Find all the row elements in the list and remove the <code>.selected<\/code> class from them.<\/li><li>Find the summary text element and update it.<\/li><li>Find the &#8220;Select All&#8221; button and enable it.<\/li><li>Find the &#8220;Select None&#8221; button and disable it.<\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\n\n\n<p>Wow. That&#8217;s a lot, right? Well, we better remember to write code for each and every one of those things. <strong>If we forget or screw up any of those instructions, we will end up with a bug<\/strong> where the totals don&#8217;t match the checkboxes, or a button is enabled that doesn&#8217;t do anything when you click it, or a row ends up with the wrong color, or something else we didn\u2019t think of and won\u2019t find out about until a user complains.<\/p>\n\n\n\n<p>The big problem here is that there is no <strong><a href=\"https:\/\/en.wikipedia.org\/wiki\/Single_source_of_truth\" rel=\"noopener\">single source of truth<\/a><\/strong> for the <a href=\"https:\/\/en.wikipedia.org\/wiki\/State_(computer_science)\" rel=\"noopener\"><strong>state<\/strong><\/a> of our app, which in this case is \u201cwhich checkboxes are checked?\u201d The checkboxes know whether or not they are checked, of course, but, the row styles also have to know, the summary text has to know, and each button has to know. Five copies of this information are stored separately all around the HTML, and when it changes in any of those places the JavaScript developer needs to catch that and write imperative code to keep the others in sync.<\/p>\n\n\n\n<p>This is still only a simple example of one small component of a page. If that sounds like a headache, imagine how complex and fragile an application becomes when you need to write the whole thing this way. For many complex modern web applications, it\u2019s not a scalable solution.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"moving-towards-a-single-source-of-truth\">Moving towards a single source of truth<\/h3>\n\n\n<p>Tools, like React, allow us to use JavaScript in a declarative way. Just as HTML is a declarative abstraction wrapped around the web browser\u2019s display instructions, <strong>React is a declarative abstraction wrapped around JavaScript.<\/strong><\/p>\n\n\n\n<p>Remember how HTML let us focus on the structure of a page and not the details of how the browser displays that structure? Well, when we use React, we can focus on the structure again by defining it based on data stored in a single place. When that source of truth changes, React will update the structure of the page for us automatically. It will take care of the imperative steps behind the scenes, just like the web browser does for HTML. (Although React is used as an example here, this concept is not unique to React and is used by other frameworks, such as Vue.)<\/p>\n\n\n\n<p>Let&#8217;s go back to our list of checkboxes from the example above. In this case, the truth we care about is simple: which checkboxes are checked? The other details on the page (e.g. what the summary says, the color of the rows, whether or not the buttons are enabled) are effects derived from that same truth. So, why should they need to have their own copy of this information? They should just use the single source of truth for reference, and everything on the page should &#8220;just know&#8221; which checkboxes are checked and conduct themselves accordingly. You might say that the row elements, summary text, and buttons should all be able to automatically <em>react<\/em> to a checkbox being checked or unchecked. (See what I did there?)<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"tell-me-what-you-want-what-you-really-really-want\">Tell me what you want (what you really, really want)<\/h4>\n\n\n<p>In order to implement this page with React, we can replace the list with a few simple declarations of facts:<\/p>\n\n\n\n<ul><li>There is a list of true\/false values called <code>checkboxValues<\/code> that represents which boxes are checked.<ul><li>Example: &nbsp;<code>checkboxValues = [false, false, true, false]<\/code><\/li><li>This list represents the <strong>truth<\/strong> that we have four checkboxes, and that the third one is checked.<\/li><\/ul><\/li><li>For each value in <code>checkboxValues<\/code>, there is a row element which:<ul><li>has a CSS class called <code>.selected<\/code> if the value is true, and<\/li><li>contains a checkbox, which is checked if the value is true.<\/li><\/ul><\/li><li>There is a summary text element that contains the text &#8220;<code>{x}<\/code> of <code>{y}<\/code> selected&#8221; where <code>{x}<\/code> is the number of true values in <code>checkboxValues<\/code> and <code>{y}<\/code> is the total number of values in <code>checkboxValues<\/code>.<\/li><li>There is a &#8220;Select All&#8221; button that is enabled if there are any false values in <code>checkboxValues<\/code>.<\/li><li>There is a &#8220;Select None&#8221; button that is enabled if there are any true values in <code>checkboxValues<\/code>.<\/li><li>When a checkbox is clicked, its corresponding value changes in <code>checkboxValues<\/code>.<\/li><li>When the &#8220;Select All&#8221; button is clicked, it sets all values in <code>checkboxValues<\/code> to true.<\/li><li>When the &#8220;Select None&#8221; button is clicked, it sets all values in <code>checkboxValues<\/code> to false.<\/li><\/ul>\n\n\n\n<p>You&#8217;ll notice that the last three items are still imperative instructions (&#8220;When this happens, do that&#8221;), but that&#8217;s the only imperative code we need to write. It&#8217;s three lines of code, and they all update the single source of truth. The rest of those bullets are declarations (&#8220;there is a&#8230;&#8221;) which are now built right into the definition of the page&#8217;s structure. In order to do this, we write our elements in a special JavaScript <a href=\"https:\/\/en.wikipedia.org\/wiki\/Syntax\" rel=\"noopener\">syntax<\/a> provided by React called JSX, which resembles HTML but can contain JavaScript logic. That gives us the ability to mix logic like &#8220;if&#8221; and &#8220;for each&#8221; with the HTML structure, so the structure can be different depending on the contents of <code>checkboxValues<\/code> at any given time.<\/p>\n\n\n\n<p>Here\u2019s the same shopping list example as above, this time implemented with React:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNeyWOO\" src=\"\/\/codepen.io\/anon\/embed\/WNeyWOO?height=500&amp;theme-id=1&amp;slug-hash=WNeyWOO&amp;default-tab=js,result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNeyWOO\" title=\"CodePen Embed WNeyWOO\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>JSX is definitely weird. When I first encountered it, it just felt wrong. My initial reaction was, \u201cWhat the heck is this? HTML doesn\u2019t belong in JavaScript!\u201d I wasn\u2019t alone. That said, it\u2019s not HTML, but rather <a href=\"https:\/\/reactjs.org\/docs\/jsx-in-depth.html\" rel=\"noopener\">JavaScript dressed up to look like HTML<\/a>. It is also quite powerful.<\/p>\n\n\n\n<p>Remember that list of 20 imperative instructions above? Now we have three. For the price of defining our HTML inside our JavaScript, the rest of them come for free. <strong>React just does them for us<\/strong> whenever <code>checkboxValues<\/code> changes.<\/p>\n\n\n\n<p>With this code, it is now <strong>impossible<\/strong> for the summary to not match the checkboxes, or for the color of a row to be wrong, or for a button to be enabled when it should be disabled. There is an entire category of bugs which are now impossible for us to have in our app: <strong>sources of truth being out of sync<\/strong>. Everything flows down from the single source of truth, and we developers can write less code and sleep better at night. Well, JavaScript developers can, at least\u2026<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"its-a-tradeoff\">It&#8217;s a trade-off<\/h3>\n\n\n<p>As web applications become more complex, maintaining the classic separation of concerns between HTML and JavaScript comes at an increasingly painful cost. HTML was originally designed for static documents, and in order to add more complex interactive functionality to those documents, imperative JavaScript has to keep track of more things and become more confusing and fragile.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"the-upside-predictability-reusability-and-composition\">The upside: predictability, reusability and composition<\/h4>\n\n\n<p>The ability to use a single source of truth is the most important benefit of this pattern, but the trade-off gives us other benefits, too. Defining elements of our page as JavaScript code means that we can turn chunks of it into reusable components, preventing us from copying and pasting the same HTML in multiple places. If we need to change a component, we can make that change in one place and it will update everywhere in our application (or in many applications, if we\u2019re publishing reusable components to other teams).<\/p>\n\n\n\n<p>We can take these simple components and compose them together like LEGO bricks, creating more complex and useful components, without making them too confusing to work with. And if we\u2019re using components built by others, we can easily update them when they release improvements or fix bugs without having to rewrite our code.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"the-downside-its-javascript-all-the-way-down\">The downside: it\u2019s JavaScript all the way down<\/h4>\n\n\n<p>All of those benefits do come at a cost. There are good reasons people value keeping HTML and JavaScript separate, and to get these other benefits, we need to combine them into one. As I mentioned before, moving away from simple HTML files complicates the workflow of someone who didn\u2019t need to worry about JavaScript before. It may mean that someone who previously could make changes to an application on their own must now learn additional complex skills to maintain that autonomy.<\/p>\n\n\n\n<p>There can also be technical downsides. For example, some tools like linters and parsers expect regular HTML, and some third-party imperative JavaScript plugins can become harder to work with. Also, JavaScript isn\u2019t the best-designed language; it\u2019s just what we happen to have in our web browsers. Newer tools and features are making it better, but it still has some pitfalls you need to learn about before you can be productive with it.<\/p>\n\n\n\n<p>Another potential problem is that when the semantic structure of a page is broken up into abstract components, it can become easy for developers to stop thinking about what actual HTML elements are being generated at the end. Specific HTML tags like <code>&lt;section&gt;<\/code> and <code>&lt;aside&gt;<\/code> have specific semantic meanings that are lost when using generic tags like <code>&lt;div&gt;<\/code> and <code>&lt;span&gt;<\/code>, even if they look the same visually on a page. This is especially important for accessibility. For example, these choices will impact how screen reader software behaves for visually impaired users. It might not be the most exciting part, but JavaScript developers should always remember that semantic HTML is <a href=\"https:\/\/www.petelambert.com\/journal\/html-is-the-web\/\" rel=\"noopener\">the most important part<\/a> of a web page.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"use-it-if-it-helps-you-not-because-its-whats-hot-right-now\">Use it if it helps you, not because it\u2019s \u201cwhat\u2019s hot right now\u201d<\/h3>\n\n\n<p>It\u2019s become a trend for developers to reach for frameworks on every single project. Some people are of the mindset that separating HTML and JavaScript is obsolete, but this isn\u2019t true. For a simple static website that doesn\u2019t need much user interaction, it\u2019s not worth the trouble. The more enthusiastic React fans might disagree with me here, but <strong>if all your JavaScript is doing is creating a non-interactive webpage, you shouldn\u2019t be using JavaScript<\/strong>. JavaScript doesn\u2019t load as fast as regular HTML, so if you\u2019re not getting a significant developer experience or code reliability improvement, it\u2019s doing more harm than good.<\/p>\n\n\n\n<p>You also don\u2019t have to build your entire website in React! Or Vue! Or Whatever! A lot of people don\u2019t know this because all the tutorials out there show how to use React for the whole thing. If you only have one little complex widget on an otherwise simple website, <a href=\"https:\/\/reactjs.org\/docs\/add-react-to-a-website.html\" rel=\"noopener\">you can use React for that one component<\/a>. You don\u2019t always need to worry about webpack or Redux or Gatsby or any of the other crap people will tell you are \u201cbest practices\u201d for your React app.<\/p>\n\n\n\n<p>For a sufficiently complex application, declarative programming is absolutely worth the trouble. It is a game changer that has empowered developers the world over to build amazing, robust and reliable software with confidence and without having to sweat the small stuff. Is React in particular the best possible solution to these problems? No. Will it just be replaced by the next thing? Eventually. But declarative programming is not going anywhere, and the next thing will probably just do it better.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"whats-this-ive-heard-about-cssinjs\">What\u2019s this I\u2019ve heard about CSS-in-JS?<\/h3>\n\n\n<p>I\u2019m not touching that one.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web development is always changing. One trend in particular has become very popular lately, and it fundamentally goes against the conventional wisdom about how a web page should be made. It is exciting for some but frustrating for others, and the reasons for both are difficult to explain. A web page is traditionally made up [&hellip;]<\/p>\n","protected":false},"author":274682,"featured_media":283878,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[11208,557,1263],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/js-pattern.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":307322,"url":"https:\/\/css-tricks.com\/the-title-front-end-developer-is-obsolete\/","url_meta":{"origin":302876,"position":0},"title":"\u201cThe title \u2018Front-End Developer\u2019 is obsolete.\u201d","date":"April 24, 2020","format":false,"excerpt":"That title is from the opening tweet of a thread from Benjamin De Cock. I wouldn't go that far, myself. What I like about the term is that \u2018Front-End\u2019 literally means the browser, and while the job has been changing quite a lot \u2014 and is perhaps fracturing before our\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/cogs-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":358612,"url":"https:\/\/css-tricks.com\/embrace-the-platform\/","url_meta":{"origin":302876,"position":1},"title":"Embrace the Platform","date":"December 13, 2021","format":false,"excerpt":"So what is the one thing that people can do is to make their website better? To answer that, let's take a step back in time \u2026 The year is 1998, and the web is on the rise. In an attempt to give a high-level overview of the architecture of\u2026","rel":"","context":"In &quot;2021 End-of-Year Thoughts&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/toolbox-frameworks-scaled.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":321530,"url":"https:\/\/css-tricks.com\/the-widening-responsibility-for-front-end-developers\/","url_meta":{"origin":302876,"position":2},"title":"The Widening Responsibility for Front-End Developers","date":"October 7, 2020","format":false,"excerpt":"This is an extended version of my essay \u201cWhen front-end means full-stack\u201d which was published in the wonderful Increment magazine put out by Stripe. It\u2019s also something of an evolution of a couple other of my essays, \u201cThe Great Divide\u201d and \u201cOoops, I guess we\u2019re full-stack developers now.\u201d","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/tree.png?fit=1200%2C596&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":189361,"url":"https:\/\/css-tricks.com\/sponsor-statico-io-front-end-optimization-made-easy\/","url_meta":{"origin":302876,"position":3},"title":"Sponsor: statico.io &#8211; front end optimization made easy","date":"November 27, 2014","format":false,"excerpt":"statico.io offers front end optimization as a service for web designers and developers. The service optimizes HTML, CSS, JavaScript, fonts, and images, with simple annotations like . It can also integrate with a CDN to deliver the optimized static assets. It's free for sites up to 10,000 monthly unique visits.\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":158614,"url":"https:\/\/css-tricks.com\/abstraction-in-web-languages-and-variables-and-stuff\/","url_meta":{"origin":302876,"position":4},"title":"About Variables in CSS and Abstractions in Web Languages","date":"December 18, 2013","format":false,"excerpt":"Variables are coming to CSS. They already have implementations, so there is no stopping it now. Firefox has them in version 29 and Chrome has them unprefixed in 29+ if you have the \"Enable experimental Web Platform features\" flag turned on. To be clear, no amount of arguing on whether\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":304009,"url":"https:\/\/css-tricks.com\/inspiring-high-school-students-with-html-and-css\/","url_meta":{"origin":302876,"position":5},"title":"Inspiring high school students with HTML and CSS","date":"February 21, 2020","format":false,"excerpt":"Here\u2019s a heartwarming post from Stephanie Stimac on her experience teaching kids the very basics of web development: [...] the response from that class of high school students delighted me and grounded me in a way I haven't experienced before. What I view as a simple code was absolute magic\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/stephaniestimac-demo.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/js-pattern.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/302876"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/274682"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=302876"}],"version-history":[{"count":11,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/302876\/revisions"}],"predecessor-version":[{"id":303846,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/302876\/revisions\/303846"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/283878"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=302876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=302876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=302876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}