nuxeo world session: mobile ecm apps with nuxeo ep

Nov. 18 2010 - S. Fermigier & B. Jalon, Nuxeo

Mobile ECM Appswith Nuxeo EP

An experience report

Monday, November 22, 2010

Outline

• Why?

• How?

• Experience reports

• Future work


1. Towards content-enabled enterprise mobile apps


Gartner: mobile apps and tablets are HOT

Source: http://blogs.techrepublic.com.com/10things/?p=1871Monday, November 22, 2010

http://blogs.techrepublic.com.com/10things/?p=1871

http://blogs.techrepublic.com.com/10things/?p=1871

Gartner again(but emphasis is mine)

• Enterprise apps will need to be designed for the tablet;

• Delivering these apps gets complicated due to the selection of platforms;

• Marketing will drive a lot of projects to utilize tablets, but these devices can be used for inspections, surveys, image capture, documentation and training.

• The PC era is over. Think of mobile design points.


Technical limitations

• Limited screen size

• No keyboard, touch interface not a mouse either

• Limited computing power

• Limited network availability and bandwidth

• Limited content types

• Platforms proliferation!

• Etc.


New opportunities

• Just use your finger! (ex: Zosh)

• Geolocation

• Camera

• Ex: Barcode scanning

• Other sensors?


Embrace the constraints!

• Well defined (but per-platform) UI guidelines

• New standard to the rescue: HTML5

• Mobile-specific enhancements to CSS

• Local storage (file and DB)

• Offline mode


2. Technological landscapeMobile apps or mobile web?


Web Apps

• Multi-platform

• Depending on HTML5 support by your platform vendor

• Easy deployment

• But: UI won’t look and feel “native”

• Users will know they are in a browser

• Limited access to device APIs


vs. Native Apps

• Optimized for a single platform capabilities

• Optimal user experience

• Access to sensors and specific API

• You can try to make money on the App Store (not applicable here)

• But: Need platform-specific training, longer development time


Web Apps

• Pure HTML (with ad-hoc CSS)

• HTML enhanced with jQuery

• One Page or SOFEA web apps

• Cross-platforms, “web oriented”, frameworks

• Cross-platforms, “native oriented”, frameworks

• Native apps

Native Apps

A wide range of options


Pure HTML

• Classical web application made of pages, with a bit of CSS to make them more readable on a tiny screen

• Good enough for mobile web sites

• For any kind of web applications, we can do better for a very tiny price


Example: mobile Wikipedia


“Enhanced” HTML• HTML content delivered with AJAX requests

using “link hijacking” techniques (using usually a bit of jQuery love)

• Various CSS and JS tricks to emulate native UI

• Libraries: iUI, jQTouch, jQuery Mobile

• iUI: already mature, full-featured

• jQuery Mobile: recent project, focus on portability


One page Web apps

• Applications built using the SOFEA paradigm (Service-Oriented Front-End Architecture)

• Web assets are loaded only once, then all interaction with server takes place as web services (usually JSON RPC)

• (Too?) Many frameworks, still immature: GWT, Sencha Touch, SproutCore Mobile, Dojo, etc.


Example:mobile gmail


• Embeds your web app into a custom-built web browser

• Removes URL and bottom tab bars

• Extends JS API with platform-specific API

• Easiest transition from web app to native

• But you still get a web-like UI

• Open source community project


• Initially similar to PhoneGap

• Then refocussed on providing a JS-based API to native UI and platform APIs

• 2 supported platforms: iOS and Android, BlackBerry coming up someday

• Open source startup, raised 9 M$ of VC money last week


Native Apps

• Develop native APIs using vendor

• iOS: Objective-C / Cocoa Touch

• Android: “Java”

• BlackBerry: another Java (without “”)

• Symbian: C++

• Etc.

• Main problem: to many platforms, too little time :(


3. 1st experience report


Exercise: write a content-browsing app for DM

• Target platform = iPhone

• Browse content on a DM server

• Show content and metadata

• Full text search

• Recently updated documents (“timeline”)

• Store contextual data on the iPhone


Initial design


3 technologies

• Native iPhone app (Objective-C, Cocoa Touch)

• Web app using jQuery-Mobile

• Portable app using Appcelerator Titanium Mobile


Objective-C: the results

• Took 2 days to learn the basics of Objective-C, Cocoa Touch, XCode

• Took about 3 days for a very basic prototype

• Additional complexity of supporting CMIS

• Unstable, now abandoned

• Code still there: hg.nuxeo.org/mobile/iphone


DEMO


Objective-C: the Good

• Learning a new language is intellectually stimulating :)

• This is good old UNIX, you can use open source libraries in C if you need

• Small ecosystem of open source libraries around iOS


Objective-C: the Bad

• Learning a new language takes time, learning a new IDE even more, and you don’t want to switch from two IDEs too often

• Objective-C feels like I’m back in 1990 (explicit pointer and memory management)

• Only for iOS, as you would guess


jQuery Mobile: the results

• Took 1/2 a day to get a basic demo (browsing, search) running

• Didn’t implement everything that I expected (see Benjamin’s upcoming demo for a similar approach, using iUI)


DEMO


jQuery Mobile: the Good

• Very easy to do on the server

• Fast turnaround thanks to WebEngine

• Easiest deployment option (you don’t need to deploy)


jQuery Mobile: the Bad

• The forward/back buttons are in the way, but you have to use them after looking at a piece of content

• No easy way to develop a tab bar as I had designed

• Not sure it will scale up to more sophisticated applications

• Might use PhoneGap to address some of these points


Appcelerator: the results

• Took about 1 day to learn how to use the platform

• Took about 3 days to create a reasonably good looking, alpha-quality app

• 90% of the time spent on front-end, 10% on back end (JSON REST API with WebEngine)

• Will probably take 2 or 3 more days to make it App Store ready


DEMO


Appcelerator: the Good

• JavaScript much easier to learn than Objective-C

• Specially when you already know JavaScript ;) (or even Java)

• Productivity 2x to 5x higher that with native Cocoa-Touch

• Multi-platform promise seems to work


Appcelerator: the bad

• “IDE” is quirky and unstable

• And not really an IDE actually!

• No debugger

• Another layer of indirection

• Apple doesn’t want you to use it (resolved!)

• As with native apps, provisioning is a PITA


Conclusion of the experiment


Native (Obj-C)

• Not worth of your time, unless you:

• Are (or have) a dedicated iOS developer

• Want to compete on design to make $$ on the App store

• Want to be the first to leverage newly introduced iOS features


Mobile HTML

• The fastest way to get a simple application up and running

• The most multi-platform approach

• Doesn’t provide users with a 100% native look and specially feel

• Doesn’t give you access to all the local features of the device

• Can be complemented with PhoneGap


Appcelerator

• Gives you native look and feel and platform access, with an original but familiar API, at the price of slightly longer development time than HTML

• Supports 2 major platforms (iOS and Android), and soon Blackberry

• Not 100% bug-free, will always lag behind native platform


4. 2nd experience reportBenjamin Jalon


Demonstration

43


Game rules

44

• 2 weeks available

• A real job during the day

• A family life

• => 1 free hour per day

• No iUI knowledge

• JavaScript Newbie

• Goal: Create a web application for Mobile


The Result

45


And on other devices

46


iUI

47

• iUI

• JavaScript / CSS framework

• Extends of HTML standard

• Override links and forms with AJAX

• Update the page with smooth transition

• Don’t need to be a web designer

• Don’t need to be a JavaScript ninja


In the beginning: HTML

• CSS and JavaScript references: let’s rock !<html> <head> <title>Nuxeo DM</title> <link rel="stylesheet" type="text/css" href="/nuxeo/iui/iui.css"/> <link rel="stylesheet" type="text/css" href="/nuxeo/iui/t/default/default-theme.css"/> <script src="/nuxeo/iui/iui.js"></script> </head> <body> <div id="toolBar" class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> <a id="help" class="button" href="#about">?</a> </div> <ul id="home" title="Home" selected="true"> <li><a href="${basePath}/mobile/navigation/root">Navigation</a></li> <li><a href="${basePath}/mobile/search">Saved Search</a></li> <li><a href="${basePath}/mobile/workflow">Tasks</a></li> </ul> </body>

48

Toolbar definition

Content definition


Page definition / simple navigation

• Create a new item under the body

• Title argument is used into the toolbar <div id="test" title="Test"> HELLO </div>

• An item with href value is #idPage, where idPage is the id of the root of your page

<div id="main" title="Main Page"> <a href=”#test”>Navigate to Test Page</a> </div>

49


Having a page as iPhone rendering

• For a list with links <ul><li><a>

• For grouped information <div id="pageId" title="Details" class="panel"> <h1>Sub-Title1</h1> <fieldset> <div class="row"> <label>label1</label> <span>value1</span> </div> <div class="row"> <label>label2</label> <span>value2</span> </div> etc... </fieldset> <h1>Sub-Title2</h1> <fieldset> <div class="row"> <label>label2</label> etc... 50


Other linking

• linking to resources not in the DOM

<a href="nuxeo/mobile/navigation/root">Navigation</a>

• resource is added at the end of the body, the last page declared is displayed

• linking to the next page<li><a href="nuxeo/mobile/navigation/page" target="_replace">Next Documents...</a></li>

• parent of the item is replaced by the result of the request

51


Conclusion

• First connexion needs:

• 15KB for CSS

• 7KB for images

• 50KB for scripts

• And document.... 2KB

• For others pages between 210Bytes and 5KB

• We can do better

• Compacting JavaScripts

• Refactoring the nx.js script52


Conclusion

• iUI development is really powerful and easy to understand but means many treatments are client side

• With WebEngine, the modification/deployment/test cycle is really fast

• We can create over this web application an hybrid Application

• Using the camera library, manipulate downloaded files, etc...

53


Just one more thing...

54


WebEngine Mobile project

55

• Automatic redirection to Mobile App• Repository Navigation• Document Modification• File download• Push your geolocation into your docs• Reuse your faceted search• Accept/Deny your tasks• Delete a document


56



56

0$



56

0$Google code: https://code.google.com/p/nuxeo-webengine-mobile/

Soon released and delivered through Nuxeo Marketplace



https://code.google.com/p/nuxeo-webengine-mobile/

https://code.google.com/p/nuxeo-webengine-mobile/

5. Future Work


Generic document browsing App

• New web mobile browsing module will be finished in December and put on the Nuxeo Marketplace

• Companion iOS App to be submitted on the App Store simultaneously (same for Android)

• Work on advanced native App will continue to provide better disconnected mode experience


Business-specific apps

• We’re ready to work with our customers and partners on business-specific apps

• Choice between web app and native app is up to the customer, and will depend on features, devices used, etc.

• Will leverage our business API (Content Automation) + develop a specific framework to ease development


More info

• Watch http://blogs.nuxeo.com/


http://blogs.nuxeo.com

http://blogs.nuxeo.com

nuxeo world session: mobile ecm apps with nuxeo ep

Technology

mobile web sites

web oriented

web apps pure html

web services

web apps multiplatform

page web apps applications

sofea web apps crossplatforms

sproutcore mobile