JavascriptMVC introduction, COSCUP 2012 version.

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.