Alfresco Day Stockholm 2015 - Rapid UI Development - David Draper

1. Rapid UI Development
with Aikau
Dave Draper
Senior Software Engineer, Alfresco

2. Introduction

3. 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

4. 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

5. Processes

6. • 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

7. 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

8. Creation

9. 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

10. Example URL

11. Declarative UI

12. Decoupled Model
• Widgets decoupled from each other by
pub/sub
• Widgets decoupled from data via Services

13. Standalone Clients

14. Easy Client Creation
• Maven Archetype
• Pre-configured for local Alfresco
Repository
• Login and home page
• Demo…

15. “My Alfresco Files”

16. Customization

17. Customize…
• Existing pages via extension modules
+ Use the “Developer View”
• Create new or extend existing widgets
• Style through LESS variables in Theme
• Demo…

18. Multi-Select Actions

19. A New Way of Thinking

20. Remember…
• Today’s page will have tomorrow’s widgets
• Use what’s available now and request
something better for tomorrow

21. Records Management
Example

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

26. Best Practices

27. 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

28. NEVER USE A CSS
OVERLAY !!!

29. “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

30. Extending a Widget
30

31. Extending a Function

32. 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

33. Education

34. Resources
• Tutorial on GitHub
+ https://github.com/Alfresco/Aikau/blob/master/tuto
rial/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)

35. Questions?

36. Debugging

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

38. JavaScript Debugging

39. Finding Source (Chrome)
• Use CTRL-P with text “surf” to find
aggregated resource
• Use CTRL-F with function name to find
target
39

40. Source Matching (Chrome)
40

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

42. 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

43. Break on Exception
43

44. WebScript JS Debugger
44

45. 45