javascript mvc frameworks andré de santi oliveira
TRANSCRIPT
Frameworks
• Knockout• AngularJS• PureMVC• YUI 3• ActiveJS• MooToolsMVC• TrimJunction• Jamal• Claypool• Spine
• SproutCore
• JavaScriptMVC
• Backbone.js
Ecosystem
JavaScript MVC Framework
( SproutCore,JavaScriptMVC,Backbone.js, … )
JavaScript MVC Framework
( SproutCore,JavaScriptMVC,Backbone.js, … )
JavaScript Frameworks
( jQuery,MooTools,
YUI Library,Dojo Toolkit,
… )
JavaScript Frameworks
( jQuery,MooTools,
YUI Library,Dojo Toolkit,
… )
Template Frameworks( Mustache,JAML, Eco,ICanHaz.js,JQote 2, … )
Template Frameworks( Mustache,JAML, Eco,ICanHaz.js,JQote 2, … )
Testing Frameworks
(QUnit, JasmineSinonJS, … )
Testing Frameworks
(QUnit, JasmineSinonJS, … ) Dynamic Stylesheet
Language( SASS, LESS )
Dynamic Stylesheet Language
( SASS, LESS )
Mobile Frameworks( PhoneGap,
Zepto, … )
Mobile Frameworks( PhoneGap,
Zepto, … )
Minification Frameworks
( YUI compressorJSMIN, … )
Minification Frameworks
( YUI compressorJSMIN, … )
Why MVC JavaScript ?
• Front end developers know JavaScript
• Better organization to front end applications
• Abstract complexity
• Good integration with JavaScript frameworks
• An easier way to do tests
Documentation
• SproutCore: good documentation, examples, blog, mailing list, irc, videos at Vimeo.
• JavaScriptMVC: excellent documentation, examples, blog, forum.
• Backbone.js: documentation ok, mailing list, irc, videos at PeepCode.
Architecture
viewview
controllercontroller
ModelModel
Client side Server side
web servicesweb services
DOMDOM
back end back end
ResponsibilitiesView•Binding DOM•Render templates•i18n
Controller•Router•Initialize and create models•Manipulate DOM
Model•Data Validation•Synchronize Data•Call web services
Templates Frameworks
SproutCore (cames with…)•Handlebars (mustache with more features)
JavaScriptMVC (cames with…)•EJS
•JAML
•Micro
•Mustache (2nd party plugin)
Backbone.js (agnostic in this area)
• JQueryUI• ICanHaz.js• PURE• jQote• Eco• TrimPath• KiTE
Templates Frameworks
Mustache
var clients = {
client: {
name: ‘André de Santi Oliveira’,
type: ‘VIP client’,
domains: [{domain: ‘aso01.ca’}, {domain: ‘aso02.ca’}, {domain: ‘aso03.ca’}]
}
}
{{#client}} <h1>{{name}}</h1> <b>{{type}}</b> <ul> {{#domains}} <li>{{domain}}</li> {{/domains}} </ul>{{/client}}
<h1>André de Santi Oliveira<h1><b>VIP client</b><ul> <li>aso01.ca</li> <li>aso02.ca</li> <li>aso03.ca</li></ul>
mustache-jquerymustache-dojomustache-yuimustache-commonjs
Handlebars - Sproutcore
hosts.handlebars
{{#view MyApp.CreateHostView}}
<input id="hostName" type="text" />
{{/view}}
{{#collection SC.TemplateCollectionView
contentBinding="MyApp.hostController” itemClassBinding="content"}}
{{view MyApp.HostsView}}
{{/collection}}
View / Controller - SproutCoreMyApp = SC.Application.create();
MyApp.CreateHostView = SC.TextField.extend({
insertNewLine: function() {
var hostName = this.get('value');
MyApp.hostController.createHost(hostName);
}
});
MyApp.HostsView = SC.LabelView.extend({
valueBinding: '.parentView.content.name'
});
MyApp.hostController = SC.ArrayController.create({
content: [],
createHost: function(name){
var host = MyApp.Host.create({ name : name});
this.pushObject(host);
host.save();
}
});SC.ready(function() { MyApp.mainPane = SC.TemplatePane.append({ templateName: 'hosts', });});
Model - SproutCoreMyApp.Host = SC.Object.extend({
id: null,
name: null,
attributes: function(){
return {
id: this.get('id'),
name: this.get('name')
}
},
save: function(){
$.ajax('/host', {
type: 'POST',
data: {host : this.get('attributes')},
dataType: 'json',
success: function(data, response) {
this.set('id', data['host','id']);
}
});
}, syncHost: function(){ var host = ... get new host from PushServer MyApp.hostController.pushObject(host); }});
Sync / Async loadJavaScriptMVC
The default is synchronous, but async is possible :$(‘#client-info’).html(‘templates/client-info.ejs’, data, function(result) {
this.fadeIn();
});
Preload the template :$.get(‘templates/client-info.jaml’, {}, function(){}, ‘view’);
SproutCore
$.get(‘templates/client-info.handlebars', function(data) {
var template = SC.Handlebars.compile(data);
SC.TEMPLATES[’client-info'] = template;
})
i18nSproutCore
strings.jsSC.StringsFor(‘fr_CA’, {
‘name’: ‘nom’
});
MyApp.TitleLabel = SC.LabelView.extend({
localize: YES,
value: ‘name’
});
-MyApp/
-core.js
-en/
strings.js
style.css
-images/
-welcome.png
-fr/
strings.js
style.css
-images/
-bienvenue.png
-main.js
JavaScriptMVC and Backbone.js don’t offer native i18n.
Router
Backbone.js
var Workspace = Backbone.Router.extend({
routes: {
“domains/:domain”: “getdomain”
},
getdomain: function(domain) {
//refresh model and re-render the specific view
}
});
The router is the controller in Backbone.js
Validation• validateFormatOf
• validateInclusionOf
• validateLengthOf
• validatePresenceOf
• validateRangeOf
JavaScriptMVC
$.Model.extend(“Client”,{
init : function(){
this.Validate(“name”, function(){
if(this.name == ‘’){
return ‘Name is required’
}
})
}
}, {});
Backbone.js
var Client = Backbone.Model.extend({
validate: function(attrs) {
if (attrs.name == ‘’) {
return ‘Name is required’
}
}
});
Rest / SOAP
Backbone.js
Default CRUD implementation
•create => POST => /client
•read => GET => /client/[id]
•update => PUT => /client/id
•delete => DELETE => /client/id
Using SOAPBackbone.emulateHTTP = true;
model.save();
The Backbone.sync use (jQuery/Zepto).ajax
Dynamic StyleSheet Language
SASS
Variables$red: FF0000;.h1 { color: $red;}.h2 { color: darken($red, 10%);}
Selector inheritance.error { border: 2px; background: $red;}.error.intrusion { font-weight: bold;}.badError { @extend .error; border-width: 5px;}
LESS
Mixins.rounded-corners (@radius: 5px) {
border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
Nesting#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px; }
}
}
Mobile Frameworks
Backbone.js + PhoneGap
$(function() {
backbone.views.pages.Audio = Backbone.View.extend({
...
play : function(){
this.media().play();
return false;
},
stop : function() {
this.media().stop();
return false;
}
});
});
Tests FrameworksBackbone.js + Jasmine + Sinon.JS
it("should make the correct server request", function() { var host = new Backbone.Model({ name: ”aso01.ca", url: "/client/hosts/1" }); var spy = sinon.spy(jQuery, 'ajax'); host.save(); expect(spy).toHaveBeenCalled(); expect(spy.getCall(0).args[0].url) .toEqual("/client/hosts/1"); jQuery.ajax.restore();});
JavaScript LibrariesUnderscore.jsProvides 60-odd functions : Collections(each, sortBy, size), Arrays(last, union, unique), Functions(bind, after, compose), Objects(clone, isFunction, isNull), etc
RaphaëlSimplify the work with vector graphics on the web. Uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object.
StealJSA collection of command and browser based JavaScript utilities that make building, packaging, sharing, and consuming JavaScript applications easy.
jQueryMXA collection of useful jQuery libraries that provide the missing functionality necessary to implement and organize large-scale jQuery applications
Conclusion• Very useful to rich applications
• Backend agnostic
• Model => JSon => Model
• JavaScript is a powerful language
• Don’t you like JavaScript ? Try CoffeeScript !
Watch and ListenInfoQ•Single Page Apps and the Future of History
•Yehuda Katz Discusses SproutCore
•Introduction to SproutCore
•Doug Crockford on HTML and Fixing the Web
•HTML5 and the Dawn of Rich Mobile Web Applications
PeepCode•Backbone.js Basics
•Backbone.js Interactivity
blip.tv•blip.tv - JSConf 2011
JavaScript Podcast•The Javascript Show
•yayQuery
Books• JavaScript: The Good Parts
• JavaScript Patterns
• Pro JavaScript Design Patterns
• Test-Driven JavaScript Development
• Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries
• High Performance JavaScript
• Pro JavaScript Techniques
ReferencesJavaScript MVC Frameworks
•SproutCore (http://www.sproutcore.com/)
•JavaScriptMVC (http://javascriptmvc.com/)
•Backbone.js (http://...doccloud.../backbone/)
JavaScript Frameworks
•YUI (http://developer.yahoo.com/yui/)
•DOJO (http://dojotoolkit.org/)
•CommonJS (http://www.commonjs.org/)
•jQueryUI (http://jqueryui.com/)
JavaScript Library
•Underscore.js (http://...doccloud.../underscore/)
•Raphaël (http://raphaeljs.com/)
•StealJS (http://.../stealjs-script-manager)
•jQueryMX (http://jquerymx.com/)
Dynamic Stylesheet Language
•SASS (http://sass-lang.com/)
•LESS (http://lesscss.org/)
Template Frameworks•Mustache (http://mustache.github.com/)•Handlebars (http://www.handlebarsjs.com/)•Jaml (http://edspencer.github.com/jaml/)
Mobile Frameworks•PhoneGap (http://www.phonegap.com/)•Zepto.js (http://zeptojs.com/)•jQueryMobile (http://jquerymobile.com/)
JavaScript Tests Frameworks•jQuery QUnit (http://docs.jquery.com/Qunit/)•FuncUnit (http://funcunit.com/)•Jasmine (http://pivotal.github.com/jasmine/)•SinonJS (http://sinonjs.org/)
Security•CAS (http://www.jasig.org/cas/)