“JavaScriptMVC 3.0: Good To Go!”

by Justin Meyer

“JavaScriptMVC 3.0: Good To Go!”

Justin Meyer For the past year and a half, we've been pouring our

posted in Development on December 6, 2010 by Justin Meyer

For the past year and a half, we’ve been pouring our heart into
JavaScriptMVC 3.0. So it’s with great
excitement that we’re ready to announce 3.0 is here to solve your
JavaScript headaches. With over 1800 commits, the new version is faster,
easier to use, and more powerful.

But with so much
goodness, it’s
hard to know where to start. The following are the biggest and
bad-ass-est changes to JavaScriptMVC:

FuncUnit

FuncUnit is probably the
best thing to happen to web testing … ever. It makes automated tests
extremely easy to write and debug. Tests look like jQuery code:

module('numeric',{
  setup : function(){
    S.open('numeric.html')
  }
})

test('entering letters', function(){
  S('#numeric').type('seven').then(function(){
    ok( this.text() , "" , "input field is empty")
  })
})

test('entering letters', function(){
  S('#numeric').type(7).then(function(){
    ok( this.text() , "7" , "input has 7")
  })
})

You can run this test in your browser, or automated via selenium.

Standalone Sub Projects

Despite JavaScriptMVC’s tight integration, we’ve long understood that
some people might not be able to use the entire framework. With 3.0,
every part works standalone. So no matter the project, you can start
benefitting from JavaScriptMVC’s goodies. JavaScriptMVC is now the
following 4 projects:

Each has its own website (coming soon), github repo, and forum. You can
customize the jQueryMX
download
like jQueryUI and
Mootools:

Downloader

Of course, it all works a lot nicer together.

Multi-Page Builds

StealJS can optimize your
scripts across several pages to get practically the fastest possible
load times. We’re not even aware of server-side dependency management
tools that do this.

js steal/buildjs homepage profile tracks

This recursively finds the largest common dependencies between apps and
puts them in a shared script. The result is the fewest number of scripts
with the most optimal caching between pages.

Less and CoffeeScript Support

Sick of being stuck with JavaScript and CSS for the past 15 years, but
you don’t want to compile every time you make changes? We thought so.
We’ve made it really easy to integrate other languages and technologies
into StealJS’s dependency management and build process. For example,
create a LESS file like:

.rounded_corners (@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners(10px);
}

And a CoffeeScript file
like:

# Conditions:
number = -42 if opposite

# Functions:
square = (x) -> x * x

And you can load them into your app like:

steal.less('myless').coffee('mycoffee')

When it comes time to build, steal converts them into JS or CSS and
packages them along with the rest of your files. But while developing,
just refresh to see changes. Yep, it’s amazing.

P.S. jQuery.View uses
StealJS’s ability to handle multiple languages to compress EJS, JAML,
Micro, and jQuery.tmpl templates into your production package.

New Folder Structure

The secret to building large apps is to never build large apps. 3.0 is
designed with this in mind. It makes it easy to build parts of your
application as standalone plugins, each with their own demo page, tests,
documentation, etc. Here’s what our
Srchr
example looks like:

Srchr

Notice how the each plugin (disabler and tabs shown here) has its own
demo page, tests, and css. The final app simply ‘steals’ and wires up
these plugins:

steal.plugins('srchr/disabler','srchr/tabs')
     .then(function(){
   // make a disable-able tab widget
});

Similarly, Srchr’s test script just each plugin’s test script to make a
single test that runs all tests:

steal.plugins('srchr/disabler/funcunit',
              'srchr/tabs/funcunit');

The result is it’s extremely easy to develop and test part of your
application in isolation and then integrate it with the rest of the app.

As a bonus, the new structure makes it easy to share (and use) other
people’s work. There are already third party plugins to use! If you’re
using git, you can add them as submodules or install them from the
command line:

js steal/getjs mustache

Learn-ability

JavaScriptMVC has a ton of functionality. But, we’re committed to making
its learning curve as short and flat as possible. With the exception of
DocumentJS (ironic), every component has:

We also:

The Future

In the short term, we’re going to stay focused on making 3.0 easier to
use and learn. This means more blog articles, videos, demos etc.

But, in the long term, there’s a few things we’d like to tackle:

A recorder / IDE for authoring FuncUnit tests. This will be similar to
Syn’s
demo
.

An asyncronous events extension to jQuery. We want to be able to pause
and resume events like:

$(".tab").delegate("li","activate",function(ev){
  ev.pause();
  $(this).load('/content', function(){
    ev.resume();
  })
})

This will make it easy to weave in asynchronous extensions to widgets.

An extremely lightweight UI/widget library. We’ve already got a good
collection of rough widgets in
mxui. You should be able to weave
in the features you need.

Integration with RequireJS and LabJS. In an ideal world, we want a
script loader with the:

  • Namespace clean-ness of RequireJS
  • Speed of LabJS
  • Build features of StealJS

Conclusion

With 3.0, JavaScriptMVC is officially mature. We’ve added few purely new
features from 2.0. Instead, we perfected existing features. FuncUnit is
the best example of this. 2.0’s testing could work in the browser and
with Selenium. However, we:

  • Fixed Selenium’s numerous synthetic event bugs with Syn.
  • Created a much nicer API – one that handles asynchronous functional
    programming extremely well.
  • Threw out our own assertion library and replaced it with qunit.
  • Made FuncUnit work stand-alone.

The result is that FuncUnit is very nearly the perfect web testing tool.
And, as a result of hundreds of similar changes to the rest of the
framework, JavaScriptMVC is now the perfect web development tool :-).

blog comments powered by Disqus

Using CanJS 2.2 with StealJS and NPM

David Lueckeposted in Development, Open Source on April 23, 2015 by David LueckeCanJS can be used in many different module formats like AMD and CommonJS and package managers like Bower and NPM. In this post we will talk about using CanJS with the new StealJS and NPM.

Set Algebra with can-set

Justin Meyerposted in Development, Open Source on April 22, 2015 by Justin Meyercan-set is a client and server side JavaScript utility that makes set algebra easy. This article talks about the design goals of can-set and introduces a few cases where you might find it useful.

CanJS 2.2 Release

Justin Meyerposted in Development, Open Source, Uncategorized on April 5, 2015 by Justin MeyerCanJS 2.2 is out. It's awesome. This article covers the top 10 enhancements added since 2.1. Some of the improvements include Browserify and StealJS support, can-EVENT arguments, observable promises, and in-page automatically rendered templates. The article includes a lot of good JSBins to learn from too.

Contact Us
(312) 620-0386 | contact@bitovi.com
 or cancel