Why KISSY Became Alibaba’s Front‑End Powerhouse: Architecture & Real‑World Use

Introduction

With Taobao’s rapid growth, the three‑year‑old KISSY framework has expanded dramatically and is now used by many Alibaba groups, especially Taobao, Tmall, and Yitao, covering front‑end web pages, web apps, and early‑stage mobile applications.

Beyond Alibaba, many companies and individuals use KISSY; a QQ group of nearly a thousand members and active GitHub contributions demonstrate its community reach.

Why Choose KISSY

KISSY is a fully home‑grown Chinese framework that has withstood three years of Taobao’s evolving business, showing strong extensibility, stability, and maintainability. Its advantages include:

Extensive Chinese documentation, easing onboarding for developers less comfortable with English.

A sizable domestic community via QQ groups, Google Groups, Weibo, and the official site.

Convenient development with a complete modular, component, and tooling mechanism.

Incorporates ideas from leading frameworks: jQuery‑style DOM core, YUI‑style architecture, and ExtJS‑inspired component design.

Broad application scenarios across devices, supporting quick page builds with seed and core, rich client apps, mobile APIs, and large‑scale team collaboration.

While KISSY’s component completeness and testability still need improvement, ongoing team efforts are expected to resolve these issues.

Architecture

KISSY’s architecture is shaped by Taobao’s complex business needs, emphasizing loose coupling, no‑pollution, and modularity, while drawing inspiration from many excellent libraries.

Overall architecture diagram:

The lowest layer is seed , an AMD‑like module system with automatic combo support and utility methods such as each , mix , param , ready , plus core classes like Path , Uri , Promise , UA .

Above seed is the core DOM compatibility layer. Modules are composed of smaller modules; non‑standard browser fixes are isolated in internal modules, while external modules load the appropriate internal ones based on device. Users receive a consistent API, e.g., event loads event/touch on touch devices or event/hashchange on IE<9.

The third layer provides component architecture, including rich-base (ES5‑style property management, plugins, multiple inheritance), component (base class for UI components), and the xtemplate template engine.

The fourth layer consists of reusable KISSY components, such as utility modules (drag‑drop, resize, SWF handling, MVC) and UI components (overlay, menu, tabs, calendar).

The outermost layer is the KISSY gallery , where community‑contributed modules are shared; widely useful modules may be merged into KISSY core.

Modular Mechanism

Introduction

To improve maintainability and reuse, KISSY introduced a simple modular system early on, evolving with front‑end trends. KISSY 1.3’s module system resembles AMD and adds automatic combo based on Taobao’s needs.

Example package configuration:

KISSY.config('packages', {
    myapp: {
        base:'./x'
    }
});

Define module a.js:

KISSY.add(function(S,JSON){
    return JSON.stringify({a:'ok'});
},{
    requires:['json']
});

Main module that depends on a:

KISSY.add(function(S,DOM,a){
    S.ready(function(){
        DOM.text(document.body,a);
    });
},{
    requires:['dom','./a']
});

Load the application:

// ... package config above
KISSY.use('myapp/main',function(){
    alert('page loaded');
});

Tool Support

KISSY provides a Module Compiler for script packaging and dependency extraction, enabling CDN combo delivery.

Script Packaging

When many scripts are involved, the compiler bundles the entry module and its dependencies into main‑min.js and generates a dependency description:

KISSY.config('modules',{
    'myapp/main':{
        requires:['dom','json']
    }
});

Enable combo mode and load the description: KISSY.config('combine',true); After replacing seed‑min.js, only two network requests remain.

Dependency Extraction

For smaller projects with server‑side combo support, the compiler can:

Complete module names, e.g. KISSY.add('myapp/a',...).

Collect dependencies into a single file.

Then enable combo and load the file, resulting in two requests.

KISSY‑PIE

KISSY‑PIE is a convention‑based front‑end packaging solution that automates build tasks, covering JS (module compilation, HTML‑to‑module conversion, minification), CSS (combo, minification), Less, and Sass.

Web UI for KISSY‑PIE:

Component Mechanism

Core

KISSY offers ready‑to‑use components such as drag‑drop, resize, SWF, stylesheet, MVC, as well as UI widgets like overlay, menu, tabs, tree, etc. All share the rich-base and component modules, leveraging JavaScript mixins and prototype inheritance for property binding, class extension, and plugins.

The key base class Component provides two rendering approaches:

Full JavaScript rendering of the DOM tree, e.g.:

KISSY.use('menu',function(S,Menu){
    new Menu({
        children:[{content:'item1'}]
    }).render();
});

Instantiating a component from an existing DOM node.

Overlay component example (structure diagram omitted for brevity):

Overlay inherits from Component and mixes in positioning, alignment, close, and mask functionalities. Plugins can be added at runtime to keep the core lightweight.

Overlay usage:

KISSY.use('overlay,component/plugin/resize',function(S,Overlay,ResizePlugin){
    new Overlay({content:'test'}).render();
    var overlay = new Overlay({srcNode:'#existing'}).render();
    overlay.plug(new ResizePlugin({handles:['t']}));
});

Brix

Brix is an alternative component solution developed by Yitao, based on a unified rendering model (template + data → HTML → innerHTML) and pagelet‑style component instantiation via custom DOM attributes.

Device Universality

KISSY runs on browsers, screen readers, Node.js, mobile browsers, and Windows 8. In Node.js it can load its own modules for server‑side rendering, UA parsing, jsdom testing, and more.

Accessibility is addressed by following WAI‑ARIA, benefiting millions of visually impaired Taobao users.

Mobile support includes selective loading of lightweight modules and progressive‑enhancement APIs that simulate touch events (tap, rotate, pinch) on devices lacking native support.

KISSY.use('event',function(S,Event){
    Event.on('#div','tap',function(){
        // handle tap
    });
});

ZOOJS

The Beijing team built ZOOJS, a toolbox for wireless web devices offering event support, touch behavior, rich widgets, skins, and app scaffolding, leveraging HTML5 and CSS3.

Testing and Continuous Integration

Unit Testing

A typical module directory includes tests, runner, and specs. KISSY uses Jasmine for unit tests:

describe('S.mix',function(){
    it('works for simple case',function(){
        expect(S.mix({x:1},{y:1})).toEqual({x:1,y:1});
    });
});

Continuous Integration

KISSY integrates with Travis CI and PhantomJS; each commit triggers a headless test run across all modules.

Taobao Application Examples

Shop Page

Shop pages are modular, with each block (search, category, sales stats, etc.) implemented as a KISSY module. The shop application is configured as a package, and the page loads required modules via combo URLs.

KISSY.use('shop/search,shop/category,...');

Product Detail Page

Detail pages combine shop modules with their own heavy logic. To avoid overly long combo URLs, the main detail module and its dependencies are bundled into a single file, resulting in three requests (two combo, one non‑combo).

http://a.tbcdn.cn/s/kissy/1.3.0/??dom/base.js,event/base.js,overlay.js...
http://a.tbcdn.cn/p/shop/??search.js,category.js...
http://a.tbcdn.cn/p/detail/main.js

Summary

KISSY is still early in its evolution, lagging behind mature foreign frameworks but having proven its resilience under Taobao’s demanding workloads. Future work includes enriching core components (date, datasource, selector, graphics), refactoring existing widgets (switchable, calendar), adding a package manager, expanding test coverage, and improving stability. The framework will continue to grow alongside Alibaba’s needs and the broader front‑end ecosystem.