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!

Ignition

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

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.

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:

• using a Twitter Bootstrap modal
• rendering into named outlets
• using the Ember.Evented mixin
• sending actions from a view
• using two controllers in the same route
• binding attributes

<

p>

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!