1.
JavascriptMVC
Another choose of web framework
Alive C. Kuo

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

3.
Life is a struggle
● Web application is hard to design and
implement
● Framework
○ Client side
■ YUI
■ extjs
■ backbone
■ knockout
■ ...
○ Server side
■ zk
■ RoR
■ shtml
■ ...

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

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

6.
Life is a struggle (CONT.)
● Just survey it.
○ Work hard every day.

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

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

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

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

11.
Successful story

12.
Why I choose javascriptMVC finally?
● clientside MVC - Meet my requirement on
embedded system.
● I just couldn't figure out backbone's
documentation and example.

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

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

15.
Case By Case
Struggle and the Way

16.
CSS Struggles - Collision
● a.css
div.data {
background-color: red;
}
● b.css
div.data {
background-color: white;
}

17.
CSS struggles - One Level
Statement/Rule Weight
● div.viewcell > div.plugin span.title span {}
● CSS rule has weights.
● CSS solutions:
○ SASS
○ Compass
○ LessCSS

18.
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)

19.
LESS
@company_blue: #0186d1;
@focus_width: 100;
div#content {
div.title {
background-color: @company_blue;
&:hover,&:active {
width: @focus_width;
}
}
}

20.
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
○ ...

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

22.
$.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

23.
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>')

24.
$.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!

25.
$.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>

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

27.
Library struggle (CONT.)
● When your web application grows, more
and more external libraries is used.
● The result will be a non-maintainable
<head/>

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

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

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

31.
Form operation
● Using formParams(), retrieve data from a
form is easier.
● You do not to collect value one by one input.

32.
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?

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

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