Ember.js - A JavaScript framework for creating ambitious web applications
JulianaLucena
9,669 views
34 slides
Oct 26, 2012
Slide 1 of 34
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
About This Presentation
Dev-day presented at Redu Educational Technologies about Ember.js.
It points some Ember.js' benefits and gives an overview.
Slide Content
Dev-day
Ember.js A JavaScript framework for creating ambitious web
applications
Juliana Lucena
26 Oct 2012
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
•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
•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
•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
•http://emberjs.com/examples/
•https://github.com/dgeb/
ember_data_example
5
Ember.js MVC 6
MVC Workflow
Model
Controller
View
Updates
Model
Notifies
Updates
View
User
action
7
Router
•Tracks the app’s state
•Affects the application’s view hierarchy
•Mediates between the MVC components
URL Usable app state
Deserialize
Serialize
Model
Controller
View
Updates
Model
Notifies
Updates
View
User
action
7
Router
•Tracks the app’s state
•Affects the application’s view hierarchy
•Mediates between the MVC components
URL Usable app state
Deserialize
Serialize
Hello Redu
8
var App = Em.Application.create();
App.ApplicationView = Em.View.extend({
templateName: 'application'
});
App.ApplicationController = Em.View.extend({!
});
App.Router = Em.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/'
})
})
});
App.initialize();
(...)
<body>
<script type="text/x-handlebars"
data-template-name="application">
<h1>Hello Redu! (chuckle)< /h1>
</script>
</body>
(...)
index.html
http://jsfiddle.net/x8zpH/1/
8
var App = Em.Application.create();
App.ApplicationView = Em.View.extend({
templateName: 'application'
});
App.ApplicationController = Em.View.extend({!
});
App.Router = Em.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/'
})
})
});
App.initialize();
(...)
<body>
<script type="text/x-handlebars"
data-template-name="application">
<h1>Hello Redu! (chuckle)< /h1>
</script>
</body>
(...)
index.html
http://jsfiddle.net/x8zpH/1/
M for Model
Ember.Object 9
Ember.Object 9
Ember.Object
•Enhanced JavaScript object model
•Computed Properties (synthetizes
properties)
•Observers (reacts to changes)
•Bindings (syncs objects)
10
Always access properties
using get and set
•Enhanced JavaScript object model
•Computed Properties (synthetizes
properties)
•Observers (reacts to changes)
•Bindings (syncs objects)
10
Always access properties
using get and set
11
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')
});
var john = App.Person.create({
firstName: "John",
lastName: "Doe"
});
john.get("fullName"); // John Doe
Computed Property
http://jsfiddle.net/cBWsr/2/
femalesCount: function() {
var people = this.get('people');
return people.filterProperty( 'isFemale', true).
get('length');
}.property('[email protected]' )
What about computed property for arrays, hãn?
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')
});
var john = App.Person.create({
firstName: "John",
lastName: "Doe"
});
john.get("fullName"); // John Doe
Computed Property
http://jsfiddle.net/cBWsr/2/
femalesCount: function() {
var people = this.get('people');
return people.filterProperty( 'isFemale', true).
get('length');
}.property('[email protected]' )
What about computed property for arrays, hãn?
Ember.Object
12
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')
});
var john = App.Person.create();
john.set('firstName', 'John');
john.get("login"); // john
Observer
http://jsfiddle.net/X7QBU/3/
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')
});
var john = App.Person.create();
john.set('firstName', 'John');
john.get("login"); // john
Observer
http://jsfiddle.net/X7QBU/3/
Ember.Object
13
App = Ember.Application.create({});
App.wife = Ember.Object.create({
householdIncome: 80000
});
App.husband = Ember. Object.create({
householdIncomeBinding: 'App.wife.householdIncome'
});
Ember.run.later(function() {
// someone gets a raise
App.husband.set('householdIncome', 90000);
}, 3000);
Binding
http://jsfiddle.net/qQ382/
<script type="text/x-handlebars" >
Wifes income: {{App.wife.householdIncome}}<br/>
Husbands income: {{App.husband.householdIncome}}
</script>
See the magic inside the view
Ember.Object
App = Ember.Application.create({});
App.wife = Ember.Object.create({
householdIncome: 80000
});
App.husband = Ember. Object.create({
householdIncomeBinding: 'App.wife.householdIncome'
});
Ember.run.later(function() {
// someone gets a raise
App.husband.set('householdIncome', 90000);
}, 3000);
Binding
http://jsfiddle.net/qQ382/
<script type="text/x-handlebars" >
Wifes income: {{App.wife.householdIncome}}<br/>
Husbands income: {{App.husband.householdIncome}}
</script>
See the magic inside the view
Ember.Object
Ember.Object
•Apply for Models
•Apply for Controllers
•Apply for Views
•Apply for (...)
14
•Apply for Models
•Apply for Controllers
•Apply for Views
•Apply for (...)
14
Time for Dojo 15
Time for Dojo
16
•Already?
•It will be in a paused way
•We have so many concepts to discuss
16
•Already?
•It will be in a paused way
•We have so many concepts to discuss
Time for Dojo
17
todo doingverifydone
17
todo doingverifydone
Time for Dojo
18
•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
•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)
Time for Dojo
•Spoiler: http://jsfiddle.net/37YMc/2/
19
•Spoiler: http://jsfiddle.net/37YMc/2/
19
Router 20
Router
21
•Maps URLs to states and vice versa
•Preferred for building large apps
•Can link views based on the state
•Loves name conventions
21
•Maps URLs to states and vice versa
•Preferred for building large apps
•Can link views based on the state
•Loves name conventions
Router
22
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
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);
},
})
})
})
});
WTF is outlet?
23
ContactsView
(objects)
router.get('applicationController' ).
connectOutlet('contacts', objects);
Name convention
Name convention
Passed objects
ApplicationView
{{outlet}}
23
ContactsView
(objects)
router.get('applicationController' ).
connectOutlet('contacts', objects);
Name convention
Name convention
Passed objects
ApplicationView
{{outlet}}
C for Controller 24
C for Controller
•Controller simple controller
•ObjectController support to manipulate
an Object
•ArrayController support to manipulate a
collection
25
•Controller simple controller
•ObjectController support to manipulate
an Object
•ArrayController support to manipulate a
collection
25
push
C for Controller
26
App.ContactController = Em.ObjectController.extend({
someProperty: 'cool-value',
destroyRecord: function() {
this.get('content').destroy();
}
});
App.ContactsController = Em.ArrayController.extend({
createContact: function(name) {
var contact = App.Contact.create({ name: name });
this.pushObject(contact);
},
});
pushing a object to a controller’s collection
Accessing the content
Remember that all
binding’s magic apply to
Controllers
C for Controller
26
App.ContactController = Em.ObjectController.extend({
someProperty: 'cool-value',
destroyRecord: function() {
this.get('content').destroy();
}
});
App.ContactsController = Em.ArrayController.extend({
createContact: function(name) {
var contact = App.Contact.create({ name: name });
this.pushObject(contact);
},
});
pushing a object to a controller’s collection
Accessing the content
Remember that all
binding’s magic apply to
Controllers
V for View 27
V for View
28
•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
•Always associated with a template
•Your friend when dealing with browser
events
•touch (touchStart), keyboard (keyDown),
mouse (mouseDown), form (submit), drag
and drop (dragStart),
V for View
29
App.EditContactView = Ember.View.extend({
templateName: 'edit_contact',
tagName: 'form',
classNames: ['form-horizontal'],
didInsertElement: function() {
this._super();
this.$('input:first').focus();
},
submit: function(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>
DOM event
Browser event
29
App.EditContactView = Ember.View.extend({
templateName: 'edit_contact',
tagName: 'form',
classNames: ['form-horizontal'],
didInsertElement: function() {
this._super();
this.$('input:first').focus();
},
submit: function(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>
DOM event
Browser event
Handlebars
helpers 30
helpers 30
Handlebars helpers
31
•{{#if}}
•{{#each}}
•{{view}}
•{{action}}
31
•{{#if}}
•{{#each}}
•{{view}}
•{{action}}
Final doubts 32
References
•http://emberjs.com/ (updated
yesterday!)
•http://emberwatch.com/
33
•http://emberjs.com/ (updated
yesterday!)
•http://emberwatch.com/
33
Thanks. /o/ 34Juliana Lucena
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 9,669
- Slides 34
- Favorites 16
- Age 4787 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
32 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
35 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
32 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
29 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
30 views