Getting started: Ionic + ES6

For some context: When working on front end stuff, I’ve always written pure javascript with the exception of a few one off coffee script fixes. I’m super stoked about ES6 and have been converting many of my js heavy projects to use some of the ES6 syntax. Most recently I’ve been working on an app called Pushbit for competing with friends for weekly pushup count. It’s written using the ionic framework and I’ve built much of it using some cool new ES6 syntax and would love to share my build process.

Here’s how I got started (follow along on github: w1zeman1p/es6demo)

ionic start es6demo
cd es6demo

We’ll need to transpile our es6 code into es5 code for it to work on all current browsers including the phones. I’ve chosen to create a directory called `jssrc` at the root level of the app to store all my javascript code. The transpiled file will end up in www/js.

mkdir jssrc
mv www/js/* jssrc/

Luckily, ionic comes with a nice gulpfile that we can add to. I like gulp, and incase you enjoy a different flavor of build system you should checkout Addy Osmani’s list of https://github.com/addyosmani/es6-tools es6 tools. The idea here is that we want to some npm modules to read our es6 code and output a single concatenated es5 javascript file. We’ll use 3 new npm modules which you might need to install using these commands:

npm install gulp-traceur
npm install gulp-sourcemaps
npm install gulp-watch
npm install gulp-concat

Here’s a snippet to get you started:

//gulpfile.js
var gulp = require('gulp'),
  concat = require('gulp-concat'),
  sourcemaps = require('gulp-sourcemaps'),
  traceur = require('gulp-traceur'),
  watch = require('gulp-watch');

var paths = {
  scripts: ['./jssrc/**/*.js']
};

gulp.task('scripts', function () {
  return gulp.src(paths.scripts)
    .pipe(sourcemaps.init())
    .pipe(traceur())
    .pipe(concat('all.js'))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./www/js'));
});

gulp.task('default', ['scripts']);

gulp.task('watch', function () {
  gulp.watch(paths.scripts, ['scripts']);
});

Lets go through this and talk about each piece.

First we need to require the modules we’ll use for transpiling. I’ve tried gulp-traceur and gulp-6to5 which are both gulp packages that overlay Traceur and 6to5 respectively.  Traceur is a project out of google and seems to have the most traction at the moment. It also was the tool that worked best for me. gulp-sourcemaps is used to build a sourcemap file that can be used by the browser during debugging to show you the original code, rather than the transpiled es5. gulp-watch is handy for constantly running your gulp task when your es5 files change.

sourcemaps = require('gulp-sourcemaps'),
traceur = require('gulp-traceur'),

I’ve added `scripts: [‘./jssrc/**/*.js’]` to the given `paths` variable.

The `scripts` task will be used to convert our scripts. First it reads the files in `paths.scripts`, then initializes sourcemaps, then runs the files through traceur, then concatenates them into a file called `all.js`, then drops that file into www/js.

gulp.task('scripts', function () {
  return gulp.src(paths.scripts)
    .pipe(sourcemaps.init())
    .pipe(traceur())
    .pipe(concat('all.js'))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./www/js'));
});

Now that our gulpfile is all good to go we can run `gulp` and `gulp watch` which will start listening to changes in our javascript files.

gulp
gulp watch

Lets checkout the www/index.html file and make sure we’re including the new transpiles `all.js` file.

There is an autogenerated section that looks like this:

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>

Update that to reference `all.js`.

    <!-- your app's js -->
    <script src="js/all.js"></script>

We also need to add in a few special files referenced here: https://code.google.com/p/traceur-compiler/wiki/GettingStarted that will allow us to run traceur compiled js files in the browser.

Add these scripts to your index.html head:

  <script src="https://traceur-compiler.googlecode.com/git/bin/traceur.js"></script>
  <script src="https://traceur-compiler.googlecode.com/git/src/bootstrap.js"></script>

Lets fire up the server and see the result.

ionic serve

See the default app in the browser? Cool!

Lets get to writing some ES6 to test it out. Open up jssrc/app.js. First I like to go through and convert all anonymous function arguments to the () => {} syntax. something like this:

// ... OLD
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {

// ... NEW!
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
  .run(($ionicPlatform) => {
    $ionicPlatform.ready(() => {

Refresh the page and all should be well.

Lets try something a little more interesting. Add the following snippet at the bottom of `jssrc/app.js`:

class Snowman {
  constructor (name) {
    this.name = name;
  }

  sayHi() {
    console.log("Hi! I'm " + this.name + " and I like warm hugs.");
  }
}

var olaf = new Snowman('Olaf');
olaf.sayHi();

Open the dev console (cmd+opt+i), then refresh and observe the message from the instance of our es6 class.

That should get you started. In a following post I’ll show you how I built out my angular model layer with influences from my backbone.js experience.

Advertisements
Getting started: Ionic + ES6

Editor battle + Productivity hack!

Over my decade of development I’ve used many different text editors. In the very beginning, I didn’t know better and used notepad.exe. At my first paid programming gig in 2005 we used Sun Solaris machines and I was thrown into the deep end with a book on Perl and a book on Vi. I became proficient enough to get things done in VI, but was mostly lost. That same year I was introduced to Visual Studios. Later for school I used notepad++, Dev-C++ and, as infrequently as possible, nano.

Most of my development between 2007 and 2012 was done on windows based machines writing code for the web in Visual Studios. In 2012 I bought a Mac that would become my primary development machine. In the process of switching over to Mac I’ve experimented with a handful of editors an eventually settled on one.

In my experience Visual Studios is hands down the most powerful editor out there. It is incredibly feature rich. When I use VS I feel like I’m only ever actually using about .5% of what it can really do. I’ve used XCode for some iOS development and I would categorize XCode and Visual Studios together as full IDE’s. XCode is no where near as featureific as Visual Studios, but still has far more features than I’ll ever consider using.

I spent about 4 months working with Textmate 2 and found it to be straight forward and useful. I liked some of the integrations allowing me to run code directly from the editor. I also liked the powerful built in snippet library provided.

After Textmate I considered Sublime text for 1 month. It has very similar features to Textmate and the way I used them was identical except for subtle differences in snippets.

After using Sublime for a month I attempted to use Vim as my primary editor for a month. At first I hated it. I didn’t really understand the “modal” editing and was using the arrow keys in insert mode most of the time. It seemed like a more frustrating version of Sublime or Textmate.

About a month after starting to use Vim I received an offer to try the Atom beta. I used atom for about 2 weeks before deciding that it too was extremely similar to Textmate and Sublime.

There must be a reason that developers prefer Emacs and Vim, I thought. (I opened emacs once and spent 10 min figuring out how to properly close it, maybe one day I’ll give her another solid try). After some research I realized I was using Vim all wrong. I was implementing every anti-pattern in the book: staying in insert mode, using arrow keys to navigate, holding down backspace to delete a word or line. I learned a few rules of thumb that took my editing to the next level with Vim:

  1. Spend as little time as possible in `insert` mode.
  2. Don’t use arrow keys, prefer h, j, k, l.
  3. Don’t hold down any key for any reason, ever.
  4. Navigate with numbers.
  5. Compose motions and operators.

I’m constantly trying to get faster. Sharpening my tools. I recommend you try Vim and try to follow the above rules. The best tip for getting more efficient: Turn off key repeat!

By turning off key repeat at your operating system level, you’ll be forced to learn all the keyboard shortcuts for every other application you use. Turning off key repeat for a couple weeks drastically increased my overall productivity.

Editor battle + Productivity hack!