Tweener
Part 1: Problem being solved
The aim of this project is very similar to that of the jQuery javascript toolkit. Toolkits like jQuery exist to ease programming for the web, which is tedious and unwieldy due to conflicting browser standards, ways of manipulating the DOM, and registering and handling events. Our goal is to create a library for javascript that presents the programmer with a simple, consistent, and intuitive way to interact with an HTML/CSS document.
One example of ugly code that a javascript toolkit solves is doing browser checking to determine how to register events. These sorts of problems are common knowledge to web developers that must deal with them on a daily basis. To illustrate this, here’s a link to an article about the difficulty of writing a script that detects the cursor position upon an event:
Hopefully, our language will provide a wraper for these obnoxious details, so the programmer can simply write something like “event.page_x”.
This problem is absolutely hard. As someone who has written javascript for web pages before, I can say that programming without toolkits is infinitely worse. One is constantly looking up W3C standards and browser support conflicts and wrangling with inconsistent syntax and obscure methods for manipulating the page elements. I think the profusion of javascript toolkits today is enough of a testament to the difficulty of this problem.
There’s no feasible way to circumvent this problem for a web developer. A web developer’s work must be as accessible as possible, meaning a potential user should not be required to have any special program to use a specific page—the web developer must ensure that his work supports all platforms and browsers. This means he must rely on existing languages and techniques for interacting with HTML and CSS, and the only one that is implemented in all web browsers is javascript.
Part 2: A language that currently solves this problem
Since we’ve already compared the goal of our project to the jQuery toolkit, I’ll describe that library.
At the core of jQuery is the “$” function, which returns a jQuery object. It takes a selector, which can be a variety of things: something to identify a DOM element by CSS properties (e.g. an equivalent to getElementById) or tag name, a DOM element object itself, or some other rarer cases.
An example of jQuery code:
$(document).ready(function() {
$(“div”).css({‘backgroundColor’:'blue’}).append(“<img src=\”blah\”/>”).show();
});
This example demonstrates two types of jQuery selectors. The first passes the javascript object “document” to the “$” function, and registers an anonymous function to run when the document’s ready event fires. The second call, within the anonymous function, selects all div elements in the HTML document, changes the background color to blue via CSS, creates an image and appends it within every div, and then shows the divs (which were perhaps previously hidden with “hide()”).
The implementation of jQuery is, from a high level, fairly simple. It creates an object, called jQuery, as a function, and all functionality is programmed into this object. It contains all of the convenience methods of jQuery, which themselves encapsulate handling browser quirks and whatnot. jQuery also includes its own CSS selection engine for filtering and running regexes on the page’s style sheets. One interesting aspect of the implementation is that the jQuery object has an “extend” function that can be used to add new fields and methods to the object, and this method is used to modularize the library—for example, AJAX support and animations are included via this type of extension. The library is then made accessible by defining a new field in the existing javascript “window” object—the jQuery object is assigned to and called by “window.$”.
To get an idea of what this looks like, here’s some boiled down pseudocode.
var jQuery = window.$ = function(selector) {
return new jQuery.prototype.init(selector)
}
jQuery.prototype = {
init: function(selector) { … },
attr: function ( … ) { //either get or set HTML attribute values. },
}
jQuery.extend = jQuery.prototype.extend = function() {
// do some copying.
}
jQuery.extend({
ajax: function( … ) { //do ajax stuff! },
…
});
Part 3: The features of ‘$tween’
Our language will facilitate easy and clean animation within the dom. This should mainly be for designers who want to add some extra visual effects to their web application layout. It should be relatively easy to create interesting visual effects in an intuitive way. Also, taking into consideration that this is primarily for designers, most defaults are for the ‘common use’ scenario. Also, with all the languages that front-end developers must remember, $tween should be as easy as possible. In order to do this, order of adding attributes to a tween is not important and unless some sort of argument is required (such as scale), then default values will be provided if an attribute is added without ()
The easiest way seems to be to abstract the idea of a ‘tween’ or animation, that could just be used as a callback function would be used. For example a ‘pulse’ tween could be defined
var pulse = $tween.scale(1.2).bounce; //this creates a tween that will scale a dom element 1.2 times its size and back with a bounce-like effect
and then if a certain link should pulse when clicked on simply add
<input type=”button” onclick=”pulse()” value=”Show alert box” />
another example:
var bounce = $tween.yLoc(20).bounce; //this creates a tween that moves a dom element up 20 pixels with a bounce-like effect
and these two effects can be added together in many ways
var bouncePausePulse = $tween.bounce.pause(1).pulse;
var bounceAndPulse = $tween.bounce.and.pulse;
Complicated animations can be build from simpler animations, all which are abstracted to the animation level. In a rich, interactive environment, most objects will have some sort of roll-over effect and many will share similar roll-over effects, this will make managing and creating these effects easy.
Part 4: Implementation
Creation takes the form of an identifier followed by a series of calls. A tween object is created using the identifiers:
$tween.
The syntax will allow the designer to specify:
Which attribute to be animated:
yLoc(y) – the desired ‘y’ location
xLoc(x) – the desired ‘x’ location
scale(n) – the desired size of the item
(eventually we could incorporate background/foreground color, border animation, text size, opacity, etc)
Styles or ‘ease’ of animation, with optional arguments for length of time:
‘regular(n)’ [default] – direct move from one position/size to another at a constant rate
‘elastic(n)’ – creates an elastic-like action (quick at first then slowing down)
‘bounce(n)’ – creates a bounce-like action (equivilant to an elastic movement followed by an elastic return)
‘linear(n)’ – tween at a constant rate
‘instantly’ – instantly move or scale
Concatenation operators for connecting tweens:
‘pause(n)’ – pause for a certain amount of time then continue
‘repeat(n)’ – repeat n times (leave out for infinite)
‘then’ – immediately follow previous tween (effectively a pause(0))
‘and’ – do the two tweens concurrently
And always allowing the item to return to the beginning locations with:
‘$return’ – a special tween that will with the original yLoc, xLoc and scale attributes
We envision there being two main types of objects
a tween – what the 2 ‘$’ attributes return ($tween, and $return)
- this is actually a function, but will be seen as an animation, or tween, that can be added to any event
and
- a tween attribute – which is what all the other functions return
there may also be a wrapper class for concatenation operators so that operations such as ‘and.animation1′ does not return a legal function
The internal representation will be a class that builds itself based on attributes added via function calls. When the tween class receives this object, it will build the necessary callback function.
There will be no interpreter/compiler required, the processing will be building the tween object attribute object and then creating the necessary callback.
debugging can be done via the many JavaScript debuggers available.
