Purpose of Rapid Prototyping

Rapid prototyping is a practice to boot strap a project and explore what structure your application is going to need. By building out a static version of a dynamic web application you get a guide to follow as you build the application.

How To Prototype

Start with static pages.

Even though your goal is a dynamic website, we start with a static version. We should be able to create a simple version of what we want each of the pages of our look like before we start. This step is important for a couple reasons, it tests our knowledge of the overall requirements of the project and it gives the team a referrence point for design conversations in the future.

Example

Our client has asked us for an application to track their collection of books. The application must have a page that lists all the books and a page for the details of each of the books (title, author, ISBN number, and description) in their collection. We would start with prototyping by making two static pages, one for the list of all books and one for the individual book. We might end up with static pages looking like this:

Book Collection

<section class = "book-collection">
    <ul>
        <li><a href="./single-book.html">Sample Book Title</a></li>
        <li><a href="./single-book.html">Sample Book Title</a></li>
        <li><a href="./single-book.html">Sample Book Title</a></li>
    </ul>
</section>

Single Book

<section class = "book-details">
    <h1>Sample Book Title</h1>
    <h2>Mel Smith</h2>
    <p>ISBN Number: 43343-43455</p>
    <p>Description of this book.</p>
    <a href="./book-collection.html">Back to all books</a>
</section>

Use Static Examples to Design Data Model

After you have your static webpages you can use them to help build out the data structures that your application needs. We should now have a good idea of how many types of pages you will need for your application, the flow of content from one page to another. Most importantly we should also know the parts of the webpages that need to be represented by dynamic data.

Example

From our example above, lets dive into the Single Book page. We see types of data we need to store about each book based on how the material is presented in the static page. If we built out a Java class to implement a data structure for a Book object it might look like this:

public class Book {
    private String title;
    private String author;
    private String isbn;
    private String description;

    public Book(String title, String author, String isbn, String description) {

        this.title = title;
        this.author = author;
        this.isbn = isbn;
        this.description = description;
    }

    public String getTitle() {
        return title;
    }

    public String getAuthor() {
        return author;
    }

    public String getIsbn() {
        return isbn;
    }

    public String getDescription() {
        return description;
    }
}

Build Out Dynamic Content

Now that you have data structures for your web pages you can work on changing your static pages into dynamic content. If you are going to use a templating engine for your content you already have a starting point in your static pages. If you are following the Agile methodology you have had a chance to share with your customer the static version of the web application and been able to get feedback on it's appearance. Now you can take that customer approved demo and transform it into a template for the dynamic content.

Example

We use Thymeleaf templating for our Spring Boot MVC applications because it is extremely similar to regular HTML and easy to convert static pages to dynamic templates. For the Single Book page we can simple add attributes to the HTML tags to inject dynamic values.

<section class = "book-details">
    <h1 th:text="${book.title}">Sample Book Title</h1>
    <h2 th:text="${book.author}">Mel Smith</h2>
    <p th:text="${book.isbn}">ISBN Number: 43343-43455</p>
    <p th:text="${book.description}">Description of this book.</p>
    <a href="./book-collection.html">Back to all books</a>
</section>

For the Book Collection we simplify the multiple static references with a reference to a collection of books:

<section class = "book-collection">
    <ul>
        <li th:each="book: ${books}">
            <a th:text="${book.title}" th:href="|/books/${book.title}|">Sample Book Title</a>
        </li>
    </ul>
</section>

Build Controllers

Now that you have the data structures and templates designed you can build out controllers and routing that serve content to the endpoints you specified. The anchor tag targets in the templates should have routing in your backend application and you should implement a database that stores your content if needed.

Augment Functionality

As requirements change use this pattern of prototyping to identify parts of your application that need changed or added. For instance, if you add security, create a static login page and than change it to be a dynamic resource that interacts with your backend server.