bridging the gap between mobile platforms - jsconf asia
DESCRIPTION
Bridging the gap between mobile platforms.TRANSCRIPT
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??