Getting into ember.js
description
Transcript of Getting into ember.js
![Page 1: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/1.jpg)
Getting into Ember.js
![Page 2: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/2.jpg)
Rey Bango@reybango
![Page 3: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/3.jpg)
![Page 4: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/4.jpg)
![Page 5: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/5.jpg)
![Page 6: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/6.jpg)
![Page 7: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/7.jpg)
http://emberjs.com/
![Page 8: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/8.jpg)
![Page 9: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/9.jpg)
Abstract Complexities
MVC Component relationships Client-side templating Binding Caching Leverage existing frameworks when possible
jQuery (DOM)
Handlebars (templates)
![Page 10: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/10.jpg)
Opinionated
![Page 11: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/11.jpg)
A little history
![Page 12: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/12.jpg)
![Page 13: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/13.jpg)
![Page 14: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/14.jpg)
Experienced Team
Yehuda KatzCreator of MerbRails Core TeamjQuery Core Team
Tom DaleApple MobileMe/iCloud
SproutCore Team
![Page 15: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/15.jpg)
![Page 16: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/16.jpg)
http://www.discourse.org/
https://github.com/discourse/discourse
![Page 17: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/17.jpg)
Let’s take a look…
![Page 18: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/18.jpg)
Who is Ember for?
Good Dynamic apps
Desktop-like feel
Very little page refresh
Not Good Static sites
Blogs
Little user interaction
![Page 19: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/19.jpg)
What We’ll Cover
Core concepts of the framework Naming conventions
Routers
Templates
Models
Controllers
A basic app
![Page 20: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/20.jpg)
What We Won’t Cover
Ember vs Angular vs Knockout vs Kendo vs …
![Page 21: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/21.jpg)
What We Won’t Cover
Ember Data
Is It "Production Ready™"?
No. The API should not be considered stable until 1.0. Breaking changes, and how to update accordingly, are listed in TRANSITION.md.
![Page 22: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/22.jpg)
Core Concepts
![Page 23: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/23.jpg)
Application Object
Application namespace Add event listeners to the document Automatically creates default components Automatically renders the application
template
var App = Ember.Application.create({});
![Page 24: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/24.jpg)
Application Object
Route object: App.ApplicationRoute Controller: App.ApplicationController View: App.ApplicationView Template: application
var App = Ember.Application.create({});
![Page 25: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/25.jpg)
Let’s take a look…
![Page 26: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/26.jpg)
Ember Inspector
Browser add-on for Chrome & Firefox See your routes Inspect your objects Ember Data records
![Page 27: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/27.jpg)
LoggingApp = Ember.Application.create({ LOG_TRANSITIONS: true});
![Page 28: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/28.jpg)
Let’s take a look…
![Page 29: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/29.jpg)
Naming Conventions
Ties components together Minimizes code Allows Ember to do its magic Learn them to make your life easier!!!
![Page 30: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/30.jpg)
Naming Conventions
Route object: App.ApplicationRoute Controller: App.ApplicationController View: App.ApplicationView Template: application
var App = Ember.Application.create({});
![Page 31: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/31.jpg)
Naming Conventions
Route object: App.EmployeesRoute Controller: App.EmployeesController View: App.EmployeesView Template: employees
this.resource( 'employees' );
![Page 32: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/32.jpg)
Naming Conventions
Not part of the Ember API De facto community standard
var App = Ember.Application.create({});
What’s up with “App”?
![Page 33: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/33.jpg)
The Router
The router manages the state of the application
Manages the location-specific routes
Marshalls request for resources to the appropriate location
Like a traffic cop directing traffic
App.Router.map( function() {…});
![Page 34: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/34.jpg)
Routes
Takes us to “/#/about” Like the streets of your app Location-specific The URL is the key identifier Define the resources needed as a user navigates the
app e.g.: a model that requests data
this.resource( 'about' );
![Page 35: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/35.jpg)
Routes
App.Router.map( function() {
this.resource( accounts' ); // Takes us to ”/#/accounts“ this.resource( ‘gallery‘ ); // Takes us to ”/#/gallery“
});
![Page 36: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/36.jpg)
Route Aliases
http://embertalk:8888/#/aboutus References the ‘about’ route
this.resource( 'about’, { path: ‘/aboutus’ });
![Page 37: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/37.jpg)
Route Objects
Do the heavy lifting for the routes Customize the behavior of a route Interface with models and controllers
App.GalleryRoute = Ember.Route.extend({
model: function() { return App.GalleryPics.findAll();}
});
![Page 38: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/38.jpg)
Let’s take a look…
![Page 39: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/39.jpg)
Templates
Client-side parsed via JavaScript Uses the Handlebars framework Special directives act as placeholders for data
<script type=“text/x-handlebars” data-template-name=“sayhello”>
Hello, <strong>{{firstName}} {{lastName}}</strong>!
</script>
![Page 40: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/40.jpg)
Templates
<script type=“text/x-handlebars” data-template-name=“sayhello”>
Hello, <strong>{{firstName}} {{lastName}}</strong>!
</script>
![Page 41: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/41.jpg)
Template ExpressionsLooping - {{#each}} directive:
<ul> {{#each friend in model}} <li>{{friend.name}} is my friend</li> {{/each}}<ul>
![Page 42: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/42.jpg)
Template ExpressionsConditional Expressions – {{#if…}} directive:
{{#if person}} Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>!{{else}} Please log in.{{/if}}
![Page 43: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/43.jpg)
Template ExpressionsConditional Expressions – Can you do this?:
{{#if age >= 18}} {{person.firstName}}, you’re technically an adult!{{else}} Sorry youngster. Ask your parents for permission.{{/if}}
![Page 44: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/44.jpg)
Template ExpressionsConditional Expressions - Computed Property:
isOld: function() { return this.get('age') > 45;}.property()
{{#each person in model itemController='person'}} <li>{{person.firstName}}, {{person.age}} {{#if isOld}} – Ready for Centrum Silver!{{/if}}</li>{{/each}}
![Page 45: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/45.jpg)
Template ExpressionsBind attributes to HTML elements:
<img {{bindAttr src="link.thumbnailUrl"}} />
Renders this:
<img src=“kitten.png">
Can’t I just do this?
<img src={{link.thumbnailUrl}} />
![Page 46: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/46.jpg)
Template ExpressionsLinks:
{{#link-to 'about'}}About{{/link-to}}
Links to a route created in the router like this:
this.resource( 'about' );
![Page 47: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/47.jpg)
Template Expressions
HTML Tags:
<ul> {{#link-to 'about’ tagName=‘li’}}About{{/link-to}}</ul>
Styling:
{{#link-to 'about’ class=“navitem”}}About{{/link-to}}
![Page 48: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/48.jpg)
{{outlet}}
Special placeholder for other templates
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
![Page 49: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/49.jpg)
Let’s take a look…
![Page 50: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/50.jpg)
Models
Interface with external APIs Data is typically stored as JSON Two ways to define them:
Subclass of Ember.Object
Ember Data
App.RedditLink = Ember.Object.extend({…});
![Page 51: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/51.jpg)
Modelshttp://www.reddit.com/r/cute/.json
{ "kind": "Listing", "data": { "modhash": "a1vty6l4kkc8e96de61136a717e96531a997ebdd8e36180519", "children": [{ "kind": "t3", "data": { "domain": "imgur.com", "banned_by": null, "media_embed": {}, "subreddit": "cute", "selftext_html": null, "selftext": "", "likes": null, "link_flair_text": null, "id": "1b7h10", "clicked": false, "title": "First Easter away from my Mom, she still makes it special.", "media": null, "score": 6, "approved_by": null, "over_18": false, "hidden": false, "thumbnail": "http://f.thumbs.redditmedia.com/63tG_KTJIGF_Vwq5.jpg", "subreddit_id": "t5_2qh5l", "edited": false, "link_flair_css_class": null, "author_flair_css_class": null, "downs": 2, "saved": false,
![Page 52: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/52.jpg)
Models
App.RedditLink = Ember.Object.extend({});
App.RedditLink.reopenClass({
findAll: function() {
var links = [];
$.getJSON("http://www.reddit.com/r/cute/.json?jsonp=?").then(function(response) {
response.data.children.forEach(function (child) {
links.pushObject(App.RedditLink.create(child.data));
});
});
return links; }
});
![Page 53: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/53.jpg)
Models
App.GalleryRoute = Ember.Route.extend({
model: function() { return
App.RedditLink.findAll();}
}); Links my model to the route & controller for the Gallery URL When a user goes to /gallery, the model is now available with data model is a keyword. It’s a hook between the route, controller & the
model
![Page 54: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/54.jpg)
Controllers
Represent data from the model Can store other data that needs to
persist Templates are connected to controllers Controllers may know of a model but
not the other way around Created for you automatically if you
don’t define one
![Page 55: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/55.jpg)
![Page 56: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/56.jpg)
Controllers
App.GalleryRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('content', ['red', 'yellow', 'blue']);
}
});
![Page 57: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/57.jpg)
Controllers
App.GalleryController = Ember.ObjectController.extend({
// the initial value of the `search` propertysearch: ’lastname’, isAnimal: function() { return this.get(’pictype') === ‘animal’; }.property()
});
![Page 58: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/58.jpg)
Let’s take a look…
![Page 59: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/59.jpg)
Ember Reddit Demo…
![Page 60: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/60.jpg)
Online Resources
http://emberjs.comhttp://discuss.emberjs.comhttp://handlebarsjs.comhttp://emberwatch.com
![Page 61: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/61.jpg)
Ember Online Learning
http://bit.ly/CStrialenrollment
$9/First Month
![Page 62: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/62.jpg)
Follow these peeps
@wycats@tomdale@trek@wagenet@evil_trout@codinghorror@commadelimited@emberwatch
![Page 63: Getting into ember.js](https://reader035.fdocuments.in/reader035/viewer/2022062303/5558bd6ed8b42aa52a8b502f/html5/thumbnails/63.jpg)
Fin…