Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Shared Web + Ti App JavaScript Codebase

Frank Eijking
December 03, 2014

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

Frank Eijking

December 03, 2014

More Decks by Frank Eijking

Other Decks in Technology


  1. Shared Web + Ti App
    JavaScript Codebase

    View Slide

  2. working @medianique
    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

    View Slide

  7. How it works / Setup
    Shared JS Codebase

    Backbone / CommonJS / Mocha
    Ti Alloy App
    symlinked as:

    symlinked as:

    platform specific library injected proxy dependency
    Web App with

    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