Building an App with Ember App Kit - Part 4

Mar 12, 2014

In this installment, we'll DRY up some Ember code and conclude this series.

Demo | Ember Code | Rails Code

This is the final installment in our four part series on building an app with Ember App Kit, Ember Data 1.0.0-beta, and Rails API. Part 1, got us started with Rails API. Part 2 got us started with the ember side. Part 3 finished up the rest of the CRUD actions. In this part, we’ll DRY up some Ember code and conclude this series.

Part 4 - Ember.Component

You may have noticed that the edit and new templates were essentially identical. Why don’t we go ahead and DRY this up. There are several ways to accomplish this but for demonstration purposes, I am going to do it using a component. Under app/components/, create contact-form.js:

 1 var ContactForm = Ember.Component.extend({
 2   contact: null,
 3   saveText: 'Save',
 4   cancelText: 'Cancel',
 5   saveAction: 'save',
 6   cancelAction: 'cancel',
 8   actions: {
 9     submit: function() {
10       this.sendAction('saveAction');
11     },
13     cancel: function() {
14       this.sendAction('cancelAction');
15     }
16   }
17 });
19 export default ContactForm;

Add the correspondning template at app/templates/components:

 1 <form {{action 'submit' on='submit'}}>
 2   <h1>{{input type="text" placeholder="Name"}}</h1>
 3   <div class="clear"></div>
 4   <h3>{{input type="text" placeholder="Twitter" value=contact.twitter}}</h3>
 5   <div class="notes">
 6     {{textarea placeholder="Notes" value=contact.notes}}
 7   </div>
 8   <div class="controls">
 9     <button type="submit" class="btn">{{saveText}}</button>
10     <button type="button" class="btn red" >{{cancelText}}</button>
11   </div>
12 </form>

I’m not going to spend much time explaining components, but if you want a little more info, the guides on this topic are fantastic. Basically, the component encapsulates the form and allows you to pass in the actual contact record as well as customize the save and cancel button appearance. When the form is submitted, it will trigger the submit action on our component which will in turn call sendAction to notify the route to save the current contact.

In order to use this component, we just need to update our edit template:

1 <div class="contact">
2   {{contact-form contact=model saveText='Update'}}
3 </div>

and our new template:

1 <div class="contact">
2   {{contact-form contact=model saveText='Create'}}
3 </div>

That’s it. You can test this out in the browser, but everything should work exactly the same as before.

At this point, the actual app itself is done. All that’s left is deployment. I was originally going to explain how to do this with S3, but realized in the process that S3 does not play well with pushState. The demo app is still deployed to S3 but i have since moved on to serving my Ember apps with a simple static server on AWS OpsWorks. I hope to cover this in more detail in a later post on OpsWorks itself.

My goal here was to show how you can build an app with Ember App Kit, Ember Data 1.0.0-Beta and Rails API. I wanted to focus on the basics in order to show how all the pieces fit together. I hope I accomplished that. As I mentioned at the start, our app is lacking some fundamental things that would be necessary in a real production app. That being said, after working through this, you should have a strong base to build upon. The rest should be natural extensions. If you have any questions, leave em in the comments, send me an email or find me on twitter!

Thanks for reading!