Java Script MVC Frameworks André de Santi Oliveira

Java. Script MVC Frameworks André de Santi Oliveira

Frameworks • Sprout. Core • Java. Script. MVC • Backbone. js • • • Knockout Angular. JS Pure. MVC YUI 3 Active. JS Moo. Tools. MVC Trim. Junction Jamal Claypool Spine

Ecosystem Minification Frameworks ( YUI compressor JSMIN, … ) Java. Script MVC Framework ( Sprout. Core, Java. Script. MVC, Backbone. js, … ) Testing Frameworks (QUnit, Jasmine Sinon. JS, … ) Java. Script Frameworks ( j. Query, Moo. Tools, YUI Library, Dojo Toolkit, … ) Mobile Frameworks ( Phone. Gap, Zepto, … ) Template Frameworks ( Mustache, JAML, Eco, ICan. Haz. js, JQote 2, … ) Dynamic Stylesheet Language ( SASS, LESS )

Why MVC Java. Script ? • Front end developers know Java. Script • Better organization to front end applications • Abstract complexity • Good integration with Java. Script frameworks • An easier way to do tests

Documentation • Sprout. Core: good documentation, examples, blog, mailing list, irc, videos at Vimeo. • Java. Script. MVC: excellent documentation, examples, blog, forum. • Backbone. js: documentation ok, mailing list, irc, videos at Peep. Code.

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

Responsibilities View • Binding DOM • Render templates • i 18 n Controller • Router • Initialize and create models • Manipulate DOM Model • Data Validation • Synchronize Data • Call web services

Templates Frameworks Sprout. Core (cames with…) • Handlebars (mustache with more features) Java. Script. MVC (cames with…) • • EJS JAML Micro Mustache (2 nd party plugin) Backbone. js (agnostic in this area) • • JQuery. UI ICan. Haz. js PURE j. Qote Eco Trim. Path Ki. TE

Templates Frameworks Mustache var clients = { client: { name: ‘André de Santi Oliveira’, type: ‘VIP client’, domains: [{domain: ‘aso 01. ca’}, {domain: ‘aso 02. ca’}, {domain: ‘aso 03. ca’}] } } {{#client}} {{name}} {{type}}

{{#domains}}
• {{domain}}
{{/domains}}

Handlebars - Sproutcore hosts. handlebars {{#view My. App. Create. Host. View}} {{/view}} {{#collection SC. Template. Collection. View content. Binding="My. App. host. Controller” item. Class. Binding="content"}} {{view My. App. Hosts. View}} {{/collection}}

View / Controller - Sprout. Core My. App = SC. Application. create(); My. App. Create. Host. View = SC. Text. Field. extend({ insert. New. Line: function() { var host. Name = this. get('value'); My. App. host. Controller. create. Host(host. Name); } }); My. App. Hosts. View = SC. Label. View. extend({ value. Binding: '. parent. View. content. name' }); My. App. host. Controller = SC. Array. Controller. create({ content: [], create. Host: function(name){ var host = My. App. Host. create({ name : name}); this. push. Object(host); host. save(); } }); SC. ready(function() { My. App. main. Pane = SC. Template. Pane. append({ template. Name: 'hosts', });

Model - Sprout. Core My. App. 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')}, data. Type: 'json', success: function(data, response) { this. set('id', data['host', 'id']); } }); }, sync. Host: function(){ var host =. . . get new host from Push. Server My. App. host. Controller. push. Object(host); } });

Sync / Async load Java. Script. MVC The default is synchronous, but async is possible : $(‘#client-info’). html(‘templates/client-info. ejs’, data, function(result) { this. fade. In(); }); Preload the template : $. get(‘templates/client-info. jaml’, {}, function(){}, ‘view’); Sprout. Core $. get(‘templates/client-info. handlebars', function(data) { var template = SC. Handlebars. compile(data); SC. TEMPLATES[’client-info'] = template; })

i 18 n Sprout. Core strings. js SC. Strings. For(‘fr_CA’, { ‘name’: ‘nom’ }); My. App. Title. Label = SC. Label. View. extend({ localize: YES, value: ‘name’ }); -My. App/ -core. js -en/ strings. js style. css -images/ -welcome. png -fr/ strings. js style. css -images/ -bienvenue. png -main. js Java. Script. MVC and Backbone. js don’t offer native i 18 n.

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 Java. Script. MVC $. Model. extend(“Client”, { init : function(){ this. Validate(“name”, function(){ if(this. name == ‘’){ return ‘Name is required’ } }) } }, {}); • • • validate. Format. Of validate. Inclusion. Of validate. Length. Of validate. Presence. Of validate. Range. Of 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. emulate. HTTP = true; model. save(); The Backbone. sync use (j. Query/Zepto). ajax

Security CAS – Central Authentication Service • • mod_auth_cas Spring CAS web services

Dynamic Style. Sheet Language SASS LESS Variables Mixins $red: FF 0000; . h 1 { color: $red; }. h 2 { color: darken($red, 10%); } Selector inheritance. error { border: 2 px; background: $red; }. error. intrusion { font-weight: bold; }. bad. Error { @extend. error; border-width: 5 px; } . rounded-corners (@radius: 5 px) { border-radius: @radius; } #header { . rounded-corners; } #footer { . rounded-corners(10 px); } Nesting #header { h 1 { font-size: 26 px; font-weight: bold; } p { font-size: 12 px; } } }

Mobile Frameworks Backbone. js + Phone. Gap $(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: ”aso 01. ca", url: "/client/hosts/1" }); var spy = sinon. spy(j. Query, 'ajax'); host. save(); expect(spy). to. Have. Been. Called(); expect(spy. get. Call(0). args[0]. url) . to. Equal("/client/hosts/1"); j. Query. ajax. restore(); });

Java. Script Libraries Underscore. js Provides 60 -odd functions : Collections(each, sort. By, size), Arrays(last, union, unique), Functions(bind, after, compose), Objects(clone, is. Function, is. Null), etc Raphaël Simplify the work with vector graphics on the web. Uses the SVG W 3 C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object. Steal. JS A collection of command browser based Java. Script utilities that make building, packaging, sharing, and consuming Java. Script applications easy. j. Query. MX A collection of useful j. Query libraries that provide the missing functionality necessary to implement and organize large-scale j. Query applications

Conclusion • Very useful to rich applications • Backend agnostic • Model => JSon => Model • Java. Script is a powerful language • Don’t you like Java. Script ? Try Coffee. Script !

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

Watch and Listen Info. Q • • • Single Page Apps and the Future of History Yehuda Katz Discusses Sprout. Core Introduction to Sprout. Core Doug Crockford on HTML and Fixing the Web HTML 5 and the Dawn of Rich Mobile Web Applications Peep. Code • • Backbone. js Basics Backbone. js Interactivity blip. tv • blip. tv - JSConf 2011 Java. Script Podcast • • The Javascript Show yay. Query

Books • Java. Script: The Good Parts • Java. Script Patterns • Pro Java. Script Design Patterns • Test-Driven Java. Script Development • Object-Oriented Java. Script: Create scalable, reusable high-quality Java. Script applications and libraries • High Performance Java. Script • Pro Java. Script Techniques

References Java. Script MVC Frameworks • Sprout. Core (http: //www. sproutcore. com/) • Java. Script. MVC (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/) Java. Script Frameworks • YUI (http: //developer. yahoo. com/yui/) • DOJO (http: //dojotoolkit. org/) • Common. JS (http: //www. commonjs. org/) • j. Query. UI (http: //jqueryui. com/) Mobile Frameworks • Phone. Gap (http: //www. phonegap. com/) • Zepto. js (http: //zeptojs. com/) • j. Query. Mobile (http: //jquerymobile. com/) Java. Script Library • Underscore. js (http: //. . . doccloud. . . /underscore/) • Raphaël (http: //raphaeljs. com/) • Steal. JS (http: //. . . /stealjs-script-manager) • j. Query. MX (http: //jquerymx. com/) Java. Script Tests Frameworks • j. Query QUnit (http: //docs. jquery. com/Qunit/) • Func. Unit (http: //funcunit. com/) • Jasmine (http: //pivotal. github. com/jasmine/) • Sinon. JS (http: //sinonjs. org/) Dynamic Stylesheet Language • SASS (http: //sass-lang. com/) • LESS (http: //lesscss. org/) Security • CAS (http: //www. jasig. org/cas/)

Thank you Merci