JavascriptMVC introduction

Transcript

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. Struggle and the Way Case By Case
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.