This document discusses the advantages of YUI and jQuery for building large scale JavaScript applications. It argues that jQuery does not scale well for large apps, while YUI provides better tools for application lifecycle management, modular code organization, and event handling that are important for scalability. The document provides examples of how YUI implements asynchronous module definition and module concatenation to improve scalability compared to jQuery. It recommends choosing a framework based on the specific needs of an application rather than following trends.

1. YUI &jQuery:
To Build Large Scale JavaScript App
Morgan Cheng
@morgancheng

2. 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/

3. Single Metric is not Enough

4. Rosetta is not enough
http://www.jsrosettastone.com/

5. jQuery YUI

6. Demo
• http://jsfiddle.net/morgancheng/afX5b/
• http://jsfiddle.net/morgancheng/HmsxA/
• http://jsfiddle.net/morgancheng/9qgAP/
• http://jsfiddle.net/morgancheng/BeV2q/

7. jQuery doesn’t Scale

8. Scale!

9. What is required to be
Scalable?

10. Application Lifecycle
Module Management
DOM, AJAX Utility

11. Application Lifecycle
Module Management
DOM, AJAX Utility

12. Module Management

13. “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

14. • Independent
• Reusable
• Agnostic to others

15. Event System
I know something
I want to do something
happens. But I don’t
when this happens. But I
care how others handle
don’t care who trigger it.
it

16. AMD: Asynchronous Module
Definition
define(
‘module-name’,
[‘dependency1’, ‘dependency2’],
function(d1, d2) {
// export something
}
);

17. YUI Module Management
YUI.add(‘module-name’, function(Y) {
// Change Y to change the world
Y.foo = …;
},
‘version’,
{
requires : [
‘dependency1’,
‘dependency2’
]}
);

18. Concatenate Modules

19. Application Lifecycle

20. • Bookmark-able
• Navigable
• SEO Friendly

21. So Many Choices
https://github.com/addyosmani/todomvc

22. MVC is not the only game in town

23. App Framework

24. Choose Gear According to YOUR Needs

25. Thank You
Any Questions?