Skip to content
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
June 5, 2014

Rapid Prototyping with AngularJS

Angular, Front End Development

Building great web applications is challenging and all great web applications start with a proof of concept or prototype.

The majority of single page web applications in production today using modern technology typically leverage a JavaScript framework or library. Pick your flavor: Angular, Ember, React, Backbone, Sencha, Knockout; the list goes on. These frameworks are vastly different and highly opinionated from each other in the their approach to building web applications.

The common theme between each of these frameworks and libraries is that you generally never really stop writing HTML.

For those who are comfortable writing and “designing” with HTML and the need to develop rapid prototypes, there is a clear choice; AngularJS. If you put a piece of an Angular template in front of a designer with minimal web development chops, chances are they could get the gist of what that templates functionality is. They could also more than likely style that component or directive quickly and easily.

The Prototyping (and beyond) Stack

In the early stages of product development, focus should be on validating functionality and challenging assumptions. At Modus Create, this typically means rapid prototyping in combination with user testing and verifying those assumptions. One rapid prototype stack that We’ve used with great success has been:

Desktop and Responsive Web Apps

  • AngularJS
  • Bootstrap (or Foundation)
  • Angular UI-Router
  • Angular UI Bootstrap / angular-strap
  • (insert Backend as a Service [BaaS] of choice)

Mobile Web Apps / Hybrid

  • AngularJS + Ionic Framework
  • Angular UI-Router (required dependency of Ionic)
  • Cordova (PhoneGap)
  • (insert BaaS of choice)

When testing assumptions about your application, worrying about boilerplate functionality should be the last thing you need. Using either (or both) of these stacks will get you off the ground and into prototyping quicker – they will flat out make you more productive.

I’ve personally used both of these stacks to move from nothing to something sizeable with basic functionality within several days.

You thought it couldn’t get faster.

Many developers can spend days or even weeks planning out the scaffolding for a new project – and we’ve all been there. Making sure that every architectural detail is thought out before development even begins isn’t always the best approach for verifying your idea/prototype even has legs. This can all be mitigated with scaffolding generators.

Generate this!

Yeoman will get you off and running even faster. Need to generate basic scaffolding for an angular app? There’s a generator for that. What about an angular app that runs on top of Node/Express? There’s a generator for that. What about scaffolding a new Ionic HTML5 Hybrid project? Ionic has a command line tool that will get you started. I think you get the point.

Some of our favorite yeoman generators:

  • generator-gulp-webapp
  • generator-angular
  • generator-mean
  • generator-boom
  • The Ionic CLI

Nothing is perfect.

It can be said that generators are not without their flaws. Just like any JavaScript framework, generators are opinionated. They may not structure your code the way you thought they would. They probably install dependencies you don’t need. Fortunately for us, none of this gets in the way of creating amazing proof of concepts.

Wrapping up

What are some of your favorite tools and frameworks for rapid prototyping? We’d love to hear your war stories in the comments.

Posted in Angular, Front End Development
Share this

Dave Ackerman

Follow

Related Posts

  • AngularJS-Tricks-with-angular-extend
    AngularJS: Tricks with angular.extend()

    AngularJS has this built-in method for doing object to object copies called angular.extend(). It is…

  • Three issues with AngularJS
    Three issues with AngularJS

    AngularJS is all the rage these days, and for good reason. It’s a lightweight and…

Subscribe to the Modus Newsletter

Receive the latest blog articles and insights every month from the Modus team.

Let's Chat

If forms aren’t your thing, you can always call us (+1-855-721-7223).

Modus-Logo-Primary-White.svg
  • Services
  • About
    • Newsroom
  • Partners
  • Work
  • Insights
    • Blog
    • Modus Labs
  • Careers
Virginia (US)

12100 Sunset Hills Road
Suite 150
Reston, Virginia, 20190
Tel: +1-855-721-7223

California (US)
12130 Millennium Dr

Los Angeles, CA 90094

Missouri (US)
609 E High St

Jefferson City, MO 65101

Romania

Str. Mihai Veliciu, no. 17
Cluj-Napoca, Romania
Tel: +40-0786-887-444

Costa Rica

2nd Floor, Plaza Koros, Av 3
San José, Santa Ana, Costa Rica

© 2021 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

This website uses cookies.
These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Accept
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

Scroll To Top