javascriptmvc: another choice of web framework
Post on 17-May-2015
3.057 Views
Preview:
DESCRIPTION
TRANSCRIPT
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.
top related