introduction to ember.js
DESCRIPTION
Introduction to Ember.jsTRANSCRIPT
![Page 1: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/1.jpg)
Introduction to Ember.jsEmber Dallas - 18 Aug 2014
Jeremy Brown - notmessenger.com
![Page 2: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/2.jpg)
What is Ember.js?( besides awesome! )
![Page 3: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/3.jpg)
Ember is…• A framework for creating ambitious web
applications
• Built for productivity
• Opinionated
• Sometimes perceived as difficult to learn
(Not to scale)
![Page 4: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/4.jpg)
Core Concepts
![Page 5: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/5.jpg)
• Models
• Routes
• Templates
• Views
• Controllers
• Components
![Page 6: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/6.jpg)
Models• An object that stores persistent state
• Templates are responsible for displaying the model to the user by turning it into HTML
• In many applications, models are loaded via an HTTP JSON API, although Ember is agnostic to the backend that you choose
![Page 7: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/7.jpg)
Routes• URL representations of your application’s objects,
telling the template which model it should display (such as a url of /cars renders a collection of cars)
• Queries the model and makes it available in the controller and templates
• As the templates or models being shown to the user change, Ember automatically keeps the URL in the browser's address bar up-to-date
![Page 8: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/8.jpg)
Routes• This means that, at any point, users are able to
share the URL of your app. When someone clicks the link, they reliably see the same content as the original user.
• Can also…
…set properties in Controllers
…execute events and actions
…connect a particular template to a particular controller
![Page 9: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/9.jpg)
Templates• The HTML (user interface) of your application
• Each template is backed by a model, accessed via the controller, and the template automatically updates itself if the model changes
• Written in the Handlebars templating language
• So they can include things such as…
…other templates
…usual logic such as if and else
![Page 10: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/10.jpg)
Templates…loops
…formatting helpers
…expressions, like {{firstName}}, which take information from the template's model and put it into HTML
…outlets, which are placeholders in a template that routers can plug other templates into. You can put outlets into your template using the {{outlet}} helper.
…components, custom HTML elements that you can use to clean up repetitive templates or create reusable controls.
![Page 11: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/11.jpg)
Views• Represent the visual parts of your application that the user
can see in the browser
• Associated with a controller, a handlebars template and a route
• Handle events or custom interactions that are impossible to manage from templates
• didInsertElement hook where can interact with jQuery very easily
• Become extremely useful when you need to build reusable views, such as modals, popovers, date-pickers and autocomplete fields
![Page 12: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/12.jpg)
Controllers• Objects that store application state
• Have a model set on them by a route
• Act as bridge between the model and the view or template
• A template can retrieve properties from both the model and a controller
• Are auto-generated if not explicitly defined
![Page 13: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/13.jpg)
Components• A completely isolated View that has no access to
the surrounding context
• A great way to build reusable components for your applications
![Page 14: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/14.jpg)
http://www.smashingmagazine.com/wp-content/uploads/2013/09/ember-sketch.png
![Page 15: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/15.jpg)
About Controllers
![Page 16: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/16.jpg)
Controllers• Allow you to decorate your models with display
logic
• In general, your models will have properties that are saved to the server, while controllers will have properties that your app does not need to save to the server
• When a template references a property, the property value on the controller is returned if it exists, otherwise the model assigned to the controller is looked at next
![Page 17: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/17.jpg)
Controllers• There are three different types of controllers:
• Controller
• Value store
• ObjectController
• Represents a single model
• ArrayController
• Represents an array of models
![Page 18: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/18.jpg)
Controllers• If you don't specifically define a controller for a
route, Ember will automatically make one for you based on the return value of the route's model hook
• If it returns an object (such as a single record), an ObjectController will be generated
• If it returns an array, an ArrayController will be generated
• If it does not return anything, an instance of Ember.Controller will be generated
![Page 19: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/19.jpg)
Naming Conventions
![Page 20: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/20.jpg)
Naming Conventions• When your application boots, Ember will look for
these objects:
• App.ApplicationRoute
• App.ApplicationController
• the application template
![Page 21: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/21.jpg)
Naming Conventions• If your user navigates to /favorites, Ember will look
for these objects:
• App.FavoritesRoute
• App.FavoritesController
• the favorites template
![Page 22: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/22.jpg)
Organizing anEmber application
![Page 23: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/23.jpg)
Single file
![Page 24: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/24.jpg)
Multiple files and directories
![Page 25: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/25.jpg)
Multiple files and directories
• Requires being built into single application file
• Can be done with variety of tools, such as Brunch, Mimosa, Grunt or Broccoli
• Strongly recommend Ember CLI
![Page 26: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/26.jpg)
Live Code Examples
![Page 27: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/27.jpg)
http://samhuri.net/f/ember-structure.png
![Page 28: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/28.jpg)
Take Aways• Architecture in Ember applications is dictated by
routes and templates
• Controllers are like decorators for your models; routes are more like traditional controllers for your application
• Think long and hard before putting actions on controllers. Should instead put them on the lowest shareable route.
![Page 29: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/29.jpg)
Resources• emberjs.com/guides
• emberjs.com/guides/cookbook
• discuss.emberjs.com
• github.com/emberjs/ember-inspector
![Page 30: Introduction to Ember.js](https://reader036.vdocuments.site/reader036/viewer/2022081508/557d5c30d8b42aba3d8b4c7c/html5/thumbnails/30.jpg)
Sources• emberjs.com
• smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/
• http://samhuri.net/f/ember-structure.png