Introduction to Ember.js

Learn what Ember.js is all about, including core concepts and how to use it.

Transcript

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