YUI 3.8.0pr1 – Template and Color Utilities

By Eric FerraiuoloNovember 7th, 2012

YUI 3.8.0pr1 is now available to the developer community for feedback and testing on the Yahoo! CDN (and as a download), on npm, and our Staging website has the updated documentation.

The current development sprint ends this Friday, at which time we’ll be feature complete on the next YUI release. We are on track for this next stable release to be 3.8.0, and the release is scheduled for December 4, 2012.

Introducing Template and Template.Micro Utilities

Ryan Grove has contributed new templating utilities to YUI. Y.Template is a class which provides a generic template engine API, and Y.Template.Micro, a static class which provides a simple micro-templating engine. Y.Template can be used to compile, precompile, render, and revive precompiled templates using Handlebars or Y.Template.Micro.

Ryan describes why there was a need for these templating utilities:

“While working on a new widget recently, I found myself wanting a string-based templating solution that was more advanced than Y.Lang.sub() or Y.substitute(), but without the overhead of Y.Handlebars. I needed support for interpolation, if/else branching, and looping, but only for a few very small templates. Underscore-style templates (more familiar as ERB-style templates to Rubyists) seemed like exactly the right fit.”

Y.Template.Micro is a string-based micro-templating language similar to ERB and Underscore templates. Template.Micro is great for small, powerful templates, and its compilation engine is extremely fast with a small footprint.

Compared with the features of Handlebars, Template.Micro is much simpler. Using the generic engine API provided by Y.Template, Micro and Handlebars templates can be used interchangeably. This gives you a powerful way to customize a component’s Handlebars templates by overriding them with Micro templates, and not incur the cost of loading the handlebars-compiler module (which is 9KB minified and gzipped).

Introducing Color Utilities

Color utilities have been available in YUI for quite some time, but they were hidden in a DOM helper submodule which was never publicly documented. We are changing this today by exposing the new Y.Color utility!

Y.Color provides methods which enable conversion between hexadecimal, RGB, HSL, and HSV color models. HSL and HSV conversion methods are provided by submodules, this way you only have to load the modules you need.

We created the Color utilities to be extensible. New color models can be defined by providing a RegEx for matching, a string template, and any conversion methods.

An exciting feature of the Color utilities is the support for color theory, which is provided by the color-harmony module. These features enable you to match one color to another color’s perceived brightness, get similar colors to one that’s supplied within a certain range, find complementary colors, etc. We have some great examples showing off these new color utilities, be sure to check them out!

Having a robust color utilities will allow us (the YUI community included) to create new modules and features such as a color picker widget. Taking it a step further, we’ll be able to use these color utilities to greatly improve YUI skinning. Stay tuned for more on that soon :)

Attribute and Base Observability Refactoring

Back in YUI 3.5.0, the features of Y.Attribute were extracted-out into smaller sub-components, each with a single reasonability: Y.AttributeCore, Y.AttributeEvents, Y.AttributeExtras. Y.Attribute was then redefined using these parts. At that time we also did a similar refactoring of Y.Base and extracted Y.BaseCore, a base class sans events.

Today we are codifying the concept of “observability” at the Attribute and Base levels. Instead of using the description “has events”, we’re now referring to a components qualities, i.e., “is observable”. This distinction is a better match for how Y.AttributeObservable (formerly Y.AttributeEvents), and the new Y.BaseObservable class extension are used and applied.

Certain components in your app will benefit from the ability to have their lifecycles and attribute changes observed to other parts of the system, but other components will incur an unnecessary overhead and don’t require these abilities.

This refactoring combined with updates to Y.Base.create/mix() which allow it to be used with Y.BaseCore (and BaseCore subclasses), means that observability can be added to class at any time by mixing in the new Y.BaseObservable extension.

Stay tuned for continued work on Attribute and Base performance in the next major YUI release after 3.8.0.

ScrollView Enhancements

ScrollView has received minor enhancements for this preview release, including fixes for a couple pagination bugs. This returns the pagination features back to the pre–3.7.0 behavior, which requires a distance threshold of at least 50% to trigger moving to the next “page”.

A special thanks to Juan Dopazo for contributing a fix for ScrollViewPaginator’s scrollToIndex() method, which now properly respects animation duration and easing options.

Happy Testing!

For a complete list of changes in 3.8.0pr1, please refer to the change history rollup for this release.

We rely on your feedback from testing these preview releases in your real world apps to give us the final vote of confidence in the stability of the code, beyond what our automated and manual testing provides. If you find a bug, or want to suggest an enhancement, please don’t hesitate to file a ticket. Thanks, and happy testing!

2 Comments

  1. very nice work on decoupling observer stuff from Attribute and Base and make it optional!

    Also very nice work on Y.Color. I recently needed a Color utility class for my (Java) YUIGWT project, and had made it collecting snippets on the internet: http://code.google.com/p/yuigwt/source/browse/trunk/yuigwt/src/org/sgx/yuigwt/editors/basetypes/Color.java

    but Y:color is much better thanks to the authors!

  2. [...] highlights of this release are listed below, inspired by the original 3.8.0pr1 announcement from Eric [...]