This document discusses rapid prototyping techniques for quickly building products from ideas. Rapid prototyping allows developers to build products faster through instant feedback on code changes and leveraging existing open source libraries. It is suggested that dynamic languages, interactive development environments, and pushing code to the browser can provide very fast feedback. While prototypes may be thrown away, the rapid trial and error process of prototyping can lead to higher quality products and better engineers through continuously improving ideas.

1. Rapid Prototyping
Yevgeniy Brikman

2. Go from an idea to working code quickly.

3. Why?
1. Build products faster

4. Why?
1. Build products faster
2. ???

5. Why?
1. Build products faster
2. ???
3. Profit!!

6. Why?
1. Build products faster
2. ???
3. Profit!!

7. Why?
1. Build products faster
2. Build products of higher quality
3. Profit!!

8. Why?
1. Build products faster
2. Build products of higher quality
3. Become a better engineer

9. Outline
1. Instant Feedback
2. Leverage
3. Beyond prototypes

10. Instant Feedback

11. The antithesis of rapid prototyping.

12. Change the code

13. Change the code See the result

14. Change the code See the result
Should be as close to 0 as possible

15. Use dynamic/interpreted languages
1. No waiting for compilation

16. Use dynamic/interpreted languages
1. No waiting for compilation
2. Generally more flexible and hackable

17. Use dynamic/interpreted languages
1. No waiting for compilation
2. Generally more flexible and hackable
3. "A programming language is for thinking of
programs, not for expressing programs
you've already thought of." [1]
[1] Paul Graham, Hackers and Painters

18. Use interactive languages
1. The REPL is your friend

19. Use interactive languages
1. The REPL is your friend
2. Some static languages support hot reload
(Play Framework, JRebel)

20. Use interactive languages
1. The REPL is your friend
2. Some static languages support hot reload
(Play Framework, JRebel)
3. IDEs can help too[1][2]
[1] Scala worksheet in Eclipse
[2] http://www.lighttable.com/

21. Push everything to the client
1. Modern browsers are powerful

22. Push everything to the client
1. Modern browsers are powerful
2. JS/CSS feedback loop is nearly
instantaneous

23. Push everything to the client
1. Modern browsers are powerful
2. JS/CSS feedback loop is nearly
instantaneous
3. Tight feedback loop in the browser often
leads to a better user experience

24. Demo
1. Frameworks: node-dev, express, play
2. Client-side MVC: backbone.js, underscore.js
3. In-browser: firebug, developer tools, jsfiddle,
tinkerbin
4. Other: CodeKit, apigee, js-api console

25. node-dev: restarts node on every change

26. Play Framework: modern web framework for Java and
Scala that supports hot reload

27. Chrome dev tools: inspect the page and change it on
the fly!

28. JSFiddle: create, run, and share HTML/CSS/JS snippets
right in the browser.

29. apigee: try out 3rd party APIs (LinkedIn, twitter, facebook,
etc) directly in the browser

30. Leverage

31. tldr: google & stackoverflow are your
friends

32. Don't reinvent the wheel
1. Always, always, always google first

33. Don't reinvent the wheel
1. Always, always, always google first
2. StackOverflow has the best answers

34. Don't reinvent the wheel
1. Always, always, always google first
2. StackOverflow has the best answers
3. You'll be lucky if you have a single original
idea your entire life [1]
[1] Mr. Patch, my 11th grade physics teacher

35. Use open source libraries
1. There is probably (more than) one for the
problem you're solving

36. Use open source libraries
1. There is probably (more than) one for the
problem you're solving
2. They have probably solved parts of the
problem you haven't thought of yet

37. Use open source libraries
1. There is probably (more than) one for the
problem you're solving
2. They have probably solved parts of the
problem you haven't thought of yet
3. Many minds are better than one

38. Use open source libraries
1. There is probably (more than) one for the
problem you're solving
2. They have probably solved parts of the
problem you haven't thought of yet
3. Many minds are better than one
4. Bonus: learn from their code

39. Demo
1. Backend: node modules, node toolbox,
ruby toolbox, mongo
2. JS: jQuery (UI, tools), backbone, underscore
3. UI: bootstrap, jetstrap, google fonts,
compass
4. Other: node.js screen scraping, lorem ipsum,
placekitten.com, localtunnel

40. ruby-toolbox: open source ruby libraries, broken down
by category, ranked by popularity and quality.

41. node-toolbox: open source node.js libraries, broken
down by category, ranked by popularity and quality.

42. jquery: the de-fact cross-browser JS library. Don’t leave
home without it.

43. underscore: dozens of extremely useful javascript
functions. The most popular library in npm.

44. bootstrap: frontend framework that makes it easy to
create a clean, responsive UI, even if you aren’t a CSS pro.

45. Google fonts: free fonts to use in your app

46. localtunnel: a quick way to share an app running on
localhost with the outside world

47. Beyond prototyping

48. All software development is trial and error.

49. A canvas or sketchbook serves as an
"external imagination", where an artist can
grow an idea from birth to maturity by
continuously reacting to what's in front of
him [1]
[1] Bret Victor, Learnable Programming

50. Only about 10% of the UI code written to
craft the experience lasted more than a year.
90% of the UI code needed to be thrown
away. [1]
[1] Bill Scott, The Experimentation Layer

51. Time
Maturity
Mature, stable
Proof of concept
Product development (technology comparison)
Dynamic/interpreted
languages Static languages
Idea

52. Time
Maturity
Mature, stable
Proof of concept
Dynamic/interpreted
languages Static languages
Innovation
Advantage
Product development (technology comparison)
Idea

53. Time
Maturity
Mature, stable
Proof of concept
RoR, Play
Servlets, Spring
Innovation
Advantage
Product development (framework comparison)
Idea

54. Time
Maturity
Mature, stable
Proof of concept
Agile, Scrum
Waterfall
Innovation
Advantage
Product development (development method comparison)
Idea

55. Faster can mean higher quality
1. In a trial and error world, getting to errors
faster is the key to success

56. Faster can mean higher quality
1. In a trial and error world, getting to errors
faster is the key to success
2. Making more errors leads to better software
and better engineers

57. Faster can mean higher quality
1. In a trial and error world, getting to errors
faster is the key to success
2. Making more errors leads to better software
and better engineers
3. Speed wins [1]
[1] A handwritten note on the door to the office of Stephen Kaufer, TripAdvisor CEO