A Beginner’s Guide to Ember.js

By a Beginner for Beginners

Richard Martin http://richardgmartin.me

@richardgmartin

http://richardgmartin.me/web-development/learn-ember

AboutProduct Marketer

Online Marketer

Company Founder

Board Director

Aspiring Developer

Ember.js‘A framework for creating ambitious web applications’

Ember.js: What

• Web application framework written in JavaScript

• Initial release: 2011

• Current stable release: 1.8.1 (November 5, 2014)

• Developers: Yehuda Katz and Tom Dale

Ember.js: How• Single Page Application (SPA)

• Sits on client side and connects to data via API

• Renders using templates

• Quick response and load times

• Dynamic

• discourse.org

Ember.js: Why

• Convention over configuration. Rail guards. Opinionated. Abstraction.

• Little amount to code generates lot of complex code

• MVC + R: familiar, maintainable, and scalable

• Documentation

• Community support

Learning Ember.js• HTML

• CSS

• JavaScript

• jQuery

• MVC

• Objected oriented development

Ember has a steep learning curve

Free Resources• Ember guides: routers, models, templates …

• Ember API docs: functionality for all classes

• Ember guide: Build a Ember.js application - blog

• Vic Ramon’s Ember Tutorial - Rails + Ember

• Ember Watch

• Ember Fest

• Ember Conf

• Smashing Magazine

• Blogs: EvilTrout, Cory Forsyth, Matthew Beale

Paid Resources• Code School: Warming up to Ember

• Lynda: Up and running with Ember

• Team Gaslight: Introduction to Ember

• Tuts+

• unspace.ca/embergarten

• airpair

Core Concepts1.Router

2.Route

3.Templates

4.Controllers

5.Models

6.Components

Extras

• Ember Inspector

• Ember Data

• Ember CLI

• Ember.View

Orientation

1. Router• Handles all requests and maps a path into a route

• Prebuilds a lot of code internally

• ‘Convention over configuration’ starts here

2. Routes

• A URL pointing to a specific section of web app

• Provides data from external sources and passes to Ember Controller

• Decides what model to use

• Decides what template to render to screen

Route Types• Routes (regular) - adjectives, verbs, adverbs this.route(‘onsale’);

• Resource routes - nouns (a thing) this.resource(‘products’);

• Dynamic segment routes this.resource(‘product’, { path: ‘/products/:title’ });

• Nested routes this.resource(‘products’, function() {

this.resource(‘product’, { path: ‘/products/:title’ });

});

3. Templates

• Contain HTML

• Inside index.html

• Uses Handlebars.js for templates

• Part of your web application that people see

• Subset of a View

3. Templates• Add template name: data-template-name=‘something’

• Add data to template using Handlebars Expressions: {{someThing}}

• Load other templates into application template using: {{outlet}}

• Embed links using: {{#link-to ‘something’}}Something{{/link-to}}

id or data-template-name?

January 15, 2014

id or data-template-name?

May 21, 2014

4. Controllers

• In MVC, controller sends data from model to view

• In Ember, controller sends data to template

• ObjectController: sends info about 1 piece of data

• ArrayController: sends info about all the data

• Controllers can also format or ‘decorate’ data (on the client side)

Decorating DataServer side sort

Client/browser side sort

5. Models

• An Ember model is a class

• Defines properties and behaviour of data presented to user

• Ember model attributes are the data types

• Define associations: has_many

Ember Data• Allows model to retrieve records from server, cache

them, save updates back to server, create new records

• Ember Data Adapter - HTTP server using JSON

• Ember Data Adapter - load records from memory

6. Components

• Similar to Web Components

• Splits page into reusable components

Ember Inspector

Ember and Rails

http://richardgmartin.me @richardgmartin