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.

1. 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, 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.
www.backand.com

2. 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.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.
When sampling for rows in a product table, you sample images from the array:
www.backand.com

3. 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
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.
www.backand.com
The template is:
Contact Information
Backand Inc.
info@backand.com
www.backand.com