I used to be crazy about React and Angular and other frameworks, and really the concept of the framework in general. But a lot of what you need to accomplish as a developer can be done with just vanilla JS/ES6. The problem with frameworks is that they come with a huge amount of overhead that, while very much necessary for gigantic enterprise SPAs, not so necessary for your personal page, portfolio, or a simple contracted web app. I try to use vanilla JS as often as possible. It’s a fun challenge for me to try to implement features of major frameworks in a simpler way. So I’m going to try to write a reactive mini-framework in ES6-style JS, which at this point I’m considering as near vanilla as you’d like to be.

So what I’d like to do is utilize template-strings (the back-ticks!) to interpolate our reactive/changing features. It won’t be perfect, but it will selectively update our components!

Let’s start by creating a new project (or go to codepen.io) and open up your index.html file. Add a div element with id="root" attribute to the body of your HTML. We will need at later. So what I intend to make is a simple counter example. Let’s start by adding a model object and a function that takes a model and returns a template string:

const model = { count: 0 } 

const counter_template = ({count}) =>  `
    <div class="counter">
      <h1>${count}</h1>
    </div>
    <div class="buttons">
      <button onclick="dispatch(increment())">+</button>
      <button onclick="dispatch(decrement())">-</button>
    </div>

#javascript #react #programming #javascript-frameworks #functional-programming