1. Bridging the gap between
mobile platforms
@AtreyeeMaiti Atreyee
@anand_agrawal anandagrawal84
Discover the new framework ‘Calatrava’ for Cross platform collaboration

2. Where mobile app market is going?
▪ Opens up a new channel
▪ Mobile first strategy

3. Where to start?

4. How to start?
▪ Native?
▪ Mobile web?

5. Trade offs
Native Apps
Affordability
User Experience
Web App

6. How about off the shelf cross platform?
Lots of promises
▪ Code reusability
▪ Faster and easier development
▪ Easy to test

7. How about off the shelf cross platform?
BUT…
▪ May just mimic the native control’s look
▪ May limit the control on the native controls
▪ Dependency on 3rd party for new features
Hence, Sub-optimal User Experience.

8. What are typical app components?
▪ UI
▪ Application Logic (Presentation/Business logic/Navigation)
▪ Local Storage
▪ Web services

9. What are the reusable components?
iPhone
Android
Web
UI Client logic Back-end

10. Hybrid Approach
Native Apps
Affordability
User Experience
Native where required
Shared everywhere else
Web App

11. How is it different from cross platform?
▪ No restriction to APIs / features exposed by framework
▪ Easier extensibility
▪ Easy to plugin native components wherever required

12. Calatrava
Available at: http://calatrava.github.com/
Credits: Giles Alexander

13. Overview of calatrava
13
B
R
I
D
G
E
N
A
T
I
V
E
C
O
D
E
S
H
A
R
E
D
L
O
G
I
C
[Controllers, models,
repositories]
KERNEL (javascript)
BRIDGE (javascript)
[shared native objects]
SHELL (haml, css, javascript,
native where necessary)
[page objects, layouts]

14.  kernel
 app
 plugins
 spec
 shell
 pages
 assets
 lib
 droid
 ios
 web
Basic structure of a calatrava project

15. Handpicking native where required

16. Page Object KernelBridge
Click
Trigger
event
Lookup for
convention based
controller
JS evaluator
Page render called with
appropriate data
Invoke render
with data
Results shown
Sample flow

17. Sample flow
Page Object
Kernel
Bridge
KernelBridge
Page Object Bridge
Click
Trigger
event
Lookup for
convention based
controller
JS evaluator
Ajax call to fetch results
Response
fetch
results
JS evaluatorPage render called with
appropriate data
Invoke render
with data
Results shown

18. DEMO

19. Plugins
▪ Mechanism to use native features cross platform.
▪ Need to be registered with calatrava
▪ Convention based

20. Tech stack
▪ Coffee-script
▪ Haml
▪ Sass
▪ Java
▪ Objective C
▪ Jasmine
▪ Cucumber
▪ Rake
}
}
}
}
Kernel + Shared HTML UI
Native UI, plugin implementations
Testing
Build

21. Strengths
Developer’s perspective:
 Structure to quickly build
features, share code
 Testability
 Needs stronger javascript
skills rather than objective c /
java etc
Business perspective:
 Hook into existing native app
 Free mobile web app
 Ease of adding new feature
 Mobile as a channel, less feature parity
 Time to market same for all platforms

22. Platforms supported

23. When not to use calatrava
UI AL
UI AL
Services
Shared
logic

24. Roadmap…
▪ Calatrava is evolving
▪ Plugins are being actively developed
▪ Generating controllers, pages for new features
▪ Anything that you could think of? 

25. Frameworks implementing Hybrid approach
▪ Kirinjs
▪ Cordova

26. References
▪ http://martinfowler.com/articles/multiMobile/
▪ http://martinfowler.com/articles/mobileImplStrategy.html
▪ https://github.com/calatrava/calatrava/wiki
▪ http://overwatering.org/blog/2012/10/announcing-calatrava/
▪ https://speakerdeck.com/priyaaank/cross-platform-development-
bridging-the-gap

27. Questions??