[Coscup 2012] JavascriptMVC
2 likes1,307 views
This document discusses JavascriptMVC, an alternative Javascript MVC framework to BackboneJS. It provides an overview of JavascriptMVC's features such as MIT licensing, clear documentation, and providing an almost total solution for building web applications. Potential pros include the licensing, documentation, and comprehensive features. Potential cons include it being less well known and having fewer online resources than BackboneJS in Taiwan. Examples of how it handles classes, CSS, data loading/validation, and views are also provided.
![[Coscup 2012] JavascriptMVC](https://image.slidesharecdn.com/coscupjavascriptmvc-120818115356-phpapp01/85/Coscup-2012-JavascriptMVC-1-320.jpg)
![[Coscup 2012] JavascriptMVC](https://image.slidesharecdn.com/coscupjavascriptmvc-120818115356-phpapp01/85/Coscup-2012-JavascriptMVC-5-320.jpg)
![[Coscup 2012] JavascriptMVC](https://image.slidesharecdn.com/coscupjavascriptmvc-120818115356-phpapp01/85/Coscup-2012-JavascriptMVC-9-320.jpg)
![[Coscup 2012] JavascriptMVC](https://image.slidesharecdn.com/coscupjavascriptmvc-120818115356-phpapp01/85/Coscup-2012-JavascriptMVC-12-320.jpg)
![$.View
• Seperate HTML from your javascript codes.
• Reusable, cachable
• Logic (javascript) in HTML
o http://embeddedjs.com
<ul>
<% for(var i=0; i<supplies.length; i++) {%>
<li><%= supplies[i] %></li>
<% } %>
</ul>](https://image.slidesharecdn.com/coscupjavascriptmvc-120818115356-phpapp01/85/Coscup-2012-JavascriptMVC-27-320.jpg)
![$.fixture("/foobar.json", function(orig, settings,
headers){
return [200, "success", {json: {foo: "bar" } },
{} ]
});
$.ajax({
url: "/foobar.json",
success: function(data) {
console.log(data.json.foo);
}
});](https://image.slidesharecdn.com/coscupjavascriptmvc-120818115356-phpapp01/85/Coscup-2012-JavascriptMVC-33-320.jpg)
[Coscup 2012] JavascriptMVC
- 3. JavascriptMVC Another javascript MVC framework
- 4. Me Alive • Mozilla Corp. Taiwan, Frontend engineer • ~1.5 year experience on web • https://github.com/alivedise • email: [email protected] [email protected]
- 7. You • A web developer • Use lots of jQuery plugins in your site • Javascript newbie • Building a complex web application • Hate backend stuff
- 8. Developing web application is a struggle.
- 10. BackboneJS is much more known to people. Amazing! They have their own backboneConf! http://backboneconf.com/
- 11. But I would love to provide another choice to you
- 14. http://javascriptmvc.com • PROS o MIT license o Clear documentation o Nearly total solution to build a web application • CONS o Less known, less resource (in Taiwan) o No preset UI layer implementation
- 15. Clear&models/ views/controllers& Na9ve&event& View&with& and&class& CRUD&Model&layer& delega9on& Embedded&js& inheritance& Library& {LESS}&CSS& Fixture& dependancy& Build&process& integra9on& solu9on& A&basic& applica9on/ OpenAjax&pubsub& project/product& Model&Valida9on& Form&Paramize& management&
- 16. Class
- 17. $.Class('Monster', { count: 0 }, { init: function( name ) { // saves name on the monster instance this.name = name; this.health = 10; this.constructor.count++; }, eat: function( smallChildren ){ this.health += smallChildren; }, fight: function() { this.health -= 2; } }); hydra = new Monster('hydra'); dragon = new Monster('dragon'); hydra.name // -> hydra Monster.count // -> 2 Monster.shortName // -> 'Monster' hydra.eat(2); // health = 12 dragon.fight(); // health = 8
- 18. CSS collision /* a.css */ div.data { ! background-color: red; } /* b.css */ div.data { ! background-color: white; }
- 19. {LESS} @company_blue: #0186d1; @focus_width: 100; div#content { div.title { background-color: @company_blue; &:hover,&:active { width: @focus_width; } } } steal('steal/less').then('a.less', 'b.less').then(function() { // ... });
- 20. Data chaos...
- 21. $.ajax({ url: '/cgi-bin/character?id=1', dataType: 'json', type: 'post', success: function() { $.ajax('/data/item.json', dataType: 'json', type: 'post', success: function() { // ..... }, error: function() { } }, error: function() { } });
- 22. $.Model • CRUD functions, overwrittable • Event callback whenever data is o created o deleted o updated o and if you like, custom event on model is creatable. • DOM embeddable o <div <%= model %></div> • Validation in data model layer
- 23. Data mess solution $.when( Character.findOne({id: 1}), Item.findAll({char_id: 1}) .done(function(){ /*...*/ });
- 24. Ｗhen you have more and more jQuery plugins.. • None loosely coupled. • No cross function communication. • DOM renew and event rebind oa long long string in your javascript like $('#div').html('<div class="event"><span class="name"></span><span class="icon"></span><span class="content"></span><span class="screenshot"></ span></div>');
- 25. $.Controller - Event delegation function $.Controller("Crazy",{ // listens to all clicks on this element "click" : function(el, ev){}, // listens to all mouseovers on // li elements withing this controller "li mouseover" : function(el, ev){} // listens to the window being resized "{window} resize" : function(window, ev){} });
- 26. $.Controller - OpenAjax Pubsub $.Controller("Listener", { "something.updated subscribe" : function(called, data){ console.log(data.name); } }); // called elsewhere $.Controller("Renewer", { init: function(){ var data = { name: 'lol' }; this.publish("something.updated", data); } });
- 27. $.View • Seperate HTML from your javascript codes. • Reusable, cachable • Logic (javascript) in HTML o http://embeddedjs.com <ul> <% for(var i=0; i<supplies.length; i++) {%> <li><%= supplies[i] %></li> <% } %> </ul>
- 28. header... <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>
- 29. StealJS Library dependency solution steal('jquery').then('jquery/resize','jquery/ mousehold','jquery/event/drag').then('./ my.css', function(){ /*...*/ });
- 31. •You can do nothing without server. Do you? • Multi ajax request solution
- 32. Deferred model •Since jQuery 1.5, ajax is implemented as a deferred object. •Models CRUD support deferred operation. $.fixture o Create a deferred instead of sending XMLHttpRequest to the server, but to the function you preferred.
- 33. $.fixture("/foobar.json", function(orig, settings, headers){ return [200, "success", {json: {foo: "bar" } }, {} ] }); $.ajax({ url: "/foobar.json", success: function(data) { console.log(data.json.foo); } });
- 34. Q&A Javascript is beautiful. Let's use it to get the world better.