Web Info & Tutorials

November 7th, 2007

PROTOTYPE 1.6, SCRIPT.ACULO.US 1.8 AND THE BOOK.

This is a big day for Protoscript friends. The triple release. The big one. This post is a long one two as it discusses:

Prototype 1.6

They cleaned up, and 1.6 is a really nice piece of work. A lot of little nit-picks are now solved, and you are left with the lean mean machine that you know and love.

Highlights

  • Ajax transport objects are now automatically wrapped in an Ajax.Response object.
  • Ajax.Response includes support for accessing JSON response bodies as JavaScript objects via the responseJSON property.
  • The class API now includes full support for inheritance and superclass method calls. (See Mislav’s tutorial for more info.)
  • Class objects now have an addMethods method for adding instance methods after creation.
  • Elements can be created easily with the new Element(…) syntax.
  • Element#insert provides a unified API to DOM element and HTML fragment insertion.
  • Element#select is an alias for getElementsBySelector and is now the preferred way to find elements by class name.
  • Element#wrap lets you easily wrap an element inside another element in place.
  • Enumerable methods on Array are now backed by native Array#forEach implementations when possible.
  • Enumerable now has aliases for equivalent JavaScript 1.6 Array methods, and support for JavaScript 1.6’s context parameter for automatic callback binding.
  • Enumerable#grep now calls the match method on its first argument, so you can use it to e.g. filter an array of DOM nodes by CSS selector.
  • Event objects are now automatically extended with instance methods, so you can write e.g. event.stop() instead of Event.stop(event).
  • Prototype’s event API now supports firing DOM-based custom events with Element#fire.
  • The new dom:loaded custom event fires when the entire document has loaded and is ready for manipulation.
  • Function#curry allows for partial application of function arguments.
  • Function#wrap facilitates simple aspect-oriented programming and provides the basis for Prototype’s superclass method call mechanism.
  • Function#delay delays invocation of the function by the given number of seconds.
  • Function#defer schedules the function to run as soon as the interpreter is idle.
  • The Hash API has changed, and you must now use Hash#get and Hash#set instead of directly accessing properties on Hash instances.
  • String#interpolate is a shortcut for instantiating a Template from the string and calling evaluate on it.
  • Object properties can now be used in template replacement strings.

Script.aculo.us 1.8

This is the last release before 2.0 comes out and features:

  • Complete rewrite of Ajax.InPlaceEditor and Ajax.InPlaceCollectionEditor
  • Full CSS inheritance in Effect.Morph
  • New core effect: Effect.Tween
  • Sound: play mp3 files for sound effects; uses native playback on IE and available plugins whereever possible
  • Duration and distance options for Effect.Shake
  • Performance improvements
  • Tons of bugfixes

The Book (Reviewed by Stu Halloway)

The skinny: If you develop with Prototype and Scriptaculous, you need
this book.

Prototype and script.aculo.us: You Never Knew JavaScript Could Do This! is a long book, by Pragmatic Press standards. At first glance,
this might seem doubly odd, since the libraries themselves are quite
small, totaling only in the 100s of KB. But before I even opened the
book, I hoped that the length might be justified, for two reasons:

  1. Prototype and Scripty (hereafter P&S) are packed with dense,
    expressive, beautiful code, and they can do far more than their size
    might suggest.
  2. Along with several other Ajax libraries, P&S embody a modern
    JavaScript style that embraces functional programming. This new style
    is not well covered in the JavaScript books currently in print (as of
    November 2007), so to learn P&S you also have to learn to think about
    JavaScript in a new way.

Once inside the book, I was delighted to find that both of my hopes
were addressed. Porteneuve dives straight into the deep end,
embracing JavaScript’s functional style immediately in Chapter 2 and
never dumbing down the example code. (Don’t worry, there are forward
and backward references to help you along. This is especially nice if
you are reading the electronic copy of the book.) You may need to
read some sections of this book multiple times, and that is a good
thing.

The coverage of both Prototype and Scriptaculous is thorough. Of
course the marquee features receive due attention: Prototype’s
Ajax.Request and Scriptaculous’s Effects each have their own
chapters. More interesting to me is the thorough coverage of the less
visible parts:

  • Prototype’s functional capabilities are significantly enhanced for
    the 1.6 release. Chapter 4 shows how to use curry, bind (including
    multiple argument invocation), delay, and defer. You can even do some
    lightweight Aspect-Oriented Programming (AOP) with the new wrap method.
  • Chapter 7, “Playing with the DOM is Finally Fun”, nicely mixes
    tutorial and reference. The Staff Manager example motivates each
    section, but each individual section also acts as a reference for a
    set of DOM extensions.
  • The Event mechanism has been rewritten and enhanced for Prototype
    1.6. Chapter 6 covers the new unified event handling. Porteneuve
    motivates the event model by contrasting three approaches: the IE
    way, the standards way, and the Prototype way. With 1.6, portability
    improves again with synthetic events that fill gaps in the browser
    event model, e.g. dom:loaded. You can even fire and respond to your
    own custom events.
  • I have been using Scripty for years and I never even noticed the
    sound API (Chapter 20).

Of course, no reviewer feels complete until a few nits have been
picked. So here are a few:

  • Porteneuve embraces Prototype’s approach to JavaScript and the web
    (as do I). That said, there are many other approaches. It would be
    great to have an overview of the philosophical differences that set
    P&S apart from other JavaScript libraries.
  • The book’s style is casual, even by Prag standards.
  • Prototype and Scriptaculous are a rich buffet, and the book
    documents nearly every bite. Sometimes the book could be more
    opinionated about the menu. For example, I hate the $break feature in
    Prototype. Maybe Porteneuve does too–the example is certainly
    contrived.

These flaws are relatively minor. Overall I was impressed by the
amount of information in the book. I have been using P&S for years,
and I learned something new in almost every chapter.

For years, developers at software conferences have asked me “What is
the best way to learn Prototype and Scripty?” Until today, my answer
has always been “Read the source code.” Not any more. If you are
building applications with P&S, you need to read this book.

November 7th, 2007

COMET: IS IT’S TIME COMING?

When Comet was first coined there was a lot of buzz, and many thought that polling was dead. It turns out, that for certain use cases Comet is king, but it hasn’t spread as fast as some would have guessed (or liked). One core problem is that HTTP as we currently do it is braindead easy and commodity. Comet hasn’t been, although there are now more and more containers that grok it first hand.

Joe Walker has a nice editorial on the new Comet Daily on Why Comet is of growing importance.

Years of research gave him the following, highly technical, graph:

This does make some sense. It also makes sense that an event driven world is a nice one to play in. The question is how fast are people going to move in that direction, and how many applications really need it (you could say the same for offline and any other technology). If you can get away with polling, even if it isn’t efficient, eh.

There will always be the need for large companies and huge applications to use Comet, and this number will grow in size. Seeing what Google Chat has to do in the browser is a scary thing, and we need to make it just as easy to do the right thing, as we now allow polling.

More from the new Comet Daily

November 7th, 2007

MINDMEISTER: TAKE YOUR MIND MAP OFFLINE

Mindmeister has taken their mind map tool and now allow you to map offline.

The tool itself is a nice Ruby on Rails application (includes pink fade effects! yellow is so 2006) that gives you a visual canvas to play with your mind.

Mindmeister Tool

Their approach to offline is similar to Google Reader in that the user has to say “hey, take me offline”. The interface to that is a nice little slider widget. At the point your maps are sync’d down to the local store.

Mindmeister Sync

I would love to see it auto sync, and I noticed a couple of issues when I actually went offline but didn’t tell the tool first (would be nice to have the tool grok that) but the mind map tool in general is a nice app to use. It feels like Geni.

November 7th, 2007

OPERA MINI 4 RELEASED

We meet talked most how JavaScript and Ajax entireness in Opera Mini and today Opera released the flooded version.

Features

Opera Link

We’ve additional hold for Opera Link in Opera Mini 4. With Opera Link, you’re healthy to directly aline and deal your bookmarks and Speed Dial with the Opera application for your computer.

Overview mode

Opera Mini 4 includes a newborn performance structure that allows you to analyse webpages meet same you would on your computer. When you prototypal alluviation a webpage, Opera Mini module exhibit you an overview photograph of the page; using the newborn pussyfoot indicator you crapper directly ascent in to the designated location of the page.

Size of book fits breadth of screen

Opera Mini 4 dynamically changes the filler of the book on webpages to sound the breadth of your phone’s screen, message you won’t hit to holograph horizontally.

Context menu

A environment schedule is displayed when imperative the sort 1 key. From the environment schedule you could modify the watch modes to ‘Mobile view’, charge the page, and exhibit webpage information. When the pussyfoot indicator is convergent on a link, the Context schedule module exhibit you the unification aggregation (i.e. where the unification points to, etc.).

Mouse cursor

With the pussyfoot indicator you could holograph to some content on the tender and more easily utter on links.

Scrolling shortcuts

Pressing these sort key shortcuts module hold you apace manoeuver around the page.

  • 2 - Page up
  • 8 - Page down
  • 4 - Go to the mitt digit column
  • 6 - Go to the correct digit column
  • 5 - Zoom in and out

Create search

With this newborn feature, you could add some see engine of your pick to the Opera Mini move page. To add a newborn see engine, utter on the see field, advise the schedule fix and utter on the ‘Create search’ option.

View pages in Landscape mode

By imperative the * and # road keys, you could alter the tender analyse to genre mode.

New standards support

Support for HTML tables, CSS handheld stylesheets, and more modern hold for CSS hit been additional to Opera Mini.

November 7th, 2007

DOJO: THE CIGARETTE AFTER THE ….

The baby is here so now you can relax. Alex has taken this time to chat about the new release where he discusses some of the other posts that show off features of the release:

Following up shortly on the heels of the release, Dylan screen shots of Dojo charting running on the iPhone. It’s a testament to the architecture that Eugene and Kun put together for dojox.gfx that Chris Mitchell’s awesome canvas renderer was able to slot right in to make this possible. For anyone counting, that now makes 4 independent renderers for the awesome shape-oriented GFX API: SVG, canvas, VML, and Silverlight. Portable, non-proprietary 2D graphics in a browser are really here.

Just hours after that, James Burke announced that 1.0 is available on AOL’s CDN, meaning that you don’t even have to download 1.0 to try it out. Just point to the right URL to include Dojo and you’re up-and-running. Sweet.

Bryan Forbes jumped in with a beautiful Grid example today, and he tells me that it’s going to be a recurring feature over on the SitePen blog which you’ll also be able to catch over on Planet Dojo.

Bryan's post is really interesting indeed. The grid component is great, and looks very intuitive.

November 7th, 2007

TIBCO GI PERFORMANCE PROFILER

TIBCO has released a new open source Ajax Performance Profiler that aims to answer the questions:

  • How long did it take that service to respond?
  • How long did it take for that component to render?
  • How long did it take that data to parse?
  • How long did it take for that function to execute?

Check out the Craigslist example which uses three Ajax libraries: TIBCO General Interface, dojo for offline capabilities, and Google Maps.

When you setup tests, you do so with a simple DSL:

JSON:
    {name:"Select Posting", fct: function(objServer) {
            gicx.getResultsTable().selectRecord(gicx.getResultsTable().getSortedIds()[0]);
            return gi.test.gipp.SLEEP_LONG;
    }},       

    {name:"Open Posting 1", fct: function(objServer) {
            gicx.openPosting(gicx.getResultsTable().getSortedIds()[0]);
            return gi.test.gipp.SLEEP;
    }},
           
    {name:"Open Posting 2", fct: function(objServer) {
            gicx.openPosting(gicx.getResultsTable().getSortedIds()[1]);
            return gi.test.gipp.SLEEP;
    }},
           
    {name:"Search craigslist 2", fct: function(objServer) {
            gicx.APP.getJSXByName("query").setValue("mattress");
            gicx.search();
            gi.test.gipp.POLL.poll = function(objServer) {
            return gicx.getResultsTable().getSortedIds().length;
            };
            return gi.test.gipp.POLL;
    }},

    {name:"Open Posting 3", fct: function(objServer) {
            gicx.openPosting(gicx.getResultsTable().getSortedIds()[0]);
            return gi.test.gipp.SLEEP_LONG;
    }},

TIBGO GI Perf