The project involved the refactoring of several disparate Flash tools into a single interactive application based on open standards for a large content publisher. Of high importance, the application had to be highly optimised with a small initial foot print due the large number of daily page impressions the client receives. Several phases were involved, with the first being an initial proof of concept.
The concept involved the development of one view of what would be the completed application. It consisted of:
- An initial seed file (< 1KB) responsible for the dynamic loading of any frameworks (e.g., jQuery or YUI 3) and the initial application file.
- The development and inclusion of jQuery plugins to support form element styling and validation, and dynamic chart visualisations.
- The generation and population of UI, based on user inputs, configuration defaults and the application's location within the publisher's site.
- The calculation and presentation of information based on the user's input.
What I wanted was a complete, mature framework within which to develop my first OO application. Something that would effectively guide me through the process. In reviewing the available libraries I decided to adopt YUI 3 for the following reasons:
- Integrated, inheritance-based application development support including attribute and class management.
- Long term solution:
- Performance optimisation:
- Initial seed file of only 7KB.
- Lazy-loaded modules on demand.
- CDN delivery.
- Varied and comprehensive documentation:
- Mature, consistent evolution between releases.
- Integrated tools in YUI Compressor, YUIDoc, YUI Builder, and Console.
Integrating YUI 3 brought several direct and indirect benefits to the project:
- Inheritance-based architecture and class management through the Attribute interface, and Base and Widget classes producing performant, reusable and organised code.
- Separation of presentation from model and data using the Widget class to render alternate views (inline or overlay) based on the application's location within the site.
- Sandboxing and dynamic module inclusion through YUI.use().
- Cross-browser console debugging using YUI Console.
- On save, performance optimisation using YUI Compressor in Eclipse.
- Easy inclusion and integration of pre-existing jQuery plugins.
- On save, automated code documentation using YUIDoc.
The final result was a happy client and a finished product with sub-second load times (remembering it took 8 seconds to load the initial proof of concept).
- Select the right tool for the job
In reading this post I'm sure some readers will view this as anti-jQuery. Not at all. jQuery is a fantastic project responsible for many innovations. But, as with any tool, it has its strengths and an intended purpose. Its strength lies in normalising browser inconsistencies, lowering the barrier to entry for the novice and improving the efficiency of experienced programmers. The primary learning that came out of the project was that you can't rely on one tool for every job. YUI builds on what jQuery can provide by also offering a well architected application framework. But it's fair to say that it comes at a cost, see the next point.
- Steep learning curve
- Only load content when you need it
While it's certainly programmatically easier to just to load everything you may need upfront, the performance improvements gained as a direct result of lazy loading content only when you need it is huge. This was one of the key contributing factors for drastically improving the performance of the application.
- Interact with the DOM as little as possible
This point doesn't relate to the specific library used. By caching the required DOM elements and utilising HTML templates more, UI rendering time fell considerably. Nodes can be cached using Y.one() while node lists can be captured using Y.all(). Also Y.Node.create() was very useful in efficiently converting large text strings of HTML to DOM elements prior to insertion.
- Learn by example, use a CDN
In using YUI's CDN delivered library we decided to deliver all the project's assets via CDN. This was probably the next largest contributing factor to the performance improvement.
- Pub, sub hubbub
For those experienced programmers out there, try not to laugh at this one. Having been used to writing little more than plugins in the past, I had no idea how applications should communicate internally. Even after reading "Custom Events allow you to publish the interesting moments or events in your own code so that other components on the page can subscribe to those events and respond to them," I still missed it.
As it turns out, YUI's custom event publish-and-subscribe model works beautifully for inter-class and inter-object communication. You can even subscribe pre and post to events and include dynamic logic to suppress bubbling based on certain conditions.
- Integrate best practice into your workflow
Learning YUI on the Job
Although everyone has a different learning style, I thought I'd share what resources I used to learn YUI with a specific objective in mind.
- Watch the relevant YUI Theater episodes to get a general overview of the library or learn a specific module. I can highly recommend starting with:
- Read up on YUI on the Yahoo! Developer Network. I try to read a little bit every week and learn more each time I re-read it.
- Read the API documentation. If you can't find it on YUI Theater or on the Developer Network, dig into the API. It even pays to read the code directly.
- Read and post questions to the forum on YUILibrary.com.
- Play a lot and have fun!
YUI 3 is a full-featured, mature and constantly evolving library suitable for small to large projects. As front end web applications become more complex, the need for libraries like YUI will grow. While for the uninitiated it can be a daunting experience at first, if you stick with it you will be rewarded.
About the Author: Mark is a Senior Front End Developer at VI, a multi-disciplinary communications agency established in 1981 with a design orientation. Today the agency fuses its work in digital, direct and design disciplines to deliver measurable outcomes for a broad range of B2C and B2B clients.