Getting started with Ember.js

Lightning talk given on Thursday 29th of August 2013 at the Melbourne Ruby on Rails meetup.

Transcript

1. emberjs.com Friday, 30 August 13
2. What is it? Friday, 30 August 13
3. A framework for creating ambitious web applications Friday, 30 August 13
4. Do we need another framework? Friday, 30 August 13
5. Yes Friday, 30 August 13
6. Client side Friday, 30 August 13
7. Templates Friday, 30 August 13
8. <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <span class="brand">{{#linkTo 'index'}}Second Line{{/linkTo}}</span> <div class="nav-collapse collapse"> <ul class="nav"> <li {{bindAttr class="isVenues:active"}}>{{#linkTo 'venues'}}Venues{{/linkTo}}</li> <li {{bindAttr class="isBands:active"}}>{{#linkTo 'bands'}}Bands{{/linkTo}}</li> <li {{bindAttr class="isGigs:active"}}>{{#linkTo 'gigs'}}Gigs{{/linkTo}}</li> <li {{bindAttr class="isUsers:active"}}>{{#linkTo 'users'}}Users{{/linkTo}}</li> </ul> {{view Secondline.AuthView}} </div><!--/.nav-collapse --> </div> </div> </div> <div class="container"> <!-- Main hero unit for a primary marketing message or call to action --> <div class="hero-unit"> {{outlet}} </div> <hr> <footer> <p>&copy; Reformed Software 2013</p> </footer> </div> <!-- /container --> Friday, 30 August 13
9. Routes Friday, 30 August 13
10. Secondline.Router.reopen location: 'history' rootURL: '/' Secondline.Router.map (match)-> @resource 'venues', -> @route 'show', path: '/:venue_id' @resource 'gigs', -> @route 'show', path: '/:gig_id' @resource 'bands', -> @route 'show', path: '/:band_id' @resource 'users', -> @route 'show', path: '/:user_id' Secondline.IndexRoute = Ember.Route.extend setupController: (controller, model) -> @controllerFor('application').set('currentRoute', 'index') Secondline.VenuesRoute = Ember.Route.extend model: -> Secondline.Venue.find() setupController: (controller, model) -> @controllerFor('application').set('currentRoute', 'venues') Friday, 30 August 13
11. Models Friday, 30 August 13
12. DS.RESTAdapter.reopen namespace: "api/v1" Secondline.Store = DS.Store.extend adapter: DS.RESTAdapter.create() Friday, 30 August 13
13. Secondline.Venue = DS.Model.extend({ name: DS.attr('string'), address: DS.attr('string'), website: DS.attr('string'), location: DS.attr('string') }); Friday, 30 August 13
14. Controllers Friday, 30 August 13
15. App.SongsController = Ember.ArrayController.extend({ longSongCount: function() { var longSongs = this.filter(function(song) { return song.get('duration') > 30; }); return longSongs.get('length'); }.property('@each.duration') }); Friday, 30 August 13
16. Talking to your rails app Friday, 30 August 13
17. bower bower.io Friday, 30 August 13
18. brew install node Friday, 30 August 13
19. npm install -g bower Friday, 30 August 13
20. { "directory" : "vendor/assets/components" } your_rails_app/.bowerrc Friday, 30 August 13
21. bower init Friday, 30 August 13
22. bower install --save ember Friday, 30 August 13
23. application.js //= require handlebars/handlebars //= require ember/ember Friday, 30 August 13
24. gem 'handlebars_assets' Gemfile Friday, 30 August 13
25. JSON serializers Friday, 30 August 13
26. Gemfile gem 'active_model_serializers' Friday, 30 August 13
27. class VenueSerializer < ActiveModel::Serializer attributes :id, :name, :address, :website, :location, :longitude, :latitude end Friday, 30 August 13
28. I like beer! Friday, 30 August 13
29. @mattdelves Friday, 30 August 13