This document discusses hybrid mobile app development with Calatrava, an open source framework that allows building apps that share code and user interfaces across platforms. It outlines the benefits of a hybrid approach over purely native or web apps. Calatrava uses a "bridge" architecture to connect shared code to platform-specific implementations. The document describes Calatrava's project structure and technologies used like CoffeeScript, and provides an overview of key concepts like pages, the kernel, and plugins. It concludes with instructions for getting started with Calatrava.

1. Hybrid Mobile Apps with Calatrava
Vivek Jain

2. Development
Approaches

3. Native app for each platform
User Experience
Separate teams/skillset
Device capabilities
App Store
Expensive
High maintenance

4. Web App for all platforms
Single team/skillset
Limited device
capabilities
Affordable
Standard UX
No App Store

5. Web AppNative Apps
Affordability
User Experience

6. Product Vs Channel

7. Ultimate Goal
UserExperience
Line of deployment
Awesome apps

8. Implementation Strategy
Laser Cover-your-bases
UserExperience
Line of deployment

9. Native Apps
Affordability
User Experience
Single team
Native where required
Shared everywhere else
Hybrid Approach
Web App

10. Separated Presentation
BodyUI

11. Hybrid UI

12. Hybrid UI

13. Enter Calatrava

15. Bridge KernelPage
BodyUI
Bridging to and from Native
JavaScript

16. Bridge KernelDevice specific
code
Not just for UI

17. Allows Incremental release strategy
Release 1 Release 2
iOS
Androi
d
Web
iOS
Androi
d
Web

18. Affordability
User Experience
Evolve incrementally

19. Extend existing app
Native Only Native + Shared

20. 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

21. Platforms supported

22. Structure of a
Calatrava Project

23. kernel
app
plugins
spec
shell
pages
assets
lib
droid
ios
web

24. Pages - logical screen on the app
• View Controller on iOS
• Activity on Android
• div on Mobile Web

25. Pages - manages the UI
• bind to events
• extract data
• render data

26. Bridge
• API for kernel to interact with native
• calatrava.bridge.
• pages
• changePage
• request
• plugins

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

28. Shell
• optional HTML UI for sharing
• contains pages in HTML and JS
• recommend to start with entire UI in
shell• Web App for free

29. Plugins
• for device specific code
• single interface in kernel
• specific implementation for each platform

30. Tech Used
• coffee-script
• jasmine-node
• haml
• rake (for build scripts)

31. Getting Started
gem install calatrava
calatrava create <project-name>
Home: calatrava.github.com

32. Demo

33. 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