Calatrava

569 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
569
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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
  •   product vs channel  Simple core logic  Needs heavy UI and almost all native components
  •   - needs basic knowledge of platforms - how much do I need to write and how much is calatrava?Initial investment will be required to ensure necessary pieces are in place to enable cross-platform developmentDevelopers needs to be trained on the approach as it’s new and not widely used
  • Calatrava

    1. 1. Bridging the gap between mobile platforms @AtreyeeMaiti Atreyee @anand_agrawal anandagrawal84 Discover the new framework ‘Calatrava’ for Cross platform collaboration
    2. 2. Where mobile app market is going? ▪ Opens up a new channel ▪ Mobile first strategy
    3. 3. Where to start?
    4. 4. How to start? ▪ Native? ▪ Mobile web?
    5. 5. Trade offs Native Apps Affordability User Experience Web App
    6. 6. How about off the shelf cross platform? Lots of promises ▪ Code reusability ▪ Faster and easier development ▪ Easy to test
    7. 7. 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.
    8. 8. What are typical app components? ▪ UI ▪ Application Logic (Presentation/Business logic/Navigation) ▪ Local Storage ▪ Web services
    9. 9. What are the reusable components? iPhone Android Web UI Client logic Back-end
    10. 10. Hybrid Approach Native Apps Affordability User Experience Native where required Shared everywhere else Web App
    11. 11. How is it different from cross platform? ▪ No restriction to APIs / features exposed by framework ▪ Easier extensibility ▪ Easy to plugin native components wherever required
    12. 12. Calatrava Available at: http://calatrava.github.com/ Credits: Giles Alexander
    13. 13. Overview of calatrava 13 B R I D G E N A T I V E C O D E S H A R E D L O G I C [Controllers, models, repositories] KERNEL (javascript) BRIDGE (javascript) [shared native objects] SHELL (haml, css, javascript, native where necessary) [page objects, layouts]
    14. 14.  kernel  app  plugins  spec  shell  pages  assets  lib  droid  ios  web Basic structure of a calatrava project
    15. 15. Handpicking native where required
    16. 16. Page Object KernelBridge Click Trigger event Lookup for convention based controller JS evaluator Page render called with appropriate data Invoke render with data Results shown Sample flow
    17. 17. Sample flow Page Object Kernel Bridge KernelBridge Page Object Bridge Click Trigger event Lookup for convention based controller JS evaluator Ajax call to fetch results Response fetch results JS evaluatorPage render called with appropriate data Invoke render with data Results shown
    18. 18. DEMO
    19. 19. Plugins ▪ Mechanism to use native features cross platform. ▪ Need to be registered with calatrava ▪ Convention based
    20. 20. Tech stack ▪ Coffee-script ▪ Haml ▪ Sass ▪ Java ▪ Objective C ▪ Jasmine ▪ Cucumber ▪ Rake } } } } Kernel + Shared HTML UI Native UI, plugin implementations Testing Build
    21. 21. 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
    22. 22. Platforms supported
    23. 23. When not to use calatrava UI AL UI AL Services Shared logic
    24. 24. Roadmap… ▪ Calatrava is evolving ▪ Plugins are being actively developed ▪ Generating controllers, pages for new features ▪ Anything that you could think of? 
    25. 25. Frameworks implementing Hybrid approach ▪ Kirinjs ▪ Cordova
    26. 26. 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
    27. 27. Questions??

    ×