Nuxeo World Session: Mobile ECM Apps with Nuxeo EP

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

Mobile ECM Apps
with 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=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 ﬁnger! (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 landscape
Mobile 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 speciﬁc API

• You can try to make money on the App
Store (not applicable here)
• But: Need platform-speciﬁc training, longer
development time


A wide range of options
Web Apps Native Apps
• Pure HTML (with ad- • Cross-platforms, “web
hoc CSS) oriented”, frameworks
• HTML enhanced with • Cross-platforms,
jQuery “native oriented”,
frameworks
• One Page or SOFEA
web apps • Native apps

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-speciﬁc 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)


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


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 ﬁrst 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 report
Benjamin Jalon


Demonstration

43


Game rules
• 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
44


The Result

45


And on other devices

46


iUI
• 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
47


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> Toolbar deﬁnition
<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>
Content deﬁnition
<li><a href="${basePath}/mobile/search">Saved Search</a></li>
<li><a href="${basePath}/mobile/workflow">Tasks</a></li>
</ul>
</body>

48


Page deﬁnition / 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">
<span>value2</span>
</div>
etc...
</fieldset>
<h1>Sub-Title2</h1>
<fieldset>
<div class="row">
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 script
52


Conclusion
• iUI development is really powerful and easy to
understand but means many treatments are client
side
• With WebEngine, the modiﬁcation/deployment/test
cycle is really fast
• We can create over this web application an hybrid
Application
• Using the camera library, manipulate downloaded ﬁles,
etc...
53


Just one more thing...

54


WebEngine Mobile project
• Automatic redirection to Mobile App
• Repository Navigation
• Document Modiﬁcation
• File download
• Push your geolocation into your docs
• Reuse your faceted search
• Accept/Deny your tasks
• Delete a document
55



56



0$

56



0$
Google code: https://code.google.com/p/nuxeo-webengine-mobile/
Soon released and delivered through Nuxeo Marketplace

56


5. Future Work


Generic document
browsing App
• New web mobile browsing module will be
ﬁnished 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/


Nuxeo World Session: Mobile ECM Apps with Nuxeo EP

Nuxeo World Session: Mobile ECM Apps with Nuxeo EP

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(14)

Similar to Nuxeo World Session: Mobile ECM Apps with Nuxeo EP

Similar to Nuxeo World Session: Mobile ECM Apps with Nuxeo EP(20)

More from Nuxeo

More from Nuxeo(20)

Recently uploaded

Recently uploaded(20)

Nuxeo World Session: Mobile ECM Apps with Nuxeo EP