Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavascriptMVC introduction

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on.
Avatar for Alive.Kuo Alive.Kuo
August 07, 2013

JavascriptMVC introduction

Avatar for Alive.Kuo

Alive.Kuo

August 07, 2013
Tweet

More Decks by Alive.Kuo

Other Decks in Programming

Transcript

  1. 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: [email protected]
  2. Life is a struggle • Web application is hard to

    design and implement • Framework ◦ Client side ▪ YUI ▪ extjs ▪ backbone ▪ knockout ▪ ... ◦ Server side ▪ zk ▪ RoR ▪ shtml ▪ ...
  3. 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..
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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
  9. Why I choose javascriptMVC finally? • clientside MVC - Meet

    my requirement on embedded system. • I just couldn't figure out backbone's documentation and example.
  10. 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.
  11. 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
  12. CSS Struggles - Collision • a.css div.data { background-color: red;

    } • b.css div.data { background-color: white; }
  13. CSS struggles - One Level Statement/Rule Weight • div.viewcell >

    div.plugin span.title span {} • CSS rule has weights. • CSS solutions: ◦ SASS ◦ Compass ◦ LessCSS
  14. 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)
  15. LESS @company_blue: #0186d1; @focus_width: 100; div#content { div.title { background-color:

    @company_blue; &:hover,&:active { width: @focus_width; } } }
  16. 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 ◦ ...
  17. 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()
  18. $.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
  19. 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>')
  20. $.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!
  21. $.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>
  22. 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>
  23. Library struggle (CONT.) • When your web application grows, more

    and more external libraries is used. • The result will be a non-maintainable <head/>
  24. 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
  25. Ajax struggle • You can do nothing without server. Do

    you? • Multi ajax request solution
  26. 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.
  27. Form operation • Using formParams(), retrieve data from a form

    is easier. • You do not to collect value one by one input.
  28. 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?
  29. 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