Shared Web + Ti App JavaScript Codebase

B64825f56e05e6332dd234d013f3de3a?s=47 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

B64825f56e05e6332dd234d013f3de3a?s=128

Frank Eijking

December 03, 2014
Tweet

Transcript

  1. Shared Web + Ti App JavaScript Codebase

  2. working @medianique @karaoak frankeijking About me

  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)
  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
  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.
  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’.
  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
  8. How it works / Setup

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

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

  11. Ti App proxy (via alloy.js)

  12. Web App proxy (browserify)

  13. platform specific interfaces implementations either extended or proxied, e.g. for:

    • persistence • state • audioplayback • analytics • logging
  14. Demo!

  15. None
  16. None
  17. Questions?