{"id":7,"date":"2022-09-08T18:25:00","date_gmt":"2022-09-08T18:25:00","guid":{"rendered":"http:\/\/fem.flywheelsites.com\/?p=7"},"modified":"2024-07-30T08:14:41","modified_gmt":"2024-07-30T13:14:41","slug":"vanilla-javascript-todomvc","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/vanilla-javascript-todomvc\/","title":{"rendered":"Writing a TodoMVC App with Modern Vanilla JavaScript"},"content":{"rendered":"\n

I took a shot at coding TodoMVC with modern (ES6+), vanilla JavaScript<\/a>, and it only took ~170 lines of code and just over an hour! Compare this to the old\/official TodoMVC vanilla JS solution, which has over 900 lines of code<\/a>. An 80%+ reduction in code! I \u2764\ufe0f the new state of JavaScript.<\/p>\n\n\n\n

The code has received over \ud83e\udd29 600 stars on GitHub:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In general, the responses were very positive. But as with all popular things, eventually, they spark debate.<\/p>\n\n\n

\n
\n

Article Series<\/h3>\n <\/header>\n
\n
    \n
  1. \n Writing a TodoMVC App with Modern Vanilla JavaScript<\/a>\n <\/li>\n
  2. \n Patterns for Reactivity with Modern Vanilla JavaScript<\/a>\n <\/li>\n
  3. \n Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript<\/a>\n <\/li>\n <\/ol>\n <\/div>\n<\/div>\n\n\n\n

    React \/ Frameworks vs. Vanilla JS: Top Four Arguments for Frameworks<\/h2>\n\n\n\n

    #1: \u201cFrameworks Enable Declarative UI\u201d<\/h3>\n\n\n\n
    \n

    Modern frameworks like React and Vue don\u2019t exist to fill in the gap left by native JS, they exist so that you write your application in a declarative way where the view is rendered as a function of state.<\/p>\n<\/blockquote>\n\n\n\n

    IMO this is simply a design pattern. Patterns apply in any language.<\/p>\n\n\n\n

    You can accomplish roughly the same thing in vanilla JavaScript. In my code, when the model changes, it fires a save<\/code> event, and then I wire App.render()<\/code> to it, which renders the App using the Todos model.<\/p>\n\n\n

    Todos.addEventListener('save'<\/span>, App.render);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Template strings end up pretty easy to work with when you want to re-render parts of the App from scratch as a framework would:<\/p>\n\n\n
    `\n  <div<\/span> class<\/span>=\"view\"<\/span>><\/span>\n    <input<\/span> class<\/span>=\"toggle\"<\/span> type<\/span>=\"checkbox\"<\/span> ${todo.completed<\/span> ? 'checked<\/span>' :<\/span> ''}><\/span>\n    <label<\/span>><\/span><\/label<\/span>><\/span>\n    <button<\/span> class<\/span>=\"destroy\"<\/span>><\/span><\/button<\/span>><\/span>\n  <\/div<\/span>><\/span>\n  <input<\/span> class<\/span>=\"edit\"<\/span>><\/span>\n`\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    The entire App render<\/code> method is only eleven lines, and it re-renders everything the App needs to based on the state of the App:<\/p>\n\n\n
    render() {\n  const<\/span> count = Todos.all().length;\n  App.$.setActiveFilter(App.filter);\n  App.$.list.replaceChildren(\n    ...this.Todos.all(this<\/span>.filter).map((todo<\/span>) =><\/span> this<\/span>.renderTodo(todo))\n  );\n  App.$.showMain(count);\n  App.$.showFooter(count);\n  App.$.showClear(Todos.hasCompleted());\n  App.$.toggleAll.checked = Todos.isAllCompleted();\n  App.$.displayCount(Todos.all('active'<\/span>).length);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Here I could have chosen to rebuild the entire UI as a template string as a function of state, but instead, it is ultimately more performant to create these DOM helper methods and modify what I want.<\/p>\n\n\n\n
    #2: \u201cFrameworks Provide Input Sanitization\u201d<\/h3>\n\n\n\n
    The best way to sanitize user input is to use node.textContent<\/code>.<\/p>\n\n\n
    insertHTML(li, `\n  <div<\/span> class<\/span>=\"view\"<\/span>><\/span>\n    <input<\/span> class<\/span>=\"toggle\"<\/span> type<\/span>=\"checkbox\"<\/span> ${todo.completed<\/span> ? 'checked<\/span>' :<\/span> ''}><\/span>\n    <label<\/span>><\/span><\/label<\/span>><\/span>\n    <button<\/span> class<\/span>=\"destroy\"<\/span>><\/span><\/button<\/span>><\/span>\n  <\/div<\/span>><\/span>\n  <input<\/span> class<\/span>=\"edit\"<\/span>><\/span>\n`);\nli.querySelector('label').textContent = todo.title;\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    Any user input must be set to the DOM using textContent<\/code>. If you do that, then you\u2019re fine.<\/p>\n\n\n\n
    \n
    Trusted Types not being everywhere is fine. You can use them where they\u2019re supported and get early warning of issues. Security improves as browsers improve, and usage turns into an incentive for lagging engines (source<\/a>)<\/p>\n<\/blockquote>\n\n\n\n
    Suppose you want a library to build your app template strings without using textContent manually. In that case, you can use a library like DOMPurify<\/a>, which uses Trusted Types API under the hood.<\/p>\n\n\n\n
    #3: \u201cFrameworks Provide DOM Diffing and DOM Diffing is Necessary\u201d<\/h3>\n\n\n\n
    The most common criticism was the lack of DOM Diffing in vanilla JavaScript.<\/p>\n\n\n\n
    \n
    A reactive UI\/diff engine is non-negotiable for me.<\/p>\n<\/blockquote>\n\n\n\n
    \n
    Diffing is exactly what you need to do (barring newer methods like svelte) to figure out what to tell the browser to change. The vdom tree is much faster to manipulate than DOM nodes.<\/p>\n<\/blockquote>\n\n\n\n
    However, I think this is a much more balanced take:<\/p>\n\n\n\n
    \n
    Diffing seems necessary when your UI gets complicated to the level that a small change requires a full page re-render. However, I don\u2019t think this is necessary for at least 95% of the websites on the internet.<\/p>\n<\/blockquote>\n\n\n\n
    I agree most websites and web apps don\u2019t suffer from this issue, even when re-rendering the needed components based on vanilla\u2019s application state like a framework.<\/p>\n\n\n\n
    Lastly, I\u2019ll note that DOM diffing is inefficient for getting reactive updates because it doubles up data structures. Lit, Svelte, Stencil, Solid, and many others don\u2019t need it and are way more performant as a result. These approaches win on performance and memory use, which matters because garbage collection hurts the UX.<\/p>\n\n\n\n
    Modern frameworks necessitate that you render the entire App client-side which makes your apps slow by default.<\/p>\n\n\n\n
    My issue with modern frameworks forcing declarative UI (see #1) and DOM diffing (see #2) approach is that they necessitate unnecessary rendering and slow startup times. Remix is trying to avoid this by rendering server-side then \u201chydrating,\u201d and new approaches like Quik are trying not to have hydration altogether. It\u2019s an industry-wide problem, and people are trying to address it.<\/p>\n\n\n\n
    In my vanilla JavaScript projects, I only re-render the most minimal parts of the page necessary. Template strings everywhere, and especially adding DOM diffing, is inefficient. It forces you to render all of your App client-side increasing startup time and the amount the client has to do overall each time data changes.<\/p>\n\n\n\n
    That said, if you do need DOM diffing in parts of a vanilla app, libraries like morphdom<\/a> do just that. There is also a fantastic templating library called Lit-html<\/a> that solves this problem of making your App more declarative in a tiny package (~3KB), and you can continue using template strings with that.<\/p>\n\n\n\n
    #4: \u201cFrameworks Scale, Vanilla JavaScript Will Never Scale\u201d<\/h3>\n\n\n\n
    I have built many large vanilla JavaScript projects and scaled them across developers, making the companies I worked for tons of money, and these apps still exist today. \ud83d\udd7a\u2728<\/p>\n\n\n\n
    Conventions and idioms are always needed, no matter if you build on top of a framework or not.<\/p>\n\n\n\n
    At the end of the day, your codebase will only be only as good as your team, not the framework.<\/p>\n\n\n\n
    The way vanilla JS scales is the same way any framework scales. You have to have intelligent people talk about the needs of the codebase and project.<\/p>\n\n\n\n
    App Architecture Branch<\/strong>:<\/p>\n\n\n\n
    That said, here\u2019s an example of adding ~20 lines of structure to the code in the app architecture branch<\/a>. It splits the code into a TodoList<\/code> and App<\/code> component. Each component implements a render method that optionally renders a filtered view of the data.<\/p>\n\n\n\n
    Overall I\u2019d argue these solutions are more performant, less code (~200 lines only), and more straightforward than most, if not all, the TodoMVC implementations on the internet without<\/em> a framework.<\/p>\n\n\n\n
    Here are Eight Vanilla JavaScript Tips from the Code<\/h2>\n\n\n\n
    #1. Sanitization<\/h3>\n\n\n\n
    User input must be sanitized before being displayed in the HTML to prevent XSS (Cross-Site Scripting). Therefore new todo titles are added to the template string using textContent<\/code>:<\/p>\n\n\n
    li.querySelector('label'<\/span>).textContent = todo.title;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    #2. Event Delegation<\/h3>\n\n\n\n
    Since we render the todos frequently, it doesn\u2019t make sense to bind event listeners and clean them up every time. Instead, we bind our events to the parent list that always exists in the DOM and infer which todo was clicked or edited by setting the data attribute of the item $li.dataset.id = todo.id;<\/code><\/p>\n\n\n\n
    Event delegation uses the matches<\/code> selector:<\/p>\n\n\n
    export<\/span> const<\/span> delegate = (el, selector, event, handler<\/span>) =><\/span> {\n  el.addEventListener(event, e => {\n    if<\/span> (e.target.matches(selector)) handler(e, el);\n  });\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    When something inside the list is clicked, we read that data attribute id from the inner list item and use it to grab the todo from the model:<\/p>\n\n\n
    delegate(App.$.list<\/span>, selector, event, e => {\n  let $el = e.target.closest('[data-id]'<\/span>);\n  handler(Todos.get($el.dataset.id), $el, e);\n});\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
    #3. insertAdjacentHTML<\/h3>\n\n\n\n
    insertAdjacentHTML is much faster<\/a> than innerHTML because it doesn\u2019t have to destroy the DOM first before inserting.<\/p>\n\n\n
    export<\/span> const<\/span> insertHTML = (el, html<\/span>) =><\/span> {\n  el.insertAdjacentHTML(\"afterbegin\"<\/span>, html);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    #4. Grouping DOM Selectors & Methods<\/h3>\n\n\n\n
    DOM selectors and modifications are scoped to the App.$.*<\/code> namespace. In a way, it makes it self-documenting what our App could potentially modify in the document.<\/p>\n\n\n
    $: {\n  input<\/span>: document<\/span>.querySelector('[data-todo=\"new\"]'<\/span>),\n  toggleAll<\/span>: document<\/span>.querySelector('[data-todo=\"toggle-all\"]'<\/span>),\n  clear<\/span>: document<\/span>.querySelector('[data-todo=\"clear-completed\"]'<\/span>),\n  list<\/span>: document<\/span>.querySelector('[data-todo=\"list\"]'<\/span>),\n  count<\/span>: document<\/span>.querySelector('[data-todo=\"count\"]'<\/span>),\n  showMain(show) {\n    document<\/span>.querySelector('[data-todo=\"main\"]'<\/span>).style.display = show ? 'block'<\/span>: 'none'<\/span>;\n  },\n  showFooter(show) {\n    document<\/span>.querySelector('[data-todo=\"main\"]'<\/span>).style.display = show ? 'block'<\/span>: 'none'<\/span>;\n  },\n  showClear(show) {\n    App.$.clear.style.display = show ? 'block'<\/span>: 'none'<\/span>;\n  },\n  setActiveFilter(filter) {\n    document<\/span>.querySelectorAll('[data-todo=\"filters\"] a'<\/span>).forEach(el<\/span> =><\/span> el.classList.remove('selected'<\/span>)),\n    document<\/span>.querySelector(`[data-todo=\"filters\"] [href=\"#\/${filter}<\/span>\"]`<\/span>).classList.add('selected'<\/span>);\n  },\n  displayCount(count) {\n    replaceHTML(App.$.count, `\n      <strong>${count}<\/span><\/strong>\n      ${count === 1<\/span> ? 'item'<\/span> : 'items'<\/span>}<\/span> left\n    `<\/span>);\n  }\n},\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    #5. Send Events on a Class Instance with Subclassing EventTarget<\/h3>\n\n\n\n
    We can subclass EventTarget to send out events on a class instance for our App to bind to:<\/p>\n\n\n
    export<\/span> const<\/span> TodoStore = class<\/span> extends<\/span> EventTarget<\/span> <\/span>{\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    In this case, when the store updates, it sends an event:<\/p>\n\n\n
    this<\/span>.dispatchEvent(new<\/span> CustomEvent('save'<\/span>));\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    The App listens to that event and re-renders itself based on the new store data:<\/p>\n\n\n
    Todos.addEventListener('save'<\/span>, App.render);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    #6. Group Setting Up Event Listeners<\/h3>\n\n\n\n
    It is essential to know exactly where the global event listeners are set. An excellent place to do that is in the App init method:<\/p>\n\n\n
    init() {\n  Todos.addEventListener('save'<\/span>, App.render);\n  App.filter = getURLHash();\n  window<\/span>.addEventListener('hashchange'<\/span>, () => {\n    App.filter = getURLHash();\n    App.render();\n  });\n  App.$.input.addEventListener('keyup'<\/span>, e => {\n    if<\/span> (e.key === 'Enter'<\/span> && e.target.value.length) {\n      Todos.add({ title<\/span>: e.target.value, completed<\/span>: false<\/span>, id<\/span>: \"id_\"<\/span> + Date<\/span>.now() })\n      App.$.input.value = ''<\/span>;\n    }\n  });\n  App.$.toggleAll.addEventListener('click'<\/span>, e => {\n    Todos.toggleAll();\n  });\n  App.$.clear.addEventListener('click'<\/span>, e => {\n    Todos.clearCompleted();\n  });\n  App.bindTodoEvents();\n  App.render();\n},\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Here we set up all the global event listeners, subscribe to the store mentioned above, and then initially render the App.<\/p>\n\n\n\n
    Similarly, when you create new DOM elements and insert them into the page, group the event listeners associated with the new elements near where they are made.<\/p>\n\n\n\n
    #7. Use Data Attributes in Markup & Selectors<\/h3>\n\n\n\n
    One issue with JavaScript is your selectors get tightly coupled to the generated DOM.<\/p>\n\n\n\n
    To fix this, classes should be used for CSS rules, and data atributes for JavaScript behavior.<\/p>\n\n\n
    <div<\/span> data-jsmodule<\/span>=\"behavior\"<\/span>><\/span><\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
    document<\/span>.querySelector('[data-jsmodule=\"behavior\"]'<\/span>)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    #8. Render the State of the World Based on Data (Data Flowing Down)<\/h3>\n\n\n\n
    Lastly, to reiterate what I said above, render everything based on the state in the render()<\/code> method. This is a pattern lifted from modern frameworks.<\/p>\n\n\n\n
    Make sure you update the DOM based on your App state, not the other way around.<\/h4>\n\n\n\n
    It\u2019s even better if you avoid reading DOM to derive any<\/em> part of your app state aside from finding your target for event delegation.<\/p>\n\n\n\n
    Side note: I like to rely on the server to generate the markup for faster boot times, then take control of the bits we show. Have the CSS initially hide things you don\u2019t need, and then have the JavaScript show the elements based on the state. Let the server do most of the work where you can, rather than wait for the entire App to render client-side.<\/p>\n\n\n\n
    In Conclusion<\/h2>\n\n\n\n
    Vanilla JS is Viable Today for Building Web Apps<\/h3>\n\n\n\n
    JavaScript is better today than it has ever been.<\/p>\n\n\n\n
    The fact that I could shave off 80% of the code over the previous TodoMVC years ago at the drop of a hat feels terrific. Plus, we now have established design patterns that we can lift from modern frameworks to apply to vanilla JavaScript projects to make our UIs as declarative as we like.<\/p>\n\n\n\n
    As an industry we should consider pure JavaScript as an option for more projects.<\/p>\n\n\n\n
    Finally, as Web Components get more ergonomic, we will even have a way to share our code in an interoperable and framework-agnostic way.<\/p>\n\n\n\n
    I hope you enjoyed the post. Please send your feedback to me @1marc on Twitter<\/a>. Cheers!<\/p>\n\n\n\n
    \n\n\n\n
    Bonus: Performant Rendering of Large Lists<\/h2>\n\n\n\n
    The code for rendering the entire list contents on model change is clean because data flows down, but it potentially will not be as performant for rendering large lists.<\/p>\n\n\n\n
    More Performant & Granular DOM Updates with Vanilla<\/h3>\n\n\n\n
    Here\u2019s a branch sending specific events with context from the model so we can make DOM updates more selectively as we need them: (see granular DOM updates diff<\/a>).<\/p>\n\n\n\n
    performant-rendering branch<\/a><\/p>\n\n\n\n
    More Performant DOM Updates with lit-html (plus animations!)<\/h3>\n\n\n\n
    We can acheieve the same performant DOM updates with far less code by adopting lit-html using the repeat directive: (see adding lit-html diff<\/a>).<\/p>\n\n\n\n
    animation-lithtml branch<\/a><\/p>\n\n\n\n
    \n\n\n
    \n  
    \n    
    Article Series<\/h3>\n  <\/header>\n  
    \n            
      \n                      
    1. \n              Writing a TodoMVC App with Modern Vanilla JavaScript<\/a>\n            <\/li>\n                      
    2. \n              Patterns for Reactivity with Modern Vanilla JavaScript<\/a>\n            <\/li>\n                      
    3. \n              Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript<\/a>\n            <\/li>\n                  <\/ol>\n        <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
      I took a shot at coding TodoMVC with modern (ES6+), vanilla JavaScript, and it only took ~170 lines of code and just over an hour! Compare this to the old\/official TodoMVC vanilla JS solution, which has over 900 lines of code. An 80%+ reduction in code! I \u2764\ufe0f the new state of JavaScript. The code has received […]<\/p>\n","protected":false},"author":2,"featured_media":42,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3,5,6,4],"class_list":["post-7","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-javascript","tag-mvc","tag-todo","tag-vanilla"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2023\/10\/todos-featured.png?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":7,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7\/revisions"}],"predecessor-version":[{"id":3288,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7\/revisions\/3288"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/42"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=7"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=7"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
    Bonus tip: Jonathan Neal<\/a> taught me through a PR that you can empty elements and replace the contents with el.replaceChildren()<\/code> \u2014 thanks Jonathan!<\/p>\n\n\n\n
    Beyond this, there is a new Trusted Types API<\/a> for sanitizing generated HTML. I would use this new API if I were generating nested markup with dynamic, user-input data. (Note that this new API isn\u2019t available yet in Safari, but hopefully, it will be soon)<\/p>\n\n\n\n