Introduction to Ember.js

1. Introduction to Ember.js
Ember Dallas - 18 Aug 2014
Jeremy Brown - notmessenger.com

2. What is Ember.js?
( besides awesome! )

3. Ember is…
• A framework for creating ambitious web applications
• Built for productivity
• Opinionated
• Sometimes perceived as difficult to learn
(Not to scale)

4. Core Concepts

5. • Models
• Routes
• Templates
• Views
• Controllers
• Components

6. 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

7. 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

8. 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

9. 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

10. 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.

11. 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

12. 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

13. Components
• A completely isolated View that has no access to the
surrounding context
• A great way to build reusable components for your
applications

14. http://www.smashingmagazine.com/wp-content/uploads/2013/09/ember-sketch.png

15. About Controllers

16. 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

17. Controllers
• There are three different types of controllers:
• Controller
• Value store
• ObjectController
• Represents a single model
• ArrayController
• Represents an array of models

18. 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

19. Naming Conventions

20. Naming Conventions
• When your application boots, Ember will look for these
objects:
• App.ApplicationRoute
• App.ApplicationController
• the application template

21. Naming Conventions
• If your user navigates to /favorites, Ember will look for
these objects:
• App.FavoritesRoute
• App.FavoritesController
• the favorites template

22. Organizing an
Ember application

23. Single file

24. Multiple files and directories

25. 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

26. Live Code Examples

27. http://samhuri.net/f/ember-structure.png

28. 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.

29. Resources
• emberjs.com/guides
• emberjs.com/guides/cookbook
• discuss.emberjs.com
• github.com/emberjs/ember-inspector

30. Sources
• emberjs.com
• smashingmagazine.com/2013/11/07/an-in-depth-
introduction-to-ember-js/
• http://samhuri.net/f/ember-structure.png