Library:
- A set of tools to reduce overhead and improve application consistency by providing reusable pieces of code.
- A library provides useful tools for a specific purpose (functions, helper libs) so you can build your app your way.
Framework:
- A more opinionated set of tools to reduce overhead and improve application consistency by providing reusable pieces of code.
- Inversion of control. Frameworks specify how you should write your app.
- MVC, MVVM, MVP, MVW, MOVE all follow MV*
- Quite a few different patterns being used in client side JS.
- Most are based off of MVC in some fashion.
- They are all really based on the Observer Pattern.
Separates the representation of information from the user's interaction with it
- Controller: Updates both, view and model according to user interaction
- Model: The data/domain model
- View: Creates a representation of the model
- Model: The data/domain model
- View: The view and view logic (buttons, templates, UI events)
- View Model: Converting model data to view data and back (data-binding)
- Model: The data/domain model
- View: The view (buttons, templates, routes UI events to presenter)
- Presenter: The middle-man between the view and the model (logic goes here!)
The same Todo application implemented using MV* concepts in most of the popular JavaScript MV*
frameworks of today.
- Backbone
- Ember
- AngularJS
- Spine
- KnockoutJS
- DOJO
- ...
A client side MVC style framework to structure JavaScript applications, created by Jeremy Ashkenas and maintained by Document Cloud:
- Backbone.Model - Contains interactive data and the logic connected to it
- Backbone.Collection - An ordered set of models providing list events and methods
- Backbone.Router - Provides linkable and bookmarkable URLs
- Backbone.View - Combines controllers and view
!javascript
var Photo = Backbone.Model.extend({
// Default attributes for the photo
defaults: {
// Ensure that each photo created has an `src`.
src: "placeholder.jpg",
caption: "A default image",
viewed: false
},
initialize: function() {
}
});
!javascript
var PhotoGallery = Backbone.Collection.extend({
// Reference to this collection's model.
model: Photo,
// Filter down the list of all photos that have been viewed
viewed: function() {
return this.filter(function(photo){ return photo.get('viewed'); });
},
// Filter down the list to only photos that have not yet been viewed
unviewed: function() {
return this.without.apply(this, this.viewed());
}
});
Provides full application stack with dependency manager, MVC framework (formerly jQueryMX), functional testing library and documentation engine:
- CanJS - Client side MVC framework
- jQuery++ - Useful DOM helpers and special events for jQuery
- StealJS - JavaScript file dependency manager
- Funcunit - A QUnit and jQuery based functional testing library
- DocumentJS - A JavaScript documentation engine
Client side MVC framework for building rich web applications. Supports jQuery, Zepto, Mootools, Dojo, YUI.
- can.Construct - inheritable constructor functions
- can.Observe - observable objects
- can.Model - observes connected to a RESTful JSON interface
- can.view - template loading, caching, rendering
- can.EJS - live binding templates
- can.Control - declarative event bindings
- can.route - back button and bookmarking support
Views are defined as live binding Embedded JavaScript (EJS):
!html
<script type="text/ejs" id="todos">
<ul>
<% for( var i = 0; i < this.length; i++ ) { %>
<li><%= this[ i ].name %></li>
<% } %>
</ul>
</script>
!javascript
var Todo = can.Model({
findAll : 'GET /todos',
findOne : 'GET /todos/{id}',
create : 'POST /todos',
update : 'PUT /todos/{id}',
destroy : 'DELETE /todos/{id}'
}, {});
var model = new Todo({ name : 'Do dishes' });
model.attr('name', 'Do something else');
!javascript
var Control = can.Control({
'button click' : function() {
document.findElementById('mydiv').innerHtml =
can.view(this.options.view, {
todos : Todo.findAll()
});
}
});
new Control('#element', {
view : 'todos'
});