Wednesday, September 30, 2009

YUI to the rescue

Are you still rolling your own HTML user interface components? If you are, take a look at what YUI has to offer. The advantages of leveraging YUI's standard components are abundant.

YUI Advantages:

  • Saves cost on development effort. The suite of controls are already developed and tested. This allows your team to work on more valuable tasks.
  • Excellent performance. YUI has adopted many of the great performance improvement practices that were identified in Best Practices for Speeding Up Your Web Site. Several of the performance improvements include:
    • Minified JavaScript and CSS files. This will improve page load performance with smaller files to download.
    • Aggregated or rolled-up JavaScript and CSS files. This will improve page load performance with fewer HTTP requests.
    • Yahoo will host the files on their own Content Delivery Network. In addition, Yahoo will compress and cache all of their controls for even greater performance. They also manage versioning.
  • Components are supported across all A-Grade browsers
  • Helps non-UI experts design beautiful user interfaces. Yahoo provides the design and CSS layout for all of their components.
  • 508 compliant. All components are screen reader accessible.
  • All components already have extensive documentation with many examples.
  • Reusable. You can apply the YUI controls everywhere because they are not proprietary.
  • Technology agnostic. These controls can be applied across all Web environments regardless of technology (Java, .NET, Rails, etc.).
  • Support many features that allow you to change behavior without customizing the code.
  • Thier code is clean. I validated their JavaScript with JSLint and few errors were reported. I also validated their CSS files and no major issues existed either.


YUI Disadvantages:

  • Some controls are not bullet proof. For example, there is a sorting issue with their datatable control if you embed the component within a table. However, this is not an issue if you are working in a CSS based design.
  • They do not have everything but the list is extensive.


Recommendations:

  • Try to avoid customizations. Customizing the code will make it difficult to migrate to newer versions in the future.