Rapid Front End App
Prototyping
Dan Gribbin (me)
@brandnetworks
@dangribbin
agenda
-
learn a few concepts of prototyping
-
build a simple prototype using common tools
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
Front End Prototyping
By Dan Gribbin
Front End Prototyping
- 1,086