Alfresco Day Stockholm 2015 - Rapid UI Development
- 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
- 14. Easy Client Creation • Maven Archetype • Pre-configured for local Alfresco Repository • Login and home page • Demo…
- 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…
- 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
- 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
- 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…
- 39. Finding Source (Chrome) • Use CTRL-P with text “surf” to find aggregated resource • Use CTRL-F with function name to find target 39
- 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
- 45. 45