How to Quickly Create Web App Prototypes

In a recent project I was looking for a quick way to evaluate Turnjs Javascript library and play with the sample code to see if it will meet the requirements for the project. I also wanted quick feedback about what the view should look like.

I came across simplehttpserver. This can be used to quickly setup our front-end development environment. It provides a simple http server that we can use to quickly create prototypes. I used it to play with Turnjs library before I decided to integrate it with a Rails project.

Install the HTTP Server

Follow the instructions on the readme page of simplehttpserver home page. You can go to the directory where you have your static files and run:

simplehttpserver .

to start serving up the files. The index.html files contains the CSS and includes the javascripts in the js folder.

<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- 816-429-3471  -->
<!-- https://www.youtube.com/watch?v=45dzYAuXYGs -->

<head>
<meta name="viewport" content="width = 1050, user-scalable = no" />

<style type='text/css'>
  .hard {
    background-color: #BB8FCE;
    font-size: 1.2em;
    outline: 1 #DDD;
    border-radius: 10px;
  }  
  .pag {
    background-color: #7FB3D5;
    border-radius: 10px;
  }

  p.lesson {
    padding: 10px 10px 10px 10px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  p {
    margin: 0;
    padding: 0;
  }

  .center {
      margin-left: auto;
      margin-right: auto;
      margin-top: 10px;
      display: block
  }

  .page-number {
    margin-top: 10px;
    margin: auto;
    width: 10%;
  }

  #flipbook .shadow,
  #flipbook.shadow{
    -webkit-transition: -webkit-box-shadow 0.5s;
    -moz-transition: -moz-box-shadow 0.5s;
    -o-transition: -webkit-box-shadow 0.5s;
    -ms-transition: -ms-box-shadow 0.5s;

    -webkit-box-shadow: 0 4px 10px #666;
    -moz-box-shadow: 0 4px 10px #666;
    -ms-box-shadow: 0 4px 10px #666;
    -o-box-shadow: 0 4px 10px #666;
    box-shadow: 0 4px 10px #666;
    border-radius: 10px;
  }
  div.box {
    text-align:center;
  }

  #flipbook.centerStart{
    left:260px;
  }

</style>

<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/turn.min.js"></script>
</head>

<body>
  <h1>Music</h1>

  <div id="flipbook" class='centerStart'>

    <div class="hard"> 
    </div>

    <div class='pag'> 
            <div class='page-number'> 
              <p>Page 1</p>
            </div>
      <p class=lesson align='justify'>
      Lorem Ipsum is simply ...
      </p>

    <div align="center">
        <figcaption>Video 1-1 </figcaption>
        <video width="160" height="120" controls controlsList="nodownload">
          <source src="http://www.joaquinamenabar.com/download/samplebook/video1-8-1.m4v" type="video/mp4">
          Your browser does not support HTML5 video.
        </video>
     </div> 

    <p class=lesson>    
      Lorem Ipsum is simply ...      
      </p>

      <p class='lesson'>
       Lorem Ipsum is simply ...
      </p>

      <p class='lesson'>
        Lorem Ipsum is simply ...
      </p>
    </div>

    <div class='pag'>        
      <div class='page-number'> 
        <p>Page 2</p>
      </div>
        <p class='lesson' style='border: 2px solid red'>
         Lorem Ipsum is simply ...
        </p>

    <div class='music' align="center" style='border: 2px solid red'>
        <figcaption>Audio 1-1 </figcaption>
            <audio controls>
              <source src="http://www.joaquinamenabar.com/download/samplebook/audio2-8.mp3" controls controlsList="nodownload" type="audio/mpeg">
              Your browser does not support the audio tag.
            </audio>
     </div>        

      <p class='lesson'>
       Lorem Ipsum is simply ....
      </p>

        <p class='lesson'>
          Lorem Ipsum is simply ...
        </p>

        <div class='box'>
          <img src="images/tango-steps.png" alt="Tango Steps" width='550' height='300'>
        </div>
    </div>

    <div class="pag"> 
      <div class='page-number'> 
        <p>Page 3</p>
      </div>      
    </div>

    <div class="pag"> 
      <div class='page-number'> 
        <p>Page 4</p>
      </div>          
    </div>

    <div class="hard"></div> 
    <div class="hard"></div>
  </div>

  <script type="text/javascript">
    $(document).ready(function() {
        $("#flipbook").turn({
            width: 1300,
            height: 900,
            autoCenter: true,
          acceleration: true,
          elevation: 50,
          duration: 1000,
          gradients: true
        }); 

        $(document).keydown(function(e){
            var previous = 37, next = 39;

            switch (e.keyCode) {
                case previous:
                    $('#flipbook').turn('previous');
                break;
                case next:
                    $('#flipbook').turn('next');
                break;
            }
        });
    });        
  </script>

</body>
</html>

The previous version of index.html was pointing to the CDN for the turnjs and jquery. The advantage of pointing them to local files is that you can work without any Internet connection. I found it difficult to customize the given sample Turnjs examples. I created a new project from scratch by watching this YouTube tutorial. Then I was able to gradually learn more about the library by reading the Turnjs documentation on it's home page and experimenting with the working code. This prototype uses jQuery version 1.12.4 and turnjs version turn.js 4.1.0.

Another nice to have is a way to quickly preview each page by entering the html for each page and seeing a live preview on the right. The preview will apply the custom CSS and include the turnjs and jquery libraries.

Using Live Server for Quick Feedback

For faster feedback we can use live-server. It is a small development server with live reload capability. You need node.js and npm. Install live-server globally.

npm install -g live-server

Issue the command live-server in your project's directory.

$ live-server
Serving "/Users/bparanj/projects/tango" at http://127.0.0.1:8080
Ready for changes
GET /favicon.ico 404 3.190 ms - 24
Change detected /Users/bparanj/projects/tango/index.html
Change detected /Users/bparanj/projects/tango/index.html

This automatically displays the changes on saving the file. As a side note, I had to upgrade npm by:

sudo npm i -g npm

Now I get instant feedback without using any browser plugin or dependency on IDE plugins.


Related Articles


Software Compatibility Best Practices

I spoke to some of the most talented and experienced software developers. I have created a guide that is filled with valuable insights and actionable ideas to boost developer productivity.

You will gain a better understanding of what's working well for other developers and how they address the software compatibility problems.

Get the Guide Now