Introducing Aikau

[ddraper]

Introduction

For some time now I've been writing blog posts that refer to the 'updated UI framework' describing a new approach that we've been working on for further developing Alfresco Share. This is a fairly ambiguous (as well as lengthy) term to use to describe what we've been up to and we thought it would be sensible to come up with a project name that encapsulates the work that we've been doing. The framework is completely reliant on Surf so we wanted it to be somehow Surf related so after throwing a few ideas around settled on the name 'Aikau'. This post is going to attempt to describe exactly what Aikau is and why we've been working on it.

What is Aikau?

Aikau refers to a method of creating new Surf Pages or Components comprised of small atomic widgets. The widgets are referenced in a JSON model that can either be defined in the JavaScript controller of a WebScript or as a document stored on the Alfresco Repository. Each widget is an AMD module that references it's own CSS, HTML and i18n resources Surf will ensure that all of those resources are imported into the page loaded by the browser when that widget is referenced in the JSON model that defines that page.

The widgets are intentionally de-coupled over publication/subscription communication and event frameworks so that widgets can be easily added/removed/changed within a JSON model without causing any missing reference errors. Each widget is intentionally designed to implement a single piece of function, but can themselves define JSON models of child widgets so that it is easy to define re-usable composite widgets.

Each widget should be written with customization in mind - methods are kept short and variables abstracted to allow configuration and allow customization through targeted method overrides in extending widgets.

Aikau also provides an Intern.io based unit testing framework and each widget should have it's own unit test (although we don't yet have 100% code coverage) to ensure that functionality is not broken during development. We aim to make use of tools such as Grunt and Vagrant to allow continuous testing to run in parallel with development to catch breaking code immediately (although this effort has not yet been completed).

What Are The Goals?

The primary goal of of Aikau are to:

• maximize code re-use
• make UI development faster
• make it incredibly simple to customize pages
• allow continuous iteration of existing pages.

Aikau leverages the existing Surf extensibility capabilities to allow a default JSON model to be manipulated by 3rd party extensions. This allows pages to be heavily customized without needing to access or work with the source code of the page - it is possible to isolate the customization work to just the specific target areas.

Performance improvements should also be achieved by only loading the minimum amount of JavaScript and CSS data into the browser and by reducing the number of HTTP requests to an absolute minimum.

One of the main benefits of Aikau is that it allows you to quickly prototype pages with existing or simple widgets and then refine them over time. Functional pages can be easily constructed in minutes (and hopefully in the future entirely via a drag-and-drop page creation tool within an application itself).

Surf now supports Theme based LESS CSS pre-processing and widgets are written to be completely theme-able. This allows functional pages to be have their design modified repeatedly over time without needing to throw away existing work and start over from scratch.

How Does it Work?

There have been numerous blogs over the past year that have described the work we've been doing - although none of them specifically refer to Aikau by name, the knowledge is already out there!

Essentially Aikau is powered by Surf and uses the Dojo AMD loader and widget templating capabilities to provide a basis for dynamic dependency analysis. Each JSON model is dynamically analysed for AMD modules and those modules themselves are then analysed for their dependent modules (and so on, and so forth) until a complete dependency 'layer' has been constructed for that page.

Surf caches module dependency relationships as well as page dependencies to ensure that only the minimum amount of analysis is done to maximise performance.

JavaScript Framework Ambivalence

Although Aikau makes heavy use of Dojo for the AMD loader and widget templating, it is by no means forces the exclusive use of Dojo. it extends the AMD paradigm to allow non-AMD dependencies to be easily referenced by widgets and is completely ambivalent to the JavaScript framework being used.

We have already made use of numerous other JavaScript frameworks and projects within the current suite of Aikau widgets including:

• 'Legacy' Alfresco JavaScript code
• YUI2
• JQuery
• ACE
• JSON Editor Online

Summary

It's still early days, but we now have a framework and an initial set of widgets that make page development using Aikau a reality.  It's unlikely that Aikau will ever completely replace the existing Share implementation but it is intended to work in harmony with it as well as providing the infrastructure to quickly develop alternative Surf based Alfresco clients.

The goal of this post is simply to allow us to talk about Aikau and for you to know what we're referring to!