A framework for creating ambitious web applications
Created by @PedroCheckos for @BitTitan
Heads Up!
Ember is an open-source client-side JavaScript web application framework based on the MVC software architectural pattern.
It allows developers to create scalable single-page applications (SPA) by incorporating common idioms and best practices into a framework.
Why using SPA frameworks?
(great question, thanks for asking!)
1. It's lightweight!
Let's your server CTFO while the clients are working...
2. Decoupling
No more aspx.cs doing data retrievals + state management + page rendering + SMTP mailer + coffee ...
Such as...
// Button visibility
this.ButtonBack.Visible = (this.CurrentMode == PageMode.List) && (!isStandaloneDesktopDeployment);
this.ButtonNext.Visible = (this.CurrentMode == PageMode.List);
this.ButtonCancel.Visible = (this.CurrentMode != PageMode.List);
this.ButtonAddMailbox.Visible = (this.CurrentMode == PageMode.List);
this.HyperLinkBulkEdit.Visible = (this.CurrentMode == PageMode.List);
this.ButtonSave.Visible = (this.CurrentMode == PageMode.AddSingle) || (this.CurrentMode == PageMode.Edit);
this.LinkButtonDeleteAllUsers.Visible = (this.CurrentMode == PageMode.List) && hasUsers;3. Better user experience
More native-app-like user experience, taking full advantage of CSS and JavaScript capabilities.
Client-side state, maintained during the whole life of the application.
What comes with Ember?
Free love, essentially.
Before Ember
Developers had to download and make work together a shit load of libraries to write their application (route, history, DOM, events, Ajax, storage, caching, ...).
Ember comes with...
A router
Translates a URL into a series of nested templates, each backed by a model. Ember automatically keeps the URL in the browser's address bar up-to-date.
App.Router.map(function() {
this.route("projects", { path: "/projects" });
this.route("mailboxes", { path: "/mailboxes" });
});A store
Central repository (cache) of records in an application. All routes have access to this shared store; when they need to display or modify a record, they will ask the store for it.
App.MailboxRoute = Ember.Route.extend({
model: function() {
return this.store.find('mailbox', 1);
}
});A templating system
Templates are written in the Handlebars templating language and describe the user interface. Each template is backed by a model, and the template automatically updates itself if the model changes.
{{input type="text" value=firstName}}
<ul>
{{#each photo in photos}}
<li>{{#link-to 'photos.edit' photo}}{{photo.title}}{{/link-to}}</li>
{{/each}}
</ul>Models
A model is an object that stores persistent state. In many applications, models are loaded via an HTTP JSON API.
App.Project = DS.Model.extend({
name: attr('string'),
createdAt: attr('date')
});Controllers
A controller gets a model from a route. Then, it makes the bridge between the model and the view or template.
App.ProjectController = DS.ObjectController.extend({
cannotSave: function () {
return Ember.computed.empty('firstName') || Ember.computed.empty('lastName');
}.property('firstName', 'lastName')
});<button {{action "save"}} {{bind-attr disabled="cannotSave"}}>Save</button>If we put things together
200 projects and counting
- ember-data: data persistence library
- ember-validations: client-side model validation
- ember-auth: authentication framework
- ember-i18n: internationalization
- ember-qunit: unit tests
- ember-sockets, ember-notify, ember-prerender, ...
The cherry on the cake:
ember-cli
Command line interface for Ember projects.
Who is behind it?
- Core team of about 20 developers from several companies
- 402 contributors submitted 7,250 commits
- First commit on April 30, 2011
- Ember data: 215 contributors / 2,440 commits
Commits on GitHub (1 year)
Most popular projects on GitHub
| Rank | Name | Stars | Forks |
|---|---|---|---|
| 1 | Bootstrap | 71,596 | 26,754 |
| 2 | Node.js | 31,760 | 7,089 |
| 3 | JQuery | 31,692 | 7,276 |
| 9 | Ruby on Rails | 23,136 | 8,740 |
| 27 | Linux | 15,457 | 6,198 |
| 45 | Ember.js | 11,213 | 2,421 |
Demo Time!
OMG yay so excited...
The End
Glad you enjoyed.
Ember.js
By Guillaume Zurbach
Ember.js
Quick intro to Ember.js for our back-end developers!
