praktikantenblog

Lately I’ve been playing with a wide variety of different approaches to build convenient, desktop-like UIs using JavaScript, CSS & HTML only. Coming from the rails world my first steps where very much built upon the idea that code generation is going to save me a lot of time and complex helper methods soon were born. That seemed to work out pretty well. After only a few days I had working ajax trees, data grids with multiple selection, context menus, table filtering, searching and other nifty features. All with ~350 lines of code. There was only one problem: it was ruby code. How does one debug bugs in the JavaScript when the code itself is never written, but dynamically generated with all the data mixed in already?

I had to face it: code generation – at least my awkward ways of doing it – sucks. So, what else is out there? Flash of course, but no! Let me take that back. Yes, there’s JavaScript. I’ve heard about that. Doesn’t it have something to do with this peachy little peace of code in that “prototype.js” file? So, I had a chat with google and they came up with a few options: YUI, Closure and jQuery(UI). All seemed promising, but after a bit of playing around I decided to stick with jQuery for various reasons, including the fact that it wasn’t labeled by some big data mining conspiracy. Also a lot of smart people have come up with a lot of smart plugins (within the ocean of crap that’s undoubtably out there as well). Having said all that, I’d like to share my mental notes on what works, what is best for which goals and what one better doesn’t even try.

Going outside in, first comes the layout. Layouts are tricky. Masochistic as web developers seem to be, their main concept of art is to use a language designed for text markup plus some questionable feature called hyperlinking to reinvent the wheel when attempting to (more or less) mimic the style of the applications that “text” is eventually rendered in. There are a few different techniques, some CSS based (g r i d s), some JS based. As I was going to build a JS-driven UI anyway and also because of bad experience with the former (people tend to do pretty weird shit with CSS grids that make them virtually unmaintainable) I went with the latter. Having chosen a JS Framework already I thought my choice was already set, but I was mistaken.

mb.containerPlus is doing overlays optionally with the conventional hide / maximize / close controls, that may form a solid base for apps that require many floating windows. I fell for the futuristic Apple effect of jQueryTools, which is a pretty nice collection of tools. Be careful though when downloading it to deselect the tabs feature, which looks pretty nice at first, but fails miserably when trying to add tabs dynamically (for which the tabs plugin from stilbuero is much more suitable). The choice of the right layout solution was more challenging, but long story short: I ended up with UI.Layout which uses a border-layout approach and is capable of really complex, nested layouts which work surprisingly well with other jQuery magic, such as the forementioned tabs.

More later.