Research

Table of Contents Findings and Decisions Week 8 Week 3 Benchmarking Similar libraries Unit tests

Findings and Decisions

Week 8

• Tried three strategies for loading content already in the background to the matrix container. Note that the results here were taken after all the background data had already been loaded in the DOM which means that a call to the background loader didn't require fetching any new content from the API.
  • Strategy 1: Load the background data in a separate container and when more cells are required in the matrix, we clone and move the cells from the background container to the main matrix container at the corresponding position.
  • Strategy 2: Load the background data in the same container as the matrix content but make it initially hidden. Change the top/left of the background cells and show them when new data is required in the matrix.
  • Strategy 3: Load the background data in a separate container and when new data is required in the matrix, swap the html of the new data in place of the already existing cells.
• A few results for the three approaches.

|  Reload window   | Strategy  | Average Time (in msec)|
| One Page (5x10)  |     1     |            17         |
| One Page (5x10)  |     2     |             8         |
| One Page (5x10)  |     3     |             4         |
| One Row  (1x10)  |     1     |             4         |
| One Row  (1x10)  |     2     |             1.5       |
| One Row  (1x10)  |     3     |             1         |

Week 3

• Tried to trick Zynga Scroller by having a large content area without anything inside. Couldn't position divs inside the content.
• Decided to create our own interface instead of using Zynga because it would require many changes/hacks to make it work with Zynga.
• Looked at different tools that have similar interface (Google maps, Bing maps and OpenLayers). All have similar approach:
  • Use a drag container that can be dragged around inside an existing container.
  • Position map images inside the drag container using absolute positioning.
  • Listen to drag events and destroy (or change position) divs that completely go out of the window and create new divs coming into the window and load the data into these divs.

Benchmarking

These are the results for the initial rendering experiments done on May 30 2012 for loading matrix of different sizes completely into the dom as empty divs.

|  Size   | Time in rendering |
| 150x150 | 28.16s |
| 200x200 | 1 min  |

Similar libraries

• Zynga Scroller
  • A pure logic component for scrolling/zooming. It is independent of any specific kind of rendering or event system.
  • Allows DOM as well as canvas scrolling.
  • Demo for DOM Scrolling
  • Demo for Canvas Scrolling
• Mapz
  • Provides draggable image maps. Uses an image overflowing in a div.
  • No caching or dynamic loading.
• Mapbox
  • Similar to above with more advanced features for browsing maps.
  • No caching or dynamic loading.
• Sencha touch Maploader
  • Dynamically loads random points on map while panning and loads the frames dynamically. Might be a good cancidate to look at however, the plugin cant be used directly for the project.
• Canvaszoom plugin
  • Uses HTML5 canvas to render images of different sizes at different coordinates in order to allow zooming into the images with high resolution.
  • Uses dynamic loading of images at different tiles.

Unit tests

For writing unit tests for Javascript code, QUnit is a good choice because it is widely used in the community and has several features. It is developed and used by jQuery team.

The acceptance test for jMatrixBrowse could be something simple. For example, we could have a class or a data variable that denotes the coordinates of the currently visible element and then when we make a drag in the page, we could check for its existence in the markup using QUnit.