Building an App with Ecmascript 2015 (es6), vue.js and Google's Material Design

In the last Tikal’s fuseday (hackaton), I decided to get out of my comfort zone completley, move my cheese away and experiment with something compleltely new. That’s why chose to experiment with Vue.js, webpack, browserfiy and the recently released google material lite.

The App Idea

In the past, I wrote some unit tests using the cucumber dsl for javascript code. This means that tests, user stories, are described in plain english:

Feature: eggroll editor

	Scenario: add new user story to github
		Given I am not a developer
		And Not familiar with Cucumber
		And I Have Signed In to Github
		When I use eGGroll Editor
		Then user stories are saved in Github with ease!

In addition, each sentence must be implemented with code - in my case, I experimented with pioneerjs.
Usually, user stories can be defined and refined by several persons in a team (let it be product managers, developers, etc…). Using cucumber for writing user stories can be fun and thorough once the rules of this language have been understood.
However, when you’re new to this language rules, it’s challenging to get the idea and think correctly (although it should be intuitive). The user stories should be written in plain text files - nothing fancy here.
That’s why I wanted to create a friendly UI app that can be used by a non-developer person (as well as a developer), to create such stories easily with a guidance, where you don’t have to remember the language syntax (Gehrkin).
Rather, the user should feel comfortable enough with the editor to create a simple user story.
Behind the scenes, the editor should create the actual text and save it to a github repository.

The Tech Stack

Client Javascript - Vue.js

After working with backbone.js, polymer, angular, react and others, I searched for something different. I looked around and finally have found vue.js. Before choosing vue.js, I read some of its examples and getting started guide nad it appealed for me. Like written in the guide, it feels like it has combined best practices and paradigms from angular, react, polymer, backbone and several other solutions, while keeping an eye for the future of Ecmascript 2015 (es6) and the web components approach.

Vue.js website is full with a comprehensive guide, documentation, examples and best practices. I’ve found it quite easy and fast to find an example of an explantation.

It can be used with npm and bower.

The web component approach can be easily noticed right from the begining of the guide. Web components are the default product of vue.js (as well as a best practice). Similar to Polymer, you can compose a web component in the same file as:

<style>
	.playlists-component .h1 {
		color: blue;
	}
</style>
<template>
	<div class="playlists-component">
		<h1></h1>
	</div>
</template>
<script>
module.exports = {
	data: function () {
		return {
			title: 'My Playlists'
		}
	}
}
</script>

One of the reasons that I like writing with vue.js is, it feels right at home with javascript. Also, when using best practices, the code seems to be interoperable with other well designed frameworks.
The js code - let it be controlers, classes, directives - is not propriatary to vue.js. As with angular best practices, you can write a js class/function controller and use it with any wrapper framework you want (as long as you’re using best practices).
Also, one of the nicest features that I found out about vue.js is, some of the core framwork properties are configurable. i.e., all directives (which are only attributes in vue.js) are prefixed with v-. However, using a simple json object, this prefix can be configured to be whatever you choose it to be. Did I mention interoperability? sweet!

Vue.js has a wide range of community contributed ready to use modules, such as vue-resource for interacting with RESTful api’s, vue-router and more.

Experimenting with Ecmascript 2015 (ES6)

The vue.js best practices for large scale applications, encourages to use the latest web standards and use Ecmascript 2015 (ES6) - either with browserify or with babel. Moreover, it suggests 2 github repositories with example of how to use it with each.

In order to Ecmascript 2015, I use this tools:

  • Browserify
  • Babel (with Babelify transform)
  • Partialify transform to load html files as js templates

Until writing this post, I had the chance of using few new Ecmascript 2015 features:

  • import for requiring modules
  • fat arrow => for binding functions with context
  • export for exposing relevant functions/objects
  • Object literals shorthand assignments, instead of someMethod: someMethod, just use someMethod, anotherMethod.

Still, I didn’t see the need to use the class object to define new objects. Currently, I find the revealing module pattern a much more readable and functional code than the class definition.

// github-user.js
module.exports = function GithubUser (user) {
	var octo;
	var octoUser;
	var service = {
		create,
		repos,
		orgs
	};
	activate();

	return service;

	// create, repos, orgs should be defined as functions here

Although I did use sourcemaps so I can debug and see the source code in devtools, I was surprised to find out that babel.js translates the import code into its own variable names, which than, prevents javascript scope variables unless you reference the variables in the code. i.e., this code:

import Octokat from 'octokat';

translates to this:

var _octokat = require('octokat');

var _octokat2 = _interopRequireDefault(_octokat);

I was expecting Octokat to be available in this scope while debugging in devtools, but it doesn’t. Disappointment.

CSS Framework - Google Material Design Lite

As for css framework, I decided to experiment with the Google’s material design framework (aka mdl).
At the time, the library had out of the box, most of the basic ui components as well as few enhanced ones.

Moreover, a dashboard app template has been provided from the to website (along with other blog & website templates) and the components examples could be easily used by copy & paste.
Some of the components can be interact with a javascript api (i.e, Progress Bar) - however, the premise is that you can just use it by linking a css and a js file.

While I really wanted to experiment with mdl, I also wanted to use its css sass source code. Currently, the mdl package doesn’t include the source but rather only the css files. In order to customise the colors, you should use their web based customise service which can be found in the website.

The tabs component is a great example for a drop-in component that just works - no need for js initialization.

A fact that came as a surprise during the day was that the mdl library doesn’t play nicely and out of the box with dynamic dom manipulation. Meaning, if a certain mdl component is added through js after the first page load (and after the material.js has been executed), the component might not be initialized with the mdl style and functional behaviour.
The mdl’s getting started section does address this behaviour, and in order to apply the components style and functional behaviour, you need to execute mdl’s initializer each time for each element or as I did, for all elements in the page within the user-story.js i.e:

addScenario: function () {
	this.story.scenarios.push(UserStoryFactory.scenario());
	setTimeout(function () {
		// get mdl to upgrade all the newly added mdl elements in the page
		componentHandler.upgradeAllRegistered();
	}, 200)
}

Summary & Verdict

Overall, this time, the fuseday was quite productive. The ‘eggroll’ editor is far from being prefect or finished, however, you can fork the eggroll repo, switch to the es2015 branch, and after npm install, run npm start to try it - so you can expect seeing the user story that you wrote in the relevant repository that you chose (within ‘tests’ directory).

You can try a demo of eggroll editor as well.

As for the next js project, I can recommend using vue.js as the view layer (with commonjs standard code) instead of React or angularjs.