4. Gartner: mobile apps and
tablets are HOT
Source: http://blogs.techrepublic.com.com/10things/?p=1871
Monday, November 22, 2010
5. 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.
Monday, November 22, 2010
6. 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.
Monday, November 22, 2010
7. New opportunities
• Just use your finger! (ex: Zosh)
• Geolocation
• Camera
• Ex: Barcode scanning
• Other sensors?
Monday, November 22, 2010
8. 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
Monday, November 22, 2010
10. 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
Monday, November 22, 2010
11. 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
Monday, November 22, 2010
12. 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
Monday, November 22, 2010
13. 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
Monday, November 22, 2010
15. “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
Monday, November 22, 2010
16. 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.
Monday, November 22, 2010
17. Example:
mobile gmail
Monday, November 22, 2010
18. • 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
Monday, November 22, 2010
19. • 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
Monday, November 22, 2010
20. 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 :(
Monday, November 22, 2010
22. 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
Monday, November 22, 2010
24. 3 technologies
• Native iPhone app (Objective-C, Cocoa
Touch)
• Web app using jQuery-Mobile
• Portable app using Appcelerator Titanium
Mobile
Monday, November 22, 2010
25. 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
Monday, November 22, 2010
27. 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
Monday, November 22, 2010
28. 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
Monday, November 22, 2010
29. 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)
Monday, November 22, 2010
31. 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)
Monday, November 22, 2010
32. 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
Monday, November 22, 2010
33. 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
Monday, November 22, 2010
36. 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
Monday, November 22, 2010
37. 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
Monday, November 22, 2010
39. 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
Monday, November 22, 2010
40. 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
Monday, November 22, 2010
41. 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
Monday, November 22, 2010
44. 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
Monday, November 22, 2010
46. And on other devices
46
Monday, November 22, 2010
47. 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
Monday, November 22, 2010
49. 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
Monday, November 22, 2010
50. 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
Monday, November 22, 2010
51. 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
Monday, November 22, 2010
52. 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
Monday, November 22, 2010
53. 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
Monday, November 22, 2010
55. WebEngine Mobile project
• 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
55
Monday, November 22, 2010
58. WebEngine Mobile project
0$
Google code: https://code.google.com/p/nuxeo-webengine-mobile/
Soon released and delivered through Nuxeo Marketplace
56
Monday, November 22, 2010
60. 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
Monday, November 22, 2010
61. 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
Monday, November 22, 2010
62. More info
• Watch http://blogs.nuxeo.com/
Monday, November 22, 2010