Reflection has been in vogue for a while now in user interfaces, and it wasn’t long ago that I saw a headline about a JavaScript library that streamlined a number of useful effects such as reflection — but alas, without the benefit of Dojo. Well, being the Dojo fanboy that I am, I immediately started to ponder how to accomplish some of these same effects using the dojox.gfx module, and a couple of hours later, I had prototyped a nice, degradable widget that seemed to do the job. By the way, that’s one of the things I love so much about Dojo: once you have a reasonable grip on it, you seldom, if ever, have to look somewhere else. More times than not, a great deal of your work is already done for you, and you just have to connect some of the dots. Remember: it’s all about the frameworks
But there’s always a catch: in this case it’s that IE users must have Silverlight installed for the widget to work; otherwise, it degrades back to the plain image. The reason is that VML, IE’s default gfx renderer, doesn’t support transparency in gradients. No transparent gradient, no nice fade out effect. Likewise, if JavaScript is not available (honestly, who does that?), it degrades down to the bare image. If you didn’t already know, the gfx module exposes an API that works across browsers by using whatever drawing engine is available. At the moment, renderers are available for canvas, VML, SVG, and Silverlight. That pretty much covers it. Adding support for another one should be straightforward: follow the API guidlines and write it.
The Silverlight requirement is interesting, isn’t there a way to use IE behaviours to do a transparent gradient?
I got to play an old school, sit down, Pacman at Google Developer Day, London, so it only seems appropriate to keep playing it thanks to Harry Guillermo and his new Pacman port to JavaScript.
ZK 3.5, the latest version of the server-side Ajax framework, is out with a raft of new features. Three of those features really stand out for me:
Comet server push
Customization of look and feel
Performance monitoring
Server push via polling has been available in ZK for a while, and Comet in the ZK “Enterprise Edition,” but now it is available to everyone. And it is pretty easy to use: “The implementation of server push is transparent to developers. ZK chooses which implementation to use according to the edition of ZK automatically, but it is configurable.”
Customization of look and feel has gotten much easier. ZK has followed the example of a number of other frameworks in styling its widgets with predictably named CSS styles. Changing the look and feel of an application is now as easy as changing the ZK widget style sheet. Styles can further be overridden on a widget instance-by-instance basis.
Performance monitoring is perhaps the most exciting new feature. Client-side tools such as YSlow can guide optimization efforts and give you point in time performance snapshots. But critical applications need to be monitored and tracked end to end over their lifespan. With ZK 3.5, you now have the plumbing to instrument your application to capture five data points for each request:
T1, the time browser sends a request to server
T2, the time server receives a request
T3, the time server sends a request to browser
T4, the time browser receives a request from server
T5, the time the browser finishes processing a request
We recently raffled off a free pass to The Ajax Experience on Ajaxian.com. Congratulations to Brandon Aaskov, our official raffle winner! If you’re planning on attending The Ajax Experience in Boston, September 29 - October 1, there’s still time to register.
The raffle drew over 500 entries from all over the world. Considering the worldwide appeal of The Ajax Experience, which major city would you like us to consider for 2009? We look forward to hearing from you!
With CSS you can make text wrap around an image using the float property and for most purposes this is quite adequate. However, it doesn’t take into account the actual image and treats it as one big block, even if you’d prefer the text to wrap around the actual content in the picture, magazine style.
Along came a technique called sandbag DIVs (first published by Rob Swan a few years ago, I believe) that solved the problem for those odd cases where you need something fancier than float:left. The idea is to build a structure of virtual “sandbags” out of DIV elements and then let the text flow around those instead of the image. This can be done either manually for each image or with a serverside script as shown in the ALA article.
Since we now have pixel access (in cool browsers, anyway) via the Canvas element, this technique can now be implemented dynamically with a bit of JavaScript.The approach is very similar to the one at ALA, in that we scan from either left or right looking for the first solid pixel and then use that information to create a bunch of DIVs of suitable dimensions, only we’re doing it client side with JS. These DIVs are then styled with the original image as a background image, positioned to make it all appear as one whole image.
Using the small script linked below you simply give your image a CSS class of either “sandbag-left” or “sandbag-right”, depending on how your image should float. If the browser does not support Canvas and image data access, a fallback mechanism simply sets the CSS float property to “left” or “right”, degrading to the old rectangular text wrap.
Darrell Meyer has announced the release of Ext GWT 1.1 which is said to “shortens the feature set gap between Ext JS.”
New Features
The Grid component wraps the Ext JS grid, and it includes support for grid plugins which fit into component lifecycles. You can also use a subclass, EditableGrid which…. allows you to edit content on the fly.
Auto complete has been added to the combo boxes a la Google Suggest.
Portal is a custom layout container that uses a multi-column layout on contains Portlets. Each Porlet can be drag and dropped to change order or move to another column. Each Portlet can contain any content and supports icons to expand / collapse, close, etc.
The desktop mimics the behavior of the operating system look at feel. It is now possible to create multi-window applications with support for a task bar and start menu. Windows support normal, maximize, and minimize states. The start menu is a custom menu that allows new menu items. In addition, there is support for a “task” area for adding additional items.
Java Bean Support with BeanModel
The Ext GWT Store and Binder API work with ModelData instances. The primary goal of ModelData is to provide a type of “introspection” as GWT does not allow runtime inspection of Java objects. You can query ModelData for a list of properties it contains, and these properties can be retrieved and set using the parameter name with the get and set methods.
Although this approach works, it forces you to either implement the ModelData interface in your Java Beans or extend the Ext GWT base classes that implement the ModelData interface. What is missing is a way to use your Java Beans as is, without having to extend the Ext GWT base classes or implement an “invasive” interface.
There are also new examples:
Forum search is an example of a combo box, using a custom XTemplate, and remote data. The data can be paged with built-in support for a paging toolbar.
Image Chooser shows loading a ListView in a Window. Each item has a linked details view, and the ListView supports custom sorting and filtering.
This example shows a Dialog using an AnchorLayout to “anchor” the form fields to the dialog dimensions. When resized, the fields will adjust their size to match the dimensions of the dialog.
Dylan Schiemann wrote about how disappointing it was that the iPhone didn’t support SVG:
Safari on the iPhone does not currently have support for SVG. Safari 3 beta on Mac and Windows is currently the best browser on the planet for SVG performance, so this is a somewhat disappointing omission. We are hopeful that by the end of the year, the iPhone will receive the Safari 3 upgrade, and along with that native support for SVG. For now, we’ll have to wait on dynamic charting and drawing tools due to no SVG and the lack of mousemove event handlers.
It appears that if you point your iPhone 2.1 browser to SVG content and tests it now works!
This work landed on trunk last week. I’ve also submitted my proposal to the SVG WG for standardization. I hope that they’ll like it; there aren’t many degrees of freedom here, for example there’s no new syntax to decide on, so there’s not much to fight over :-). And it’s good for SVG to be able to use its effects more broadly. We’ll change our implementation to match whatever the WG decides.
Unfortunately we don’t yet support external document references, so the elements describing SVG effects have to live in the same document as the elements to which they’re applied. This limits the usefulness of these effects in regular (non-XHTML) HTML for now. But we’ll fix that so that the effects can live in an external SVG file.
Adobe continues to update the AIR runtime and SDK to make it a strong cross-platform candidate for building desktop apps. Support for the Linux operating system has been a bit of a sore spot for the AIR team but they’re working hard to address that as evidenced with their release yesterday of Adobe AIR for Linux Beta.
The AIR for Linux FAQ goes into a lot of detail to explain what is being provided in this beta and it does state that this version is feature compatible with both the Windows and OS X versions of the runtime & SDK.
AIR on Linux officially supports the following distributions:
Fedora Core 8
Ubuntu 7.10
Open Suse 10.3
If you’re interested in providing feedback about this release, Adobe has the AIR Support Center available to discuss any quirks or comments.
My favourite presentation at Google Developer Day in London yesterday was a dive into the internals of how V8 works by Kevin Millikin, an V8 engineer who has been there and done that by creating Scheme compilers :)
He discussed the key implementation details of V8, including:
Hidden classes
Hidden class transitions
Inline caching
Native code compilation
Memory management / GC
He shows how the hidden class system is able to watch the "shape" of JavaScript objects with a simple Point example that showed us following the references. In their testing, it turned out that roughly 90% of the JavaScript code that they ran fell into a pattern where they did have shapes that made sense for optimization. Although JavaScript is very dynamic, at runtime it doesn't act that differently to statically typed languages, which allowed the V8 team to conclude that they could then apply the similar tricks from static VMs such as the JVM (Lars and his team worked on HotSpot) to JavaScript.
When V8 sees code, it makes sure that it marks it, and if seen again if then applies a compilation to native code (there is no IL, no interpreter, straight to machine code). This means that the third time the code is run it is fast. Of course, this is to make sure that it is worth taking the time to compile the code. If it is for init, one-time like work, it doesn't make sense.
The GC system is a fairly simple generational collector with young and old generations, and some special buckets within the old. The GC is very fast indeed, even though with WebKit it also manages internal objects and resources to keep it clean.
Kevin also shared other interesting points on what JavaScript can run fast, and features such as eval() and with() that result in much slower execution.
The final piece that I found interesting was the fact that the team decided to implement a bunch of the "standard library" side of the JavaScript spec (the objects available) in JavaScript itself.
The reasoning here is to get a turtles-all-the-way-down-like symbiotic loop. As they optimized for the standard library, all execution got faster. As they make the VM faster, it in turn makes the standard library faster.
The really good news, is the fact that there is a lot of headroom to make things a lot faster (ditto for TraceMonkey, SquirrelFish Extreme) so we have only just begun with the next gen JSVMs :)
Jaxer has been out in beta for a while and is nearing its 1.0 release. Many comments on Ajaxian about Jaxer have been about performance benchmarks. Uri Sarid, CTO of Aptana, has compiled some initial benchmarks including comparisons to PHP and Ruby on Rails. (Jaxer comes out in between the two):
We wanted to answer a simple question: how does Jaxer, with its server-side DOM and JavaScript, perform relative to these other popular alternatives?
This was not designed to be an all-encompassing shoot-out, or a detailed study of everything you might want to do in a web app. Instead, we took a few common tasks — making database requests, using JSON, etc. — and implemented them as you might expect in the three platforms. We made enough DB requests and JSON calls and so on to give us a reasonable number of milliseconds to measure. But we also wanted to make the repetitions representative of what you might find on somewhat intensive real-world page, so we're not making a million DB requests, just a hundred, for instance. And we included one benchmark of serving an almost-static page: the "almost" was to make sure we were measuring the time the platform took to really read through the page, in case it had dynamic content in it. (Otherwise, if the page were truly static, you could always arrange for the web server to serve it without involving the platform.)
The tests include page scraping tests (e.g. mashup work), database performance, file I/O, JSON, and programatical loops.
The form attribute on various elements, which associates an element with its parent form, and the elements attribute of the form element, which associates the form with its elements. (Form-associated elements no longer need to be children of the <form> element itself within the DOM, so explicit association is required. Form-associated elements that are DOM children of the <form> element are implicitly associated, so your existing markup will continue to work the way you think it does.) [r2157]
Dean Edwards, Brendan Eich, Christian Heillmann, Jake Archibald, Joe Walker (chair)
I've captured at least some of what was said here ;).
What is the Open Web to you and why is it important (or otherwise)?
(general agreement that it's good thing, as we'd expect :)
Christian - What if open formats don't have the reach? e.g. ogg vorbis.
One JS file can't depend on another without wrapping all the code in a function. How should this be solved? An "include" function in ES4?
Brendan - "include" could make UI lock up. Can do it with (html 5) web workers (speculative parsing).
Should you pick just one library/framewrk to use, a handful, or have an open policy to use anything at any time? How do you evaluate which one(s) to use?
Christian - would be good to see comparison sites like cmsmatrix.org, not just which one is 20 milliseconds faster than the other. (MM - I tried to create something like this, but it could be bigger in both dimensions.)
Discussion about the "glow" library created by BBC, discussed by Jake Archibald yesterday. Okay to release unpolished product to open source as an individual or small company, but harder when it carries the name of a big organisation like BBC.
What kind of build scripts/engines do you recommend to concatenate multiple scripts into one?
Jokes about copy-paste and batch scripts.
Christian - It's 2008 - we should be using minifier, etc. More structured approach to releasing.
What recent tools or techniques do you use to speed up or improve your development process? Do you have any quick tips?
Jake - More developers :) HTML editor - Komodo edit. Debug - Firebug in FF, Developer toolbar and windows script debugger in IE
Christian - Moving to a Mac made developing far better, and partly due to Textmate. And Javascript bundle that runs JSLint over your code. Firebug.
Brendan - Distributed version control systems have been good. Textmate's good, but I'm an old Vi/Unix hacker.
Dean - Recently disabled Firebug to speed up development - causes bugs, reports misleading line numbers, etc. Went back to error console which gives you the correct line number. (Joe - it's getting better now.) Microsoft script debugger is actually quite good.
Christian - Firefox still the coolest browser for developers, but with all the tools, have to keep turning off greasemonkey scripts etc.
Does Cappucino / Objective-J have a future? What are their benefits and detriments?
Dean - More problems in the browser
Brendan - GWT guys are realists, acknowledge their abstractions leak. But OTOH they've made Ajax development accessible to Java developers who otherwise wouldn't do it.
Brendan (asked about what he'd do if he could change the language in the browser) - You'd get a lot of demand for Python and Ruby, Python's probably the more mature.
Brendan - Flex originally intended to make web app development like windows development. (Questions this approach). Pity we don't have things like JQuery for desktop apps.
What's the biggest missing bit of functionality from modern web browsers?
Christan - Big problem is we're stuck with old browsers.
Jake - Large companies lock down IE6.
Poll of audience - many people work for companies where the average user still runs IE6.
How to prevent? 37signals, Apple, Facebook have all written apps that don't target IE6. Christian-mainstream media could help, e.g. recent article saying users rarely get viruses via FF. Facebook also recommends FF and Safari along with IE.
Christian - Chrome is targeted at regular users, not developers - so IE market share might reduce. Brendan - Chrome might, good if they do, but difficult to see how to make a major change.
Jake - Apple get away with a lot of evil that if MS did the same thing they would be beaten for. e.g. Apple ships with a browser, just like MS.
Back to the question - what would you want:
Dean - standardised behaviour extensions for CSS
Jake - constants in CSS
Joe - vector graphics engine - canvas everywhere
Christian - web forms - e.g. calendar control
Jake - CSS - multiple background images
Christian - better layout (discussing boxes and vertical centering). Right now, we're as hacky as we were with tables.
Christian - better video and audio support (Jake - Flash alrady does this well, would rather see effort spent on other things).
