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