Ember.js - A JavaScript framework for creating ambitious web applications

Dev-day
Ember.js
A JavaScript framework for creating ambitious web
applications

Juliana Lucena
26 Oct 2012

Why?

• Clearly separate back-end and front-
end
• Faster user app interaction
• Makes your life easier :)

2

Ember.js

• Browser based MVC framework
• Eliminates boilerplate
• Provides architecture
• Based on event propagation

3

Dependencies

• jQuery
• Handlebars.js - Template language

<script type="text/x-handlebars" data-template-name="answer">
<a href="#" class="author-name">{{ answer.author.name }}</a>
<span class="status-info">respondeu:</span>
{{#if answer.created_at}}
{{datetime answer.created_at}}
{{/if}}
<p class="input-user">{{ answer.content.text }}</p>
</script>

4

Examples

• http://emberjs.com/examples/
• https://github.com/dgeb/
ember_data_example

5

MVC Workﬂow

User
Notiﬁes
Model action
View

Updates
Controller Updates

• Tracks the app’s state
Router • Affects the application’s view hierarchy
• Mediates between the MVC components
Serialize
URL Usable app state
Deserialize

7

Hello Redu

var App = Em.Application.create();

App.ApplicationView = Em.View.extend({
templateName: 'application'
});

App.ApplicationController = Em.View.extend({!
});

App.Router = Em.Router.extend({ index.html
root: Ember.Route.extend({
(...)
index: Ember.Route.extend({
<body>
route: '/' <script type="text/x-handlebars"
}) data-template-name="application">
}) <h1>Hello Redu! (chuckle)</h1>
}); </script>
</body>
(...)
App.initialize();

http://jsﬁddle.net/x8zpH/1/

8

M for Model
Ember.Object

9

Ember.Object

• Enhanced JavaScript object model
• Computed Properties (synthetizes
properties)
• Observers (reacts to changes)
• Bindings (syncs objects)
Always access properties
using get and set

10

Ember.Object

var App = Ember.Application.create();

App.Person = Em.Object.extend({
firstName: null,
lastName: null,

fullName: function(){
return this.get('firstName') + " " + this.get('lastName');
}.property('firstName', 'lastName')
}); Computed Property

var john = App.Person.create({
firstName: "John",
lastName: "Doe"
});
john.get("fullName"); // John Doe
What about computed property for arrays, hãn?

femalesCount: function() {
http://jsﬁddle.net/cBWsr/2/ var people = this.get('people');
return people.filterProperty('isFemale', true).
get('length');
}.property('people.@each.isFemale')

11

Ember.Object

var App = Ember.Application.create();

App.Person = Em.Object.extend({
login: null,
firstName: null,

changedFirstName: function(){
this.set('login', this.get('firstName').toLowerCase());
}.observes('firstName')
}); Observer

var john = App.Person.create();
john.set('firstName', 'John');
john.get("login"); // john

http://jsﬁddle.net/X7QBU/3/

12

Ember.Object

App = Ember.Application.create({});

App.wife = Ember.Object.create({
householdIncome: 80000
});

App.husband = Ember.Object.create({
householdIncomeBinding: 'App.wife.householdIncome'
Binding
});

Ember.run.later(function() {
// someone gets a raise
App.husband.set('householdIncome', 90000);
}, 3000);
See the magic inside the view
<script type="text/x-handlebars" >
Wifes income: {{App.wife.householdIncome}}<br/>
Husbands income: {{App.husband.householdIncome}}
http://jsﬁddle.net/qQ382/ </script>

13

Ember.Object

• Apply for Models
• Apply for Controllers
• Apply for Views
• Apply for (...)

14

Time for Dojo

• Already?
• It will be in a paused way
• We have so many concepts to discuss

16

Time for Dojo

todo doing verify done

17

Time for Dojo

• Scrum board
• Stories and tasks (executed by a person)
• I want to create stories (tasks)

• I want to edit stories (tasks)

• I want to delete stories (tasks)

• I want to assign a task for me

• No server integration (for now)
Next dev-day /o/
(ember-data)
18

Time for Dojo

• Spoiler: http://jsﬁddle.net/37YMc/2/

19

Router

• Maps URLs to states and vice versa
• Preferred for building large apps
• Can link views based on the state
• Loves name conventions

21

Router

App.Router = Ember.Router.extend({
root: Em.Route.extend({
contacts: Em.Route.extend({
route: '/',
redirectsTo: 'index'

index: Em.Route.extend({
route: '/',

connectOutlets: function(router) {
router.get('applicationController').connectOutlet('contacts',
App.Contacts.findAll());
}
}),

contact: Em.Route.extend({
route: '/contacts/:contact_id',

connectOutlets: function(router, context) {
router.get('contactsController').connectOutlet('contact', context);
},
})
})
})
});

22

WTF is outlet?

ApplicationView Name convention

{{outlet}}
router.get('applicationController').
connectOutlet('contacts', objects);

Name convention

Passed objects

ContactsView
(objects)

23

C for Controller

• Controller simple controller

• ObjectController support to manipulate
an Object

• ArrayController support to manipulate a
collection

25

C for Controller

Accessing the content
App.ContactController = Em.ObjectController.extend({
someProperty: 'cool-value',

destroyRecord: function() {
this.get('content').destroy();
}
});

pushing a object to a controller’s collection

App.ContactsController = Em.ArrayController.extend({
createContact: function(name) {

push
var contact = App.Contact.create({ name: name });
this.pushObject(contact);
},
});
Remember that all
binding’s magic apply to
Controllers
26

V for View

• Always associated with a template
• Your friend when dealing with browser
events
• touch (touchStart), keyboard (keyDown),
mouse (mouseDown), form (submit), drag
and drop (dragStart),

28

V for View

App.EditContactView = Ember.View.extend({
templateName: 'edit_contact',
tagName: 'form',
classNames: ['form-horizontal'],

didInsertElement: function() {
DOM event
this._super();
this.$('input:first').focus();
},

submit: function(event) {
Browser event
event.preventDefault();
this.get('controller').updateRecord();
}
});

<script type="text/x-handlebars" data-template-name="edit_contact">
{{ view Ember.TextArea }}
<button class="button-primary" type="submit">Enviar</button>
</script>

29

Handlebars
helpers

30

Handlebars helpers

• {{#if}}
• {{#each}}
• {{view}}
• {{action}}

31

References

• http://emberjs.com/ (updated
yesterday!)
• http://emberwatch.com/

33

Thanks. /o/

Juliana Lucena

34

Ember.js - A JavaScript framework for creating ambitious web applications

Recommended

More Related Content

What's hot (20)

Similar to Ember.js - A JavaScript framework for creating ambitious web applications (20)

Recently uploaded (20)

Ember.js - A JavaScript framework for creating ambitious web applications