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.

2. 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: alegnadise@gmail.com
alive@mozilla.com

6. Mozilla is hiring!

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

13. Successfull story: Grooveshark.com

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

30. More about...fixture

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.