JavaScript Frameworks - WordPress.com

disgustedtukwilaInternet και Εφαρμογές Web

14 Δεκ 2013 (πριν από 3 χρόνια και 7 μήνες)

72 εμφανίσεις

JavaScript MVC
Frameworks

André de Santi Oliveira

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
Frameworks

( jQuery,

MooTools,

YUI Library,

Dojo Toolkit,

… )

Template
Frameworks

( Mustache,

JAML, Eco,

ICanHaz.js,

JQote 2, … )

Testing
Frameworks

(QUnit, Jasmine

SinonJS, … )

Dynamic
Stylesheet

Language

( SASS, LESS )

Mobile
Frameworks

( PhoneGap,

Zepto, … )

Minification
Frameworks

( YUI compressor

JSMIN, … )

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

view

controller

Model

Client side

Server side

web services

DOM


back end

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

(cames with…)


EJS


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’,


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
-
jquery

mustache
-
dojo

mustache
-
yui

mustache
-
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
-

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',


});

});

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/


-
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 SOAP

Backbone.emulateHTTP

= true
;

model.save
();





The
Backbone.sync

use (
jQuery
/
Zepto
).
ajax

Security

CAS


Central Authentication Service

web services

CAS


mod_auth_cas


Spring

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/
)


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/
)

Thank you


Merci