Transcript JavaScript Frameworks
JavaScript MVC Frameworks
André de Santi Oliveira
Frameworks
• SproutCore • JavaScriptMVC • Backbone.js
• Knockout • AngularJS • PureMVC • YUI 3 • ActiveJS • MooToolsMVC • TrimJunction • Jamal • Claypool • Spine
Minification Frameworks
( YUI compressor JSMIN, … )
Ecosystem
JavaScript Frameworks
( jQuery, MooTools, YUI Library, Dojo Toolkit, … )
JavaScript MVC Framework
( SproutCore, JavaScriptMVC, Backbone.js, … )
Testing Frameworks
(QUnit, Jasmine SinonJS, … )
Mobile Frameworks
( PhoneGap, Zepto, … )
Template Frameworks
( Mustache, JAML, Eco, ICanHaz.js, JQote 2, … )
Dynamic Stylesheet Language
( SASS, LESS )
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:
blog, forum.
excellent documentation, examples, •
Backbone.js:
documentation ok, mailing list, irc, videos at PeepCode.
DOM Client side
Architecture
Server side view back end controller Model web services
Responsibilities
View
• 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
•EJS (cames with…) •JAML •Micro •Mustache (2 nd 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’, mustache-jquery mustache-dojo mustache-yui mustache-commonjs domains: [{domain: ‘aso01.ca’}, {domain: ‘aso02.ca’}, {domain: ‘aso03.ca’}] } } {{#client}}
{{name}}
{{type}}- {{#domains}}
- {{domain}} {{/domains}}
André de Santi Oliveira VIP client - aso01.ca
- aso02.ca
- aso03.ca
Handlebars - Sproutcore
- aso01.ca
- aso02.ca
- aso03.ca
Handlebars - Sproutcore
hosts.handlebars
{{#view MyApp.CreateHostView}} {{/view}} {{#collection SC.TemplateCollectionView contentBinding="MyApp.hostController” itemClassBinding="content"}} {{view MyApp.HostsView}} {{/collection}}
View / Controller - SproutCore
MyApp = 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
=
content
:
[], SC.ArrayController.create({ 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 - SproutCore
MyApp.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 load
JavaScriptMVC
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;
i18n
SproutCore
strings.js
SC.StringsFor(‘fr_CA’, { ‘name’: ‘nom’ }); MyApp.TitleLabel = SC.LabelView.extend({ localize: YES, value: ‘name’ }); -MyApp/ -core.js
-en/ strings.js
style.css
-images/ -fr/ -welcome.png
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
JavaScriptMVC
$.Model.extend(“Client”,{ init : function(){ this.Validate(“name”, function(){ if(this.name == ‘’){ return ‘Name is required’ }) } } }, {}); • • • • • validateFormatOf validateInclusionOf validateLengthOf validatePresenceOf validateRangeOf
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 SOAP
Backbone.emulateHTTP = true; model.save();
The Backbone.sync use (jQuery/Zepto).ajax
Security
CAS – Central Authentication Service • mod_auth_cas • Spring CAS web services
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 Frameworks
Backbone.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 Libraries
Underscore.js
Provides 60-odd functions : Collections(each, sortBy, size), Arrays(last, union, unique), Functions(bind, after, compose), Objects(clone, isFunction, isNull), etc
Raphaël
Simplify 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.
StealJS
A collection of command and browser based JavaScript utilities that make building, packaging, sharing, and consuming JavaScript applications easy.
jQueryMX
A 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 !
Please, please, please !!!
A hammer is an excellent tool, but it ’s not used for everything !!!
Watch
and
Listen
InfoQ
• 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
References
JavaScript MVC Frameworks
•SproutCore ( http://www.sproutcore.com/ ) •JavaScriptMVC ( http://javascriptmvc.com/ ) •Backbone.js ( http://...doccloud.../backbone/ )
Template Frameworks
•Mustache ( http://mustache.github.com/ ) •Handlebars ( http://www.handlebarsjs.com/ ) •Jaml ( http://edspencer.github.com/jaml/ )
JavaScript Frameworks
•YUI ( http://developer.yahoo.com/yui/ ) •DOJO ( http://dojotoolkit.org/ ) •CommonJS ( http://www.commonjs.org/ ) •jQueryUI ( http://jqueryui.com/ )
Mobile Frameworks
•PhoneGap ( http://www.phonegap.com/ ) •Zepto.js ( http://zeptojs.com/ ) •jQueryMobile ( http://jquerymobile.com/ )
JavaScript Library
•Underscore.js ( http://...doccloud.../underscore/ ) •Raphaël ( http://raphaeljs.com/ ) •StealJS ( http://.../stealjs-script-manager ) •jQueryMX ( http://jquerymx.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/ )
Dynamic Stylesheet Language
•SASS ( http://sass-lang.com/ ) •LESS ( http://lesscss.org/ )
Security
•CAS ( http://www.jasig.org/cas/ )