Hybrid Mobile Apps with Calatrava

This deck covers:
* Mobile Application Development approaches (at a high-level)
* Explains the approach used by Calatrava
* Structure of a Calatrava project

Transcript

1. Hybrid Mobile Apps with Calatrava Vivek Jain
2. Development Approaches
3. Native app for each platform User Experience Separate teams/skillset Device capabilities App Store Expensive High maintenance
4. Web App for all platforms Single team/skillset Limited device capabilities Affordable Standard UX No App Store
5. Web App Native Apps Affordability User Experience
6. Product Vs Channel
7. Ultimate Goal User Experience Line of deployment Awesome apps
8. Implementation Strategy Laser Cover-your-bases User Experience Line of deployment
9. Native Apps Affordability User Experience Single team Native where required Shared everywhere else Hybrid Approach Web App
10. Separated Presentation Body UI
11. Hybrid UI
12. Hybrid UI
13. Enter Calatrava
15. Bridge Kernel Page Body UI Bridging to and from Native JavaScript
16. Bridge Kernel Device specific code Not just for UI
17. Allows Incremental release strategy Release 1 Release 2 iOS Android Web iOS Android Web
18. Affordability User Experience Evolve incrementally
19. Extend existing app Native Only Native + Shared
20. When to use •  complex client-side business logic •  when mobile is a channel •  not a pure UI app (like a game) •  web experience is not good enough •  cover-you-bases implementation strategy •  additional features in an existing app
21. Platforms supported
22. Structure of a Calatrava Project
23. q kernel q app q plugins q spec q shell q pages q assets q lib q droid q ios q web
24. Pages - logical screen on the app •  View Controller on iOS •  Activity on Android •  div on Mobile Web
25. Pages - manages the UI •  bind to events •  extract data •  render data
26. Bridge •  API for kernel to interact with native •  calatrava.bridge. •  pages •  changePage •  request •  plugins
27. Kernel •  business & flow/interaction logic •  features under kernel/app •  gets references to pages from the bridge •  specs under kernel/spec
28. Shell •  optional HTML UI for sharing •  contains pages in HTML and JS •  recommend to start with entire UI in shell •  Web App for free
29. Plugins •  for device specific code •  single interface in kernel •  specific implementation for each platform
30. Tech Used •  coffee-script •  jasmine-node •  haml •  rake (for build scripts)
31. Getting Started gem install calatrava calatrava create <project-name> Home: calatrava.github.com
32. Demo
33. Thank You vivekjain10@gmail.com @vivekjain10 References •  martinfowler.com/articles/multiMobile/ •  martinfowler.com/articles/mobileImplStrategy.html •  calatrava.github.com Questions? Join ThoughtWorks: join.thoughtworks.com