Mockup a Web Application with Randomness

Mockup

Often during a web development project, one has to create a mockup of a web application that consists of multiple screens and multiple related panels in each screen. This has to be done without a server-side. The intention is to give the project owner a good sense of the behavior of the app and to demonstrate the app to potential users.

As the data in the multiple screens and panels is related, and operations can dynamically filter data, one is not content with hardwiring of values in tables. Moreover, it is too much effort to hardwire values in screens.

Randomness

Random generation values as is used in testing for coverage in various domains is not really useful, because one has to generate meaningful related values.

Random Sampling

An approach which generalizes random generation of values can get us such meaningful network of values. We have used the approach with both AngularJS and jQuery.

Define constant arrays of possible values for each type of value, say, banks, countries, or stock symbols, in a financial application.

var countries = ["Afghanistan", "Algeria", ... ];
var banks = ["Chase", "Bank of America", "Morgan Stanley", ... ];
var stockSymbols = ["FB", "IBM", "INTC", "ORCL", "MSFT", ... ];

Generate the content of each panel in a web page by sampling related values. For example, to generate a panel of stock orders, using underscore:

 var orders = []
 for (var i = 0; i < sampleSize; i++) {
   var sampleOrder = {    
      country: _.sample(countries),
      bank: _.sample(banks),
      stockSymbol: _.sample(stockSymbols)
   };
   orders.push(sampleOrder);
 }

To choose the sample size, we use Math.random:

     Math.round(Math.random() * 1000);

Similarly, to generate quantities such as stock purchase quantity, we use:

    Math.round(Math.random() * 500);

To generate random dates, we use Moment.js for convenient manipulation of dates:

 var now = moment(); // work relative to now
 var purchseDate = moment(now).subtract('days',     
      // random day within the past 30 days
      Math.round(Math.random() * 30)).format("YYYY-MM-DD");

Sampling Graphic Assets

A web application, such as an E-Commerce web application or a social network, often has panels whose content includes graphic assets, such as product pictures or YouTube videos.

To mockup such panels in the same way, we similarly define arrays of graphic assets, say images.

var productImages = [
    "img/bicycle.png",
    "img/google_chromecast.png", ...];

All graphic assets are stored some asset folder of the web app, say img.

When sampling for rows in a product table, we sample images from the array:

var sampleOrder = {
      productName: _.sample(product),
      image: _.sample(productImages)
};

Example: Bootstrap Table

Say our panel consists of a Bootstrap table:

We will show how to do it with jQuery and with AngularJS.

Generating Panels using jQuery

We would use the template engine EJS to generate the rows of orders table,

var template = 'templates/table.ejs';
var html = new EJS({url: template}).render(orders);
$('table').html(html)

The template table.ejs is:

  <% for(var i=0; i
    <%= stockSymbol[i] %>
    <%= quantity[i] %>
    <%= purchaseDate[i] %>
  <% } %>

Generating Panels with AngularJS

We locate the data generation functionality in a service:

var app = angular.module('myApp.services', []);
app.factory('samplingService', function(){

   // generate the random sample

  return {

     fetchSample: function(){
       return orders;
     }

  };
};