05 Apr 2017

Creating Cross-platform Mobile Applications with Cordova / PhoneGap

PhoneGap Logo

In 1994 IBM released Simon, Simon is widely considered to be the first “smartphone” it was the first mobile device to use a touch screen and run apps. In the 90s and 2000s the mobile market has exploded with applications and devices, for developers this means needing to be able to develop apps for not only different size screens a but also for different platforms. Ideally it would be nice to find a cross-platform solution to write once and deploy “everywhere”. To account for different screen sizes we work with responsive design, where content moves fluidly to adapt to the size of the browser it is being viewed in.


Using responsive design works great for web applications, but what if we want to take our web application and  have it become a mobile application?  That is not as simple, to get our app to work on an Android device we need to rebuild it with the Android SDK, and then we need to build it again in Swift/Objective-C for IOS. Lucky for us there is an easy way to get the same responsive web app we built earlier to run as a mobile app on Android and IOS without having to rebuild it. Apache Cordova has created a technology that takes our HTML, CSS and JavaScript and transforms it into a mobile application that can be used across an array of different platforms.


In an earlier blog post we created a real estate rating application using different Google Material based design frameworks. Currently these applications are web apps and can be run off of your smartphone, but only through opening up your mobile browser and navigating to the page where the app is being hosted.


In this post, we will show you how to use Adobe’s PhoneGap – an open source distribution of Cordova – to simulate and build mobile apps using just HTML, CSS and JavaScript.


What you need to get started

  • A computer (We are using windows)
  • A mobile device  (We are using android)


Part 1 – Simulating and testing the application with Cordova PhoneGap


Step 1 ) Find a web application project to work with

First you will need to have a project to start with. You can either use one of your own web applications or you can clone the app we will be working with. We are going to be using our real estate app from an older blog post about using different UI frameworks. You can clone the project here.

Step 2) Install the PhoneGap Desktop Application

Now that we have our project we need to install the PhoneGap application on our computer. Click this link to download the desktop application.

Step 2) Install PhoneGap on your mobile device

On your mobile device you will need to install the free PhoneGap developer app. It is available on iTunes, Google Play and the Windows Phone Store.


Step 3 ) Create your app template and connect your devices

The next step is to create our app template. To do this open your PhoneGap desktopPhoneGap Mobile App Template app and click the add button on the menu. Select ‘Create new project’. Then select the blank project. There are also some other templates available for you to play with later on. Next, choose a folder on your file system in which to place the app. Give the app a name and ID click to create the project.

Now that you have your app template created open your mobile PhoneGap developer application. Replace the server address with the one highlighted in your PhoneGap desktop app and try to connect.

PhoneGap Mobile App Template - Server Address

If you can not connect try these steps to debug:

  • Check that you have the latest versions of the mobile PhoneGap developer app and PhoneGap desktop app (if you just downloaded them you should)
  • Make sure you do not have any firewalls blocking your connections
  • Check that your computer and phone are on the same wifi network


Step 4) Replace the template application code with your code

Go into the /www folder in your new template application. This is will be the root of your application code. You will notice that there is already an index file referencing the Cordova framework through a <script> tag:

<script type="text/javascript" src="cordova.js"></script>

You will want to copy your application files to the /www folder, open up your index.html, and add the Cordova <script> tag to your application. At this point you can save your index.html and you’ll be ready to test how well your app runs on a device.

Here’s a screenshot of what the demo-app-house-materialize project looks like with the Cordova script reference.

Adding Cordova Framework to Your Code


Step 5) View your app on different mobile devices

Select the play button to start the server for your application in the PhoneGap desktop app. You will now be able to connect to it via the PhoneGap developer app on your mobile device. When you click to connect in the PhoneGap developer app on your phone PhoneGap will wrap your HTML/JS/CSS application into a mobile friendly package. Then your application will be launched on your Android or iOS mobile device.

Step 6 ) Enhance, review, repeat

You can now enhance your app so that the mobile app looks as good as the web app looked. One example would be to modify the CSS file to make the container of the app 100% instead of a fixed pixel width.


Part 2 – Packaging our project as a mobile app

Step 1 ) Get started with PhoneGap Build

Go to:  PhoneGap BuildPhoneGap Build Logo

Click ‘get started’
Pick your plan (we are using the free plan)
Create an account and log in


Step 2) Uploading your project

Before you upload your app you will need to prep it. Whether the app is in a git repo or is uploaded as a zip file it will need an application descriptor config.xml file. We will go the zip file route:

  1. First, copy the config.xml from the PhoneGap project root to the /www folder that represents your “app”.
  2. Make sure all of the libraries, fonts, icons and frameworks you are using are also properly referenced and exist somewhere under your /www folder.
  3. Zip up the /www folder.

Now, to upload your app:

  1. Log into PhoneGap Build
  2. Click the ‘+ new app’ button
  3. Click the ‘Upload a .zip file’ button and select the zip file you created.

Once the zipfile is uploaded you will see a screen similar to the following screenshot.

PhoneGap Build - App Uploaded


Notice that in addition to building your app, you have the options to enable debugging and enable hydration. Debugging gives you access to a set of tools similar to the debugging tools available in your browser. Hydration helps with pushing code updates automatically.

If you want to generate the installation assets for each platform click the ‘Ready to build’ button. Doing this will result in the following screen.

PhoneGap Build - App Built


Step 3) Downloading your installers.

From the screen posted above you can see that by default you will have the ability to download builds for Android, iOS and Windows Phone. Although you can immediately download install assets for Android and Windows Phone right after building, you will need to provide a signing key for iOS before you can create iOS builds. Here’s some info on that: http://docs.phonegap.com/phonegap-build/signing/ios/

We will download an Android APK installer. Click on the Android button and a browser download prompt will display. Choose a folder on your machine to save your APK.


Step 4) Run the app on your Android phone
  • On your Android device, go into your security settings. Turn on the option to allow installation of apps from unknown sources.
  • Through some means, e.g. email attachment, get the APK install file on your android device and open it.
  • When you open the file it will ask you if you want to install it and at that time choose yes.
  • Congratulations you’ve now converted your web application into a mobile application and it’s running on your mobile device!


If you would like to view our final Android project you can download the apk file.


Share this
02 Dec 2016

Quick JavaScript Sample: Saving time with Moment.js

moment.js logo
Often, developers are tasked with working with dates and times in their JavaScript applications. Although, JavaScript does offer a few methods to make this process easier for developers; there are times when custom functions or complex loops are needed. For instance, formatting dates and times or comparing one date with another.  Adding custom logic to work with this date and time data seems excessive in the day and age where there is a large community of developers that share libraries to help others.


Enter Moment.js

Moment.js has a variety of methods available to assist developers in parsing, validating, manipulating and displaying date and time data. If you are working on a project that involves manipulating date and time data moment.js can help save you time and keep your codebase much more streamlined.  Moment is pretty easy to use and can be installed in a variety of ways. Click here to see the full list of installation options so that you can find one that works for your application architecture.

In the remainder of this blog post we are going to use the Moment library to create a project time management application. This application keeps track of multiple tasks in a project so that the user can distribute available time efficiently. We will use Moment’s ability to adjust time with addition and subtraction methods, date formatters to display date/time in a user friendly format, and take the total of all tasks to validate a deadline.

We will also be using Angular as our JavaScript framework and Materialize to create a simple user interface. If you are interested in learning more on UI frameworks check out our blog post on Google Material Frameworks!

Source Code

Working Project

Let’s Build a Demo App with Moment

Before you start, you’ll need to determine the way you will install moment.js. We used bower but you can chose the best method for your project by looking at the options on Moment’s setup page.

We are building an application that shows a project and its deadline. It also shows a list of tasks and the amount of time it will take to do each task. The user can adjust the amount of time for each task by expanding the details panel for that task. The application will then use Moment to total the number of hours and minutes for the tasks to determine if the user is still on track to meet their deadline.

Here’s a screenshot illustrating the demo app.


Screenshot of moment.js based time management app



You can view the source code for the demo application here. Let’s take a look at where moment.js is used in our time management demo application.

Here are the places where we are using Moment in our app.

In our application we need help with formatting our original deadline. Lets look at how its done.

$scope.deadlineDate = "2017-12-25 12:30:17";
$scope.deadline = moment($scope.deadlineDate).format('DD / MM / YYYY  HH: mm a');

We are capturing the deadline date and time to a deadlineDate variable. Then we send that variable in to the moment format() method to create a more readable date for the user. We are using ‘DD’ for double digit dates, the ‘MM’ for double digit month, a four digit year with ‘YYYY’ and the ‘a’ to display a lowercase am or pm.

There are a variety of ways you can format your dates and times. For a list of all the options take a look at the formatting section in Moment’s documentation.


We can also use moment.js to add and subtract date and time values. In our demo app, we need to figure out when we’ll be done if we add up the time needed to complete all tasks to the current date and time.

 $scope.timeTillDeadline = moment().add($scope.projHrs, 'h').add($scope.projMins, 'm').format('DD / MM / YYYY  HH: mm a');

To perform this calculation, we start with an empty moment method which will store the current date and time. We then add the project hours and project minutes to the current date and time that was captured by calling moment(). You’ll need to know that to add or subtract using moment you will need to order time increments from largest to smallest. In other words, when working with hours and minutes you will first need to add hours then add minutes.

You can learn more about manipulating time in Moment’s manipulation documentation.


Moment.js is very useful in comparing two date or time values with each other. In our demo app, we determine if there is enough time to finish the project with the time it will take to complete all of the tasks.

$scope.stillHaveTime = moment( $scope.timeTillDeadline).isBefore($scope.deadlineDate);

Here we are using Moment’s isBefore() method to check that the projected deadline is before the calculated completion time for the project. Using isBefore() will return a Boolean.

Moment gives us a variety of methods to use to compare times and dates. You can view the full list in Moment’s query documentation.

In Summary

Moment.js is a very powerful, clean, and easy to use utility library that can save you a good chunk of time when working with dates and times in your applications. Now it’s your turn! See how you can use Moment to build fun and useful applications using date and time data.

Libraries Used in the Demo

Share this
08 Nov 2016

A Comparison of Material Design Frameworks – Samples

A few weeks ago we looked at a few different UI frameworks (Angular Material, LumX, and Materialize) that use material design elements. We compared the Maturity of the library, technologies they use, their design features and the size of each after minimizing the project. You can see the results of our comparison here . Today we are going to create an app to put them to use. Then, we will demo the results. We will create the same app three times in each of the frameworks to see the visual difference. From there we will see how easily each framework is implemented and the design differences of our final project when the app is complete.

We will be creating a real estate review app. This app will allow you to write a review on a property that you have just visited. We are keeping this application simple so we will only let the user see one property. We are going to to mostly use the prebuilt components that come with each framework and customize their styling as little as possible to give you an idea how each framework looks out of the box. This will result in our applications looking slightly different in order to demonstrate the available components and how the untouched version of each framework’s components fits in with the project as a whole.

The requirements for each app are as follows:

  • It will need to have a title bar with the name of the property
  • An image of the property will need to be displayed
  • There will be inputs to write the user’s name and a review
  • A button will exist to toggle from the property to a list of its previous reviews.

Lets see how each framework did when put to this test!


imgresWe found material to be the quickest of the three to set up. It was done quickly with an npm install and linking the dependencies in the index of an Angular project. Materialize is a very basic framework and most of the prebuilt elements could be copied and pasted right into the application without much work. I was able to put the UI for this demo together much quicker than the LumX and Angular Material demos. Subjectively it also had the cleanest out of the box UI. Materialize did however fall short was on the javascript and Angular side, there were no prebuilt Angular helpers in any of the components so they all needed to be added custom to the project.

View Project on Github

Pre built components used for this project:

  • Card with reveal
  • Card Title
  • Collections items
  • Button with waves effect

Time from setup to completion:

  • 2 hours and 15mins


  • Angular did not come with the framework and needed to be installed


  • Really easy to use
  • There were many UI components ready to use and they all dropped right into my project beautifully.


Angular Material

angularmaterialAngular Material was also very easy to set up. They have very detailed documentation alongside the framework that gives you the step by step process of how to get going. Once my project was set up I had a bit more of a challenge finding the right UI components than with Materialize to quickly get my application built. In Materialize one of the prebuilt components that they offer is a card with a reveal button, that was perfect for toggling from my add review section to my reviews. In Material I had to get creative and use the sideNav component to reveal the reviews.

View Project on Github

Pre built components used for this project:

  • Card with action buttons
  • Input
  • Primary raised button
  • List with icon

Time from setup to completion:

  • 2 hours and 45mins


  • The pre built components come with quite a bit of bloat in the code that you need to chip away at to use them in your own project


  • Great documentation on how to get set up
  • Lots of components to choose from
  • Angular Included on install




lumxLumX was also quite easy to set up. It had clear documentation and multiple ways to go about getting started. LumX like Angular Material came with Angular as a dependency and had Angular helpers built into some of the components in the demos. Having Angular sped up the process of getting the app running. I do however think this framework fell a bit short on the UI side. The list of prebuilt components did not have as many useful variations as Angular Material and Materialize. I also could not find a component to perform the same functionality as the sideNav from Angular Material and the card with a reveal from Materialize, so I used a ng-hide to toggle the views between add review and read reviews. The Components that LumX did provide were easy to integrate and looked great.

View Project on Github

Pre built components used for this project:

  • Card with image on top
  • Raised button
  • Text field
  • List with icon

Time from setup to completion:

  • 3 hours


  • They did not have a component I needed to reveal the previous reviews like the ones I found in Angular Material and in Materialize


  • The UI components they had were easy to use
  • Project setup was quick because of good documentation
Side by Side

Now that we’ve discussed the pros and cons, lets take a look at implementations of the same app with these three different UI frameworks side by side.

Review Form

Previous Reviews List



In conclusion if you want to build a quick app that incorporates Google’s Material design all three of these frameworks are great options with their own pros and cons. I personally enjoyed using Materialize the most for this small app. It was the easiest to implement and the pre built components made it so I had to do very little work to build a great looking app.

Reference Links:
Share this
28 Sep 2016

A Comparison of Material Design Frameworks

Responsive design and material design are hot topics in front-end development and User Interface design. In 2011 Blueprint, the first CSS framework came out and revolutionized the way websites were built. Less than five years since the redesign framework - blueprint logolease of Blueprint there has been an explosion in the number of front end frameworks for developers to choose from. Frameworks now need to be innovative and keep up with the latest design standards. They also have to utilize different stacks of technologies in order to differentiate from their competitors. In this modern world that is full of choices we now need to look closer at our options, sift through the clutter and decide what the right framework is for our situation.

When deciding what framework is best for a particular project we need to first take into account why we are using a framework to start with. In our case we are using a framework to save time, unify our design elements and optimize our project scope by cutting out the task of repeatedly writing large amounts of custom code. In order to find the best framework to effectively achieve these goals we have come up with the following list of criteria to analyze.


  • Maturity of the library
  • Other technologies used by the framework
  • Ease of implementation
  • Design features
  • Size of the framework after minimizing 


We mentioned earlier that there are quite a few frameworks in circulation for us to choose from, talking about all of them in one blog post would be confusing and less effective. As a team of developers that often works with Angular.js we decided that the framework would need to either already implement Angular in its stack of technologies used, or play well with it. Secondly, we considered strength of design, so using Google’s new Material design is a requirement as well. Lastly we looked to see what the most popular frameworks being used by our fellow developers are and took into account their reviews. Our conclusion was to look into Angular Material, LumX,  and Materialize. The following is a breakdown of what our research found.


Maturity of the Library

The maturity of the library refers to the size of the community supporting the framework and how long it has been around. The Internet is a quickly evolving place and over time things become outdated if they aren’t constantly updated. We need to be sure that our framework will have people maintaining it in the future.


Angular Material
Angulardesign framework - angular material logo Material was first released on Github in 2014 under the MIT license . Since then the framework has had 66 updated releases coming from its 176 Github contributors. The documentation includes a website with Demos, API references and version release notes. Although in alpha, there is a version of this UI framework for the newest version of Angular, Angular2. There is still the need to port some more components, but you can keep up on progress here. Angular Material is also supported internally at Google rounding off support making it a mature and well supported.


design framework - lumx logoLumX was first released on Github in 2014 under the MIT license . Since then it has had 162 updated releases coming from its 13 Github contributors. The framework also has additional resources provided by a website that includes help with setting up, code demos and information on how to contribute.


design framework - materialize logoMaterialize was first released on Github in January of 2015 making it the newest of the frameworks that we are reviewing. It was originally developed by four graduates from Carnegie Mellon University. Materialize like LumX and Angular Material is also under the MIT license. Over the last year since release it has had 24 updated releases coming from its 126 Github contributors.  There is also a website for the framework providing additional resources very similar to Angular Material’s. The website features code demos, documentation on getting started and a live chat where you can interact with other developers who are currently using Materialize.


Other technologies used by the framework

This is where we take a look at any CSS preprocessors, fonts, icon libraries, or other frameworks that are used. Using other technologies can strengthen a frameworks effectiveness and design. Additional frameworks can also weigh down a project that does not need them. When choosing a framework this is where you need to spend some time comparing the project needs to what you are getting from the framework. To give you an example you do not want to implement a framework that comes with Angular.js for a static one page HTML site that does not require any sort of JavaScript. Let’s look at what each framework is offering us.


Angular Material
Angular Material is the biggest of the three libraries that we are comparing. It uses two main JavaScript frameworks jQuery and Angular. Unlike LumX and Materialize, it also includes some of the subsets of the main Angular library such as Angular-animate and Angular-message by default. The framework’s website also suggests that if they are useful to your project ngMessages , ngSanitize  and ngRoute can easily be applied to your stack. Using all of these frameworks can be a plus when working on a larger multidimensional project, but they can also bog down a small project where they are unnecessary. Angular Material also includes the basic icon and font sets used with Material design, Roboto and the Material Design icon set. With this framework there is a large list of dependencies to go along with the few we mentioned. Click here to see the full list.

LumX is not as robust of a framework as Angular Material, but it still includes both jQuery and Angular. Instead of using Angular-animate for transitions the framework utilizes Velocity. For a date picking element it requires you install Moment.js. This framework uses Sass and Bourbon for CSS preprocessing along with variable mixins for every color in the Material UI Color palette. To view an up to date list of the dependencies required by LumX  Click here.


Materialize in the smallest of the frameworks we are comparing in this post. It is the only one of the three that does not come with Angular as a dependency, although it is easily implemented. This framework uses jQuery, CSS with Sass and HTML. Google Material’s recommended Roboto Font and Material Icon sets are also included. Click here to get the complete up to date set of dependencies from the Materialize Github page.


Ease of implementation

bower-npm-logosIn the beginning of this post we mentioned that saving time is one of the main reasons that we are using a framework in our project. If a framework is time consuming to install or is lacking detailed instructions we could end up spending unnecessary amounts of time figuring out how to get started. To avoid spending that extra time lets take a look at each framework and see what they have to offer for helping us get started.


Angular Material

Angular Material can easily be installed through either npm, JSPM, or Bower. There are also a few tutorials and Codepen examples you can play with if you are new to the framework and need additional resources. If you are using Angular2 then you can install Angular Material2 with npm and the Angular2 cli. There are a few extra steps for Material2 that can be found here on the Material2 website.



LumX can be installed through npm and Bower. If you do not want to use npm and Bower to install the framework the website gives you a step by step guide on how to install it manually.



Materialize offers two different versions that can be downloaded and installed. The first version is the simple version with no CSS preprocessor or the second option that includes Sass. The framework can be downloaded from the Materialize website and easily installed with npm.  Detailed installation instructions are included on the site under the download buttons. If you want to get a quick start there is also two prebuilt templates that can be downloaded that are already set up and ready to customize.


Design features

design framework - materialdesign_introductionWe are looking at three frameworks that all apply Material Design theory,  this gives all of them a similar aesthetic. All three of these frameworks use Google’s Roboto font, the Material icon set, the Material Color palette and Material’s guide to motion. In this section we will look closer at how these design elements are implemented and how easily they can be customized. Responsiveness  is no longer an optional feature in a framework and is one of the most important design features we work with. To dive deeper into responsive design support we will be examining how each framework handles its grid on different size screens.


Angular Material
Angular Material comes with a large selection of prebuilt services and directives that take care of many of the basic components we find ourselves rebuilding in projects. Some examples are lists, dropdown menus, and formatted lists. Click here for a complete list of prebuilt services and directives. This framework makes using the Material color palette easy with custom theming. The developer picks ‘primary’, ‘accent’ and ‘warning’ colors; once configured Material injects the color theme through the project. One of the unique design options in Angular Material is the option to configure multiple sets of color schemes in one project.

Responsive design is handled in Angular Material through the use of layout containers and transition classes. The layout containers hold the grid of the project as device screen sizes adjust. The container classes are used in order to hide and show content depending on the size of the screen it is viewed on.


LumX uses SASS and Bourbon preprocessors this allows developers to easily work with and change CSS styling. To make following Material style guidelines a more fluid process the framework offers variables for the entire Material UI Color Palette library to be mixed in with designs. Like Angular Material this framework uses a color scheme that has a primary, accent and warning color. To customize the default theme you need to go in and override the default settings in the main SCSS file, although a much less desirable way to handle custom theming than what’s offered by Angular Material.

LumX handles responsive design through the use of Flexboxes and Mixins. Flexboxes work similarly to layout containers in Angular Material to hold the grid of a project as the screen scales. Mixing are used for different media query sizes to show and hide different elements in a project on different screen sizes.


Materialize like Angular and LumX also offers a large list of prebuilt design elements that can be found on their website. One of the key features of Material design is the use of a 3d space, where the pieces of an application or website are no longer flat, but are now layered on one another. The framework includes a unique class that lets designers decide where in that 3d space an element exists. This feature is the shadow, and it is controlled by the z-depth class.

The z-depth class gives the element a new z-index and a more or less defined shadow based on where it exists in relation to the user.  When looking at customizing colors in Materialize you have a few options. If you are using the stripped down version of the framework you can can access the Material color palette variables and apply them to your design. If you are using the version that includes SASS you will also have access to mixins to reuse customized versions of a color from the palette.

design framework - shadow
The framework has a number of tools to help developers with responsive design including columns, rows, offsets, push and pull classes, and a detailed guide on setting up responsive layouts. The columns and rows work similarly to the way Flexbox and layout containers do in the previous frameworks. The offsets are special areas used to hold space in a grid column as the screen adjusts. The push and pull classes are  used to hide and show elements on different screen sizes. Materialize offers an additional resource for mobile devices, a plugin can be used to implement drag and swipe gestures on a user’s phone.


Size of the framework after minimizing

The last thing we are going to take a look at is the size of the framework after minimizing. We got the following information by downloading the frameworks installing their dependencies and then compressing the file.


Angular Material

  • 81.4MB



  • 19.9MB



  • Without Sass 1.2MB
  • With Sass 1.3MB



We now have the information we need to make an informed decision on what framework will work best for our project:

  • Reviewed the maturity of the framework to see which has been around the longest and the level of community support provided.
  • Analyzed the technologies each framework has taken advantage of to offer us additional support if we need it.
  • Tested how easy each framework is to implement so we do not spend too much time trying to get our project started.
  • Assessed the design features each framework was offering us for customizing their prebuilt elements and for assisting with responsiveness as we transition through different screen sizes.
  • Downloaded each library, installed its dependencies and minimized it to see how it stacked up against the others in regards to size.

Based on the above, what we have concluded that if you are working on a project that needs a few interactive web elements and a solid design structure based on Google Material then Materialize is a great choice. It is a lightweight framework that can be installed easily, it even has template pages if you need to create a well designed website quickly.

On the other hand, if you need some extra Angular support, but want to keep your design framework on the lighter side Lumx is a great choice. It has extra features that Materialize does not include, but it is lacking in the strong support system and easy customization options that Angular Material provides.

Finally, there are many benefits to using Angular material if you can incur the size of the framework. When you create a larger project that needs a framework that works alongside your Angular code it is tuned to work with Angular. It is also the only framework of the three that offers a version of the framework for Angular2, the latest version of Angular. There are Codepen demos of all of the elements this framework provides that makes getting familiar with it without installation easy. The option to create multiple configurable themes in one project allows it to be the most easily customized framework of the three as well.

There are a lot of frameworks to choose from. Figure out the specifications and requirements for your project and match it with the framework that fits best!

Share this
15 Jul 2016

Automated Functional Testing with Intern

What is automated testing?

Automated testing is a way for developers to test their code without having to manually go through and review everything they have built. It allows for warnings to be thrown when specific parts of the code are broken, this helps developers quickly narrow down what is defective. Efficient automated tests can save hours of debugging and QA time. There are two types of automated testing: Unit testing and Functional testing. Unit testing takes in inputs and checks that the functions being tested return the expected output. Functional testing tests the interactions a human would have with a program. In this Blog Post we will be focusing on writing functional tests with an automated testing framework called Intern.

Why use intern…

When picking a framework to use for your automated testing you have a few different choices. You need to consider what you need from the framework and what type of application you are testing.


We chose to use Intern as our testing framework because of its flexibility and compatibility with web applications written with JavaScript. Intern is able to assist in running both unit and functional tests. chaiJSLogoIntern uses a few different tools within the framework. Leadfoot API is included to give the developer a selection of methods that can be utilized in order to mimic user interactions with different UI elements. Intern can use Selenium in order to automate browsers that are being tested and can also be leveraged to use cloud-based testing tools such as BrowserStack. Intern also uses assertion libraries to run specific tests on targeted elements. It is compatible with any assertion library, we are choosing to use Chai.js in our example.

The following is a simple example of how to use Intern

The following is a basic functional test that we are using to load the Intern.io website and check that the title text says “Intern.”

], function (registerSuite, assert, require, registry) {
name: 'intern',
'00-page-load': function () {

return this.remote
.then(function (text) {
assert.strictEqual(text, 'Intern.', ' The visible page title should say “Intern.” ');

Lets break this down…

We are using define in order to load in the modules required to write our test with Intern then registering the suite.

], function (registerSuite, assert, require, registry) {

Name of our test suite, multiple tests can share this name
name: 'intern',

Our first test name, this needs to be unique
'00-page-load': function () {

This loads the page we will be testing (Intern’s homepage) then gives it 8 seconds to load before running the next method.
return this.remote

This loads the page we will be testing (Intern’s homepage) then gives it 8 seconds to load before running the next method.
return this.remote

The title of the Intern.io page is the text in the logo. We are looking for the logo class and checking to make sure this class is visible and displaying the correct text.

.then(function (text) {

Uses the Chai Assertion to make sure the visible page title says Intern.

assert.strictEqual(text, 'Intern.', ' The visible page title should say “Intern.” ');

Ends the most recent filtering operation. In this case it is .findByClassName(). If you do not include the end method your next filtering operation will fail.

Chrome Plugin

Intern has created a Chrome plugin to make testing even easier. The Intern Recorder plugin helps track user interactions in your browser and translates them to code in the Chrome console under a tab labeled ‘Intern’. The Intern recorder is useful for targeting UI elements and tracking user processes . One of the biggest issues we found in depending on the Intern Recorder is that it relies on Xpath methods from Leadfoot that are not currently supported by IE.

In conclusion

Automated functional testing is a great way to cut down on QA and debugging time. Find the framework that is the most compatible with the code you are writing. If you are working with web applications we suggest Intern. If you need more help setting up your first test here is a link to Intern’s getting started documentation .

Now have fun writing functional tests!


Share this
02 Oct 2015

Material with LESS

In this post we are going to create a dynamic style-sheet that can be altered to fit any web application project while keeping inline with Material standards. This project is a great way to familiarize yourself with Material design while creating a style-sheet that can be recycled over and over again to create unique looking designs by just changing a few lines of code.

read more
Share this
24 Sep 2015
10 Sep 2015

Getting Your Feet Wet with Angular Animations

Imagine you get into a car start the engine, touch the acceleration and go from 0 to 60 in the blink of an eye. You then take the wheel to turn right and instead of a smooth turn the car takes an immediate 90 degree turn.

This is how interface design feels without smooth transitions. It works, but it does not feel natural to the user. Animations can give your design the illusion of depth and lifelike motion, creating a more 3D space and giving the user the feeling of being inside the design.

read more
Share this
19 Aug 2015

Different uses for the HTML5 Canvas tool

One of my co-workers suggested I look into the HTML5 Canvas as a possible solution. After looking into the canvas element I realized it was not only the perfect solution to my current problem, but it could also be a very useful tool for future projects involving graphical elements that need to changed based on user interaction.

read more
Share this
09 Jul 2015

© 2019 RealEyes Media, LLC. All rights reserved.