The Uize.substituteInto static method, implemented in the Uize base class has been improved to be more robust. Because of the way it was previously implemented, the Uize.substituteInto method would perform further substitutions into values previously substituted into the source string. This could result in some odd and unexpected behaviors in the unlikely event that the value for one substitution contained the token name for another substitution. In addition to this improvement, the Uize.substituteInto method is also now fully unit tested, and its documentation has been updated to be more comprehensive and accurate.

The new Animate Position in JavaScript example shows how to animate the position of an HTML element and how to apply amazingly realistic motion effects like easing, elasticity, bounce, and many more. In the example, the Uize.Fx.fadeStyle method of the Uize.Fx module is animating the position of a silver sphere. You can click anywhere on a brushed metal square and the sphere will move to that position. How the sphere moves is decided by the curve(s) used by the Uize.Fx.fadeStyle method. You can change the curve(s) by selecting one of the many presets from the "PRESETS" tab. Upon choosing a preset, a random target position is chosen for the sphere, and the sphere is then animated to that position using the newly selected curve(s). The animation can be repeated by clicking a preset link repeatedly, or by clicking the "PREVIEW ANIMATION" button repeatedly, or by clicking anywhere on the metal square. The settings for a preset can be edited in the "PARAMS" tab, and the edited settings can be previewed by clicking on the "PREVIEW ANIMATION" button.

The built-in module loader in the Uize base class has been improved to make updating the version of the UIZE JavaScript Framework used on a particular Web site easier. It has been updated so that it now retains the query parameters from the URL that is used when sourcing in the Uize. These query parameters make their way into the default value that is set for the Uize.moduleUrlTemplate static property when loading in the Uize base class in a Web page. As such, they are then used when forming the URLs for requesting subsequent modules that need to be dynamically loaded in. This means that if you're adding a build number query parameter onto the URL when loading in the Uize base class in a script tag, then that same build number will appear in URLs for dynamically loaded modules. By using a build version query param when loading the Uize base class, one can ensure that the browser's cache will be defeated for all dynamically loaded modules, which guarantees that the browser won't continue using an old cached copy for one module while potentially using a new fresh copy of some other module (which could produce errors if the different modules from different versions of the framework are not compatible with one another). The Uize.getPathToLibrary static method has been improved to now support an optional moduleTokenSTR parameter. When the optional moduleTokenSTR parameter is specified, then the value returned by this method will be the value of the src property for the script tag that sources in the module specified by the moduleFilenameSTR parameter, but with the module filename replaced by the substitution token specified by the moduleTokenSTR parameter.

The new Animated Buttons with Box Shadow example demonstrates the UIZE JavaScript Framework's ability to animate values for the box-shadow CSS3 style property. In this example, an instance of the Uize.Widget.HoverFader widget class is being used to add a JavaScript animation effect to a set of navigation buttons. With help from the Uize.Fx.xShadows extension module, the instance manages fading of values for the box-shadow, margin-left, margin-top, color, and border-color CSS style properties for the buttons. For browsers that support the CSS3 box-shadow style property, the buttons appear to "leap" out of the page when they are moused over. To add more realism, the Uize.Curve.Rubber module is used to add a bounce quality to the fade back from a button's hover state to its resting state, which makes the buttons bounce as they sink back in and "hit the page surface".

The new Uize.Fx.xShadows extension module implements support for fading / animating the values of both the text-shadow and box-shadow CSS3 style properties. This new module takes over from the now deprecated Uize.Fx.xTextShadow module. When the Uize.Fx.xShadows module is loaded, the Uize.Fx.fadeStyle method can be used to animate text shadow and box shadow along with all other supported CSS style properties.

The Uize.Template module has been improved in a number of ways: 1) The new Uize.Template.encodings static property, which is an object, allows custom encodings to be registered by assigning encoding profile objects as properties on it. 2) The new Uize.Template.defineStandardEncoding static method provides a convenient way to define new standard encodings. 3) Three new encodings have been added: iso8601, tagAttributes, and tagAttributeValue. 4) When building up the canonical list of modules required by a template being compiled, the @required directive now makes sure to ignore any duplicate instances of required modules. 5) The Uize.Template.encode and Uize.Template.decode static methods have been improved to now both support encoding chains, in the same format as can be used in assignment expressions in template code (eg. 'json -> urlPiece'). 6) The reference documentation for the Uize.Template module has been improved in a number of ways. 7) With the introduction of the new Uize.Template.encodings static property, the Uize.Template.encoders and Uize.Template.decoders static properties have been deprecated. 8) With the introduction of the new Uize.Template.encodings static property, the way that encodings imply dependencies upon code execution has changed.

The Uize.Date module has been improved, with fixes for a number of issues, improvements to a number of static methods, and the addition of a thorough set of unit tests in the new Uize.Test.Uize.Date unit tests module. FIXES: 1) The Uize.Date.inRange static method has been fixed to correctly support date range objects where the value of the minValue property is undefined, null, or not specified. 2) A rounding bug in the Uize.Date.isRecent static method, that would cause this method to produce the incorrect result under certain conditions, has been fixed. 3) A bug with the Uize.Date.toIso8601 static method, where the month would always be off by one, has been fixed. IMPROVEMENTS: 1) The Uize.Date.format static method has been improved with the addition of support for invalid dates for all substitution tokens (eg. Uize.Date.format (new Date (NaN),'{YYYY}-{MM}-{DD}') now produces the result '????-??-??'). 2) The Uize.Date.resolve static method has been improved with the addition of support for dates specified as a milliseconds integer number. UNIT TESTS: The Uize.Date module is now thoroughly unit tested by the newly created Uize.Test.Uize.Date unit tests module.

The recently released wardtog.com Web site is an excellent showcase of the UIZE JavaScript Framework. Wardtog.com really is the long tail of location based products, offering products that represent hundreds upon hundreds of cities across the entire globe. Let's say, hypothetically, that you were born and raised in the city of Cape Town, South Africa. Then, let's say further that you were at some point transplanted to San Francisco, California. Now, as an expatriate of Cape Town, South Africa, you might be moved to buy a shirt declaring your undying love for your city of birth. At Wardtog.com, this hypothetical expatriate can do just that by going to the Cape Town Designs page. With wardtog.com, transplants from all around the globe can step up and represent. Each city has numerous products with numerous design themes. The wardtog.com Web site is an impressive showcase of what can be accomplished using the UIZE JavaScript Framework. The designs for the many cities represented on the site are generated dynamically in Adobe Photoshop, with some help from the host-neutral modules of UIZE. Then, build scripts running in Windows Script Host are responsible for building the thousands of HTML pages, utilizing UIZE and its JavaScript templates functionality, thereby reducing server load by not requiring large amounts of dynamic processing and database access when pages of the site are viewed. Then, the entire site, consisting of thousands of static pages, is packaged and deployed to the server, once again utilizing scripts running in Windows Script Host and employing the host-neutral features of UIZE. Finally, the UIZE JavaScript Framework is used on the client-side to provide zoom previews in product grids, and for other client-side interactivity. All in all, wardtog.com really flexes the muscles of the UIZE JavaScript Framework and puts its robust features to good use.

The new Creating A New Uize Module explainer provides guidelines and advice for the development of new UIZE modules, to be followed by developers of the UIZE JavaScript Framework. Among other things, this document discusses: 1) choosing an appropriate namespace and name for your new module, 2) requirements for the module info, scruncher settings, and module meta data comment blocks of your new module, 3) guidelines on implementing the functionality for your new module, 4) implementing a companion unit test module for your new module, 5) documenting your new module, and 6) creating one or more examples for your new module.

The new Get Tree from Page example demonstrates how the Uize.Node.Tree.getTreeFromPage static method of the Uize.Node.Tree module can be used to build a tree data object respresenting the structure of the document, by analyzing the occurrence of different CSS classes for section headings at different depths of the document (in this case, the CSS classes level1Header, level2Header, and level3Header). A tree data object like this can be supplied to a tree menu widget, or can otherwise be used to build UI for navigating to different sections of the document (a contents tree, for example).

he Uize.Fx.xTextShadow extension module has been deprecated in favor of the new and more powerful Uize.Fx.xShadows module. As its name implies, the Uize.Fx.xTextShadow module provided support specifically for fading / animating values of the text-shadow CSS3 style property. The new Uize.Fx.xShadows module provides support for animating both the text-shadow and box-shadow style properties. Because the Uize.Fx.xTextShadow module has only been deprecated and has not yet been eliminated, code currently using it should continue to work. However, relying on the backwards compatibility provision will not be as efficient as directly using the new Uize.Fx.xShadows module. Therefore, code that was previously using the Uize.Fx.xTextShadow module should be updated to use the new Uize.Fx.xShadows module.

The date picker widget, implemented in the Uize.Widget.Picker.Date module, has been improved to correctly support date entry in a wide variety of different formats. Previously, dates selected by the user in the date picker dialog could be formatted in the date picker widget's text input field using a configurable date format, as specified in the Uize.Widget.Picker.Date class' displayFormat set-get property. However, the date picker dialog could only parse dates specified in a format that could be recognized by the Uize.Date.resolve method. The new implementation uses the Uize.Date.Formatter.parse method of the new Uize.Date.Formatter module to parse dates in any format specified by the displayFormat property. This change also involves improvements to the Uize.Widget.Calendar, Uize.Widget.Dialog.Picker, Uize.Widget.Dialog.Picker.Date, and Uize.Widget.Picker modules.

A number of instance and static event management methods of the Uize base class that were deprecated back in early June of 2009 have finally been killed. In keeping with the policy of one year backwards compatibility transition periods, the deprecated forms of these methods were kept in place for a year and are now ready to expire. Specifically, the addEventHandler, addEventHandlers, fireEvent, removeEventHandler, and removeEventHandlers instance methods have been killed, and the Uize.addEventHandler, Uize.addEventHandlers, Uize.wire, Uize.fireEvent, Uize.removeEventHandler, and Uize.removeEventHandlers static methods have been killed.

New mobile touch devices are released on a weekly base.  At least since the iPad and with other tablets on the horizon, people will want to use the Rich Internet Application they are used from their desktop computer on those devices.

These weeks we have started to improve the framework support for mobile touch devices. In the first iteration, we laid the focus on a basic touch support for Apple iPhone / iPad and Android devices.

So what's new for you and your applications?

<h2>Touch Events</h2>

With the qx.event.type.Touch event class it is possible to listen for touch events on elements, from low-level DOM elements to high-level UI widgets. With the following code snippet you can add a touch event:

elem.addListener("touchstart", function(e) {
  var x = e.getDocumentLeft();
  var y = e.getDocumentTop();

  alert("touched at x: " + x + " / y: " + y);
}, this);

The following touch events are supported:

• touchstart – Fired when the element is touched by one or more fingers.
• touchmove – Fired when a finger is moved on the element
• touchend – Fired when a finger is lifted from the element
• touchcancel – Fired when the touch is interrupted by the system (e.g. when an alert occurs)

<h2>Demos</h2>

See the touch events in action:

Pong:

http://demo.qooxdoo.org/devel/demobrowser/demo/mobile/Pong.html?qx.theme=qx.theme.Modern

Fingers:

http://demo.qooxdoo.org/devel/demobrowser/demo/mobile/Fingers.html?qx.theme=qx.theme.Modern

Image Scale / Rotate:

http://demo.qooxdoo.org/devel/demobrowser/demo/mobile/ScaleImage.html?qx.theme=qx.theme.Modern

Today, we’d like to announce that we’ve moved the Official jQuery Podcast off the jQuery blog and onto it’s own site at http://podcast.jquery.com.

We felt that with a weekly blog post for each episodes show notes the podcast was taking over the blog.  Some of the community members thought the same way.  We’ve been working on porting over the existing posts and making the new podcast site easier to use for our listeners.

Each episodes show-notes are now streamlined to give you a quick introduction about what the show is about followed by all the links that were mentioned in the show.  We also have the ability to play the show from the post with an embedded player as well as easy links to download and subscribe.

We also have a easy contact form that will allow you to contact the podcast directly.

We’ve cleaned up the jQuery blog and removed the old show notes and put in place URL redirects so old urls will still go to the right post on the new site. While we are talking about the blog, we’d like to know what would you like to see more of on the jQuery blog?  Currently we’ve been using the blog to post news about the project and upcoming events.  What else can we post to help you out?  We’d love to hear your ideas.

Special thanks goes out to Doug Neiner for helping out with design and coding, also, would like to thank Jonathan Sharp for setting up the site and getting the URL redirects in place.

Let us know what you think of the new podcast site and don’t forget to keep listening to the show.

Welcome back to the weekly status update.

Upcoming IE9 support

This week we started to look more closely into the framework's support for the future Internet Explorer 9. While IE9 is still only available as a platform preview, the first beta is expected in about two weeks. While working with the browser preview we found some regressions in the new IE9 implementation, which we reported to Microsoft's developer team. For details see the bugzilla list, with some corresponding links to the Microsoft Feedback Program.

Inspector

The Inspector's Selenium window can now import test cases in the "Selenese" HTML format. More importantly, the required external scripts (Selenium Core and the qooxdoo extensions) can now be loaded straight from their online repositories, so no local copy is required. See the manual page for a detailed explanation of the new features.

Bug fixes

For a complete list of tasks accomplished during the last working week, use this bugzilla query.

New Contrib: TokenField

It's quite interesting to see how that contrib got started and how it is coming along: on Monday Christian Boulanger started to think aloud about integrating an existing jQuery-based "token field" into one of his apps. Guilherme Aiolfi couldn't quite stand that: "God, I hate jQuery. After getting used to the qooxdoo clean way of organizing code looking at jQuery code looks so messed up. I think you should be better porting it. I would be interested to help you with that." He suggested to implement it as a regular qooxdoo widget, based on the concept of a token field know from Mac OS X. The next day he already had a first version available.

It was a straightforward procedure to make Guilherme a contributor for qooxdoo-contrib, and let him continue his work as a new TokenField contrib. Now, by the end of the week, a development version of it is already showcased in the online contrib demobrowser. Thanks Christian and particularly Guilherme for such a fantastic job, transforming a mere idea into a public qooxdoo contribution within, what, four days!

Outlook

Next week a number of team members will be absent, due to attending conferences, or being on vacation or on work-related trips. Please take that into account and expect some delay over typical communication channels like mailing list or bug tracking. It would be great you could help out, for instance by being particularly active on the mailing list, trying to answer other qooxdoo users' questions. Appreciated.

Have a nice weekend.

There's a lot more to making JavaScript apps than writing JavaScript. StealJS is a collection of command and browser based JavaScript utilities that make building, packaging, sharing, and consuming JavaScript applications easy.

Download

stealjs-beta-1.zip

Features

StealJS is made of several components:

Dependency Management

The steal script is a script loader and dependency management tool. Features:

• Load JavaScript, CSS, Less, CoffeeScript, and a variety of client-side templates.
• Load files relative to the current file, steal's root folder, your server, or from other domains.
• Load a single file only once (the whole dependency management thing).

steal('dojo','jquery','prototype');

JS/CSS Concatenation and Compression

Steal's build plugin compresses an application into a single minimized JavaScript and CSS file. Features:

• Works with any application, even ones not using the steal script.
• Configurable compressors (defaults to Google Closure).
• Compresses Less and CoffeeScript.
• Pre-processes and compresses client-side templates (templates don't have to be parsed or included with the page).
• Expandable architecture makes it easy add other file types to the build script.
• Can intelligently combine shared dependencies into separate files for caching.

./js steal/buildjs mypage.html

Code Generators

Steal's generate plugin makes it easy to get started developing. Features:

• Creates folders, files and scripts your app needs.
• It's very easy to make custom generators.

./js steal/generate/app myapp

Package Management

Steal's get plugin is a very basic JavaScript version of ruby gems. Features:

• Download and install plugins from remote SVN or GIT repositories.
• Installs dependencies.

./js steal/getjs http://github.com/jupiterjs/funcunit

Code Cleaner

Steal clean beautifies your code and checks it against JSLint.

./js steal/clean path/to/page.html

Logging

Steal dev logs messages cross browser. Messages are removed in production builds.

steal.dev.log('something is happening');

Why

StealJS is an extremely strong attempt at solving a few of the the most core problems in JavaScript development:

Development vs Production

There's a tension between development and production JavaScript needs. When developing JavaScript, you want:

• Lots of logically separated files.
• Changes in a file to only require a refresh of the browser. (It's JavaScript not JavaCompile!)

This is in contrast to production where you want a few compressed and cacheable files.

Steal makes this easy with not only JavaScript, but with other resources like CSS, client side templates, Less, and CoffeeScript!

Yes, this means what you think it does. You can edit CoffeeScript/Less/template/CSS files and just refresh the browser to see changes. When you finally make a production build, steal will convert, package, and compress these files with your other JavaScript and CSS files.

Optimized Websites

There's also tension between script loading performance and caching. You want to:

• Have as few http requests as possible.
• Exploit the cache.

This is especially problematic when multiple pages have shared dependencies. Lots of shared scripts better exploit the cache, but also increase the number of requests.

StealJS makes it easy to find the perfect balance. It can build apps for multiple pages at the same time, understand the shared dependencies, and create cacheable shared downloads.

Framework Agnostic

Most server frameworks come with varying levels of similar functionality. Ruby on Rails is particularly great and bundling Less CSS and JavaScript.

But, what if you wanted to bundle the same Less files with ASP.NET MVC?

StealJS works with any server framework. As we (or mabye you) add new features, those will be available to users of any web framework.

Resources

• Documentation
• Github Repository
• Website (a work in progress).
• Get Help (on the JavaScriptMVC forums).

Use

Download steal and unzip it into a public folder where you will have JavaScripts. You should see something like:

/your_public_folder
  /steal
  /js.bat
  /js

If you don't already, make sure you have Java 1.6 installed.

Using Generators

The easiest way to create a new app that uses steal is to use steal.generate to create an application skeleton. Open a command line to your public folder. In windows write:

js steal\generate\app myapp

In Mac/Linux write:

./js steal/generate/app myapp

Warning: The remainder of this guide only shows the windows command. Mac/Linux users should change js to ./js and \ to /. (We make the Mac/Linux people figure it out because they are smarter :-).

This creates a myapp folder in your public directory that looks like:

/myapp
  /docs
  /scripts
     /build.js
     /clean.js
  /test
  /resources
     /example.js
	 /example.coffee
	 /example.less
  /myapp.html
  /myapp.js
  /myapp.css

Dependency Management and Script Loading

If you open myapp.html in a web browser, you should see something like:

*** This won't work on the filesystem from Chrome because it has draconian XHR limitations. If you run it from a server, it will work perfectly.

Now open myapp.html in a text editor, you will find a script tag like:

<script type='text/javascript'
        src='../steal/steal.js?myapp/myapp.js'></script>

This loads the steal script. The steal script is what does dependency management. The myapp/myapp.js tells the steal script to load your app at myapp/myapp.js.

Open myapp/myapp.js. In it you'll see something like:

steal( 'resources/example' )              // 1
  .css( 'myapp' )                         // 2
  .plugins(
      'steal/less',
      'steal/coffee' )                    // 3
  .then(function(){                       // 4
      steal.coffee('resources/example')   // 5
        .less('resources/example');       // 6
  });

This:

1. Loads 'myapp/resources/example.js'.
2. Loads 'myapp/myapp.css'
3. Loads 'steal/less/less.js' and 'steal/coffee/coffee.js'
4. Adds a function to be called back once all prior files have been loaded and run.
5. Loads 'myapp/resources/example.coffee'.
6. Loads 'myapp/resources/example.less'.

*** This callback is needed because script loading is not synchronous. The 'steal/coffee' and 'steal/less' plugins add steal.coffee and steal.less.***

The steal script provides a number of helper functions to make loading scripts very easy. Once you have loaded all the scripts for your app, it's time to build it.

JS/CSS Concatenation and Compression

If you used the generators to create your application, compressing your app is very straightforward:

js myapp/scripts/build.js

This packages your app into myapp/production.js and myapp/production.css.

To uses these files instead of all your uncompressed files, change your page to load steal.production.js instead of steal.js:

<script type='text/javascript'
        src='../steal/steal.production.js?myapp/myapp.js'>
</script>

Reload myapp.html and you should see it load only 2 JavaScript files and one CSS file.

Package Management

Steal.get downloads and installs plugins from a url. Typically it's run from the steal/getjs script.

The following copies the FuncUnit repo to a local funcunit folder.

js steal\getjs http://github.com/jupiterjs/funcunit -name funcunit

Official Plugins

Steal maintains a list of official plugins compatible with steal development. You can install these just by providing their name:

js steal\getjs funcunit

The following are the list of official StealJS plugins. As StealJS itself is in Beta, the following plugins should not be considered production ready:

• steal - Update steal itself.
• funcunit - Functional testing platform.
• jquery - jQuery 1.4.3 and the JavaScriptMVC components.
• phui - Very early alpha UI widgets.
• documentjs - A documentation engine.
• mustache - mustache templates.
• ss/statemachine - Implements jQuery.Controller as a fininte-state-machine
• ss/router - The Sherpa routing system for jQuery.Controller

Code Cleaning / JSLinting

Steal clean uses JS Beautifier to clean your code and JSLint to check it for trouble spots like global or unused variables.

Cleaning a Single Script

To clean a single script, you can write:

js steal/cleanjs path/to/my/script.js

It will replace the script with a beautified script. If you want to also add JSLint (feelings beware), run it with:

js steal/cleanjs path/to/my/script.js -jslint true

Cleaning a StealJS app

If you used the generator to build your app, you can clean myapp's scripts with:

js myapp/scripts/clean.js

Add JSLint with:

js myapp/scripts/clean.js -jslint true

Logging

Finally, a small but nice feature of StealJS is that you can leave log messages without worrying that they show up in your production build. For example, steal.build will remove the following from the production build.

steal.dev.log("Something has happened"); //***

*** If you want to see this work, change to development mode and open Firebug.

Conclusion

We built StealJS to provide a single solution to many of the script management problems we faced with our client work. I hope it helps you in the same way it has helped us - turning around higher quality apps faster.

In the next two weeks, we plan to release a production StealJS. This will be followed by months of adding new tools, resources, and documentation.

In the future, we hope to work with other projects like LabJS, CommonJS, and RequireJS, to offer a 'standard' solution to the problems addressed by StealJS.

I spent a lot of time the last few weeks arguing why jQuery needs the Enterprise, and why it needs JavaScriptMVC (part 2).  But, I should have been explaining why YOU need JavaScriptMVC.  So I put together a list of what JavaScriptMVC provides.

The JavaScriptMVC Framework is feature rich. It does everything you need in between jQuery and your project (with the exception of packaged UI widgets). The following is a rough list of the features of the framework's major components followed by the features of the project as a whole:

Steal

- an independent code manager

Dependency Management

• Load JavaScript, CSS, Less, CoffeeScript, and a variety of client-side templates. 
• Load individual files only once. 
• Can load relative to the current file. 
• Can load from other domains.

JS / CSS Concatenation and Compression

• Works with any application, even those not using the dependency management solution.
• Configurable compressors (defaults to google closure).
• Compresses Less and CoffeeScript into a production build.
• Pre-processes, compresses and packages a variety of client-side templates.
• Expandable architecture makes it easy to add other resources.
• Can conditionally remove chunks of code from production build.
• Build standalone jQuery plugins.

Logging

• Log messages, but they will be removed in production build.

Code Generators

• Generate an application skeleton..
• Very easy to create your own generators.

Package Management

• Download and install plugins from SVN or GIT repositories.
• Installs dependencies.
• Runs install scripts.
• We maintain an official list of good plugins.

Code Cleaning

• Runs http://jsbeautifier.org/ on your project’s code
• Runs JSLint on your project’s code

FuncUnit

- an independent web testing framework

Comprehensive Functional Testing

• Test clicking, typing, moving the mouse, and drag drop.
• Follow the user between pages
• High fidelity event playback
• Multi-browser and operating system support.
• Automated and interpretable with Continuous Integration solutions
• Email results to gmail users plugin.

Easy Functional Testing

• Write and debug tests with only the browser.
• Simple, chain-able api that parallels jQuery.
• Upcoming ‘recorder’ app.

JavaScriptMVC Libraries

- a low to mid-level jQuery development toolset

Best Practices

• Encourages logically separated, deterministic code
• Service / Domain layer (Model)
• Uniform client-side template interface supports jq-tmpl, EJS, JAML, Micro, Mustache (View)

Faster Development

• Ajax Fixtures

Dom Utilities and jQuery extensions

• Efficient compareDocumentPosition
• Cookies*
• Delegate with the open child selector.
• Set and animate innerWidth, innerHeight, outerWidth, outerHeight.
• Quickly get multiple current css properties on an element
• Convert form data into nested JavaScript objects.

Language Extensions

• String helpers (including a working regexp split)
• Vector math
• JSON utilities+
• A simple, powerful, lightweight class system.

Custom Events

• Default events enable powerful Event Oriented Architectures.
• Bind to destroyed event for proper widget cleanup.
• Delegatable, highly customizable drag-drop events
• Hashchange event for browser history*
• Delegatable, configurable, hover events
• Normalized, cross-browser resize events

Superior Widget Factory (controller)

• Auto-magic cleanup (unbind, undelegate, unsubscribe)
• Organized methods and events
• Shared methods and properties
• Namespaces
• Automatically extendable
• Remove plugins without removing element
• Object Oriented

DocumentJS

- an independent JavaScript documentation application

Feature Rich

• Inline demos with source and HTML panels
• Taggable documentation
• Rapid, auto-suggest search
• Savable favorites
• Test results pages
• Disqus comments (coming soon)

Easy and Flexible

• Can document any page’s JavaScript with no extra work
• Extends JSDoc syntax
• Corrects misspellings of directives (ie @codend instead of @codeend)
• Adds undocumented JavaScript functionality because it understands JavaScript.
• Customizable, flexible relationships
• JavaScript objects can add documentation across files

JavaScriptMVC Framework as a Whole

- an integrated collection of best practices for developing jQuery applications

Ease of Development

• Everything you should be doing requires no extra work.  When you create an application, it's ready to test, document, compress, clean, and share.
• Provides a standard, modular, file structure to build everything from the smallest plugin to the largest application.
• Almost everything is extremely well documented, with code examples, demos, and write-ups at JupiterJS.com.  With the 3.0 release, everything will be documented.
• We are here to help. I don't think there is an un-answered question on our forum.  I don't think a question has been left un-answered for more than a day.

Quality

• Every component is tested and developed independently but also combined into an automated nightly test.  
• When we make fixes, it's extremely easy to upgrade JavaScriptMVC.
• JavaScriptMVC apps are lightweight.  You only use only what you need, but combined and compressed, the MVC parts and their dependencies are only 15kb (compared to jQuery's  70kb).
• We've taken considerable care to fine tune the performance of nearly every part of JavaScriptMVC.  It's techniques are 'fast-by-default'.

Scalable

• Everything works standalone.  You can use controller, steal, FuncUnit, the compare plugin, everything, by itself.  If your app grows to need other parts, we've got you covered.
• JavaScriptMVC has been solving the challenges of enterprise jQuery development for years.  (It was the first library to support comprehensive event delegation!) We have continually refined JavaScriptMVC's API and features to make it as easy as possible learn and use.

Conclusion

Hopefully at least something in this list interests you! If not, well ... I'm not interested in what you are doing.  

To be sure, JavaScriptMVC has a TON of features. Often people interpret this as 'too enterprisey'. But, a lot of care has gone into making it as easy to use each part as possible. We want you to fall into fall into the pit of success.  When you need those features, they are there.

Finally, while possible to assemble your own framework and build great things, it will undoubtedly be:

• More difficult to assemble.
• Less likely to interoperate (there's no extra work to document, clean, test, and build your app with JavaScriptMVC).
• More error prone.
• Harder to teach / get support.
• Larger (repeat work between stand-alone components)

So PLEASE take a look at JavaScriptMVC and even a better look at its beta 3.0 release.  Your spouse / girlfriend / pet will appreciate all the free time it gives you.

jQuery has internal coding conventions.  It uses tabs over spaces.  It uses lots of white paces and you can always find a {} around if/else statements.  I'm adopting these conventions for JavaScriptMVC.  JavaScriptMVC had notoriously flexible (ie bad) coding conventions. We were more concerned with adding features, tests, etc than making our code look nice.  But, for the 3.0 release, the features have stabilized. We're paying more attention to things like documentation and even coding conventions.

So, I spent a few hours today making JavaScriptMVC code look like jQuery code with a few simple regular expressions.  My goal was to make our Object literals look like:

httpSuccess: function( xhr ) {

One nice feature you may not know is that you can search the jQuery source for a method easily by searching for METHOD:.  I like that.  So, I used a few regular expressions to convert our varied object literal methods to jQuery style object literal methods. Here's what they do in order you should run them:

//Converts method : function -> method: function
RegExp  =/(\w+)\s*:\s*function/
Replace ="$1: function"

//Converts : function(f -> : function( f
RegExp  =/: function\(([^ \)])/
Replace =": function( $1"

//Converts : function( f){ -> : function( f ) {
RegExp  =/: function\(([^\)]*)([^ ])\)\s*\{/
Replace =": function($1$2 ) {"

//Converts : function(){ -> : function() {
RegExp  =/: function\(\)\s*\{/
Replace =": function() {"

I'm positive there's an easier way to do this, but this might get you started cleaning up your own code. Maybe someday we'll roll this into JavaScriptMVC.

After writing my previous article on Why jQuery Needs JavaScript, I feel like I didn't communicate why JavaScriptMVC is important for jQuery developers.  Here's a much more succinct way of saying it.

JavaScriptMVC makes doing everything you should be doing as easy as possible

Here's some of the things you should be doing:

• Testing (especially automatic and functional testing)
• Documenting
• Breaking up code into logically organized files
• Compressing and concatenating your JavaScript files
• Using and organizing client side templates
• Making plugins that clean themselves up are internally organized, and extendable.
• Error reporting

All of these things are hard or impossible to do right with jQuery alone.  

You can add your own automated testing library - Selenium or qUnit, qUnit isn't automated. Selenium is hard to write tests for.

You can add your own documentation engine - JSDoc, but make sure you keep track of every file!

You can add your own way of loading and compressing scripts - RequireJS.

You can use other client side template libraries - jquery-tmpl, but you won't be able to compress them into your build or put them in external files as easily.

You can be careful to structure your jQuery plugins so they can be easily removed from an element, remove all event handlers, and provide some mechanism for extending or overwriting your plugin.

You can devise your own way of doing error reporting.

Or

You can download JavaScriptMVC and run:

js steal/generate/app APPNAME

and get all of these things for free.

This is why jQuery needs JavaScriptMVC - to make it easy to do the things you should have been doing in the first place.

We've spent almost 3 years refining the same feature set to make crazy easy do these things. If this doesn't make sense to you, please read why JavaScriptMVC is not too Enterprisey.