JavascriptMVCAnother choose of web framework

Alive C. Kuo

About me

● 2010.01.04 ~ 2012.05.31 VIVOTEK Inc.,software engineer

● 2012.06.01 ~ *Mozilla Corp.,Front end enigeer

● ~1.5year web application experience● email: alegnadise@gmail.com

Life is a struggle

● Web application is hard to design and implement

● Framework○ Client side

■ YUI■ extjs■ backbone■ knockout■ ...

○ Server side■ zk■ RoR■ shtml■ ...

jQuery

● It is a library, not a framework.● High performance to DOM scripting● Easy to use with method chain● http://jquery.com● But, there's something we need it lacks..

What jQuery lack

● Cross plugin communication● Ajax gateway● Web application management● js/css/html files/directories management● jQuery,

will not teach you how to org your (huge) web application.

Life is a struggle (CONT.)

● Just survey it.○ Work hard every day.

ExtJS

● http://www.sencha.com/products/extjs/● The initial version is forked from YUI2.● PROS

○ Beautiful and uniform and windows-like UI styles● CONS

○ Customization is hard to do.○ NO MIT. It is a commercial product.

YUI

● http://developer.yahoo.com/yui/● PROS

○ uniform UI styles○ YQuery is suitable for cross-domain query.○ Many F2E in Yahoo! will maintain it.

● CONS○ Also customization.

backbone.js

● http://documentcloud.github.com/backbone/● A MVC framework known to Mobile● PROS

○ Resource more than javascripMVC!● CONS

○ Just MVC layer. NO preset UI layer implementation○ Documentation seems difficult to understand.

javascriptMVC

● http://javascriptmvc.com● PROS

○ MIT license○ Clear documentation○ Nearly total solution to build a web application

● CONS○ Less resource in Taiwan○ No preset UI layer implementation

Successful story

Why I choose javascriptMVC finally?

● clientside MVC - Meet my requirement on embedded system.

● I just couldn't figure out backbone's documentation and example.

Life is a struggle. (CONT.)

● But, I still spend serveral days to read whole of its document and its forum.

● Try to understand why and how.

Nice features in javascriptMVC

● Clear models/views/controllers and class inheritance

● CRUD Model layer● Native event delegation● View with Embedded js● Fixture● Library dependancy solution● Build process● Less CSS integration● OpenAjax pubsub● A basic application/project/product

management

Struggle and the Way

Case By Case

CSS Struggles - Collision

● a.cssdiv.data {

background-color: red;}

● b.cssdiv.data {

background-color: white;}

CSS struggles - One Level Statement/Rule Weight

● div.viewcell > div.plugin span.title span {}● CSS rule has weights.● CSS solutions:

○ SASS○ Compass○ LessCSS

CSS Super Language

● SASS/Compass○ Mixin, Variable, Sprite helper, Functions, CSS3

Helpers○ jsfiddle(http://jsfiddle.net) supports SASS!

● LESS○ http://lesscss.org○ Javascript evaluable○ Less feature than SASS○ Both server side(Rhino or Node.js) & client side

(Need compilation)

LESS

@company_blue: #0186d1;@focus_width: 100;div#content {

div.title {background-color: @company_blue;&:hover,&:active {

width: @focus_width;}

}}

Data Struggle - I don't want to know the details

● Backend service○ CGI○ fast cgi/wsgi○ URL command○ Dbus○ Gconf○ Web service○ Tunnel message○ JSON/XML○ ...

CRUD

● Create/Read/Update/Delete is most common for every kind of data access.

● Implement and wrapper your backend service for CRUD.○ DataModel.create()○ DataModel.update()○ DataModel.delete()○ DataModel.read()

$.Model

● CRUD functions, overwrittable● Event callback whenever data is

○ created○ deleted○ updated○ and if you like, custom event on model is creatable.

● DOM embeddable○ <div <%= model %></div>

● Validation in data model layer

Plugin/Widget/UI component Struggle

● None loosely coupled.● No cross function communication.● DOM renew and event rebind

○ a long long string in your javascript like■ $('#div').html('<div class="event"><span class="

name"></span><span class="icon"></span></div>')

$.Controller features

● OpenAjax PubSub○ Not jQuery.pubsub, but the similar thing they could

do.● DOM manipulation is delegated to $.View()● Native event delegation

○ jQuery.on()○ 'button#save click': function(el, ev){

} ● FAST!

$.View features

● Seperate HTML from your javascript codes.● Reusable, cachable● Logic (javascript) in HTML

○ http://embeddedjs.com○ <ul>

<% for(var i=0; i<supplies.length; i++) {%><li><%= supplies[i] %></li><% } %></ul>

Library struggle - dependancy

● Case○ jQuery.scrollbars(http://www.aplweb.co.uk/blog/js/scrollbars-v2/) depends on

the following libraries■ jQuery■ jQuery.event.drag■ jQuery.resize■ mousehold■ mousewheel

○ So, hardcode in your <head>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="http://threedubmedia.googlecode.com/files/jquery.event.drag-2.0.min.js"></script><script src="http://github.com/cowboy/jquery-resize/raw/v1.1/jquery.ba-resize.min.js"></script><script src="http://remysharp.com/demo/mousehold.js"></script><script src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>

Library struggle (CONT.)

● When your web application grows, more and more external libraries is used.

● The result will be a non-maintainable <head/>

StealJS

● Library dependancy solution○ Part of stealJS is something like requireJS.○ By concurrent ajax request.○ steal('jquery').then

('jquery/ui','jquery/event/mousewheel').then('./lol.css', function(){

//....});

● Code generator○ ./js jquery/templates/controller A.B.C

● Compile scripts● (Customizable) build process● Compile *.less into one whole css

Ajax struggle

● You can do nothing without server. Do you?● Multi ajax request solution

Deferred Model

● Since jQuery 1.5, ajax is implemented as a deferred object.

● Models CRUD support deferred operation.● $.fixture

○ Create a deferred instead of sending XMLHttpRequest to the server, but to the function you preferred.

Form operation

● Using formParams(), retrieve data from a form is easier.

● You do not to collect value one by one input.

The end?

● No, you will face problems if you want to start building a large web application using javascriptMVC.

● So how could I organize my application?

Next Topic:

● Let's rock on JavascriptMVC○ How to start coding with JavascriptMVC?○ What JavascriptMVC document lacks○ A framework based on JavascriptMVC○ Some common rules.○ An example

Javascript is beautiful.Let's use it to get the world better.