JSE 2011

with Titanium and PhoneGap
Jan. 20 2011 - Stefane Fermigier - Nuxeo

Mobile ECM Apps

Friday, January 21, 2011

• What? And why? • How? • Experience reports • Future work
Friday, January 21, 2011

Why content-enabled enterprise mobile apps?

Friday, January 21, 2011

• • •

Open source ECM (Enterprise Content Management) vendor, since 2000 50 people, in Paris, Boston and San Francisco Provides and supports a Java-based, modular, extensible platform for ECM, as well as Document Management, Digital Asset Management and Case Management applications

Friday, January 21, 2011

Gartner: mobile apps and tablets are HOT

Source: http://blogs.techrepublic.com.com/10things/?p=1871
Friday, January 21, 2011

” “Delivering these apps gets complicated due to the selection of platforms. January 21.Gartner again (but emphasis is mine) • • • • Friday. but these devices can be used for inspections. Think of mobile design points.” “The PC era is over. documentation and training.” . 2011 “Enterprise apps will need to be designed for the tablet.” “Marketing will drive a lot of projects to utilize tablets. image capture. surveys.

2011 . Friday. January 21.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.

January 21.New opportunities • Just use your finger! (ex: Zosh) • Geolocation • Camera • Ex: Barcode scanning • Other sensors? Friday. 2011 .

.Don’t fight.. January 21. 2011 . Friday. but 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 • .

Technological options Mobile apps or mobile web? Friday. January 21. 2011 .

January 21.Our Focus: Smart Phones and Tablets. 2011 . for Enterprise apps Friday.

NET • .Web Apps vs. Native Apps • Objective-C • Java / Dalvik • C++ • . vs... January 21. Friday. 2011 .

January 21. 2011 .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 • And: Limited access to device APIs Friday.

longer development time.Native Apps • Optimized for a single platform capabilities • Tempting business model (App Store) • But: Need platform-specific training. 2011 • • Optimal user experience Access to sensors and proprietary APIs . January 21. too many platforms Friday.

2011 • “Pure” Native apps Note: 4 out of 6 are JavaScript platforms . “native UI oriented”. “web • Cross-platforms.Actually there are more options Web Apps Native Apps • Pure HTML (with adhoc CSS) • Cross-platforms. frameworks oriented”. January 21. frameworks • HTML “enhanced” with jQuery web apps • One Page or SOFEA Friday.

we can do better for a very tiny price Friday.“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. 2011 . January 21.

Example: mobile Wikipedia Friday. 2011 . January 21.

“Enhanced” HTML • • • HTML content delivered with AJAX requests using “link hijacking” techniques (using usually a bit of jQuery love) CSS and JS tricks to emulate native UI Libraries: iUI. 2011 . focus on portability Friday.. jQuery Mobile. full-featured jQuery Mobile: recent project. January 21.. jQTouch. • • iUI: already mature.

Dojo.) are loaded only once. Sencha Touch.. css. js. then all interaction with server takes place as web services (usually JSON RPC or other “kinda restish” API) (Too?) Many frameworks.1-page Web apps • • • Friday. January 21.. still immature: GWT. . 2011 Applications built using the SOFEA paradigm (Service-Oriented Front-End Architecture) Web assets (html. SproutCore Mobile. etc.

2011 . January 21.Example: mobile gmail Friday.

• Embeds your web app into a custombuilt web browser • Removes URL and bottom tab bars • Extends the browser 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 Friday. 2011 . January 21.

• Initially similar to PhoneGap (browser API extensions) • Then refocussed on providing a JS-based API to native UI and platform APIs BlackBerry money • 3 supported platforms: iOS. 2011 . raised 9 M$ of VC Friday. Android and • Open source startup. January 21.

2011 • • • • • iOS: Objective-C / Cocoa Touch Android: “Java” BlackBerry: another Java (without “”) Symbian: C++ Etc. too little time :( . Main problem: to many platforms. January 21.“True” Native Apps • Develop native APIs using vendor SDKs • Friday.

January 21. 2011 .Experience report Friday.

2011 .Challenge • Write an (iPhone) app to browse and • Experiment with several technologies interact with content managed by a Nuxeo DM document management server Friday. January 21.

“Specs” • • • • • • Friday. Office. 2011 Initial target platform = iPhone Browse content on a Document Management server Show content (including PDF.) and metadata Full text search Recently updated documents (“timeline”) Store contextual data on the iPhone .. January 21..

2011 .Initial design Friday. January 21.

4 technologies • Native iPhone app (Objective-C + Cocoa Touch) • Web App using jQuery Mobile • 1-Page App using jQuery Mobile + backbone. 2011 . January 21.js (Web or PhoneGap) Mobile • Portable app using Appcelerator Titanium Friday.

Cocoa Touch.org/mobile/iphone Friday.nuxeo. 2011 . January 21. now abandoned • Code still there: hg. XCode • Took about 3 days for a very basic prototype • Unstable.Objective-C: the results • Took 2 days to learn the basics of ObjectiveC.

January 21.DEMO Friday. 2011 .

you can use open source libraries in C if you need around iOS • Small ecosystem of open source libraries Friday. January 21. 2011 .Objective-C: the Good • Learning a new language is intellectually stimulating :) • This is good old UNIX.

learning • Objective-C feels like I’m back in 1990 • Only for iOS. 2011 a new IDE even more. and you don’t want to switch from two IDEs too often (explicit pointer and memory management) . January 21. as you would guess Friday.Objective-C: the Bad • Learning a new language takes time.

2011 . AJAX magic managed by the framework Friday. January 21.jQuery Mobile: the results • Took 1/2 a day to get a basic demo (browsing. search) running • Standard HTML pages generated on the server.

DEMO Friday. 2011 . January 21.

January 21. 2011 .jQuery Mobile: the Good • Very easy to do on the server • Fast turnaround thanks to Nuxeo WebEngine • Easiest deployment option (you don’t need to deploy on the phones!) Friday.

jQuery Mobile: the Bad • • The browser’s forward/back buttons are in the way. 2011 . but you have to use them after looking at a piece of content No easy way to develop a tab bar as in my design (and there is already the browser tab bar on the way) Friday. January 21.

2011 .js) Friday. built as a 1-page app using jQuery Mobile and backbone.js Only interaction with the server (after initial assets loading) is via JSON-RPC HTML generated on the client (mustache. January 21.Variant: as a 1-page app • • • Exact same application.

And as a PhoneGap App • • • • Friday. January 21. 2011 It’s trivial to convert the whole app into a native App using PhoneGap The browser URL bar and navigation buttons disappear But now there is no way to come back from a PDF or image view Have to rely on third-party PhoneGap plugins or develop our own (-> back to native) .

10% on back end (JSON REST API with WebEngine) make it App Store ready • Will probably take 2 or 3 more days to Friday. alpha-quality app • 90% of the time spent on front-end. January 21.Appcelerator: the results • Took about 1 day to learn how to use the platform • Took about 3 days to create a reasonably good looking. 2011 .

January 21. 2011 .Friday.

2011 . January 21.Friday.

) (or even Java) • Productivity 2x to 5x higher that with native Cocoa-Touch. 2011 .Appcelerator: the Good • JavaScript much easier to learn than Objective-C • Specially when you already know JavaScript . January 21. slightly lower than SOFEA • Multi-platform promise seems to work Friday.

2011 “IDE” is quirky and unstable • • And not really an IDE actually! Might change with the Aptana acquisition No debugger.Appcelerator: the bad • • • • • Friday. January 21. longer code/compile/deploy turnaround Slower than native Another layer of indirection Apple doesn’t want you to use it (resolved!) .

2011 .Conclusion of the experiment Friday. January 21.

. which was not our focus Friday..Native (Obj-C) • Not worth of your time. 2011 . January 21. 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 (5) • • • • • • Friday. 2011 The fastest way to get a simple application up and running (no App Store hassles) The most multi-platform approach But: 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 Specially wrt document viewing Can be complemented with PhoneGap . January 21.

with an original but familiar API. 2011 . will always lag behind native platform. January 21.Appcelerator • Gives you native look and feel and • Supports the platforms that make business sense to us platform access. at the price of slightly longer development time than pure HTML • Not 100% bug-free. slower than native Friday.

preference. Titanium for native goodness) you can probably share some code • • Friday. not language) felt initially very ≠ between HTML5 and Titanium But if you do two projects in parallel (HTML5 for maximal portability. models..) And maybe some of the interaction stuff too .Additional insights • • JavaScript programming (API. January 21. 2011 Utility functions and low-level stuff (network..

One more thing. January 21.. Friday. 2011 ..

These apps have not been (eventually) written in JavaScript but in CoffeeScript Friday. 2011 . January 21.

January 21. inspired by Ruby and Python • Much (IMHO) easier to read than JS • Semantically. JavaScript (only “the good parts”).. 2011 .CoffeeScript? • Alternative syntax (syntactic sugar) for • Gives: classes. list comprehensions. “->” notation. it’s still JavaScript though • Cons: no IDE nor debugger support Friday..

January 21. 2011 .Code Sample Friday.

Conclusion and Future Work Friday. 2011 . January 21.

etc.4. Friday. better disconnected mode experience. 2011 .1 release Companion iOS App (based on Titanium) currently under review on the App Store Work will continue to provide access to more Nuxeo DM features.Generic document browsing App • • • New web mobile browsing module to be added to Nuxeo Markeplace and Nuxeo DM 5. January 21.

2011 .Business-specific apps • We’re ready to work with our customers and partners on business-specific apps • Choice between web apps and native (Titanium) apps is up to the customer. and will depend on features. (Content Automation) + develop a specific framework to ease development • We intend to leverage our business API Friday. etc. January 21. devices used.

More info • Watch http://blogs.nuxeo.com/sfermigier/nuxeoFriday.com/ • Source code: • https://bitbucket. January 21. 2011 .org/sfermigier/nuxeomobile-web mobile • https://github.