davidvujic / vanillajs-components

You might (not) need a JavaScript framework

You might (not) need a JavaScript framework

In this repo, you will find examples on how to create a web site with reusable building blocks (aka components). When learning about React and components, I started thinking about how this could be done without using React, ES 2016, Webpack or any other framework out there. Is that even possible?

Okay, but why?

I want to understand the problems that are solved using React, ES 201x, Webpack & friends. I guess one way is to experience it the hard way - to feel the pain - by writing code with plain old vanilla JavaScript, html and css.

The source code in the main branch of this repo is written with Old School vanilla JavaScript, without any frameworks, without a build system and without a transpiler.

Blog post

There is also a blog post related to this repo: http://davidvujic.blogspot.se/2017/01/you-might-not-need-a-javascript-library.html

Examples

The listItem.js component

vanilla.listItem = (function (templates) {

    function render(props, done) {

        // load the html using a template helper
        templates.load('/src/listItem/listItem.html', function (el) {

            // set data
            el.textContent = props.data;
            el.addEventListener('click', props.onClick);

            if (done) {
                // pass the node to be rendered to the DOM
                done(el);
            }
        });
    }

    return {
        render: render
    };

}(templates));

The listItem.html template

<li class="listItem" title="the listItem component"></li>

Here's an example web page with vanilla components:

https://davidvujic.github.io/vanillajs-components/

Setup

Clone this repo and start experimenting! To browse the example web page, run these commands:

npm install
npm start

When switching between the branches (see below), you might need to run the npm install command again (because of the different dependencies used).

What next?

To step by step add tools & frameworks, that will solve current issues and improve the quality & readability of the code base.

Something like this (each one in a separate branch):

• ✅ a template engine compare with vanilla code
• ✅ AMD modules compare
• ✅ ES 2017 & transpiling with Babel compare
• ✅ Minification and bundling compare
• ✅ Webpack (almost) all the things compare
• 🚜 React components with JSX compare
• Redux?