Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ember - introduction


Published on

Ember.js - introduction

I have searched for Ember ppt in the internet. Got many things but not like structured... So i have just combined and made a new one..

I am just learning and not an expert. Please share your comments, so i can keep up myself..

Published in: Software
  • Be the first to comment

Ember - introduction

  1. 1. Ember.js - introduction ‘A framework for creating ambitious web applications’
  2. 2. Ember users in Production For more users
  3. 3. Ember.js: What • Frontend JavaScript web application framework • Based on model-view-controller (MVC) • Used to write complex front-end heavy web apps • Designed for Single Page Applications • Gives you an organized structure, conventions and built-in ways • Like Angular, backbone & knockout, now ember to help developers build great front end application • Key Developers: Yehuda Katz, Tom Dale
  4. 4. Ember : why • Logical code organization • Convention similar to Rails background • Easy persistence • Saving or deleting object is easier • Auto-updating templates(Two way binding) • {{ myProperty }} • Helpful Object API’s • Build-in methods • Ember has Array object with methods like contains, filterBy, sortBy, etc • Debugging : The Ember inspector for Firefox and Chrome
  5. 5. History
  6. 6. MVC
  7. 7. Ember-cli • Ember CLI aims to be one such Ember.js command line utility that we can use to build, develop and ship ambitious SPA • Includes fast asset pipeline broccoli • Draws heavy inspiration from Rails asset pipeline • Runs on node.js and independent of backend platform • Figures out which files have changed and only rebuilds those that were modified • Assets supported by Broccoli like Handlebars, Emblem, LESS, Sass, Compass, Stylus, CoffeeScript, EmberScript, Minified JS and CSS • Every Ember-cli project will contain a file called Brocfile.js present at the root of the project. This is the definition file and contains build specific instructions of the project. (In latest version of Ember-cli, file renamed to ember-cli-build.js) • Ember CLI uses bower as the default tool to manage the dependencies of our application and lets us to easily manage and keep frontend dependencies up-to-date • Ember CLI uses npm(Node Package Manager) to manage its internal dependencies. • Ember CLI comes with content security add on, this guards from XSS attacks
  8. 8. Pre-requisites(To set up application) • Node(npm) • from • Ember-cli(ember-cli) • via npm install –g ember-cli • Bower(bower) • via npm install –g bower • PhantomJS(phantomjs) • via npm install –g phantomjs
  9. 9. App Folder Structure • Creating a new application • Cmd: ember new my-first-ember-app • Folder Structure
  10. 10. App Folder Details• app/components • All components of our application like reusable components used for view or models • app/controllers • Contains the controller modules of our application • app/helpers • Contain all the handlebars helpers for view • app/models • Contain all the ember-data model modules • app/routes • Contains all application routes • app/styles • Contains stylesheets • app/templates • Contains all the handlebars/HTMLBars templates • app/views • Contains all our application views • app/router.js • Contains our route configuration • Routes defined here are resolved from the modules defined in app/routes/
  11. 11. App Folder Details cont.. • app/app.js • Main entry point of our application and contains configuration applies to our Ember.js application • Have default generated code which exports our Ember.js application inherits from Ember.Application class • app/index.js • main file for the Single Page web Application. • has the structure of our application, includes js and css files • Includes certain hooks like {{content-for 'head'}}, {{content-for 'head-footer'}}, {{content-for 'body'}}, {{content-for 'body-footer'}}
  12. 12. Supporting Files and Folder • bower_components • Contains all dependencies which Ember CLI installs via bower • bower components are listed in bower.json configuration file • config/environment.js • Placeholder of our application configuration • Supports different configurations for different configuration for our application, by default it has created configurations for development, test and production environments • node_modules • Contains the node dependencies used by Ember CLI • public • Contains assets that should be copied as they are to the root of the packaged application • vendor • This folder should contains libraries which cannot be installed using bower or npm • The libraries in vendor should then be imported into the broccoli asset pipeline by adding in Brocfile.js/ember-cli-build.js • test • Contains helpers and resolver to run unit and integration tests using the Ember testing module • Cmd: ember test or http://localhost:4200/test in browser • Ember Cli uses Qunit as its testing library
  13. 13. Supporting Files and Folder cont… • brocfile.js/ember-cli-build.js: • Build instructions for broccoli asset pipeline • Additional libraries included if we import the files • Eg: app.import(‘bower_components/bootstrap/dist/css/bootstrap.css’); • bower.json • Configuration file for bower and contains the dependencies of our application that need to installed via bower • package.json • Configuration file for npm and contains node.js dependencies required by our application
  14. 14. Running the application • Cmd : ember server • By default runs on 4200 port • For different port • Cmd: ember server –port 4300 Or Add configuration in .ember-cli by adding {“port”: 4300}
  15. 15. • Ember.js strongly relies on naming conventions. So, if you want the page /foo in your app, you will have the following: • a foo template, • a FooRoute, • a FooController, • and a FooView.
  16. 16. Components • Router/Route • Controller • Model • View/Component • Templates
  17. 17. Concepts Map
  18. 18. The router • Routes are the root of all other concepts in Ember • The router drives the rest of the gears in ember router.js eg:- this.route(‘users’); Route class • Sets up the model (data) and the controller • Will take actions/events that bubble up it from the controller
  19. 19. Models • Defines the data you need • Uses attributes for defining the data type: number, boolean, string, etc. • Also uses relational mapping for defining relationship between models: hasMany, belongsTo, etc.
  20. 20. Controller • Takes the model from the route • Model can be an object or an array/collection • Is responsible for: • Mutating the model • User interaction • Page logic • Can define observable and computed properties
  21. 21. Template(Handlebars markup) • Uses Handlebars as the rendering language • Mostly plain old HTML • Hooks to controller - provides the logic • Hooks to the model - provides the data
  22. 22. View • A class for when doing DOM manipulation is necessary • If you need to do DOM manipulation, you should ask yourself what you may be doing wrong • Should not be used often
  23. 23. Components • Reusable parts • Your own HTML tags/elements • Any part of your application that repeats is a candidate for a component • Ember comes with a bunch of these: • Input box helpers, dropdown menu, links, etc.
  24. 24. Adapter If caching happens Architecture overview For a new Record
  25. 25. Note on coupling - In Ember.js, templates get their properties from controllers, which decorate a model. - templates know about controllers and controllers know about models, but the reverse is not true. A model knows nothing about which (if any) controllers are decorating it, and a controller does not know which templates are presenting its properties. - For example, if the user navigates from /posts/1 to /posts/2, the PostController's model will change from store.findRecord('post', 1) to store.findRecord('post', 2). The template will update its representations of any properties on the model, as well as any computed properties on the controller that depend on the model.
  26. 26. Example for routes and its components
  27. 27. Few Codes • To define a new Ember class, call the extend() method on Ember.Object • Eg:- • Person = Ember.Object.extend({ say(thing) { var name = this.get('name'); alert(name + " says: " + thing); } }); • RETRIEVING A SINGLE RECORD • var post ='post', 1); // => GET /posts/1 • var post ='post', 1); // => no network request • RETRIEVING MULTIPLE RECORDS • var posts ='post'); // => GET /posts • var posts ='post'); // => no network request • QUERYING FOR MULTIPLE RECORDS • var peters ='person', { name: 'Peter' }); // => GET to /persons?name=Peter
  28. 28. FewNotes • EMBER.OBJECT • Ember implements its own object system. The base object is Ember.Object. All of the other objects in Ember extend Ember.Object. • user = Ember.Object.create() • user = Ember.Object.create({ firstName: hari', lastName: c' }) • Getter • user.firstName or user.get(‘firstName’) • CLASSES • var Person = Ember.Object.extend({ say: function (message) { alert(message); } }); • var bob = Person.create(); bob.say('hello world'); • // alerts "hello world" • Ember-Data • Ember-Data is a library that lets you retrieve records from a server, hold them in a Store, update them in the browser and, finally, save them back to the server. The Store can be configured with various adapters • RESTAdapter interacts with a JSON API • LSAdapter persists your data in the browser’s local storage
  29. 29. Resources • • • • Ebook: Ember.js Web development with Ember CLI – Suchit Puri • Ebook: Ember-cli-101: An Ember.js book with ember-cli •, codeschool • Youtube tutorials • ember tutorial