Bridging the gap between mobile platforms

@AtreyeeMaiti Atreyee@anand_agrawal anandagrawal84

Discover the new framework ‘Calatrava’ for Cross platform collaboration

Where mobile app market is going?

▪ Opens up a new channel

▪ Mobile first strategy

Where to start?

How to start?

▪ Native?

▪ Mobile web?

Trade offs

Native Apps

Affordability

User Experience

Web App

How about off the shelf cross platform?

Lots of promises▪ Code reusability

▪ Faster and easier development

▪ Easy to test

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.

What are typical app components?

▪ UI

▪ Application Logic (Presentation/Business logic/Navigation)

▪ Local Storage

▪ Web services

What are the reusable components?

iPhone

Android

Web

UI Client logic

Back-end

Hybrid Approach

Native Apps

Affordability

User Experience

Native where requiredShared everywhere else

Web App

How is it different from cross platform?

▪ No restriction to APIs / features exposed by framework

▪ Easier extensibility

▪ Easy to plugin native components wherever required

Calatrava

Available at: http://calatrava.github.com/

Credits: Giles Alexander

Overview of calatrava

13

BRIDGE

NATIVE

CODE

SHARED LOGIC

[Controllers, models, repositories]

KERNEL (javascript)

BRIDGE (javascript)

[shared native objects]

SHELL (haml, css, javascript,native where necessary)

[page objects, layouts]

kernel app plugins spec

shell pages

assets lib

droid

ios

web

Basic structure of a calatrava project

Handpicking native where required

Page Object

KernelBridge

ClickTrigger event

Lookup for convention basedcontroller

JS evaluator

Page render called with appropriate data

Invoke render with data

Results shown

Sample flow

Sample flow

Page Object

Kernel

Bridge

KernelBridge

Page Object

Bridge

Click

Trigger event

Lookup for convention basedcontroller

JS evaluator

Ajax call to fetch results

Response

fetch results

JS evaluatorPage render called with appropriate data

Invoke render with data

Results shown

DEMO

Plugins

▪ Mechanism to use native features cross platform.

▪ Need to be registered with calatrava

▪ Convention based

Tech stack

▪ Coffee-script

▪ Haml

▪ Sass

▪ Java

▪ Objective C

▪ Jasmine

▪ Cucumber

▪ Rake

}}} }

Kernel + Shared HTML UI

Native UI, plugin implementations

Testing

Build

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

Platforms supported

When not to use calatrava

UI AL

UI AL

Services

Shared logic

Roadmap…

▪ Calatrava is evolving

▪ Plugins are being actively developed

▪ Generating controllers, pages for new features

▪ Anything that you could think of?

Frameworks implementing Hybrid approach

▪ Kirinjs

▪ Cordova

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

Questions??