JavaScriptMVC

UX Team Owen

Topic
What is JavaScriptMVC? JavaScript Theory

How to develop/test/compress a project?

What is inside? Weakness & StrongPoint JavaScriptMVC VS GI VS GWT More Information

What is JavaScriptMVC?
A collection of the best practices and tools for building JavaScript applications. Built on top of jQuery, it consists of the following standalone component.
StealJS: Dependency management and a easy build tool.
I recommend RequiresJS, http://requirejs.org/docs/api.html Circular Dependencies Load Scripts in a Specific Order Page Load Event Support

FuncUnit: Automatic test tool, Functional testing solution, Write test case in jQuery syntax, run them via command line or browser.(Like GITAK) jQueryMXThese plugins are the building blocks of large jQuery application model, view, controller, class, fixtures, and more. DocumentJS: A JSDoc compliant tool, that turns comments into a searchable documentation app.

JavaScript Theory

How to develop a project?

1. Cd javascriptmvc 2. ./js jquery\generate\app cookbook 3. ./js jquery\generate\page cookbook index.html 4. ./js jquery\generate\scaffold Cookbook.Models.Recipe 5. Open cookbook/index.html in Firefox.

How to Test a project?

1. Edit cookbook/test/qunit/qunit.js
steal .plugins("funcunit/qunit", "cookbook") .then("cookbook_test","recipe_test")

2. Open cookbook/qunit.html, see the unit testing.

3. Or, funcunit/envjs cookbook/qunit.html 4. Edit cookbook/test/funcunit/funcunit.js
steal .plugins("funcunit") .then("cookbook_test","recipe_controller_test)

5. Open cookbook/funcunit.html, see the browser testing. 6. Or, funcunit/envjs cookbook/funcunit.html

How to Compress a project?

1. ./js cookbook/scripts/build.js 2. Edit cookbook/index.html
<script type='text/javascript' src='../steal/steal.production.js?cookbook'> </script>

What is inside?
Code Generators Dependency Management Production Builds Testing Client Side Templates jQuery Widget Factory Service/Data Modeling Documentation Code Cleaning and Linting jQuery Special Events jQuery Utilities ./js jquery/generate/app myapp steal.plugins('jquery/controller').then(function($){ ... }); js myapp/scripts/build.js S.open("//myapp/myapp.html"); S("#search").click().type("Hello World"); $("#menu").html("menu.tmpl",items); $.Controller("Tabs",{ "li click" : function(el, ev){ ... } }); $.Model("Todo",{ findAll : "/recipes" }, {}); Todo.findAll(function(todos){ ... }); js myapp/scripts/docs.js js myapp/scripts/clean.js $("#items").delegate(".item","draginit",function(){}); $("#panel").outerWidth(500);

Weakness & StrongPoint

Weakness
Base on jQuery, may be some issue was evoked by jQuery. File directory structure base on MVC, it doesnt like AMX plugin folder structure.

StrongPoint
Base on jQuery, we can use jQuerys feature. It contains four components, and all the component is standalone. MVC structure. Easy testing

Anantas Question
GI
1. Can we do a framework similar to AMP?

JSMVC

GWT

More

Less

Less

2. How big is the GWT library memory?

3. Can we use GWT for gadgets. use 15 iframes with simple screen in one browser. 4. How easy to customize default GWT widgets like changing css etc? 5. How easy to customize default GWT widgets like modifing their behaviour and add extra behaviour?

6. Ability to use other frameworks like Fusion Charts, DOJO component

7. How easy to write a GWT wrapper for existing javascript? 8. How big the developer community compare to JQuery community? 9. What is the next version of GWT and when is that planned? 10. What are the well known GWT webapps as reference other than webapps developed by Google.

Tibco 3.9 Tibco

More 3.0.5 / 1.5 More

Less 2.2 Less

JavaScriptMVC VS GI VS GWT
GI
Develop Architecture Developer Community Team Technical Community Unit Testing Functional Testing Document Who user it Technical Support Language Learning Period Obfuscation Optimization

JSMVC
MVC Web Developer &

GWT
MVP Java & Web Developer &

MVC Tibco

, third party , third party Tibco Tibco JavaScript 3-4 Weeks , third party , third party

?/Web Site JavaScriptMVC JavaScript 1-2 Weeks

, third party
Gmail/Adwards/Orkus

Google Java/JavaScript 3-4Weeks

JavaScriptMVC VS GI VS GWT
GI
Load Scripts in a Specific Order Rich UI Visual Edit Debug Client Code WYSIWYWrite Developer Resources Base On License Plugin Resources Open Source Speed Memory Leak IDE Support Browser Support

JSMVC
jQuery UI Firebug Web Developer jQuery MIT Most Fast High Any Editor Common Browser

GWT
Ext/Smart GWT Eclipse & Java/Web Developer GWT Apache More Fast Normal Eclipse Common Browser

GIUI, UXCore Firebug & Tibco GI BSD Less Low High GI, Any Editor Firefox/IE8

More Information
JavaScriptMVC Demo List: http://docs.javascriptmvc.com/demos/index.html Who recommend it: http://addyosmani.com/blog/large-scalejquery/ Twitter: @javascriptmvc Blog: http://jupiterjs.com/pages/javascriptmvc Forum: http://forum.javascriptmvc.com

Question?