JavaScript Shell

While at The Ajax Experience I noticed a tool that a few of the speakers made use of that was missing from my arsenal. The tool? JavaScript Shell.

This little beauty, once you’ve added the bookmark to your browser allows you to open a JavaScript Shell for any page you happen to be on! The shell lets you enter JavaScript from command-line to manipulate the page, trigger functions, analyze properties, etc. All libraries that the site has loaded are available within the Shell…so, if you use jQuery or some other toolkit, all defined functions and plugins are usable.

Here’s some features and pre-defined functions from the JavaScript Shell site

Features

  • You can enter statements and expressions at the same prompt.
  • The result of each non-void statement or expression is shown.
  • User-defined variables.
    • b = document.body
  • User-defined functions.
    • function f() { return 5; }
  • JavaScript error messages are shown in red.
  • Previous statements and expressions are available through Up and Down arrow keys.
  • Tab completion.
  • Multiline input (Shift+Enter to insert a line break).
  • If the shell is opened using a bookmarklet, JavaScript typed into the shell runs in the context of the original window.
  • Works well in Firefox, mostly works in Opera 8 and in IE 6 for Windows.

Built-in functions

  • ans: the result of the previous expression.
  • print(expr): prints expr on its own line.
    • for(i = 0; i < 6; ++i) print(i * i)
  • pr(expr): prints and returns its input, so you can use it to print intermediate results in the middle of an expression.
    • function fact(n) { return n>0 ? pr(n*fact(n-1)) : 1 }
  • blink(node) or Alt+B: makes a node blink for a second.
    • blink(document.links[3])
  • props(obj) or Alt+P: lists the methods and fields of an object.
    • props(document.body)
    • In Firefox, props also shows which properties belong to the object itself and which belong to objects in its prototype chain.

I’m a fan :D

Posted in Uncategorized

The Ajax Experience: jQuery Toolkit

jquery I went to The Ajax Experience with high expectations of catching some great tips regarding development in an Ajax environment. At the same time, I was sure of my previous decision with the use of Prototype and Script.aculo.us was as good as it gets (without diving into the widgetized world…e.g. Dojo). I attended John Resig‘s presentation on jQuery and I became a convert.

John’s presentation was less of a presentation and more of a Q&A Demonstration, which suited me fine. As soon as I knew where to download the code, I popped open my laptop and started fiddling around with the toolkit – passively paying attention to the questions and answers, as they tended to be extremely basic questions…you see, jQuery is pretty darn intuitive.

jQuery’s mantra is “Find stuff and do stuff to it”

Yeah, I wasn’t converted because jQuery was the first toolkit to support chaining and that it executes it nicely. Nor was I converted because of its extensive plugin library. Nope. My conversion was the effecient findability of elements within the DOM! This is what really makes jQuery ballsy. The toolkit was built with findability in mind using already established standards! jQuery fully supports CSS1, CSS2, CSS3, and basic XPath when hunting for elements. For example:

Lets start with something simple:
Say I wanted to find all elements within the page that had the class: bork and hide them, I’d do:

$('.bork').hide();

Alright, say I wanted to find all anchor tags with the target set to _blank and add the class whee to it:

$('a[@target=_blank]').addClass('whee');

Now, lets say I want to find all anchor tags with the target set to _blank and add the class whee to them AND append (opens in a new window) as a sibling to the link itself.

$('a[@target=_blank]').each(
  function(){
    $(this).addClass('whee');
    $(this).after('(Opens in a new window)');
  }
);

Now, if I knew I was going to use the above a whole lot all over hell’s half acre, I could create a jQuery plugin that can be chained! Here’s how I’d create that feature and allow for the passing of class name:

jQuery.fn.opensInNewWindow = function(classname){
	return this.each(
		function(){
                        $(this).addClass(classname);
                        $(this).after('(Opens in a new window)');
		}
	);
};

Now, when I want to put Opens in a new window on a series of elements, I can do so with my newly created plugin:

$('a[@target=_blank]').opensInNewWindow('whee');

//I can do this for ANY element I want even if it isn't a link
$('span.bork').opensInNewWindow('zomg');
$('div#w00t ul.nav').opensInNewWindow('roflcopter');

Now, to make use of the chainability, you can write the plugin more simply than what I did up above. You can do this: (thanks to malsup, a commenter on this article)

jQuery.fn.opensInNewWindow = function(classname){
	return this.each(
		function(){
      $(this).addClass(classname).after('(Opens in a new window)');
		}
	);
};

Cake walk. As your proficiency in finding objects within a page increases, your code will become shorter.

jQuery currently has a very active community and mailing list (averaging at about 90 posts per day) so if you have questions regarding the toolkit, you can become a member and ask away… In addition, there’s a jQuery blog where John posts comparison code showing the difference between jQuery and other available toolkits. (here’s a Zebra striping example)

If you are still on the hunt for a JavaScript toolkit for Ajax, DOM manipulation, etc or you find your toolkit of choice too clunky, give jQuery a shot. You’ll be pleased with the results.

Posted in Uncategorized

The Ajax Experience: Leveraging Ajax for Enterprise Application Development

[[innerindex]]

Despite the fact that AJAX is making significant inroads within the Web 2.0 community, many enterprise applications still remain either traditional web or desktop applications. However, by effectively using AJAX, enterprises can develop compelling, innovative, and useful web based applications that increase employee productivity while retaining the manageability enjoyed by traditional web applications. This session will focus on the challenges of developing enterprise AJAX applications with an emphasis on overcoming the common hurdles and problems encountered along the way.

Presenter: Conrad Damon – Zimbra

Conrad’s discussion began with an re-iteration of what Web 2.0 is and how things have changed since Web 1.0. Old news, but the re-iteration was brief.

Choosing an RIA solution

Next Conrad explained his team’s decision process on choosing Ajax as the solution for creating their Rich Internet Application, Zimbra.

Flash?
The Zimbra team turned this down early on as they didn’t want to be tied to a proprietary solution… A decision I can respect :) I’m not too keen on the use of Flash as a front end for full-blown RIAs in most cases.

Ajax Worries
There were some hesitations regarding the use of Ajax as a solution:

  • Complexity – Lets face it, adding Ajax into the mix causes the applications complexity to increase.
  • Performance – there’s a lot going on with an Ajax app client-side that can cause client performance to degrade. (mixed with the chattiness server-side)
  • Some cross-browser issues.

Ajax: The Chosen One
Overall, Zimbra’s team decided on Ajax as the pros outweighed the cons:

  • Enhanced User Experience
  • Desktop application-like feel.
  • Deployment is trivial. – No installation…the application is accessible via the web.
  • The power of mashups is where its at. Its all about SOA (Service Oriented Architecture).

Ajax Points

Conrad noted a few key points regarding Ajax, however:

  • Ajax is cheaper on the server/network
  • Ajax applications are more memory expensive client-side
  • Ajax applications are not a business model
  • Ajax applications are the means not an end

Ajax Tips

Based on the Zimbra team’s experience, Conrad gave some tips:

  • Use an Ajax Toolkit – They simplify things. What you choose is up to you, but the time saved by toolkit use is well worth it.
  • CSS is your friend – bend it to your will
  • Use JSON, not XML – Zimbra has almost fully converted all passing of XML to JSON
    • JSON is easy
    • JSON is fast. Eval’ing JSON is faster than parsing XML by a magnitude of 10!
  • Use Asynchronous XHR (XMLHttpRequest) calls
  • Combine, Compress, and Cache
  • Automate Testing – Zimbra uses QuickTest Pro from mercury to test the Zimbra client.
  • OO, MVC
  • TLS (Transport Layer Security…SSL) – Make sure you use it!
  • KISS (Keep it simple, stupid) – this applies to both code and the UI!
  • No browser lock-in – don’t program for a specific browser…keep it open to at least the A-Grade browsers
  • Test, test, test

Browser Gotchas & Tips

Next came some helpful browser-specific tips and gotchas:

  • Firefox
    • Missing Cursor – workarounds exist (surrounding the input with a div…yadda yadda)
    • Event capture – effects DnD effects
    • design mode – lets you turn the Browser into an editor…buggy
    • xmlHttpRequest – bug that pained the CPU when making synchronous calls
    • opacity (linux) – hangs browser (relationship between X11 and opacity)!!!!!!!!!!!!!!
    • scrollbar bleed (mac) – scrollbar does not respect z-index
  • IE 6
    • string concat with +… – SLOW, use Array joins instead
    • image caching is poor – hard to convince to cache image in browser…workaround: have a hidden div and load the images there first
    • JS engine can be slow
    • Memory leaks – circular reference issue. workaround: give things numeric ids and a lookup table
    • XHR ActiveX object – some memory leaking issues
    • DOM attribute access is slow
  • IE 7
    • ActiveX opt-in
    • CSS fixes
    • Native XHR
    • memory leaks appear to be fixed
  • Safari
    • No design mode
    • DOM API not fully implemented
    • Debugging difficult (not entirely true)

The 3 C’s

By far the most useful section of Conrad’s presentation was on Zimbra’s 3 C’s; Combine, Compress, and Cache.

Combine
Zimbra uses this technique to minimize the sheer amount of files downloaded by the client which speeds up load time! Conrad suggests:

  • Concatenate your JS files and CSS files – Order matters (remember)! Zimbra uses the “Jammer” ANT task to do this dirty work.
  • Merge Images – Images are expensive! If your application uses a large number of icons, try merging them into a single image and use background-positioning on elements for the display of icons. For disabled icons, use opacity at 20-50% rather than creating a whole new icon.

Compress
Compression makes things smaller in size…smaller “things” are quicker to download!

  • Strip comments and whitespace – use JSMin or ShrinkSafe
  • GZIP your Javascript! – All of the A-Grade browsers support gzipping which reduces file size!

Caching
Set proper headers for appropriate browser caching. Avoid redundant downloads. Period.

Conclusion

I respect the Zimbra team and their decisions; their application is solid, functional, and quite sexy. All in all, this was a pretty solid presentation with a nice amount of data. As I mentioned earlier, the 3C’s were the most valuable tid-bits of information for me…although there were a few browser gotchas that I wasn’t aware of.

Posted in Uncategorized