Future.js is a stack for developing client side app using technologies from the near future like ES6 and Web Components, but today.

Enter the time machine

Technical stack

Node.js and npm is your platform

Thanks to browserify, future.js benefits from all the node.js awesomeness : well architectured modules, tons of packages available, etc.

Code in ES2015

JavaScript is changing, you can code today using the brand new language features of ES6/7 and transpile to ES5 so it runs on a wide range of browsers.

Create and re-use Web Components

Web components is what we need, but it's not yet ready. We propose you a developer friendly, imperative approach to register your components. It's mainly based on the W3C's Custom Element specification. We also support the HTML Templates, and will include the others only when we think they are reliable (Shadow Dom, we are waiting for you).

Samples

JavaScript

//fwc for future web components import { fwc } from 'future.js'; // 'load' is the component name, // it'll use the default namespace 'f-' fwc('load') //lifecycle and state events .on('error', e => { console.error('Ooops', e); }) //lifecycle and state events .on('create', elt => { elt.textContent = elt.textContent.toLowerCase(); }) //native event delegation .on('click', function (elt) { window.fetch (elt.src) .then( res => res.text() ) .then( html => elt.target.innerHTML = html) .catch( e => this.trigger('error', e) ); }) //define attributes .attrs('src', 'target') //define getter/setters .access('target', { get (val){ //elt.target will return a DOM element return document.querySelector(val); } }) //regsiter the component .register();

HTML

<f-load src="dashboard.html" target=".dash"> Start the time machine </f-load> <div class="dash"></div>

Result

Start the time machine