TodoMVC As A Service

Intro

I had this idea when I woke up on April 1st.

The thing is that nowadays, you can choose a frontend framework by making a Todo MVC app, like you can choose a backend one by doing a blog engine.

This is a good starting point but won’t help you if you have to build a big application.

## How

### Fetch

I use fetch to call the Github API to retrieve the list of framework and libraries used by the TodoMVC demos.

fetch('https://api.github.com/repos/tastejs/todomvc/git/trees/6d71146f56e9ad51ddf3b6776e8871d33e02f4bd').then(function(response) {
            if (response.status !== 200) {
                console.log('Looks like there was a problem. Status Code: ' + response.status);
                return;
            }

            response.json().then(function(data) {
                var types = data.tree.map(function(element) {
                    return element.path;
                });
                DOSTUFF(types[Math.floor(Math.random() * types.length)]);
            });
        });

### Web components

“A tiny little heart for the Web”
— from Carmen Popoviciu

Web components are a set of 4 specifications:

A longer introduction:

Devoxx 2014-webComponents from Cyril Balit

The code for my web component is:

<link rel="stylesheet" href="todo.css">
<template id="todo-template"></template>
<script>
    var thisDoc = document.currentScript.ownerDocument;
    var mainDoc = document;

    var proto = Object.create(HTMLElement.prototype);
    proto.createdCallback = function() {
        var shadowRoot = this.createShadowRoot();
        fetch('https://api.github.com/repos/tastejs/todomvc/git/trees/6d71146f56e9ad51ddf3b6776e8871d33e02f4bd').then(function(response) {
            'see the previous part about fetch';
        });

        function DOSTUFF(truc) {
            var template = thisDoc.querySelector('#todo-template');
            var iframe = document.createElement('iframe');
            iframe.frameBorder = 0;
            iframe.setAttribute('id', 'todo-iframe');
            iframe.setAttribute('src', 'http://todomvc.com/examples/' + truc);

            var clone = thisDoc.importNode(template.content, true);
            clone.appendChild(iframe);
            shadowRoot.appendChild(clone);
        }
    };

    mainDoc.registerElement('todo-js', {
        prototype: proto
    });
</script>

Code and demo

The code is on Github. Enjoy the demo !.

IT DOESN’T WORK

it works on my machine

(I haven’t tried it outside of Opera/Chrome though…)

How to make it better

I added the webcomponents.js polyfill in the html… Some browsers still don’t render the component) => Use Polymer to make it available “everywhere”.

If you can make Mozilla add all Web Components standards, I won’t be sad anymore.

Mozilla will not ship an implementation of HTML Imports.
https://hacks.mozilla.org/2014/12/mozilla-and-web-components/

License

Licensed under the wtfpl

               DO WHATEVER THE FUCK YOU WANT, PUBLIC LICENSE
        TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

                0. You just DO WHATEVER THE FUCK YOU WANT.