[Coscup 2012] JavascriptMVC

JavascriptMVC
Another javascript MVC framework

Me

Alive

• Mozilla Corp. Taiwan, Frontend engineer
• ~1.5 year experience on web
• https://github.com/alivedise
• email: alegnadise@gmail.com
alive@mozilla.com

You

• A web developer
• Use lots of jQuery plugins in your site
• Javascript newbie
• Building a complex web application
• Hate backend stuff

Developing web
application is a
struggle.

BackboneJS is much more known to people.

Amazing! They have their own backboneConf!
http://backboneconf.com/

But I would love to
provide another choice
to you

Successfull story: Grooveshark.com

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

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&

$.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

CSS collision

/* a.css */
div.data {
! background-color: red;
}
/* b.css */
div.data {
! background-color: white;
}

{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() {
  // ...
});

$.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() {
  }
});

$.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

Data mess solution

$.when(
Character.findOne({id: 1}),
Item.findAll({char_id: 1})
.done(function(){ /*...*/ });

Ｗ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>');

$.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){}
});

$.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);
  }
});

$.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>

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>

StealJS

Library dependency solution
steal('jquery').then('jquery/resize','jquery/
mousehold','jquery/event/drag').then('./
my.css', function(){
/*...*/
});

•You can do nothing without server.
Do you?
• Multi ajax request solution

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.

$.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);
}
});

Q&A

Javascript is beautiful.
Let's use it to get the world better.

[Coscup 2012] JavascriptMVC

Recommended

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to [Coscup 2012] JavascriptMVC (20)

Recently uploaded (20)

[Coscup 2012] JavascriptMVC

Editor's Notes