Who Am I?

Senior Software Engineer
Brand Networks

Brand Networks is the leading provider of data-informed social marketing solutions.

• Facebook marketing partner

• One of the first Twitter Ads API developers

• LinkedIn Sponsored Updates and Custom Apps partner

In short, we build web and mobile apps for social efforts of all kinds.

How fun is it?

really fun. Here's why.

Creative engineering

• build apps using the best new tools.

• Find a better one? Let's try it.

• Teach your fellow engineers what you learn and vice versa.

What do I build?

Publish 2.0

our Next generation tool for publishing content to social media channels (abr.)

So why am i here to talk about prototyping?

Because we do that a lot.

pro•to•type

noun

a first, typical or preliminary model of something...

verb

modeling a system or a specific aspect of a system

Allows user, client, and developer to effectively work together

reduces the risk of solving a problem the wrong way

What problems
does Rapid
prototyping solve?

• Ambiguities in requirements
• Client/end user confidence in the solution
• Time and cost sinks

A few main benefits:

• reduced time and costs
• increased user involvement

Reduced time+cost

Change is more expensive the later it's necessitated

increased user involvement

(users know the problem domain better than anyone)

avoids misunderstanding of requirements

increased involvement, ownership, and appreciation of the final product

Side benefits

• Helps with estimating development costs
• Great reference point for future work

3 main categories of prototyping

• Throwaway
• Incremental
• Evolutionary

Throwaway prototypes

A prototype that will not be part of the final solution

incremental prototypes

Building-block approach- when all components are in place, the solution is “complete"

Advantage: User-testing & feedback gathering

evolutionary prototypes

Aims to develop a mature system through a series of prototype iterations

Useful when exact requirements are vague or can't be planned.

prototype lifecycle

Gather
Requirements

Implement

User
Testing

Analyze &
Design

What if a prototype Fails to solve a problem?

Great! It's done its job.

What do we prototype at Brand Networks?

Prototyping tools for web apps

Yeoman

yeoman.io

A collection of tools in one package- one command kickstarts a project with commonly-used components ready to go

Includes Yo, Bower, and Grunt

Yo

yeoman.io

Project Generators - hundreds of generators for commonly-structured apps

Bower

bower.io

Easy front-end dependency management

bower install jquery

grunt

gruntjs.com

Automate repetitive tasks like:

• code minification
• code compilation
• unit test running
• linting

angularJS

angularjs.org

Write expressive, readable, supercharged HTML

Quickly wire up UI components

Bootstrap

getbootstrap.com

Apply a base set of CSS styles to all elements on a page for a consistent look-and-feel

let's build a throwaway prototype

We'll use Github's Public API to create a simple search engine for a user's repositories

Then we'll deploy it to Heroku