YUI & jQuery: To Build Large Scale JavaScript App

Morgan Cheng@morgancheng

It is Not Religious War

http://www.quora.com/How-could-YUI3-improve-its-image-compared-to-jQuery-MooTools-etc/

http://www.nczonline.net/blog/2010/11/03/response-to-john-resigs-comments-about-yui/

Single Metric is not Enough

Rosetta is not enough

http://www.jsrosettastone.com/

jQuery YUI

Demo

• http://jsfiddle.net/morgancheng/afX5b/

• http://jsfiddle.net/morgancheng/HmsxA/

• http://jsfiddle.net/morgancheng/9qgAP/

• http://jsfiddle.net/morgancheng/BeV2q/

jQuery doesn’t Scale

Scale!

What is required to be Scalable?

DOM, AJAX Utility

Module Management

Application Lifecycle

DOM, AJAX Utility

Module Management

Application Lifecycle

Module Management

“The secret to building large apps is never build large apps. Break you applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application”

— Justin Meyer, author JavaScriptMVC

• Independent

• Reusable

• Agnostic to others

Event System

I know something happens. But I don’t

care how others handle it

I want to do something when this happens. But I don’t care who trigger it.

AMD: Asynchronous Module Definition

define(‘module-name’, [‘dependency1’, ‘dependency2’], function(d1, d2) {

// export something }

);

YUI Module Management

YUI.add(‘module-name’, function(Y) {// Change Y to change the worldY.foo = …;

},‘version’,{

requires : [‘dependency1’, ‘dependency2’

]});

Concatenate Modules

Application Lifecycle

• Bookmark-able

• Navigable

• SEO Friendly

https://github.com/addyosmani/todomvc

So Many Choices

MVC is not the only game in town

App Framework

Choose Gear According to YOUR Needs

Thank YouAny Questions?