Ember CRM

It's been a while since I last posted and for good reason...I've decided I need to attempt to compliment my backend skills with some frontend skills! I've never enjoyed writing javascript. Mostly because I've only ever used jQuery to added a little pizzazz to my sites(ie. toggleClass() and ajax()). I didn't have any javascript code organization. It was all spaghetti.

Javascript Revolution

Currently javascript is getting an insane amount of attention. New things are popping up all over the place(or maybe I've just been sheltered under my php rock). There are all sorts of frontend javascript frameworks now: Backbone, Angular, Ember, CanJS. Combine one of those with Twitter Boostrap or Zurb's Foundation and you can create some pretty slick frontends without doing much work.

Javascript is even becoming popular for the backend with the advent of Node. Node has spurred Express, Meteor, Sails, and more. I've got to say, programming both the backend and frontend with the same language is pretty darn appealing, even if I hate the fact that javascript isn't class based.

Where I'll start

Considering all that, I figure it would do my career well to really start giving javascript more of my attention. So where in the world do I start? Well, Ember seems to be the new hotness and even though I don't know a lick of ruby or rails, having a contributor to both rails and jQuery on the core team, gives me a warm fuzzy feeling. I'll start with Ember!


After a couple of days of trying to create something I realized one thing: Ember is hard. Ember does a ton of magic for you behind the scenes. As a noob, this was a hindrance to me. I couldn't distinguish what Ember was doing for me and what it expected me to do. It was also extremely difficult to wrap my head around what MV* means in Ember. It doesn't resemble MVC in the backend at all. Once I realized and understood that, it all started to click and I've grown to really enjoy developing the frontend with Ember.

Another frustration of learning Ember/Ember-Data was the lack of up-to-date resources. I would constantly find stackoverflow questions that were "answered" and the answer referred to a jsfiddle that referenced "ember-latest.js" and guess what...Ember's api had changed, rendering it useless. So many times I found myself wanting to ditch it and stick to backend dev, but no, I don't want to be the guy unwilling to adapt. I. Must. Persevere.

I set out to build a tiny CRM application and implement some features I know I'll run into when developing something for real. Some features like:

  • basic CRUD operations
  • various relationship types, including a polymorphic relationship
  • loading relationships asynchronously
  • modals
  • Select2 integration
  • data normalization, serialization
  • and more
After trying to soak up absolutely everything Ember(stackoverflow, blogs, digging through the docs, IRC) for a solid two weeks I finally found some enlightenment. I successfully built out my application and am delighted with the result.

I've recorded a 10 part video playlist of myself rebuilding the app so that you all may reap the benefits of my efforts. I know when I first set out to learn ember I got tired of being pointed to paid methods of learning the framework. This is me giving back for all of the help I've received on my quest. Enjoy.

Project Overview

Before we get started I think it makes the most sense to have a look at what we're going to build.

You can find all of the frontend source code in the repo. Each part has its own branch.

Part 1

Let's get to it. In this first episode we're going to cover:

  • project structure
  • libraries used
  • model definitions
  • route definitions

Part 2

Topics covered:

  • creating Route objects
  • retrieving models from the ember-data store/API
  • expected JSON format
  • displaying a list of models in a template
  • using a few handlebars helpers

Part 3

Topics covered:

  • creating a route that uses a dynamic segment
  • using handlebars partials
  • getting and displaying related models
  • sending actions from templates to controllers
  • using ember-data model flags
  • rolling back model changes
  • saving models

Part 4

Topics covered:

  • reviewing relationship JSON
  • creating a custom REST serializer

Part 5

Topics covered:

  • creating a route for new models
  • rendering a specific template from the route
  • what JSON to return when saving models
  • removing unused models
  • cleaning up unsaved model changes

Part 6

Topics covered:

  • hiding models based on properties
  • creating mixins for our controllers
  • handling backend errors
  • using Twitter Bootstrap's alerts

Part 7

Topics covered:

  • fixing a mixin bug
  • reviewing my error response JSON

Part 8

Topics covered:

  • implementing everything we've done for companies so far for people

Part 9

Topics covered:

  • fixing a dynamic model property bug
  • incorporating Select2 using a custom view
  • using meta data in our JSON
  • sending actions from a view

Part 10

Topics covered:



Questions, comments?

I hope you've found this useful. It was a really fun exercise and it sparked my interest to dive deeper into the javsacript world.

I'd love to hear any questions or comments. As I said in the first video, I want to learn from you guys as well. Please tell me if I'm doing something wrong or I could be doing something better!

Help! One huge aspect I didn't touch on was pagination. I'm still lurking and trying to figure out the best way to handle it. I'd love to learn more about the preferred method of paginating requested models using the meta object, especially paginating related models. For instance, if I'm on the company route, viewing a company that has 10,000 tasks, how do you paginate through those?

If you have some ideas, please let me know! I'll append this post with the information.

Categories: Javascript

Tags: Javascript, Ember, Ember-data