CUST-11 Creating HTML5 Apps with Alfresco & SproutCore

Creating HTML5 Apps with Alfresco & SproutCore"

Alfresco + HTML5"

Presentation Agenda •  Client Demo"

•  Alfresco as a platform"

•  HTML5 as a dynamic UI"

•  Architecture and

Technical Design"

•  In-House Demo"

•  Q & A"

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"

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…"

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"

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!"

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…"

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"

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"

Alfresco + HTML5"

What SproutCore offers Alfresco

•  SC.Query and SC.Store"

Alfresco + HTML5"

What SproutCore offers Alfresco

•  Robust content bindings in the view layer"

Alfresco + HTML5"

What SproutCore offers Alfresco

•  Computed properties"

Alfresco + HTML5"

What SproutCore offers Alfresco

•  Observers"

Alfresco + HTML5"

What SproutCore offers Alfresco

•  Cross-platform + Multi-device with minimal effort FTW!"

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"

Alfresco + HTML5"

Technical Challenges

•  Authentication Service"•  Web Scripts run with

authentication = none"

•  Authentication handled internally "

•  Needed to be extended for custom error handling and

permission checking"

•  Mobile Functionality"•  Need to reduce API calls"

•  Intermittent network connectivity issues"

•  Need to allot for multiple platforms and different sized screens"

•  Some mobile supports flash but not

Apple… <video />, <audio /> or graceful degradation"

Alfresco + HTML5"

Architecture Diagram

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"

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

Seth Kellas"seth.kellas@rothburysoftware.com"

Jen Murdza"jennifer.murdza@rothburysoftware.com"

Alfresco + HTML5 = Endless Possibilities

Questions and Answers"