Intro to Ember.js

Slides from CorkDev.io meetup, May 2015. It includes an overview of Ember.js and also covers Ember Data, Ember CLI and deployment.

Transcript

1. Intro to Ember.js Mark Horgan
2. How does Ember relate to other JavaScript frameworks? Angular.js React Knockout.js partial client-side web apps Meteor web sockets Ember.js REST web services Yes Yes No No How Ember describes itself A framework for creating ambitious web applications have native mobile app? web app all client-side?
3. Request Router Route Controller (singleton) Template (view) Model prepares model for controller data actions Overview
4. Router Router.map(function() { this.route('users'); this.route('user', {path:'/users/:user_id'}, function() { this.route(’photos’); }); }); path: /users route: routes/users.js controller: controllers/users.js template: templates/users.hbs nested route user template photos /#/users/17/photos
5. URLs or www.example.com/#/users/45 www.example.com/users/45 www.example.com/#/users?sortBy=age query parameters can be accessed in the controller back and refresh buttons still work
6. Route Prepares the model for the controller UserRoute = Ember.Route.extend({ model: function(params) { return this.store.find('user', params.user_id); } }); John Murphy Jane Doe Mike Hurley Sam O’ Sullivan Mike Hurley list (users) detail (user) /#/users/10 URL
7. Model/View/Controller Controller (singleton) Template (view) Model data actions User = DS.Model.extend({ name: DS.attr(‘string’); }); UserController = Ember.Controller.extend({ actions:{ delete: function(){ model.destroy(); } } }); <button {{action ‘delete’}}>Delete {{model.name}}</button> Delete Mike Hurley HTMLBars- variant of Handlebars
8. Views & Components Controller view class view template main template {{view datePicker date=model.date}} {{datePicker date=model.date}} Can also be written as the following, by registering a helper: click action: ‘setDate’, ‘9/5/2015’
9. Binding Computed Properties Observers Mike Hurle model name: Mike Hurle two way data binding {{input value=name}} Use get() and set() to get and set properties name: function() { return this.get(’firstName’) + ‘ ’ + this.get(‘lastName’); }.property(’firstName’, ‘lastName’); user.get(’name’); user.set(’name’, ‘Mike Hurley’); firstNameChanged: function() { alert(’Property firstName has changed’); }.observe(’firstName’);
10. Foundation Inheritance Mixins Maps Promises Dependency Injection MyClass = Ember.Object.extend({ init: function(){ this._super(); } }); MyClass = Ember.Object.extend(MyMixin, { }); user.save().then( function() { alert(”Saved user”); }, function(error) { alert(”Error saving user: ” + error); } ); non-strings can be used as keys myMap.set(someObjectAsKey, value); application.inject(’view’, ‘store’, ‘store:main’);
11. Ember Data “user”: { “photo_ids”: [1, 2, 3] }, “photos”: [{ “id”: 1 },{ “id”: 2 },{ “id”: 3 }] Or asynchronous, i.e. requested from the server when needed. Relationships can be side-loaded - downloaded in one request, i.e. Ember Data can handle complex object graphs, at least when requesting. Photo Photo Photo Photo Photo Comment Comment Comment User Handles syncing the local store with the remote API var user = this.store.find(’user’, 17); user.set(’name’, ‘Mike Jones’); user.save();
12. Ember CLI • Similar to Rail’s asset pipeline, Grunt or Gulp • Transpiles CoffeeScript and Sass/Less to JavaScript and CSS, you end up with: app.js, app.css, vendor.js, vendor.css • ES6 module syntax gets transpiled into AMD modules: import Ember from “ember”; export default MyClass = Ember.Object.extend({ }); • Supports LiveReload which aids development • Supports fingerprinting of assets in production i.e. app-b4cdbd700785ca8ef537f81e31a0617b.js • Uses Bower for client-side dependencies
13. Basic Deployment Web Server API (App Server) Ember App (Static Files) Native mobile app accessing the API shouldn’t be affected by a new deployment of the Ember app Users currently using the Ember app shouldn’t affected by a new deploy- ment of the Ember app GIT
14. More Advanced Deployment Rails Server Redis Ember App (AWS S3) CDN (AWS Cloudfront) JS, CSS, images and fonts Multiple versions of HTML page for Ember app. Can preview release before going live: API requests JS, CSS, images and fonts for Ember app HTML page for Ember app Web Browser app.example.com/?release=a23d425ac EmberConf 2015: The Art of Ember Deployment - bit.ly/1zQmlFa
15. Coming Up in Ember Fastboot Rendering initial HTML on server-side in Node.js to avoid delay in app first appearing. Glimmer Improved rendering based on React’s virtual DOM idea.