When Alfresco and a javascript framework with HTML5, like SproutCore meet, the mobile possibilities become endless. Rothbury Software will show how SproutCore works, how it is architected, the advantages and power of this type of framework and how it delivers a truly cross-platform web experience. When combined with Alfresco, it yields lightning-fast interfaces and allows the ability to build one time and cover all mobile platforms. As an example, we have built a sample Alfresco front-end interface using SproutCore. This example showcases the robust capabilities of the combination of the two technologies. This session will provide the initial tools and building blocks to initiate a similar solution.

1. Creating HTML5 Apps with
Alfresco & SproutCore"

2. Alfresco + HTML5"
Presentation Agenda
• Client Demo"
• Alfresco as a platform"
• HTML5 as a dynamic UI"
• Architecture and
Technical Design"
• In-House Demo"
• Q & A"

3. Alfresco + HTML5"
Why A Custom UI?
• Had a solid back end platform in Alfresco"
• Need for more functionality from the front end"
• Ease of use for users"
• Extension to the model that the Alfresco UI could not handle"

4. Alfresco + HTML5"
What Alfresco offers as a Back End
• Robust Repository"
• Fully extendable API and Services"
• Customizable Content Model"
• Core functionality just begging to be utilized"
• Version control"
• Tagging and taxonomy"
• Transformations"
• Etc…"

5. Alfresco + HTML5"
Limitations on the Alfresco UI
• Explorer browser based solution is only compatible with certain
browsers on certain OS"
• Share browser is much more dynamic but still tied to certain
browsers"
• Many technologies can be put in place on top of Alfresco to extend
this functionality but many seem to have their downside"

6. Alfresco + HTML5"
Unique perspective as a former Alfresco client
• No real knowledge of Alfresco code"
• What workflow challenges clients can face"
• go2 Media - custom CMS and deployment platform for mobile"
• FOX – ability to publish rich media content with in-context preview
capabilities"
• Growing need for cross-platform"
• Access from anywhere, anytime… Mobile!"

7. Alfresco + HTML5"
Historical challenges for app developers pre-HTML5
• Desktop + Native Code = Lots of code!!!"
• Need For Dedicated Mobile Teams, QA and Release Process"
• Intermittent Network = Downloadable Apps"
• Ever-evolving technology means frequent updates and requires
users to download updates"
• HTML5 To Save The Day…"

8. Alfresco + HTML5"
HTML5 – Why it is a game changer
• Well-documented and supported standard"
• As of 2010, competes with Native Code on almost all levels"
• All processing and business logic is now client side"
• Apps work offline, at least partially, with application cache"
• Local storage in client-side SQL database = Less bandwidth"
• By 2010, Steve Jobs declared it an alternative to Flash"
• <video />, <audio />, <canvas /> and SVG"
• Essentially write code once for all platforms"
• No need to build teams with expertise in writing code for all devices"

9. Alfresco + HTML5"
What SproutCore offers Alfresco
• Formed partnership with Strobe "
• What is SproutCore?"
• Open-source framework based on HTML5 + Javascript"
• Moves business logic to the browser to create desktop-caliber apps that
are incredibly fast and reliable"
• MVC - great for large and small dev teams to develop simultaneously"
• Maximizes “best of breed” in todayʼs web optimization standards"
• Initial learning curve with any framework BUT yields great results"
• HTML5 browsers > IE7 though v 2.0 promises backwards compatibility"

10. Alfresco + HTML5"
What SproutCore offers Alfresco
• SC.Query and SC.Store"

11. Alfresco + HTML5"
What SproutCore offers Alfresco
• Robust content bindings in the view layer"

12. Alfresco + HTML5"
What SproutCore offers Alfresco
• Computed properties"

13. Alfresco + HTML5"
What SproutCore offers Alfresco
• Observers"

14. Alfresco + HTML5"
What SproutCore offers Alfresco
• Cross-platform + Multi-device with minimal effort FTW!"

15. Alfresco + HTML5"
Building an Alfresco UI in SproutCore
• RESTful Web Script API returning JSON feeds for:"
• Recursive Folder Hierarchy"
• Ability to interact with Alfresco space: CRUD operations"
• Content Properties and Actions"
• Ability to interact with files: CheckIn/CheckOut, comment, download, update"
• Workflow Tasks"
• Ability to interact with Tasks and create new Workflows"

16. Alfresco + HTML5"
Technical Challenges
• Authentication Service" • Mobile Functionality"
• Web Scripts run with • Need to reduce API calls"
authentication = none"
• Intermittent network connectivity
• Authentication handled issues"
internally "
• Need to allot for multiple platforms
• Needed to be extended for and different sized screens"
custom error handling and
• Some mobile supports flash but not
permission checking"
Apple… <video />, <audio /> or
graceful degradation"

17. Alfresco + HTML5"
Architecture Diagram

18. Alfresco + HTML5"
Building an Environment for SproutCore
• Vanilla Tomcat Installation"
• Java packaged as jar files along the Alfresco webapp"
• Webscripts and context files in the Alfresco extension classpath"
• SproutCore packaged and residing in same webapp folder"
• Or deployed in a webapp next to Alfresco"
• Or deployed to a separate server all together"
• As long as both SproutCore and Alfresco webapps are within the same domain"

19. Alfresco + HTML5"
In House Project Demo
• Content retrieval, previewing, and approval"
• How HTML5 makes previewing so easy to code ""
• http://www.rothburysoftware.com/projects/pare/"
• http://guides.sproutcore.com

20. Alfresco + HTML5 = Endless Possibilities
Questions and Answers"
Seth Kellas" Jen Murdza"
seth.kellas@rothburysoftware.com" jennifer.murdza@rothburysoftware.com"