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
Jul 05, 2015
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