Hybrid Mobile Apps with Calatrava

Vivek Jain

Development

Approaches

Native app for each platform

User Experience

Separate teams/skillset

Device capabilities

App Store

Expensive

High maintenance

Web App for all platforms

Single team/skillset

Limited device capabilities

Affordable

Standard UX

No App Store

Web AppNative Apps

Affordability

User Experience

Product Vs Channel

Ultimate Goal

Use

r Exp

eri

en

ce

Line of deployment

Awesome apps

Implementation Strategy

Laser Cover-your-bases

Use

r Exp

eri

en

ceLine of deployment

Native Apps

Affordability

User Experience

Single teamNative where requiredShared everywhere else

Hybrid Approach

Web App

Separated Presentation

BodyUI

Hybrid UI

Hybrid UI

Enter Calatrava

Bridge KernelPage

BodyUI

Bridging to and from Native

JavaScript

Bridge KernelDevice specific code

Not just for UI

Allows Incremental release strategy

Release 1 Release 2

iOS

Android

Web

iOS

Android

Web

Affordability

User Experience

Evolve incrementally

Extend existing app

Native Only Native + Shared

When to use

• complex client-side business logic

• when mobile is a channel• not a pure UI app (like a game)

• web experience is not good enough• cover-you-bases implementation strategy• additional features in an existing app

Platforms supported

Structure of a

Calatrava Project

kernelapppluginsspec

shellpages

assetslib

droidiosweb

Pages - logical screen on the app

• View Controller on iOS

• Activity on Android

• div on Mobile Web

Pages - manages the UI

• bind to events

• extract data

• render data

Bridge

• API for kernel to interact with native

• calatrava.bridge.• pages• changePage• request• plugins

Kernel

• business & flow/interaction logic• features under kernel/app• gets references to pages from the bridge • specs under kernel/spec

Shell

• optional HTML UI for sharing

• contains pages in HTML and JS

• recommend to start with entire UI in shell• Web App for free

Plugins

• for device specific code

• single interface in kernel• specific implementation for each platform

Tech Used

• coffee-script

• jasmine-node

• haml

• rake (for build scripts)

Getting Started

gem install calatravacalatrava create <project-name>

Home: calatrava.github.com

Demo

Thank You

vivekjain10@gmail.com @vivekjain10

References• martinfowler.com/articles/multiMobile/• martinfowler.com/articles/mobileImplStrategy.html• calatrava.github.com

Questions?

Join ThoughtWorks: join.thoughtworks.com