1. JavaScript MVC Frameworks
André de Santi Oliveira

2. Frameworks SproutCore JavaScriptMVC Backbone.js Knockout AngularJS
PureMVC
YUI 3
ActiveJS
MooToolsMVC
TrimJunction
Jamal
Claypool
Spine

3. Ecosystem Minification Frameworks ( YUI compressor JSMIN, … )
JavaScript Frameworks
( jQuery,
MooTools,
YUI Library,
Dojo Toolkit,
… )
Template Frameworks
( Mustache,
JAML, Eco,
ICanHaz.js,
JQote 2, … )
JavaScript MVC Framework
( SproutCore,
JavaScriptMVC,
Backbone.js, … )
Testing Frameworks
(QUnit, Jasmine
SinonJS, … )
Mobile Frameworks
( PhoneGap,
Zepto, … )
Dynamic Stylesheet Language
( SASS, LESS )

4. 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

5. 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.

6. Architecture Client side Server side DOM view back end controller
Model
web services

7. Responsibilities View Binding DOM Render templates i18n Controller
Router
Initialize and create models
Manipulate DOM
Model
Data Validation
Synchronize Data
Call web services

8. 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

9. Templates Frameworks mustache-jquery mustache-dojo mustache-yui
mustache-commonjs
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>

10. 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}}

11. 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 = 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',
});

12. 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); }
});

13. Sync / Async load JavaScriptMVC SproutCore
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; })

14. 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/
-welcome.png
-fr/
-bienvenue.png
-main.js
JavaScriptMVC and Backbone.js don’t offer native i18n.

15. Router Backbone.js The router is the controller in 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

16. Validation JavaScriptMVC Backbone.js validateFormatOf
$.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’ }
});

17. 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

18. Security CAS – Central Authentication Service CAS web services
mod_auth_cas
Spring
CAS
web services

19. 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 5px) { }
#header {
.rounded-corners;
#footer {
.rounded-corners(10px);
Nesting
h1 {
font-size: 26px;
font-weight: bold;
p { font-size: 12px; }

20. 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(); }
});

21. 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();

22. JavaScript Libraries Underscore.js Raphaël StealJS jQueryMX
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

23. Conclusion Very useful to rich applications Backend agnostic
Model => JSon => Model
JavaScript is a powerful language
Don’t you like JavaScript ? Try CoffeeScript !

24. Please, please, please !!!
A hammer is an excellent tool, but it’s not used for everything !!!

25. Watch and Listen InfoQ PeepCode blip.tv JavaScript Podcast
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

26. 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

27. References JavaScript MVC Frameworks
SproutCore (
JavaScriptMVC (
Backbone.js (
JavaScript Frameworks
YUI (
DOJO (
CommonJS (
jQueryUI (
JavaScript Library
Underscore.js (
Raphaël (
StealJS (
jQueryMX (
Dynamic Stylesheet Language
SASS (
LESS (
Template Frameworks
Mustache (
Handlebars (
Jaml (
Mobile Frameworks
PhoneGap (
Zepto.js (
jQueryMobile (
JavaScript Tests Frameworks
jQuery QUnit (
FuncUnit (
Jasmine (
SinonJS (
Security
CAS (

28. Thank you Merci