More Related Content
What's hot
What's hot (20)
Similar to Getting into ember.js
Similar to Getting into ember.js (20)
More from reybango
More from reybango (9)
Recently uploaded
Recently uploaded (20)
Getting into ember.js
- 9. Abstract Complexities MVC Component relationships Client-side templating Binding Caching Leverage existing frameworks when possible jQuery (DOM) Handlebars (templates)
- 10. Opinionated
- 11. A little history
- 14. Experienced Team Yehuda Katz Creator of Merb Rails Core Team jQuery Core Team Tom Dale Apple MobileMe/iCloud SproutCore Team
- 17. Let‟s take a look…
- 18. Who is Ember for? Good Dynamic apps Desktop-like feel Very little page refresh Not Good Static sites Blogs Little user interaction
- 19. What We‟ll Cover Core concepts of the framework Naming conventions Routers Templates Models Controllers A basic app
- 20. What We Won‟t Cover Ember vs Angular vs Knockout vs Kendo vs …
- 21. What We Won‟t Cover Ember Data Is It "Production Ready™"? No. The API should not be considered stable until 1.0. Breaking changes, and how to update accordingly, are listed in TRANSITION.md.
- 22. Core Concepts
- 23. Application Object Application namespace Add event listeners to the document Automatically creates default components Automatically renders the application template var App = Ember.Application.create({});
- 24. Application Object Route object: App.ApplicationRoute Controller: App.ApplicationController View: App.ApplicationView Template: application var App = Ember.Application.create({});
- 25. Let‟s take a look…
- 26. Ember Inspector Browser add-on for Chrome & Firefox See your routes Inspect your objects Ember Data records
- 28. Let‟s take a look…
- 29. Naming Conventions Ties components together Minimizes code Allows Ember to do its magic Learn them to make your life easier!!!
- 30. Naming Conventions Route object: App.ApplicationRoute Controller: App.ApplicationController View: App.ApplicationView Template: application var App = Ember.Application.create({});
- 31. Naming Conventions Route object: App.EmployeesRoute Controller: App.EmployeesController View: App.EmployeesView Template: employees this.resource( 'employees' );
- 32. Naming Conventions Not part of the Ember API De facto community standard var App = Ember.Application.create({}); What’s up with “App”?
- 33. The Router The router manages the state of the application Manages the location-specific routes Marshalls request for resources to the appropriate location Like a traffic cop directing traffic App.Router.map( function() {…});
- 34. Routes Takes us to “/#/about” Like the streets of your app Location-specific The URL is the key identifier Define the resources needed as a user navigates the app e.g.: a model that requests data this.resource( 'about' );
- 35. Routes App.Router.map( function() { this.resource( accounts' ); // Takes us to ”/#/accounts“ this.resource( „gallery„ ); // Takes us to ”/#/gallery“ });
- 36. Route Aliases http://embertalk:8888/#/aboutus References the „about‟ route this.resource( 'about‟, { path: „/aboutus‟ });
- 37. Route Objects Do the heavy lifting for the routes Customize the behavior of a route Interface with models and controllers App.GalleryRoute = Ember.Route.extend({ model: function() { return App.GalleryPics.findAll(); } });
- 38. Let‟s take a look…
- 39. Templates Client-side parsed via JavaScript Uses the Handlebars framework Special directives act as placeholders for data <script type=“text/x-handlebars” data-template-name=“sayhello”> Hello, <strong>{{firstName}} {{lastName}}</strong>! </script>
- 40. Templates <script type=“text/x-handlebars” data-template-name=“sayhello”> Hello, <strong>{{firstName}} {{lastName}}</strong>! </script>
- 41. Template Expressions Looping - {{#each}} directive: <ul> {{#each friend in model}} <li>{{friend.name}} is my friend</li> {{/each}} <ul>
- 42. Template Expressions Conditional Expressions – {{#if…}} directive: {{#if person}} Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>! {{else}} Please log in. {{/if}}
- 43. Template Expressions Conditional Expressions – Can you do this?: {{#if age >= 18}} {{person.firstName}}, you‟re technically an adult! {{else}} Sorry youngster. Ask your parents for permission. {{/if}}
- 44. Template Expressions Conditional Expressions - Computed Property: isOld: function() { return this.get('age') > 45; }.property() {{#each person in model itemController='person'}} <li>{{person.firstName}}, {{person.age}} {{#if isOld}} – Ready for Centrum Silver!{{/if}}</li> {{/each}}
- 45. Template Expressions Bind attributes to HTML elements: <img {{bindAttr src="link.thumbnailUrl"}} /> Renders this: <img src=“kitten.png"> Can‟t I just do this? <img src={{link.thumbnailUrl}} />
- 46. Template Expressions Links: {{#link-to 'about'}}About{{/link-to}} Links to a route created in the router like this: this.resource( 'about' );
- 47. Template Expressions HTML Tags: <ul> {{#link-to 'about‟ tagName=„li‟}}About{{/link-to}} </ul> Styling: {{#link-to 'about‟ class=“navitem”}}About{{/link-to}}
- 48. {{outlet}} Special placeholder for other templates <script type="text/x-handlebars" data-template-name="application"> {{outlet}} </script>
- 49. Let‟s take a look…
- 50. Models Interface with external APIs Data is typically stored as JSON Two ways to define them: Subclass of Ember.Object Ember Data App.RedditLink = Ember.Object.extend({…});
- 51. Models http://www.reddit.com/r/cute/.json { "kind": "Listing", "data": { "modhash": "a1vty6l4kkc8e96de61136a717e96531a997ebdd8e36180519", "children": [{ "kind": "t3", "data": { "domain": "imgur.com", "banned_by": null, "media_embed": {}, "subreddit": "cute", "selftext_html": null, "selftext": "", "likes": null, "link_flair_text": null, "id": "1b7h10", "clicked": false, "title": "First Easter away from my Mom, she still makes it special.", "media": null, "score": 6, "approved_by": null, "over_18": false, "hidden": false, "thumbnail": "http://f.thumbs.redditmedia.com/63tG_KTJIGF_Vwq5.jpg", "subreddit_id": "t5_2qh5l", "edited": false, "link_flair_css_class": null, "author_flair_css_class": null, "downs": 2,
- 52. Models App.RedditLink = Ember.Object.extend({}); App.RedditLink.reopenClass({ findAll: function() { var links = []; $.getJSON("http://www.reddit.com/r/cute/.json?jsonp=?").then(function(res ponse) { response.data.children.forEach(function (child) { links.pushObject(App.RedditLink.create(child.data)); }); }); return links;
- 53. Models App.GalleryRoute = Ember.Route.extend({ model: function() { return App.RedditLink.findAll(); } }); Links my model to the route & controller for the Gallery URL When a user goes to /gallery, the model is now available with data model is a keyword. It‟s a hook between the route, controller & the model
- 54. Controllers Represent data from the model Can store other data that needs to persist Templates are connected to controllers Controllers may know of a model but not the other way around Created for you automatically if you don‟t define one
- 56. Controllers App.GalleryRoute = Ember.Route.extend({ setupController: function(controller) { controller.set('content', ['red', 'yellow', 'blue']); } });
- 57. Controllers App.GalleryController = Ember.ObjectController.extend({ // the initial value of the `search` property search: ‟lastname‟, isAnimal: function() { return this.get(‟pictype') === „animal‟; }.property() });
- 58. Let‟s take a look…
- 63. Fin…
Editor's Notes
- Aims to simplify the process of building a manageable codebases for a single-page apps
- The team has purposely taken steps to abstract a lot of the complexities inherent in designing and building Model/View/Controller based applications using years of expertise and knowledge gained from building large-scale apps.<reference list above>Taken best practices and patterns and applied it to Ember to make it easier to manage and scale out complex single-page applications.
- Its naming conventions which tie features togetherDictates to some extent a specific way of developing apps that maximizes productivity by lessening complex codeChoice of complementary frameworks like jQuery & handlebars
- Ember went through a long period of updates pre-1.0 with a lot of changes that broke the API.The API is feature-frozen at this point.
- Lastly, Ember does a lot of magic for you. There are times when you’ll look at the code and say “Huh? How’d it do that?” I’ve been there and I’ll do my best to distill things, but I’m not going to dive into the bowels of Ember’s framework code. Instead, I’ll discuss how you can leverage its tools and API to build your app.
- What I’d like to do is help get you up to speed with Ember.js by introducing you to the concepts of the framework. We’ll start off with the usual intro and then gradually ramp up to building a full application.
- At it’s most basic level, an Ember app only needs this one line to technically be considered an “app”.This code sets up an instance of the Ember Application object along with a default application template, event listeners and application router. Take a second and try to think of the code you would normally have to write to create a global namespace, a client-side template, bind event handlers for global user interaction and include history & state management in your code. Yes, that one line does all of that. Let’s be clear though. I’m not saying it’s doing all of your work for you but it is creating the foundation you’ll build upon, via one method call.
- One of the ways that Ember.js helps to minimize the amount of code needed and handle things for you behind the scenes is through naming conventions. The way that you define and name your routes (and resources) impacts the naming of your controllers, models, views and templates
- One of the ways that Ember.js helps to minimize the amount of code needed and handle things for you behind the scenes is through naming conventions. The way that you define and name your routes (and resources) impacts the naming of your controllers, views and templates
- Routing is arguably the most difficult concept to understand in Ember so I’ll do my best to break it down to manageable steps. As a user navigates your application, there needs to be a method of managing the state of the various parts the user visits. That’s where the application’s router and location-specific routes come in. The Ember router object is what manages this through the use of routes that identify the resources needed for specification locations. I like to think of the router as a traffic cop that’s directing traffic.
- Routes specify parts of the application and the URLs associated to them. The URL is the key identifier that Ember uses to understand which application state needs to be presented to the user. You do this by creating a route for specific locations within your application using the resource() method. In this example, we’ve created a route for the “about” section of our app. When a user goes to the about URL, the router directs the request to the route where resources can then be loaded accordingly.
- The behaviors of a route (e.g.: requesting data from a model) are managed via instances of the Ember route object and are fired when a user navigates to a specific URL
- Route objects do the heavy lifting for the routes. This is where you’ll generally add all of the behavioral code needed when a user goes to a specific URL.Naming conventions are important to make tying routes and route objects together so in this case, I would expect to have a route named Gallery which is directly tied to the GalleryRoute class above. When the user visits the gallery URL, it will know internally that it needs to reference the GalleryRoute class and load appropriate resources.
- Templates are a key part of defining your user interface. As I mentioned previously, Handlebars is the client-side library used in Ember and the expressions provided by the library are used extensively when creating the UI for your application. Here’s a simple example. When Ember parses this template, it replaces the placeholders with the actual data.
- Handlebars offers important an extensive variety of directives to do things like conditional expressions or looping over a data set.
- Handlebars offers important an extensive variety of directives to do things like conditional expressions or looping over a data set.
- Handlebars offers important an extensive variety of directives to do things like conditional expressions or looping over a data set.
- It also allows you to bind attributes to HTML elements or create links that are bound to routes.
- It also allows you to bind attributes to HTML elements or create links that are bound to routes.
- It also allows you to bind attributes to HTML elements or create links that are bound to routes.
- Models are an object representation of the data your application will use. It could be a simple array or data dynamically retrieved from a RESTful JSON API, via an Ajax request.There are two ways of working with data in Ember: the Ember Data library or subclassingEmber.Object. Ember Data is the future of data management in Ember but it’s not ready for production so I’m going to focus on building object instances that represent your data.
- For example, let’s say we have this VERY large bit of JSON data from Reddit. If you’ve ever worked with JSON, this hierarchical, key/pair style response should be familiar to you.
- In Ember, I would first create a subclass of Ember.Object using the extend method.Next, I would use Ember’s reopenClass method to extend the objects API and add a method to make the Ajax call to reddit, loop through the response, load each bit of child data into an array and return it. Easy Peazy.
- Once my model has been defined, I want to hook it up to my route object via a keyword called model. It’s also known as the model hook and gives the route object and its controller access to the attributes of the model.
- Controllers are typically used to represent model data and attributes. They act like a proxy, giving you access to the model’s attributes and allowing templates to access them to dynamically render the display. This is why a template will always be connected to a controller.The main thing to remember is that, while a model retrieves data, a controller is what you’ll use to programmatically expose that data to different parts of your application. While it may seem that models and controllers are tightly coupled, in fact, models, themselves, have no knowledge of the controllers that will use them later on.You can also store other application properties that need to persist but don’t need to be saved to a server.
- In Ember.js, templates know about controllers and controllers know about models, but the reverse is not true. A model knows nothing about which controllers are interfacing with it.This also means that as far as a template is concerned, all of its properties come from its controller, and it doesn't need to know about the model directly.
- You can explicitly define a controller with the route object using the setupController method. In this case, the controller is setting up static data via property called content.
- You can also create a controller bysubclassingEmber.Controller. Again, this is an example of where naming conventions are important. Because of its name, Ember would assume that this controller belongs to the gallery route.
- Now that we’ve gone over the core concepts of Ember, let’s work towards actually building something. I realize that was a lot to take in but don’t stress. We’ll be taking baby steps in the next chapters and don’t forget that you have a number of online resources available to you if you do get stuck.
- What I’d like to do is help get you up to speed with Ember.js by introducing you to the concepts of the framework. We’ll start off with the usual intro and then gradually ramp up to building a full application.
- What I’d like to do is help get you up to speed with Ember.js by introducing you to the concepts of the framework. We’ll start off with the usual intro and then gradually ramp up to building a full application.