Shared Web + Ti App JavaScript Codebase

Ti Meetup Talk 20014-12-03 (http://www.meetup.com/TitaniumNL/events/192330472/)

This presentation explains the concept of how and why we created a shared JavaScript codebase for our web apps and mobile Titanium apps for iOS and Android.

For sample code see: https://github.com/karaoak/SharedJS.Core

Transcript

1. Shared Web + Ti App
   JavaScript Codebase
   

   View Slide

2. working @medianique
   @karaoak
   frankeijking
   About me
   

   View Slide

3. Working mainly with…
   • Laravel, MySQL, Oracle
   • Backbone 1.0+, BB LayoutManager, BB Stickit

   SASS and alotta’ JS
   • Titanium (since 1.6.x), Alloy (since 2013)
   

   View Slide

4. Why a shared JS codebase
   • Just like we use Titanium to develop apps for both
   iOS + Android, why not use JS to …
   • Take away inconsistencies between mobile app and
   web app logic.
   • Keep things DRY, why write something in JS twice?
   • Reduce TCO. 

   Cut costs for both initial development + AM
   

   View Slide

5. Objectives
   • Keep business logic in one place
   • Unit test business logic once
   • Leverage context specific technologies:
   • HTML5 BB Web App:It should be possible to use BB
   plugins like LayoutManager + Stickit
   • Ti Alloy App: It should be possible to use Alloy views
   and Alloy MV binding.
   • Keep it very simple! With very little, and

   no exotic, dependencies.
   

   View Slide

6. Alternatives
   • Start the other way around. Use something to wrap
   generic commonjs or node modules.
   • Write and compile your Ti app code for Ti ‘mobile
   web’.
   

   View Slide

7. How it works / Setup
   Shared JS Codebase
   
   Backbone / CommonJS / Mocha
   Ti Alloy App
   symlinked as:
   
   src/core
   symlinked as:
   
   lib/core
   proxy
   platform specific library injected proxy dependency
   proxy
   Web App with
   Browserify
   

   View Slide

8. How it works / Setup
   

   View Slide

9. –Johnny Appleseed
   “Type a quote here.”
   

   View Slide

10. –Johnny Appleseed
    “Type a quote here.”
    Shared JS Codebase
    

    View Slide

11. Ti App proxy (via alloy.js)
    

    View Slide

12. Web App proxy (browserify)
    

    View Slide

13. platform specific interfaces
    implementations either
    extended or proxied, e.g. for:
    
    • persistence
    • state
    • audioplayback
    • analytics
    • logging
    

    View Slide

14. Demo!
    

    View Slide

15. View Slide

16. View Slide

17. Questions?
    

    View Slide