Embed Size (px)
DESCRIPTION
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.
Citation preview
www.backand.com
Mockup a Web Application with Randomness
MockupOften 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.
RandomnessRandom generation values used in testing for coverage in various domains is not really useful, because you have to generate meaningful related values.
Random SamplingBoth 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
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 AssetsA 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
Example: Bootstrap TableHere 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 jQueryIn this example, you will use the template engine EJS to generate the rows of orders table
Generating Panels with AngularJSHere you will locate the data generation functionality in a service:
Build your Bootstrap + Angular app with Backand today. – Get started now.
The template is:
Contact InformationBackand [email protected]
