[Coscup 2012] JavascriptMVC

1,610 views

Published on

JavascriptMVC introduction, COSCUP 2012 version.

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

No Downloads
Views
Total views
1,610
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • [Coscup 2012] JavascriptMVC

    1. 1. JavascriptMVC
    2. 2. JavascriptMVC Another javascript MVC framework
    3. 3. Me Alive• Mozilla Corp. Taiwan, Frontend engineer• ~1.5 year experience on web• https://github.com/alivedise• email: alegnadise@gmail.com alive@mozilla.com
    4. 4. Mozilla is hiring!
    5. 5. You• A web developer• Use lots of jQuery plugins in your site• Javascript newbie• Building a complex web application• Hate backend stuff
    6. 6. Developing webapplication is a struggle.
    7. 7. BackboneJS is much more known to people.Amazing! They have their own backboneConf!http://backboneconf.com/
    8. 8. But I would love toprovide another choice to you
    9. 9. Successfull story: Grooveshark.com
    10. 10. 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
    11. 11. 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&
    12. 12. Class
    13. 13. $.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 // -> hydraMonster.count // -> 2Monster.shortName // -> Monsterhydra.eat(2); // health = 12dragon.fight(); // health = 8
    14. 14. CSS collision/* a.css */div.data {! background-color: red;}/* b.css */div.data {! background-color: white;}
    15. 15. {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() {  // ...});
    16. 16. Data chaos...
    17. 17. $.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() {  }});
    18. 18. $.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
    19. 19. Data mess solution$.when( Character.findOne({id: 1}), Item.findAll({char_id: 1}) .done(function(){ /*...*/ });
    20. 20. When 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"><spanclass="name"></span><span class="icon"></span><spanclass="content"></span><span class="screenshot"></span></div>);
    21. 21. $.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){}});
    22. 22. $.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);  }});
    23. 23. $.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>
    24. 24. 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>
    25. 25. StealJS Library dependency solutionsteal(jquery).then(jquery/resize,jquery/mousehold,jquery/event/drag).then(./my.css, function(){/*...*/});
    26. 26. More about...fixture
    27. 27. •You can do nothing without server. Do you?• Multi ajax request solution
    28. 28. Deferred model•Since jQuery 1.5, ajax is implemented as a deferred object.•Models CRUD support deferred operation.$.fixtureo Create a deferred instead of sending XMLHttpRequest to the server, but to the function you preferred.
    29. 29. $.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); }});
    30. 30. Q&A Javascript is beautiful.Lets use it to get the world better.

    ×