Downloaded 29 times
![Overview of calatrava
SHELL (haml, css, javascript,
native where necessary)
[page objects, layouts]
N
A
T
I
V
E
C
O
D
E
B
R
I
D
G
E
S
H
A
R
E
D
KERNEL (javascript)
[Controllers, models,
repositories]
L
O
G
I
C
BRIDGE (javascript)
[shared native objects]](https://image.slidesharecdn.com/calatrava-jsconfasia-131128025745-phpapp01/85/Bridging-the-gap-between-mobile-platforms-jsconf-asia-18-320.jpg?cb=1385607540)
Uploaded byAnand Agrawal
Bridging the gap between mobile platforms - jsconf asia
Bridging the gap between mobile platforms .
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Bridging the gap between mobile platforms - jsconf asia
- 1. Bridging the gapbetween mobile platforms Discover the new framework ‘Calatrava’ for building Hybrid apps Anand Agrawal
- 2. About me ▪ ThoughtWorks,Singapore ▪ Full stack engineer ▪ Co-founder of ideaboardz anandagrawal84 @anand_agrawal
- 3.
- 4.
- 5. What’s in itfor 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
- 6. Where mobile appmarket is going? ▪ Opens up a new channel ▪ Mobile first strategy to tap into the segment
- 7.
- 8.
- 9.
- 10. Trade offs Web App Affordability Nativeapps User Experience
- 11. How about offthe shelf cross platform? Lots of promises ▪ Code reusability ▪ Faster and easier development ▪ Easy to test
- 12. How about offthe 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.
- 14. What are typicalapp components? ▪ UI ▪ Application Logic (Presentation/Business logic/Navigation) ▪ Local Storage ▪ Web services
- 15. What are typicalapp components? Local Store UI Application Logic Web services
- 16. What are thereusable components? UI iPhone Android Web Client logic Back-end
- 17.
- 18. Overview of calatrava SHELL(haml, css, javascript, native where necessary) [page objects, layouts] N A T I V E C O D E B R I D G E S H A R E D KERNEL (javascript) [Controllers, models, repositories] L O G I C BRIDGE (javascript) [shared native objects]
- 19. Native where required Sharedeverywhere else Trade offs Hybrid App Web App Affordability Native apps User Experience
- 20. Basic structure ofa calatrava project kernel app plugins spec shell pages assets lib droid ios web
- 21. Handpicking native whererequired
- 22. Sample flow Lookup for conventionbased controller Click Trigger event Page Object Bridge Invoke render with data Results shown JS evaluator Kernel Page render called with appropriate data
- 23. Sample flow Click Page Object JSevaluator Bridge Trigger event Lookup for convention based controller Kernel Ajax call to fetch results fetch results Bridge Response Invoke render with data Page Object Results shown Bridge Page render called with appropriate data Kernel JS evaluator
- 24.
- 25.
- 26. Plugins ▪ Mechanism touse native features cross platform. ▪ Registered with calatrava ▪ Used based on convention based
- 27. How is itdifferent from cross platform? ▪ No restriction to APIs / features exposed by framework ▪ Easier extensibility ▪ Easy to plugin native components wherever required
- 28. Tech stack ▪ Coffee-script ▪Haml ▪ Sass ▪ Java ▪ Objective C ▪ Jasmine ▪ Cucumber ▪ Rake } } } } Kernel + Shared HTML UI Native UI, plugin implementations Testing Build
- 29. Strengths Developer’s perspective: Business perspective: Structure to quickly build features, share code Testability Needs stronger javascript skills rather than objective c / java etc 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
- 30.
- 31. When not touse calatrava UI AL Services UI AL Shared logic
- 32. Roadmap… ▪ Calatrava isevolving ▪ Plugins are being developed ▪ Generating controllers, pages for new features (like rails generator) ▪ Anything that you could think of?
- 33. Frameworks implementing Hybridapproach ▪ Kirinjs ▪ Cordova
- 34. 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-bridgingthe-gap
- 35.
Editor's Notes
- #8 Cross platform issues: In certain cases the access to hardware components and platform features is dependent on the support from the toolkit. Additionally, fragmentation can be a beast to tackle in these cases as a developer may have only limited access to underlying native platform. PureMobile web issues:impedance to navigate an app in browser. Additionally, having an app in an app store adds a lot of branding to a business, which is sorely missed in this case. However mobile web is emerging as a great add-on for a business with apps; since it is handy for tactical queries while app can serve as a rich engagement point for a customer.
- #11 Cross platform issues: In certain cases the access to hardware components and platform features is dependent on the support from the toolkit. Additionally, fragmentation can be a beast to tackle in these cases as a developer may have only limited access to underlying native platform. PureMobile web issues:impedance to navigate an app in browser. Additionally, having an app in an app store adds a lot of branding to a business, which is sorely missed in this case. However mobile web is emerging as a great add-on for a business with apps; since it is handy for tactical queries while app can serve as a rich engagement point for a customer.
- #18 Calatrava is one such implementation of the hybrid approach that we just spoke about. It was developed by a few ThoughtWorkers and then used for multiple client projects.
- #19 an opinionated architecture, which drives how code should be organized and howlayers should be loosely coupledA Calatrava app is broken down into features. These features are driven by one or more controllers. Each feature has a start function and a set of pages.From your Calatrava app you can build an iOS app, an Android app and a Mobile Web app. The shared controlling logic is called thekernel. If you are building a shared HTML UI, that is called the shell.Connecting your kernel code to the UI of your app and any native device features you are using is the bridge. This is the main piece that the Calatrava framework provides.
- #20 Cross platform issues: In certain cases the access to hardware components and platform features is dependent on the support from the toolkit. Additionally, fragmentation can be a beast to tackle in these cases as a developer may have only limited access to underlying native platform. PureMobile web issues:impedance to navigate an app in browser. Additionally, having an app in an app store adds a lot of branding to a business, which is sorely missed in this case. However mobile web is emerging as a great add-on for a business with apps; since it is handy for tactical queries while app can serve as a rich engagement point for a customer.
- #24 Any event by the end user of the app is first received by the page objects. They in turn have functions bound to them which get triggered.
- #30 Cover your bases strategy: In this case, since the customer is the focus and not the platform, it is imperative to have a presence on multiple platforms, to widen the outreach to customersDeveloper’s perspective:No additional Framework Density
- #32 product vs channel Simple core logic Needs heavy UI and almost all native components