Website:Mobile

A Backbone.js + jQuery Mobile app for accessing the Wormbase database through its RESTful API.

Directory Structure

.
├── css
│   ├── images
├── images
├── index.html
├── js
│   ├── collections
│   ├── libs
│   ├── mobile.js
│   ├── models
│   ├── routers
│   └── views
└── templates
    ├── app
    └── classes

Libraries and dependencies

• Backbone.js to aid application structure, routing
• Underscore.js for templating and other utilities
• Require.js for modular separation of components
• Require.js Text Plugin to enable external templates
• jQueryMobile + jQuery for DOM manipulation, mobile helpers
• Wormbase API for Data

Note: This application needs to be run on a HTTP server in order to use external templates.

Use of WormBase REST API

Widgets are requested in text/html format, the response goes through an "enhancer" function which adapts all the links to work within the mobile application, then a few changes to the DOM of each Widget are made in order to make them responsive and improve performance on mobile devices.

For widgets whose structure on mobile devices would need to be implemented in a radically different way, there is the possibility of creating a custom widget by putting a template file into the templates folder (e.g. templates/classes/gene/overview.html). In this case the Widget is requested in JSON format and its fields are available within the template using a 'fields' identifier.

Structure

The App follows a variation of the Model View Controller design pattern. As in all Backbone.js applications, there is no controller because the logic that operates the app is in the View.

The components of the app are the following.

Router

The possible routes that have been implemented so far are:

• A default route, redirects to the home view.
• Search, type and query are specified - e.g. #search/all/gene
• Queries for specific objects (given class name and WormBase ID of the object) - e.g. #object/gene/WBGene00015146

Collections

Collections can be thought as list of models. They also handle fetching of data from the server. The collections in use are:

• Widget Collection - represents a list of widgets
• Search Results Collection - a list of results for a search
• Search Types Collection - this represents the list of options for the search dropdown menu

Models

Models for this application are:

• Object - it represents a Wormbase object, identified by a class and a WormBase ID. Each object is associated with a Widget Collection
• Widget - it represents a widget, it handles fetching of the widget data from the API. Its 'parent' property must be the Widget Collection this widget belongs to.
• SearchResultEntry - it represents a single search result item.

Views

Views handle the logic of the app. Each view is associated with a DOM element and a Model or a Collection. They can be seen as nested elements each of those handling input/output for some part of a web page:

   App View
   |-- Search Page View
   |------ Search Results View
   |---------- Search Result Entry View
   |-- Object View
   |------ Widgets Panel View
   |------ Widgets Area View
   |---------- Widget View