Introduction to Ember.js
-
Upload
jeremy-brown -
Category
Internet
-
view
5.580 -
download
1
description
Transcript of Introduction to Ember.js
Introduction to Ember.jsEmber Dallas - 18 Aug 2014
Jeremy Brown - notmessenger.com
What is Ember.js?( besides awesome! )
Ember is…• A framework for creating ambitious web
applications
• Built for productivity
• Opinionated
• Sometimes perceived as difficult to learn
(Not to scale)
Core Concepts
• Models
• Routes
• Templates
• Views
• Controllers
• Components
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
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
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
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
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.
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
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
Components• A completely isolated View that has no access to
the surrounding context
• A great way to build reusable components for your applications
http://www.smashingmagazine.com/wp-content/uploads/2013/09/ember-sketch.png
About Controllers
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
Controllers• There are three different types of controllers:
• Controller
• Value store
• ObjectController
• Represents a single model
• ArrayController
• Represents an array of models
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
Naming Conventions
Naming Conventions• When your application boots, Ember will look for
these objects:
• App.ApplicationRoute
• App.ApplicationController
• the application template
Naming Conventions• If your user navigates to /favorites, Ember will look
for these objects:
• App.FavoritesRoute
• App.FavoritesController
• the favorites template
Organizing anEmber application
Single file
Multiple files and directories
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
Live Code Examples
http://samhuri.net/f/ember-structure.png
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.
Resources• emberjs.com/guides
• emberjs.com/guides/cookbook
• discuss.emberjs.com
• github.com/emberjs/ember-inspector
Sources• emberjs.com
• smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/
• http://samhuri.net/f/ember-structure.png