General design of the framework

Target users

Joshfire is focused on easy cross-device application development. Most design decisions are a direct consequence of this focus.

Currently the framework has very good support for "content-based" applications, including text, audio and video browsing. Depending on user need, future releases may focus on form input and other areas.

Anatomy of a typical Joshfire application

General design

Adapters

Joshfire comes bundled with several adapters, one for each supported device. As new devices get released, Joshfire or third-parties will provide additional adapters.

When an application is launched, it must choose an adapter matching the device it is currently running on.

Application class

Joshfire has a default App implementation that your application has to inherit from. It provides initialization methods and general glue.

The Two Trees : Data & User Interface

This is one of the most opinionated design decisions. Each app manages two tree structures:

  • Data Tree : Contains all the data the app needs to load or use over time. It can be loosely mapped to any URL structure or filepath.
  • UI Tree : Contains all the UI Elements the user might see or interact with (buttons, lists, videos, ...).

This design has a number of advantages:

  • Clear separation of content and interface
  • Each element, either a data item or a UI element, is addressable with a unique path in its tree.
  • Simple mappings can be made with existing standards (DataTree to URLs/filepaths/NoSQL ids, UITree to XML/...)
  • Applications can be executed with a simplier UI or with no UI Tree at all, on the server-side with NodeJS for instance

UI Elements

Basic UI elements like lists, videos, panels, are abstracted in base classes from which inherit device-specific implementations.

For instance a list may be displayed as :

  • In a browser: a simple <UL> - <LI> combo
  • In a smartphone (iOS, Android, etc.): a scrollable, native-looking list
  • In a shell: a list of choices in a command-line
  • In a connected TV: a browseable ribbon

The UI video element is another good example of UI Element abstraction.

It will be embedded as:

  • In a browser: an HTML5 <VIDEO> tag
  • On Android: a call to the native media player
  • In a Samsung TV: a mapping to the proprietary Video Widget

Inputs

Each adapter supports several input methods like "keyboard", "mouse", "touch", "tvremote", etc.

Each user interaction can be mapped to an event to which any part of the application can react.

Inputs can also be proxies for remote controllers (think Arduinos or even other instances of the same app), with a simple TCP packet firing an event in the app.

Events

Joshfire has built-in publish/subscribe methods on many classes. They are often the primary medium of interaction between components. Using events reduces the coupling between components and allows greater extensibility and modularity.

Installation →