AppengineJS

Yes, it’s true! You can now run Javascript applications on Google’s App Engine platform thanks to the new AppengineJS project. The project is based on Rhino, the Java-based Javascript runtime, which is why it can run on Google’s Java- and Python-only platform. Of course, since Rhino has been around forever, simply executing Javascript on App Engine’s servers isn’t a new idea (RingoJS is server-side Javascript platform that runs on App Engine). Where AppengineJS stands out is in giving you easy access to many of the App Engine API’s (e.g. storage, memcache, OAuth, etc.). The library wraps the Python APIs to make them more friendly to Javascript developers.

Under the hood, AppengineJS uses the NitroJS library, which brings support for JSGI and CommonJS modules along with it. This gives you a huge amount of power & flexibility in how you build your server applications.

This is a really great set of tools. If you’ve been looking into ways of hosting server-side Javascript applications in the cloud, you really owe it to yourself to check out AppengineJS.

Tracer

Angus Croll of the javascript, Javascript blog has created a small but impressive tracer utility that tracks when a method is called and how long that method takes to execute. Just provide an object to the utility’s traceAll method, and whenever one of that object’s methods is called, the method name will be printed to the console along with its execution time. It’s a small (~50 lines) but ingenious bit of Javascript metaprogramming that feels like it could have all sorts of uses.

Souders on Frontend SPOF

Steve Souders, the frontend performance guru posted an extremely useful article on his blog regarding frontend SPOF (single point of failure). He looks at several kinds of resources that can interrupt pages loading and/or rendering, as well as workarounds to prevent such blocking. For instance, we all know that scripts should be loaded asynchronously so as to allow the page to render. However, Souders also looks into less-well-known points of failure, such as embedded fonts (Souders says it’s best to declare your @font-face rules inline).

As with everything Souders writes, this article is definitely worth a read.

SQLike

SQLike is a new library for creating SQL-like in-memory datastores in Javascript. Once you create a SQLike table (with data from the client or from the server via Ajax), you execute queries on it that return Javascript objects. As an added bonus, the code works just as well in ActionScript (if you happen to swing that way).

Of course, besides the ActionScript support, there’s nothing you can do with SQLike that you can’t do with native HTML5 SQL databases, but those aren’t universally supported yet. So rather than falling back on Google Gears, which has been mothballed, for SQL storage, you could fall back on SQLike. You would lose the real persistence you get from the native database, but in some cases that might be acceptable.

Node.Net

Hey, you know what’s awesome? NodeJS. Unfortunately, developers on WIndows machines have just had to take *nix-users’ word for it… until now! The new Node.Net project is a new NodeJS implementation that runs (perhaps unsuprisingly) on the .Net platform. The implementation is a long way from complete, but Windows users who have been itching to see what all of the fuss is about regarding Node might not care.

New Tutorials

There have been several handy tutorials released lately, and I thought it might be useful to collect a few of them here.

• Ben Lister’s blog post, Getting Started with HTML5 Local Databases, is a clear, thorough introduction to client-side SQLite databases. The definitive resource is still Apple’s client-side storage reference, but Lister’s article is probably an easier place to start, if you’re completely new to client-side databases.
• Using CSS3 Transitions, Transforms and Animation is a truly fantastic roundup of all of the various animation and transformation properties and functions that are available in CSS3. The site features tons of examples that should be a tremendous help while you sort out the reasonably complicated syntax of some of these properties. This one is definitely worth a bookmark.
• HOWTO: Unobtrusive JavaScript with Rails 3 is a great article on the Rails Inside blog on how to swap out the Prototype-based unobtrusive Javascript helpers for the official jQuery version managed by the Rails team.
• It was just a couple of weeks ago that we last checked in on DailyJS’s “Let’s Make a Framework” series. This week, they’ve got another handy post on how to handle cross-domain Ajax requests with JSON-P. JSON-P is technique that’s usually used for consuming JSON data from APIs on a different domain from the one issuing the request. If this tool isn’t in your utility belt, definitely check out this article.
• Speaking of cross-domain Ajax, the intrepid Nicholas Zakas has a super-handy introduction to browser-native cross-domain Ajax via Cross-Origin Resource Sharing (CORS). CORS is actually pretty well supported among modern browsers, but for whatever reason, it hasn’t seen a lot of discussion or use by the web development community. Here’s hoping Zakas’s introduction can go towards changing that.

Akshell

Akshell is a nifty new tool for creating and hosting Javascript applications. It’s a lot like Heroku’s recently announced support for Node.js, although instead of Node, you build apps in a scratch-built Javascript MVC framework.

Akshell provides a number of useful resources for building web apps. It includes its own template library, and even offers database support. Further, it uses CommonJS-like modules for organizing code (the Akshell core engine is such a module).

Honestly, there might not be a ton of practical uses for a site like Akshell, where you have to learn yet another server-side Javascript framework (and one that’s only usable on the Akshell site). However, a lot of really solid work went into building this impressive tool, and it’s totally worth taking a minute to poke around the admin interface and read through the documentation.

Experiments with Audio

Experiments with Audio is a series of articles on the Bread and Circuits blog that covers innovations in web audio. The most recent post in the series covers some truly amazing work being done in processing audio in the browser. There are tons of mind-blowingly cool examples, but the thing that really floored me was the Javascript text-to-speech implementation. Imagine if sites were able to offer full, custom text-to-speech rendering of their content to any user-agent without needing a screen reader. Just great stuff.

Exciting stuff this week—a lot of it Node.js-related. Node is reaching a critical mass, and now is a great time to get on board. With that, here’s the news:

RequireJS 0.11.0

It’s no secret that I’m a big fan of RequireJS, the non-blocking, asynchronous dependency manager/build tool for Javascript. Well, with the brand new 0.11.0 release, it’s even better. It’s now totally Caja compliant, so the security should be airtight, and you can now even name a JSON-P source as a dependency (I’m in love with this feature). There are more new goodies, so take a look a the release notes if you’re interested.

Probably the most notable aspect of the new release though, is that the the tool’s creator, James Burke, now feels Require meets the requirements that John Resig outlined for a .require() method in jQuery. Burke is making a strong case for integrating Require with jQuery.

Require was already a great tool, and it keeps getting better with every release. If you haven’t yet looked into it, now is the time to do so.

Understanding Node.js

There’s a growing consensus that Node.js is going to be huge (if it isn’t already). Unfortunately, some of the concepts on which Node is built aren’t the most straightforward (at least not at first glance). If you want to write great Node apps, you really have to get its conceptual underpinnings straight in your head. Fortunately, the Debuggable blog has an excellent post on understanding Node. The post takes a very high level look at what Node does and explains its fundamental concepts (evented programming, queues, etc.) in an extremely accessible fashion. If you’re an old hand at Node, it probably comes off as basic. But if you’ve been struggling to wrap you brain around Node, or just haven’t yet had time to dive in, I highly recommend giving this piece a read-through.

Speaking of Node, Heroku just announced experimental support for Node deployments on their servers. I haven’t looked into this yet, but if it’s as awesome as their Rails & Sinatra hosting, it’s going to be a tremendous resource.

Also, while we’re on the subject of learning Node, the YUI blog just posted the video of Node creator Ryan Dahl’s talk at the most recent Bayjax.

Fab

Okay, more Node stuff. Sue me. Fab is a new web framework for Node, but it’s wholly unlike any of the others that are currently available. Just take a look at Fab’s “Hello, world”:

with ( require( "fab" ) ) 

( fab )

  ( listen, 0xFAB )

  ( /^\/hello/ )

    ( tmpl )
      ( "Hello, <%= this %>!" )

    ( /^\/(\w+)$/ )
      ( capture.at, 0 )
      ( "world" )

  ( 404 );

The first thing everyone notices is all of the parentheses. Still, there’s nothing especially Lisp-y about Fab (at least no more than there is with vanilla Javascript). This example just listens on port 4011 (0xFAB). The regex (( /^\/(\w+)$/ )) is the catch-all route for the application.

There’s a heck of a lot you can learn about functional programming in Javascript by studying how fab works. Check out the slides from Fab’s creator Jed Schmidt’s talk at this year’s JSConf for a thorough introduction to the concepts Fab employs.

Well folks, I’ve got to admit, it was a bit of a slow news week in the Javascript world. But rest assured, I didn’t come to write this post empty-handed.

Garbage Collection

This week, the Ajaxian/WebOS Developer Relations guys linked to a great in-depth article on Palm’s website about garbage collection in Javascript. It goes into a fair amount of detail about how and when GC runs, and also gives some good advice on how to keep GC from running at inopportune times and bogging down your UI.

Historically, Javascript developers have been able to get away with not worrying too much about GC. However, applications are getting more complex and at the same time as they’re running on less capable hardware (read: mobile devices). So as we increasingly ask our Javascript to do more with less, it’s becoming more important to become aware of what’s going on under the hood.

Let’s make a framework

For the last couple of months, the DailyJS blog has been running a series on how to build a Javascript framework from start to finish. Along the way, they’ve covered topics like API design and building a selector engine, along with more process-oriented topics like the most recent post on how to package your library.

There’s a lot of great info in those posts, so you should definitely head over to DailyJS and check out all of their “Let’s make a framework” posts.

Go native with Cappuccino

Recent betas of Atlas, the web-based IDE for Cappuccino development, have included a new feature called NativeHost, that allows you to export your application as a web app or as a cross-platform desktop application.

If you want to actually see what a Cappuccino/NativeHost app looks like, you can check out the brand new interface to Github Issues that was built with Cappuccino on the web or download the native version. Of course, you should also check out what the Cappuccino team has to say about the project, as well.

How to detect everything

Last night/this morning, Mark Pilgrim posted Appendix A of his Dive into HTML5 book. The appendix, titled: THE ALL-IN-ONE ALMOST-ALPHABETICAL NO-BULLSHIT GUIDE TO DETECTING EVERYTHING is an exhaustive list of methods for detecting browser support for HTML5 features with Javascript. Should you be inclined to roll your own feature detection instead of incorporating a library like Modernizr to do it for you, It’s an extremely valuable resource, and well worth bookmarking.

We had our drawing late last week for two free passes to the Web Optimization Summit, then another drawing due to some communication issues with the first round.  Our winners notified and have accepted.  The first winner is Mik from productiveinsomnia.com.  Our second winner requested anonymity.

Thanks to Christopher Schmitt for the passes to the online summit – looks to be a great day, with some of your favorite JSMag contributors presenting there as well!

We’re trying something new here at JSMag: in addition to the monthly news column in the magazine, we’ll be featuring a weekly roundup of news here on the blog. We’ve got some great stuff to talk about this week, so let’s dive in.

Traits.js

Traits.js is a library that allows you to use traits in Javascript. In case you’re not familiar with the idea of a trait, it’s something like a mixin (though traits are more flexible) or an abstract class (less apt, but maybe a more familiar concept given its use in PHP & Java). The idea first popped up in Squeak and PLT Scheme, and most recently has become a big part of Scala (along with several other languages). A trait is essentially a collection of methods that can be imported into an object. The Traits.js library allows you to compose traits (i.e. make a new trait by combining other traits), overwrite trait methods, and even provides a way to resolve conflicts among trait methods with the same name. It’s a very clear but powerful API.

The library uses a lot of the awesome new ECMAScript 5 object-manipulation API (a good discussion of which you can find here) Better still, it works with both ECMAScript 3 as well as ES5, so while it conforms to the new standard, it is still fully functional in older ES implementations.

If you’re interested in this stuff, you can see a very in-depth tech talk (video, slides) that goes into a fair bit of detail about Traits.js. Also, there was a lengthy discussion of traits this week on the es-discuss mailing list.

ES5 Implementation Tracker

Speaking of ECMAScript 5, here’s a quick pointer to a list of ES5 implementations. It’s pretty much just a roundup of bug tracking tickets for several Javascript engines that follows those engines’ progress in adding ES5 features. If you want up-to-the-minute news about when you can use a particular part of ES5 in a given browser, this is the place to look.

Scriptsrc.net

Scriptsrc.net provides a simple way to get links to several popular Javascript libraries hosted on Google’s CDN. Just tap a button, and the script tag containing the link to the library is copied to your clipboard. As a side note, I’d be curious to hear why the site’s authors omitted YUI3, when they included YUI2. Other than that, it looks like a handy resource.

Well, that’s it, folks. The first weekly roundup of Javascript news here on the JSMag blog. Did I overlook something of epic importance? Let me know in the comments. Or just @ me on Twitter.

The Web Optimization Summit is happening May 12, and JSMag wants you to be there!  We’ve got 2 free passes we’ll be giving out on May 5.  Winners be randomly selected from everyone registered with JSMag.

Are you not registered yet?  Visit http://www.jsmag.com/sampler to register for your free PDF sampler and enter to win a pass to the Web Optimization Summit!

The Web Optimization Summit is an online event bringing together some of the top names in web optimization techniques, including JSMag contributors like Kyle Simpson, Stoyan Stefanov and Tom Hughes-Croucher.

Fine print

You don’t need to make a purchase, but do need to have a valid email account on file with JSMag by 8am GMT -500 on May 5, 2010.  Winners will be notified by email, and will need to respond by May 6 in order to claim the pass.  If we don’t hear back from the selected winners, new winners be will drawn and contacted.

WebDev Publishing is always looking for authors to submit new and interesting article topics for publication in both JSMag and GroovyMag.  JSMag covers the emerging trends in JavaScript development, and GroovyMag covers the Groovy/Grails ecosystem.

If you are interested in contributing, please register as an author at http://webdevpub.com/wdp to get started.  You may download our introductory PDF for authors to learn more as well.

Authors are paid a small fee for contributions, and are allowed to keep the copyright on the articles for future publication.

ON-DEMAND JAVASCRIPT

Lloyd Kinesella covers on-demand loading for more efficient ExtJS applications

AJAX SECURITY PART 1

Tom Hughes-Croucher illustrates AJAX attack vectors and how to deal with them

JSON AND PHP

Learn more about using PHP to generate JSON with Jason Gilmore

ROLL YOUR OWN

Rob Robbins meditates on encapsulated functions

JAVASCRIPT BEGINNER’S CORNER

Tom McFarlin covers arrays and loops

CROSS PLATFORM – GRIDS

Christian Tiberg demonstrated using grid systems across major libraries

JAVASCRIPT PATTERNS – GANG OF FOUR PATTERNS

Stoyan Stefanov delves in to Gang of Four patterns in JavaScript

COMMUNITY NEWS

Matt Henry rounds up the latest news from the world of JavaScript

Learn more or purchase here