Bridging the gap between mobile platforms - jsconf asia
-
Upload
anand-agrawal -
Category
Technology
-
view
702 -
download
2
description
Transcript of Bridging the gap between mobile platforms - jsconf asia
![Page 1: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/1.jpg)
Bridging the gap between mobile platforms
Anand Agrawal
Discover the new framework ‘Calatrava’ for building Hybrid apps
![Page 2: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/2.jpg)
About me
@anand_agrawal
anandagrawal84
▪ ThoughtWorks, Singapore
▪ Full stack engineer
▪ Co-founder of ideaboardz
![Page 3: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/3.jpg)
Tech
![Page 4: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/4.jpg)
And I …
![Page 5: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/5.jpg)
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
![Page 6: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/6.jpg)
Where mobile app market is going?
▪ Opens up a new channel
▪ Mobile first strategy to tap into the segment
![Page 7: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/7.jpg)
Where to start?
![Page 8: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/8.jpg)
Devices
![Page 9: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/9.jpg)
Challenges
▪ Native?
▪ Mobile web?
![Page 10: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/10.jpg)
Trade offs
Affordability
User Experience
Native apps
Web App
![Page 11: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/11.jpg)
How about off the shelf cross platform?
Lots of promises▪ Code reusability
▪ Faster and easier development
▪ Easy to test
![Page 12: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/12.jpg)
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.
![Page 13: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/13.jpg)
![Page 14: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/14.jpg)
What are typical app components?
▪ UI
▪ Application Logic (Presentation/Business logic/Navigation)
▪ Local Storage
▪ Web services
![Page 15: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/15.jpg)
What are typical app components?
UIApplicatio
n Logic
Local Store
Web services
![Page 16: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/16.jpg)
What are the reusable components?
iPhone
Android
Web
UI Client logic
Back-end
![Page 17: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/17.jpg)
Calatrava
Available at: http://calatrava.github.com/
Credits: Giles Alexander
![Page 18: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/18.jpg)
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]
![Page 19: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/19.jpg)
Trade offs
Affordability
User Experience
Native apps
Web App
Native where requiredShared everywhere else
Hybrid App
![Page 20: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/20.jpg)
kernel app plugins spec
shell pages
assets lib
droid
ios
web
Basic structure of a calatrava project
![Page 21: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/21.jpg)
Handpicking native where required
![Page 22: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/22.jpg)
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
![Page 23: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/23.jpg)
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
![Page 24: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/24.jpg)
DEMO
![Page 25: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/25.jpg)
Code athttps://github.com/priyaaank/bloodtorrent
![Page 26: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/26.jpg)
Plugins
▪ Mechanism to use native features cross platform.
▪ Registered with calatrava
▪ Used based on convention based
![Page 27: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/27.jpg)
How is it different from cross platform?
▪ No restriction to APIs / features exposed by framework
▪ Easier extensibility
▪ Easy to plugin native components wherever required
![Page 28: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/28.jpg)
Tech stack
▪ Coffee-script
▪ Haml
▪ Sass
▪ Java
▪ Objective C
▪ Jasmine
▪ Cucumber
▪ Rake
}}} }
Kernel + Shared HTML UI
Native UI, plugin implementations
Testing
Build
![Page 29: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/29.jpg)
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
![Page 30: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/30.jpg)
Platforms supported
![Page 31: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/31.jpg)
When not to use calatrava
UI AL
UI AL
Services
Shared logic
![Page 32: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/32.jpg)
Roadmap…
▪ Calatrava is evolving
▪ Plugins are being developed
▪ Generating controllers, pages for new features (like rails generator)
▪ Anything that you could think of?
![Page 33: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/33.jpg)
Frameworks implementing Hybrid approach
▪ Kirinjs
▪ Cordova
![Page 34: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/34.jpg)
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
![Page 35: Bridging the gap between mobile platforms - jsconf asia](https://reader038.fdocuments.in/reader038/viewer/2022103109/5462d5fdaf7959c83d8b8559/html5/thumbnails/35.jpg)
Questions??