Ember CRMDecember 18, 2013
Where I'll start
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
- 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.
Before we get started I think it makes the most sense to have a look at what we're going to build.
Let's get to it. In this first episode we're going to cover:
- project structure
- libraries used
- model definitions
- route definitions
- 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
Here are some example JSON responses my backend is returning.
Have a look at the polymorphic JSON ember expects.
- 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
- reviewing relationship JSON
- creating a custom REST serializer
- 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
- hiding models based on properties
- creating mixins for our controllers
- handling backend errors
- using Twitter Bootstrap's alerts
- fixing a mixin bug
- reviewing my error response JSON
- implementing everything we've done for companies so far for people
- fixing a dynamic model property bug
- incorporating Select2 using a custom view
- using meta data in our JSON
- sending actions from a view
- 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
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!
If you have some ideas, please let me know! I'll append this post with the information.