JavascriptMVC: Another choice of web framework

3,346 views

Published on

JavascriptMVC is another client side web MVC framework based on jQuery. It has totally solution to build a web application. This slide will introduce basic features of JavascriptMVC3.2

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,346
On SlideShare
0
From Embeds
0
Number of Embeds
1,634
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

JavascriptMVC: Another choice of web framework

  1. 1. JavascriptMVCAnother choose of web framework Alive C. Kuo
  2. 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. 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. 4. jQuery● It is a library, not a framework.● High performance to DOM scripting● Easy to use with method chain● http://jquery.com● But, theres something we need it lacks..
  5. 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. 6. Life is a struggle (CONT.)● Just survey it. ○ Work hard every day.
  7. 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. 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. 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. 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. 11. Successful story
  12. 12. Why I choose javascriptMVC finally?● clientside MVC - Meet my requirement on embedded system.● I just couldnt figure out backbones documentation and example.
  13. 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. 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. 15. Case By CaseStruggle and the Way
  16. 16. CSS Struggles - Collision● a.css div.data { background-color: red; }● b.css div.data { background-color: white; }
  17. 17. CSS struggles - One LevelStatement/Rule Weight● div.viewcell > div.plugin span.title span {}● CSS rule has weights.● CSS solutions: ○ SASS ○ Compass ○ LessCSS
  18. 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. 19. LESS@company_blue: #0186d1;@focus_width: 100;div#content { div.title { background-color: @company_blue; &:hover,&:active { width: @focus_width; } }}
  20. 20. Data Struggle - I dont want to knowthe details● Backend service ○ CGI ○ fast cgi/wsgi ○ URL command ○ Dbus ○ Gconf ○ Web service ○ Tunnel message ○ JSON/XML ○ ...
  21. 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. 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. 23. Plugin/Widget/UI componentStruggle● 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. 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. 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. 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. 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. 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. 29. Ajax struggle● You can do nothing without server. Do you?● Multi ajax request solution
  30. 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. 31. Form operation● Using formParams(), retrieve data from a form is easier.● You do not to collect value one by one input.
  32. 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. 33. Next Topic:● Lets rock on JavascriptMVC ○ How to start coding with JavascriptMVC? ○ What JavascriptMVC document lacks ○ A framework based on JavascriptMVC ○ Some common rules. ○ An example
  34. 34. Javascript is beautiful.Lets use it to get the world better.

×