Rapid UI Development with Aikau

Dave DraperSenior Software Engineer, Alfresco

Introduction

Aikau Basics• Internally developed UI framework• Designed for re-usability, customizability and

accessibility• Initially part of Share, now an external GitHub project• Used for:

+ Share header+ Faceted search and faceted search management+ Sites management+ Custom Model Management (5.1 and 5.0 module)+ Parts of Record Management

• Best unit test code-coverage of any Alfresco project

Hundreds of Modules• 25 different form controls• 20 different layout containers• 20 different menu controls• 44 different property renderers• 8 variations of lists

+ 7 list views+ 10 list view layout containers

• Document previewing• Keyboard accessible drag-and-drop framework• 30 different services

Processes

• Small Agile team+ Supporting internal product feature development

• Public GitHub repository• Use “GitFlow” process

+ Every Pull Request is code reviewed• One week sprints• Weekly backwards compatible releases• Zero technical debt

+ Bugs prioritized over features• Automated unit testing for regressions

+ Unit tests added for all new features+ Unit tests add for all new bugs

Fast Turnaround

• Features and bugs not added mid-sprint• Maximum wait of 2 weeks to turnaround a

bug or feature request

Sprint N+1

Bug Raised Added to Sprint Fix Delivered

Sprint N

One Week

Creation

Page Creation Basics• An Aikau page is defined by a single WebScript

+ “Legacy” Share pages are defined by Surf Pages, Templates, Regions, Components and WebScripts

• Pages are mapped using “URI Templates”• Four templates are available out-of-the-box

+ “dp” (dynamic-page)+ “hdp” (hybrid-dynamic-page)+ “rp” (remote-page)+ “hrp” (hybrid-remote-page)

• Recommended to use “dp”• Custom templates can be defined

Example URL

Declarative UI

Decoupled Model• Widgets decoupled from each other by

pub/sub• Widgets decoupled from data via Services

Standalone Clients

Easy Client Creation• Maven Archetype• Pre-configured for local Alfresco

Repository• Login and home page• Demo…

“My Alfresco Files”

Customization

Customize…• Existing pages via extension modules

+ Use the “Developer View”• Create new or extend existing widgets• Style through LESS variables in Theme• Demo…

Multi-Select Actions

A New Way of Thinking

Remember…• Today’s page will have tomorrow’s widgets• Use what’s available now and request

something better for tomorrow

Records Management Example

Benefits• Fast prototyping• Can work on server side code• Simple to swap out when new widgets are

available

Best Practices

In General…• Always feedback

+ Bugs, feature requests, requests for examples and documentation, provide use cases, request extension points, etc.

• Never copy and paste+ Always extend or re-use

• Create composite widgets and libraries• Use Services to access data

+ Normalize JSON response schemas+ Avoid coupling widgets to data

• Use Pub/Sub or Events for communication+ Avoid fixed references

NEVER USE A CSS OVERLAY !!!

“A widget doesn’t do what I want”

• Widgets are intentionally written to be easily extendable

• Functions are small to encapsulate code that might want to be changed

• Closures are generally avoided to make functions available to be overridden or extended

• Functions can be extended or overridden+ Use this.inherited(arguments); to extend

Extending a Widget

30

Extending a Function

Mix-In Modules• Widgets support “multiple inheritance”

+ Widgets extend a primary module and then “mix-in” additional modules

• “alfresco/core/Core” should be mixed-in to all widgets+ Provides core pub/sub and logging capabilities

• Abstract cross-cutting function to mix-in modules

• Request abstraction of existing widget code into a mix-in module

Education

Resources• Tutorial on GitHub

+ https://github.com/Alfresco/Aikau/blob/master/tutorial/chapters/Contents.md

• JSDoc+ http://dev.alfresco.com/resource/docs/aikau-

jsdoc/• Blogs

+ https://www.alfresco.com/blogs/developer/author/ddraper/

+ Follow me on twitter for announcements (@_DaveDraper)

Questions?

Debugging

Debugging Methods• Console log• Publication/subscription log• Demo…

JavaScript Debugging

Finding Source (Chrome)• Use CTRL-P with text “surf” to find

aggregated resource• Use CTRL-F with function name to find

target

39

Source Matching (Chrome)

40

Finding Source (FireBug)• Use CTRL-F to find (with “Multiple Files”

option checked)

41

Breakpoints• Logged error may not provide link to line

number• Break on exceptions to zero in on error

conditions• Need to include caught exceptions (Aikau

exceptions are caught)• Need to typically skip past 3rd party

exceptions on page load

42

Break on Exception

43

WebScript JS Debugger

44

45