JavaScript MVC Frameworks

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 Model • Data Validation • Synchronize Data • Call web services Controller • Router • Initialize and create models • Manipulate DOM

8. Templates Frameworks SproutCore (cames with…) •Handlebars (mustache with more features) JavaScriptMVC (cames with…) •EJS •JAML •Micro •Mustache (2ndparty plugin) JQueryUI ICanHaz.js PURE jQote Eco TrimPath KiTE • • • • • • • Backbone.js (agnostic in this area)

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 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 -MyApp/ -core.js -en/ strings.js style.css -images/ -welcome.png -fr/ strings.js style.css -images/ -bienvenue.png -main.js strings.js SC.StringsFor(‘fr_CA’, { ‘name’: ‘nom’ }); MyApp.TitleLabel = SC.LabelView.extend({ localize: YES, value: ‘name’ }); JavaScriptMVC and Backbone.js don’t offer native i18n.

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

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

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 mod_auth_cas Spring • • CAS web services

19. Dynamic StyleSheet Language SASS LESS Variables $red: FF0000; .h1 { color: $red; } .h2 { color: darken($red, 10%); } Mixins .rounded-corners (@radius: 5px) { border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); } Selector inheritance .error { border: 2px; background: $red; } .error.intrusion { font-weight: bold; } .badError { @extend .error; border-width: 5px; } Nesting #header { 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(); return false; } }); });

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 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 •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 (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 Tests Frameworks •jQuery QUnit (http://docs.jquery.com/Qunit/) •FuncUnit (http://funcunit.com/) •Jasmine (http://pivotal.github.com/jasmine/) •SinonJS (http://sinonjs.org/) JavaScript Library •Underscore.js (http://...doccloud.../underscore/) •Raphaël (http://raphaeljs.com/) •StealJS (http://.../stealjs-script-manager) •jQueryMX (http://jquerymx.com/) Security •CAS (http://www.jasig.org/cas/) Dynamic Stylesheet Language •SASS (http://sass-lang.com/) •LESS (http://lesscss.org/)

28. Thank you Merci