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..
2. Ember users in Production
For more users http://emberjs.com/ember-users/
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. 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
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. Pre-requisites(To set up application)
• Node(npm)
• from https://nodejs.org
• 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. App Folder Structure
• Creating a new application
• Cmd: ember new my-first-ember-app
• Folder Structure
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. 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. 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. 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. 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. • 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.
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. 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. 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. 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. 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. 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.
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.
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 = this.store.findRecord('post', 1); // => GET /posts/1
• var post = this.store.peekRecord('post', 1); // => no network request
• RETRIEVING MULTIPLE RECORDS
• var posts = this.store.findAll('post'); // => GET /posts
• var posts = this.store.peekAll('post'); // => no network request
• QUERYING FOR MULTIPLE RECORDS
• var peters = this.store.query('person', { name: 'Peter' }); // => GET to
/persons?name=Peter
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
AJAX – Asynchronous Javascript and XML
In 2007 – check from above image
In 2008, Sproutcore become popular when Apple announced that MobileMe, iCloud application was using this framework.
In 2011, Sproutcore 2 framework was renamed to Ember.js to distinguish from Sproutcore 1.x.
Ember.js introduced the MVC design pattern to build the modern single page web application
Latest version is Ember-cli (CLI – Command Line Interface) has more command line similar to Rails to generate codes…
Eg., ember generate controller, … adapter, model, resources(routes and model)
user = Ember.Object.create({ firstName: 'Sam', lastName: 'Smith' })
Show the code from IDE
Explain about
Router:
Entry point of the application
Manages the state of the application by monitoring the URL patterns and then instantiates the Controller and Model objects
Controller:
Manage the transient state of the application, a state that is not persisted to the server
Change or decorate the properties of the model object to present the users
Model:
Encapsulate the data on which controllers and views work
Define properties and behavior
View/Component:
Encapsulate templates and enable us to make custom reusable elements
Templates:
Mostly handlebars templates are used
Handlebar Templates are a mix of HTML markup and custom markup to bind the data present in controllers and models with the view
Can also use other templates as well.. Like emblem,etc
Person = Ember.Object.extend({ say(thing) { alert(thing); } });
var person = Person.create(); // create instances
Person.say(‘test’); // call the specific method
Eg:- To create with the initial value
Person = Ember.Object.extend({ helloWorld() { alert("Hi, my name is " + this.get('name')); } });
var tom = Person.create({ name: "Tom Dale" });
tom.helloWorld(); // alerts "Hi, my name is Tom Dale"
Most Ember.js applications use Ember Data,[ a data persistence library providing many of the facilities of an object-relational mapping (ORM).
However it is also possible to use Ember.js without Ember Data.
However it is also easily configurable and can work with any server through the use of adapters and addons.[40]
JSON API has server library implementations for PHP, Node.js, Ruby, Python, Go, .NET and Java.[41] Connecting to a Java-Spring based server is also documented.[42]
The first stable version of Ember Data (labelled 1.13 to align with Ember itself) was released on 18 June 2015.[43]