atom thoughts

Tim Harper just released an excellent RubyOnRails plugin called bundle-fu for bundling Javascript and CSS into one file. This is a really simple and powerful speedup gain you can add to your site to reduce the number of round trips to your server. The impact can be dramatic.

It does not do compression and Tim says:

Bundle-fu currently does not compress CSS or Javascript, as the speed gained by doing so is often marginal, at best.

However, I disagree with the “marginal, at best” part of that statement. Typically a JS file can be compressed upwards of 50% by just doing some simple JS compression techniques (you can also GZip the contents for an even bigger gain). For example, JQuery 1.2.1 uncompressed is 77Kb, and packed it is 26Kb and minified (Gzipped and packed) it is 14Kb.

That being said, I think its ok if bundle-fu does not add packing support since there are many different alternatives out there.

For example the new PackR plugin, a ruby port of Packer would complement bundle-fu nicely.

UPDATE: Less than two days after writing this post Tim updated Bundle-Fu to use the PackR plugin if it is installed. Impressive. You can read about it here.

Now that I’m back from the Ajax Experience Boston conference and had a little time to let the information settle, I would like to share some of the highlights. You can get the slides here for all of the presentations . Here are some thoughts on a few of the presentations that I found noteworthy.

Google Gears

Google Gears is a framework to allow you to store and retrieve information locally in a web browser. The main motivation behind this framework is to provide a way to allow web applications to still work without internet access. It makes perfect sense that Google is growing this framework since they are planning on using it with their apps such as GMail and Google Docs. It is worth noting that Google says this tool is not ready for production consumption at this time as it is just a developer preview.

Google Gears attempts a worthy goal of addressing a major flaw with web apps by providing a way for them to still work offline. However, there are two major drawbacks to this approach that may give you pause in choosing to use it:

1. It requires your users to install a browser extension to work.
2. It requires you to either implement your data access logic in pure Javascript using something like a REST api for the online mode, or you are required to implement your data access logic twice.

In addition, the implementation of Google Gears stores a local sqlite database so you will also have to manage versioning and upgrading any schema changes to that local database independent of your server application.

Google Gears provides a pretty novel approach to providing an offline mode to your web app. It should be interesting to see how this framework develops.

Javascript Frameworks and Libraries Galore

There were lots of great talks on a bunch of the major Javascript frameworks and libraries including, Prototype, script.aculo.us, JQuery, Dojo, ExtJS, and many others.

Prototype and Scriptaculous

Stuart Halloway of Relevance gave several great talks on the Prototype and Scriptaculous libraries. We both live in Raleigh, NC so I have had the pleasure of seeing him give a presentation before at a local Ruby meetup.

I have more experience working with these two libraries than any of the others that were at this conference since I found them by way of Ruby On Rails. As a result, I did not learn a whole lot of new information, but since Stuart is an excellent presenter I found these to be some of my favorite presentations. Some of the more interesting bits occurred during the Q and A. If you ever want to push his “rant” button, ask him about Javascript 2… very entertaining.

JQuery

I attended a couple of sessions by JQuery’s creator John Resig. When JQuery first came out I tried it out and was impressed by its elegance but ended up choosing Prototype and Scriptaculous since it was baked-in to RubyOnRails. However, nothing can beat seeing a presentation by the creator of a framework.

JQuery was a pioneer in using CSS selectors for accessing the DOM via Javascript. Many of the other frameworks have since followed suit. For example, to select all anchors that are within a paragraph tag you could do: $(’p a’)

I wasn’t looking for a new Javascript library to replace Prototype and Scriptaculous, but JQuery is a compelling alternative. Some of the main things about JQuery that speak to me are:

1. It does not pollute the global Javascript namespace. This makes it really easy to combine libraries together. You can even use multiple different versions of JQuery together if you want to (not that I can imagine needing to but it is cool nonetheless).
2. It has elegant and concise apis. When you obtain an element via the $(’some_el’) call, it returns a wrapped JQuery object that contains lots of JQuery methods to manipulate that element. In addition, most JQuery methods return JQuery objects so you can chain them together.
3. It has a well-defined and actively used plugin framework. There are a bunch of great plugins. And because of the well-defined extension points, plugin methods are easy to find and blend well with the standard JQuery api. For example, to turn a form into an ajax form using the form plugin it’s as simple as: $(’someform’).ajaxForm();
4. There is a JQuery UI project for UI widgets and an upcoming JQuery FX project for special effects. Also, the animation implementation used by JQuery is very efficient as it uses a single shared event loop rather than creating Intervals for each event.

Dojo

Alex Russell the creator of the Dojo Toolkit gave a talk as well. Unfortunately I was unable to attend due to a scheduling conflict with my co-worker, Ryan Breen’s, Ajax Performance Analysis presentation. During a panel discussion, the Dojo framework was referred to as “the kitchen sink” of the Javascript frameworks, so if you can’t find what you are looking for elsewhere there is a good chance you can find it in here.

Google Web Toolkit (GWT)

Chris Shalk gave a presentation on the Google Web Toolkit. GWT allows a developer to create an entire Ajax application from start to finish completely in Java. All of the Javascript and HTML are generated by Java.

One benefit of using this framework is that if you already know Java and don’t want to bother learning other technologies such as Javascript you can dive right in. In addition, you have all of the wide array of Java tools and debuggers available to help in your development. I personally don’t have a need for this framework but if you only like to write in Java this might be right for you. However, if that is the case I would highly recommend branching out and trying something new… you just might like it.

Closing Remarks

This was just a brief summary of the highlights of the conference off the top of my head. There were several other interesting technologies and presentations that I did not discuss since this post is already way longer than I intended it to be. All in all I would say this conference was an excellent way to catch up to date on the latest web development technologies.

I am in Boston this week to attend the Ajax Experience conference.

My co-worker Ryan Breen is presenting a session on Ajax performance techniques. There are also several discussions from some of the heavy-weights in the Javascript world including Alex Russell the creator of Dojo and John Resig the creator of JQuery. Should be some interesting content and I am looking forward to it.

I just started playing with the NetBeans 6 Beta 1 Ruby IDE. I found out about it through George Cook’s excellent writeup which includes plenty of screen shots to spare you from having to install it to see how nice it is.

I must say I was blown away with how much better it is than my current setup of Eclipse and Aptana with RadRails. I’ve been using Eclipse for about 7 years primarily for Java development so it is no small feat to get me to even consider playing with NetBeans. However, after playing with NetBeans for Ruby there is no comparison. NetBeans is a clear winner over Aptana with RadRails.

A few random highlights include:

1. Real code-completion that actually works. This includes some impressive class introspection that picks up you local class properties.
2. Some handy short-cuts that let you jump from a controller action to its view and back, and from also from your code to your tests and back
3. One of my favorites is that the rdoc information is shown as you type out method names. This is a huge time-saver so you don’t have to dig through some external resource for syntax specifics.
4. A nice integrated SVN gui. This has been a big source of pain for me as well in Eclipse where SVN support is totally lacking
5. A macro recorder
6. An integrated database tool
7. This project is very actively developed. When I first started using RadRails the development cycle was brisk and lots of new features were flying around. Ever since Aptana picked up the project development has ground to nearly a halt and what is there consistently crashes my Eclipse.

In addition, you can install just a standalone Ruby IDE bundle so you don’t need to grab the Java (or other) stuff if you don’t need it.

I am still not ready to take the plunge to use NetBeans for my Java development. However, thanks to this very impressive offering of a Ruby IDE there is now a glimmer of hope that I may try NetBeans for my Java development in the future.

I just found a nice light-weight syntax highlighter called the Google Syntax Highlighter by Alex Gorbatchev. It is 100% client-side written in Javascript so it is extremely portable. I can already think of a few good uses for it starting with being the preferred highlight solution for this blog. This replaces the iG:Syntax Hiliter which is quite nice and powerful, but I am not nuts about the way it looks by default and too lazy to customize the style sheet. I went ahead and converted the last few articles to use it so you can see it in action below.

Also, if you happen to be on WordPress, you can just grab the Google Syntax Highlighter Plugin for WordPress.

Now on to creating some content that needs highlighting.

UPDATE: One pretty big drawback to this approach to highlighting is the code will not be highlighted until after the page loads. In the case of this blog, I am using the WordPress plugin so this highlighter is the last piece to run. This has resulted in a perceived load time for the blog that is much slower than if this highlighting was done server-side. As a result, I am probably going to move this blog back to a server-side solution with some customizations. I will share the details when I do.

It is worth mentioning that the Google syntax highlighter could probably be sped-up with a few customizations such as: bundling all the js in one file and compressing it, moving it higher up the load stack, and the Google Syntax highligher could be customized to render each element at load time instead of rendering the whole page at the end.

UPDATE 2: I am no longer using this plugin. I think the major slow-down is due to the multiple split JS files since each file blocks while executing. I switched to the Google Code Prettify which is much easier to use.

I have previously mentioned using the ruby plugin MiniMagick to resize images. However, I recently realized there is a much easier way that only requires ImageMagick and would therefore work for any web development environment including PHP, Ruby, ASP etc. This technique was inspired by the MiniMagick plugin and involves shelling out directly to the ImageMagick command-line utilities.

I will cover two common techniques:

• resizing an image
• determining an image’s width and height

Resizing An Image

To resize an image, you can use ImageMagick’s mogrify utility. For example, to resize an image to 100×100 you would type:

mogrify -thumbnail "100x100>" someimage.gif

The > symbol will make mogrify maintain the aspect ratio. To run this command from RubyOnRails, you can just use backticks to execute it from a command shell like so:

`mogrify -thumbnail "100x100>" someimage.gif`

Determining Image Width and Height

To determine the width and height of the image, we can use ImageMagick’s identify utility like so:

identify -format "%w %h" someimage.gif

This will return the width and height separated by a space. So, to parse these from Ruby you could do:

w, h = `identify -format "%w %h" someimage.gif`.split

It’s that easy. One other side benefit is by running this process from the command-line your webapp will not consume the additional memory needed for the resizing. The command shell will allocate and free this memory. For a RubyOnRails application, this is a huge benefit as one of the biggest issues with other techniques such as RMagick is that they typically may consume too much memory and will crash your web application.

So, I finally got around to converting this site off of Typo. All permalinks should still work. I did not migrate the comments over however.

I chose Typo because I had bought into the hype like everyone else and thought since I am actively working with Rails I should be using a blog written in Rails. Well, since then the creator of Typo has moved on from the project and even his blog is now using Mephisto. But the main reason I migrated from Typo is it just doesn’t have the usability and features of a more mature blogging engine such as WordPress. It was almost painful to write a post in.

At first I spent a few days converting this blog to Mephisto to try to keep it in the Rails family only to find out that the memory requirements for Mephisto are roughly 47MB per fcgi! I think that may have more to do with Rails 1.2 than with Mephisto though but I haven’t spent any time digging in. In any case, beware if you are on a shared host as Mephisto currently is not supported in that environment.

The conversion process was a snap thanks to WordPress’s RSS importer. The rough steps I took were:

1. Modify Typo’s xml_controller to increase the maximum number of articles in the articles feed. It just has to be greater than the number of posts you have.
2. Log into your WordPress admin section and click Import -> RSS.
3. To keep your links the same, you will need to change your WordPress Options -> Permalinks to Date and name based. Then to allow the “articles” portion of Typo urls, you can add this to the generated .htaccess file in the root of your WordPress install:

   RewriteBase /articles
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule articles/(.*) /index.php/$1 [L]

Active Resource was just removed from the Rails 1.2 release branch. So, it looks like it will not be shipping with the release.

After a quick search I couldn’t find any more information about it, but I would expect an announcement will follow shortly. So you may need to stick with edge for a while longer if you are counting on Active Resource support.

I personally think it is better for them to get this one right before mass distribution since this feature has such a wide impact on Rails development. Better to pull it now and fine tune it versus releasing something that will change drastically between releases.

Dr Nic just ported over all of TextMate’s Rails snippets as RadRails templates. These should definitely add a boost to your productivity as you can type most commands for Rails development in just a few keystrokes. I have been meaning to spend more time getting Eclipses templates incremented into my dev process and this is just the boost I needed.

Get your templates and read Dr. Nic’s announcement on his blog.

I just released another version of the Gift Hat. You can read all about it on the Gift Hat blog. Stop by and check it out.

This should free up some time for me to start blogging a bit more. I have a bit of a backlog of topics I want to discuss. You should start seeing some more posts starting next week.