FB Series: Integrating JS


Where are we coming from

Javascript one of the most popular language for web programming. Although it has been around for decades, – coming from Netscape 1995 – it was not until the advent of the Ajax and Web 2.0 when JavaScript came to the spotlight and brought more professional programming attention.

The OpenSource movement of JavaScript frameworks started in 2005 with prototype and script.aculo.us. Since then programming appealing JavaScript based Websites has become so much easier. Nowadays its litteraly possible to mash-up widgets with little to no JavaScript knowledge and set up a stunning page. I would however still recommend for someone not knowing JavaScript first to get the basics and maybe have some JS Reference & DOM Reference handy.

Looking at the core functionality of todays frameworks what do we have?

  • DOM Traversal with CSS selectors to locate elements
  • DOM Modification: Create/remove/modify elements
  • Short syntax for adding/removing Events
  • Short syntax for Ajax Request
  • Animations (hide/show/toggle) & Transition
  • User Interface Widgets (Drag & drop, Tree, Grid, Datepicker, Model Dialog, Menu / Toolbar, Slider, Tabbed Pane)
  • Wide Browser Support

Choosing a JS Framework

On the net you will find a mirrad of comparisons of popular frameworks. The most popular OpenSource and free JS Frameworks available today are:

* Prototype (&Scriptaculous for UI)
* Dojo
* jQuery
* YUI
* Mootools

I would say that all of those have their advantages and drawbacks and there’s not really an obvious winner. It really depends on what you use it for. Some helpful links that helped me choosing are:

Wikipedia – to get a feeling on the features
unbiased functional comparison
Stackoverflow comparing JQuery Dojo and more
Performance comparison

Choosing a framework, as mentioned, depends a bit on how you want to use JavaScript:

Plug-and-Play:

  • Drop in a “calendar widget” or “tabbed navigation”
  • Little, to no, JavaScript experience required.
  • Just customize some options and go.
  • No flexibility.

=> Widgets

Some Assembly Required

  • Write common utilities
  • Click a link, load a page via Ajax
  • Build a dynamic menu
  • Creating interactive forms
  • Use pre-made code to distance yourself from browser bugs.
  • Flexible, until you hit a browser bug.

=> Libraries

Down-and-Dirty

  • Write all JavaScript code from scratch
  • Deal, directly, with browser bugs
  • Quirksmode is your lifeline
  • Excessively flexible, to the point of hinderance.

=> Raw Java Script

Of course you can also mix different approaches, as you can also mix Frameworks but of course in terms of maintainability and productivity it would better if you don’t have to.

For my personal use case I had the following requirements:

  1. Easy to learn with minimal intuitive syntax
  2. Lightweight solution
  3. Availability of some widgets: Datepicker, Grid, maybe more
  4. Appealing Web 2.0 effects
  5. Production quality

Right now I have choosen jQuery (incl. jQuery UI) and see how far I get with it. It was to me the most appealing in terms of the above criterias. I am not sure if I need a sophisticated data table, if so I might have another look at YUI data table which seems to me one of the best widgets for this (compare to e.g. this jQuery plugin).

For development i guess its essential to still have a good Javascript support in your IDE and a JavaScript debugger – I use Firebug and Netbeans for this. If you are into Eclipse I strongly suggest to take a look at Aptana, their IDE is really great for JavaScript and PHP, but unfortunately not optimal for Facebook development.

As a last hint: consider using Google Ajax Libs for speed up JS loading on your clients. However do not use it in local development. It just does not work reliable (loads too late etc.)

This entry was posted in facebook, javascript and tagged , . Bookmark the permalink. Both comments and trackbacks are currently closed.

One Comment

  1. Ben
    Posted July 20, 2009 at 3:18 am | Permalink

    After getting down to dirt with JQuery and YUI for a week here a good summary of advantages / disadvantages:

    jQuery Advantages:
    - Core has good performance
    - Simple to learn and use
    - Small amount of code required to do things
    - Lots of plug-ins (also a disadvantage)

    jQuery Disadvantages:
    - Specific syntax that needs to be learned (although it is pretty simple)
    - Not a cohesive solution
    - Lots of plug-ins – Requires a lot of time to choose what you need and most plug-ins a hack-jobs that are not very well supported. There is no consistency in the look and feel of plugins. Not all plugins work properly in different browsers.

    YUI Advantages:
    - Complete Cohesive Solution – Just what you need when building serious web applications. Consistency in the look and feel of widgets (They all look and operate the same)
    - Enterprise backed
    - Javascript without it’s own syntax
    - More complete, cohesive examples for each widget
    - More supporting tools around the framework

    YUI Disadvantages:
    - Requires more code to implement functionality
    - Selector is supposedly slower than jQuery, but then the latest version havn’t been compared
    - Fewer plug-ins on top of what’s already there