CUST-11 Creating HTML5 Apps with Alfresco & SproutCore
-
Upload
alfresco-software -
Category
Technology
-
view
2.111 -
download
0
description
Transcript of 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"[email protected]"
Jen Murdza"[email protected]"
Alfresco + HTML5 = Endless Possibilities
Questions and Answers"