Bridging the gap between mobile platforms - jsconf asia

Bridging the gap between mobile platforms

Anand Agrawal

Discover the new framework ‘Calatrava’ for building Hybrid apps

About me

@anand_agrawal

anandagrawal84

▪ ThoughtWorks, Singapore

▪ Full stack engineer

▪ Co-founder of ideaboardz

Tech

And I …

What’s in it for you?

▪ Native v/s Web v/s Cross platform

▪ How to get the best out of cross platform

▪ How Calatrava helps to get the best of both worlds

▪ When (not) to go hybrid

Where mobile app market is going?

▪ Opens up a new channel

▪ Mobile first strategy to tap into the segment

Where to start?

Devices

Challenges

▪ Native?

▪ Mobile web?

Trade offs

Affordability

User Experience

Native apps

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 typical app components?

UIApplicatio

n Logic

Local Store

Web services

What are the reusable components?

iPhone

Android

Web

UI Client logic

Back-end

Calatrava

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

Credits: Giles Alexander

Overview of calatrava

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]

Trade offs

Affordability

User Experience

Native apps

Web App

Native where requiredShared everywhere else

Hybrid App

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

Code athttps://github.com/priyaaank/bloodtorrent

Plugins

▪ Mechanism to use native features cross platform.

▪ Registered with calatrava

▪ Used based on convention based

How is it different from cross platform?

▪ No restriction to APIs / features exposed by framework

▪ Easier extensibility

▪ Easy to plugin native components wherever required

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 developed

▪ Generating controllers, pages for new features (like rails generator)

▪ 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

▪ https://github.com/priyaaank/bloodtorrent

▪ http://overwatering.org/blog/2012/10/announcing-calatrava/

▪ https://speakerdeck.com/priyaaank/cross-platform-development-bridging-the-gap

Questions??