Back to blog home page

Mockup a Web Application with Randomness

Posted by on Sep 25, 2014

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, hard wiring of values in tables is not the best option. Moreover, it is too much effort to hard wire values in screens.

Randomness

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

Random Sampling

Both AngularJS and jQuery are approaches that generalize the random generation of values and give you the meaningful network of values needed. 

You can define constant arrays of possible values for each type of value, for example 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:

To choose the sample size, you can use Math.random:

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

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

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

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

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, you similarly define arrays of graphic assets, for example images.

All graphic assets are stored in the asset folder of the web app, and can be called img.

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

Example: Bootstrap Table

Here our panel consists of a Bootstrap table:

<table class=”table table-bordered”>

</table>

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

Generating Panels Using jQuery

In this example, you will use the template engine EJS to generate the rows of orders table,

The template table.ejs is:

Generating Panels with AngularJS

Here you will locate the data generation functionality in a service:

Build your Bootstrap + Angular app with Backand today. — Get started now.