3. “Programs must be written for people to
read and only incidentally for machines
to execute.”
-H. Abelson and G. Sussman in “The Structure and Interpretation of Computer Programs”
7. Javascript Essentials
JavaScript is an Object Oriented
language where almost everything is an
object, a set of key-value pairs.
8.
9. Javascript Essentials
This lack of Classes makes it easy to
follow one of the Gang of Four’s rules;
Prefer object composition over class
inheritance.
10.
11. Javascript Essentials
JavaScript is now being used to create
complex applications. A little bit of thought,
and a well planned architecture can help
solve all sorts of problems down the line.
12.
13. Javascript Essentials
“The secret to building large apps is
to never build large apps. Break your
application into small pieces. Then
assemble those testable, bite-sized
pieces into your application.”
-Justin Meyer
19. jQuery
jQuery plays a much smaller role in
large JavaScript applications than most
developers realize.
20.
21. Problems from jQuery
jQuery is only part of the solution:
it does not provide any
recommendations on how to structure
your code.
22.
23. I learned to love the Pattern
Patterns are proven solutions
Patterns can be easily reused
Patterns can be expressive
Patterns are not exact solutions
24.
25. Callback Functions
var shine = function() {
// some action
},
rise = function(callback) {
// .. do something
callback();
// .. do something else
}
rise(shine);
41. Application Core
Manages the module lifecycle, It reacts
to events passed to it and starts,
stops, or restarts modules when
necessary.
42.
43. Modules.
If specific parts of your app fail, can it still function?
How much do modules depend on others in the system?
How much of this is instantly reusable?
Can single modules exist on their own?
Can single modules be tested independently?
Is your application tightly coupled?
44.
45. “The more tied components are to
each other, the less reusable they will
be, and the more difficult it becomes
to make changes to one without
accidentally affecting another”
-Rebecca Murphey
57. MV* for JavaScript
All JavaScript libraries interpret MVC a
little differently.
Just make sure that you’re aware of it.
58.
59. Introducing Backbone
-Flexible conventions for structuring
applications
-Event-driven communication between views
and models
-Supports data bindings through manual
events
63. Backbone Model
var User = Backbone.Model.extend({
initialize: function(name){
this.set({name: name});
}
});
var user = new User("Aaron Maturen");
console.log(user.get('name')); //Aaron Maturen
67. Backbone Model: Validate
var User = Backbone.Model.extend({
validate: function(atts){
if(!atts.email || atts.email.length < 3) {
return "email must be at least 3 characters";
}
}
});
68.
69. Backbone Collection
var Users = Backbone.Collection.extend({
model: User
});
users.bind("change", function(user){
console.log("I feel a disturbance in the force.");
});
var user = users.get('some-id');
var user = users.getByCid('some-cid');
89. Backbone Benefits
Easier to maintain, when updates are
needed, it’s clear whether the changes are
data-centric, or visual.
Decoupling models and views makes it
easier to right unit tests for business logic.
Modularity allows developer teams to work
on logic and user interfaces simultaneously.
90.
91. Backbone Server Verbs
var User = Backbone.model.extend({
url: '/users'
});
Verb Action
create POST /collection
read GET /collection[/
update id] /collection/id
PUT
delete DELETE /
collection/id
92.
93. Backbone Server
var user = new User();
user.set({name: "Phillip"});
user.bind('error', function(e){
//the server returns an error
}
user.save(null, {
success: function() {
// user saved successfully
},
failure: function() {
// user save failed
}
});
