How to develop Wireframes and Web Applications with Polymer.js

Image credit: unsplash @igormiske

Wireframing is an important aspect in any front-end design process. It primarily allows a developer to define and organize information, in a way that depicts the hierarchy of the overall design process.
Wireframing makes it easy for a developer to embark on the planning process of an application. It therefore enables him/her to layout designs based on how a user is expected to navigate through the application.

What is Polymer.js?

Polymer is a JavaScript library that allows developers to create custom reusable HTML elements with markdown, which improves the performance of an application and makes it maintainable.

In this article, we will go through how you can build an application using a Polymer.js starter kit and also add a wireframe to the application at the same time. Currently, Polymer.js has 19 wired elements and we will utilize some of these elements in this project.

Set up application

• To start with, check the site below to ensure that your node.js version supports Polymer tools

run node --version to check your node version

• run npm install npm@latest -g to update npm
• run npm install -g bower to install the latest version of Bower. Bower is a package manager that manages components that contain HTML, CSS, JavaScript, fonts and image files.
• run npm install -g polymer-cli to install polymer-cli which is the command line interface for polymer projects.
• Open your terminal, run the command mkdir my-app to create a new directory to start from.
• Run cd my-app to access the directory
• Run polymer init to initialize your project with an existing starter-kit template.
• Select the polymer-2-starter-kit and press the enter.

Create a new page

At this point, you already have the starter-kit app which is a placeholder that contains three template pages. You can modify these pages to implement whatever design pattern you desire.

Next, we are going to implement our wireframe.

• Create a new file called src/my-wire-frame.html and open it in an editor.
• Your directory structure should appear like the structure summary below

Add element to your app

For your application to utilize your wire-frame element, you need to add the element to the app. Follow the subsequent steps to add the required to my-wire-frame.html.

• Each element should import the polymer-element, add:

<link 
   rel="import"
   href="../bower_components/polymer/polymer-element.html"
/>

• Add “shadow into light” font style by adding this link path:

<link
   rel="stylesheet"
   href="https://fonts.googleapis.com/css?family=Shadows+Into+Light"
/>

• Add web-components-lite.js to support HTML imports, custom elements and templates. The HTML imports allow you to include and reuse HTML documents via other HTML documents and the custom elements allow you to define your own custom tag. Add this script path:

<script src="../webcomponentsjs/webcomponents-lite.js></script>

• Add all necessary import paths needed by the wireframe components

• Add a <dom-module>element with an id attribute corresponding to the element's name in the my-wire-frame.html file:

• Add <template></template>
• Inside the template, add a wired card which is a form type:
  <wired-card class="form"> </wired-card>
• Let us add the wired-menu-bar which contains our top-bar by adding this snippet in the wired card:

• Add this snippet that creates an ES6 class and associates it with the wired frame element in the dom-module right before the closing </dom-module>.

• Add <my-wireframe name="wire-frame"></my-wire-frame>to the iron-pages element in the my-app.html. This is a content switcher that is used to cycle through the list of children pages in order to select the page to show on the base page.
• Open the polymer.json file in your text editor and add src/my-wire-frame.html in the fragments section.
• Run your app withpolymer serve --open You should get an output like this:

• Now, let us add the wired input element in the wired card.

• Let us add the wired radio element.

• Let us add the text area element.

• Let us add the wired combo element.

• Let us add the wired button element.

• Let us add a wired toggle element.

• Run your app again and you should have a user interface like this:

• If you observe well, you will discover that all the elements are clustered. We can do some inline styling to make it appear well. You can add these styles right after the opening </template> tag:

• Your my-wire-frame.html file should contain the following code in all:

• Finally, re-run your app or refresh your page. Your wireframe should appear like this:

• The beauty behind this technology is that the wireframe appears like a hand drawn sketch and it is also responsive i.e you can navigate through it as if you were on your originally designed web page.

Next, look forward to a tutorial on building web applications with Polymer.js and Bootstrap.
I hope you found this tutorial useful. Feel free to drop any feedback in the comment section. You will be very much appreciated. Happy coding!