Beginner's Guide to Ember.js Framework
•
1 like•705 views
Ember.js is a JavaScript web framework that allows building single-page applications. It uses conventions like MVC and handles routing, templates, controllers and models. The document provides an overview of Ember.js concepts like routers, routes, templates, controllers and models. It also lists several free and paid resources for learning Ember.js, including guides, tutorials and blogs. Core concepts are explained, including how routers handle requests, routes provide data to controllers and templates, and models define data attributes.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Beginner's Guide to Ember.js Framework
Similar to Beginner's Guide to Ember.js Framework (20)
Recently uploaded
Recently uploaded (20)
Beginner's Guide to Ember.js Framework
- 1. 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
- 2. About Product Marketer Online Marketer Company Founder Board Director Aspiring Developer
- 3. Ember.js ‘A framework for creating ambitious web applications’
- 4. 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
- 5. 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
- 6. 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
- 7. Learning Ember.js • HTML • CSS Ember has a steep learning curve • JavaScript • jQuery • MVC • Objected oriented development
- 8. 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
- 9. Paid Resources • Code School: Warming up to Ember • Lynda: Up and running with Ember • Team Gaslight: Introduction to Ember • Tuts+ • unspace.ca/embergarten • airpair
- 10. Core Concepts 1.Router 2.Route 3.Templates 4.Controllers 5.Models 6.Components
- 11. Extras • Ember Inspector • Ember Data • Ember CLI • Ember.View
- 12. Orientation
- 13. 1. Router • Handles all requests and maps a path into a route • Prebuilds a lot of code internally • ‘Convention over configuration’ starts here
- 14. 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
- 15. 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’ }); });
- 16. 3. Templates • Contain HTML • Inside index.html • Uses Handlebars.js for templates • Part of your web application that people see • Subset of a View
- 17. 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}}
- 18. id or data-template-name? January 15, 2014
- 19. id or data-template-name? May 21, 2014
- 20. 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)
- 21. Decorating Data Server side sort Client/browser side sort
- 22. 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
- 23. 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
- 24. 6. Components • Similar to Web Components • Splits page into reusable components
- 25. Ember Inspector
- 26. Ember and Rails