Chris J. Lee

Dallas Drupal Developer

You are here

Future Insights 2014 Day I - Ember.js with Jesse Cravens

I've arrived in Las Vegas for Future Insights 2014. I had the pleasure of enjoying a workshop held by Jesse Cravens. Jesse is an engineer at frog. Frog is a company out of Austin, Texas. After meeting him, I had no idea i had been reading his blog for many years. He's had a couple buzzworthy blog articles featured on HackerNews and Drupal Planet.

A short introduction to Ember.js

I spent the whole day learning about ember.js. Ember.js is a fullstack MVC JavaScript framework. The framework is highly inspired of many Ruby conventions and is somewhat opinionated. Ember is inspired by Base2 and YUI in some regards. It is a JavaScript framework in which objects are first class citizens. This is unheard of in JavaScript where it is a highly statically typed language.

Ember offers Convention over configuration. Ember highly enforces the use of naming conventions and extending objects. However, if you play along the rules of ember.js I was told you get a lot of benefits out of the box (OOTB).

Additionally, ember has a several great future friendly features going for it. For one, it utilizes key web components concepts in it's framework. It's highly invested in having web components.

Ember idiosyncrasies

There some interesting idiosyncrasies that ember.js offers. One of them includes the idea of controllers. Controllers in a traditional sense provides logic to process your models or route to your views. In ember, it is important to understand that ember controllers just decorate your models. Models are objects and controllers provide configuration logic that extend new models.

Key concepts

Here are some vernacular that one must learn about ember.js:

  • Outlets - Outlets are placeholders for where your output will reside.
  • Components - Components is ember's Viewport to the future of web components. More specifically,
  • Handlebars - A library integrated that uses html and a common double brace syntax for it's templating language
  • Backburner - Backburner is a lightweight library that allows one to process asynchronous commands synchronously. I know that doesn't sound right but in a sense it makes more sense when you run backburner. The end result provides you sanity to asynchronous operations being all performed at once. This allows one visiting a trip to callback hell.
  • RSVP - A lightweight promise library that is tightly integrated into ember js.
  • Resources - A collection of routes that are grouped together
  • Mixins - Mixins a programming convention that allows one to add properties to other classes.

For more concepts review this page in the documentation.

Creating your first ember application

Every ember application starts with the following incantations:

var App = Ember.Application.create({});

The Application class allows one to create your application object and bootstrap the object for your own use. One can pass in various configuration objects to allow the development experience become 1000x times better.

var App = Ember.Application.create({
  //LOG_TRANSITIONS: true,
  //LOG_RESOLVER: true,
  //LOG_ACTIVE_GENERATION: true, // log whats being actively generated
  //LOG_MODULE_RESOLVER: true, 
  //LOG_TRANSITIONS: true,
  //LOG_TRANSITIONS_INTERNAL: true,
  //LOG_VIEW_LOOKUPS: true 
});

Ember allows for prototyping

Without data ember isn't very helpful at all. In order to mock data one can use the Generate data tool: http://www.generatedata.com/

Tips regarding ember.js

Here are some niblets of important tips.

Overall

Overall, i was impressed with a lot of what ember has to offer. After learning some things about angular. It was a bit easier to digest these ideas. I'd definately like to try using ember to protoype my next application.

© 2017 Chris J. Lee