0
Rapid Prototyping
Yevgeniy Brikman
Go from an idea to working code quickly.
Why?
1. Build products faster
Why?
1. Build products faster
2. ???
Why?
1. Build products faster
2. ???
3. Profit!!
Why?
1. Build products faster
2. ???
3. Profit!!
Why?
1. Build products faster
2. Build products of higher quality
3. Profit!!
Why?
1. Build products faster
2. Build products of higher quality
3. Become a better engineer
Outline
1. Instant Feedback
2. Leverage
3. Beyond prototypes
Instant Feedback
The antithesis of rapid prototyping.
Change the code
Change the code See the result
Change the code See the result
Should be as close to 0 as possible
Use dynamic/interpreted languages
1. No waiting for compilation
Use dynamic/interpreted languages
1. No waiting for compilation
2. Generally more flexible and hackable
Use dynamic/interpreted languages
1. No waiting for compilation
2. Generally more flexible and hackable
3. "A programming ...
Use interactive languages
1. The REPL is your friend
Use interactive languages
1. The REPL is your friend
2. Some static languages support hot reload
(Play Framework, JRebel)
Use interactive languages
1. The REPL is your friend
2. Some static languages support hot reload
(Play Framework, JRebel)
...
Push everything to the client
1. Modern browsers are powerful
Push everything to the client
1. Modern browsers are powerful
2. JS/CSS feedback loop is nearly
instantaneous
Push everything to the client
1. Modern browsers are powerful
2. JS/CSS feedback loop is nearly
instantaneous
3. Tight fee...
Demo
1. Frameworks: node-dev, express, play
2. Client-side MVC: backbone.js, underscore.js
3. In-browser: firebug, develop...
node-dev: restarts node on every change
Play Framework: modern web framework for Java and
Scala that supports hot reload
Chrome dev tools: inspect the page and change it on
the fly!
JSFiddle: create, run, and share HTML/CSS/JS snippets
right in the browser.
apigee: try out 3rd party APIs (LinkedIn, twitter, facebook,
etc) directly in the browser
Leverage
tldr: google & stackoverflow are your
friends
Don't reinvent the wheel
1. Always, always, always google first
Don't reinvent the wheel
1. Always, always, always google first
2. StackOverflow has the best answers
Don't reinvent the wheel
1. Always, always, always google first
2. StackOverflow has the best answers
3. You'll be lucky i...
Use open source libraries
1. There is probably (more than) one for the
problem you're solving
Use open source libraries
1. There is probably (more than) one for the
problem you're solving
2. They have probably solved...
Use open source libraries
1. There is probably (more than) one for the
problem you're solving
2. They have probably solved...
Use open source libraries
1. There is probably (more than) one for the
problem you're solving
2. They have probably solved...
Demo
1. Backend: node modules, node toolbox,
ruby toolbox, mongo
2. JS: jQuery (UI, tools), backbone, underscore
3. UI: bo...
ruby-toolbox: open source ruby libraries, broken down
by category, ranked by popularity and quality.
node-toolbox: open source node.js libraries, broken
down by category, ranked by popularity and quality.
jquery: the de-fact cross-browser JS library. Don’t leave
home without it.
underscore: dozens of extremely useful javascript
functions. The most popular library in npm.
bootstrap: frontend framework that makes it easy to
create a clean, responsive UI, even if you aren’t a CSS pro.
Google fonts: free fonts to use in your app
localtunnel: a quick way to share an app running on
localhost with the outside world
Beyond prototyping
All software development is trial and error.
A canvas or sketchbook serves as an
"external imagination", where an artist can
grow an idea from birth to maturity by
con...
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 thr...
Time
Maturity
Mature, stable
Proof of concept
Product development (technology comparison)
Dynamic/interpreted
languages St...
Time
Maturity
Mature, stable
Proof of concept
Dynamic/interpreted
languages Static languages
Innovation
Advantage
Product ...
Time
Maturity
Mature, stable
Proof of concept
RoR, Play
Servlets, Spring
Innovation
Advantage
Product development (framewo...
Time
Maturity
Mature, stable
Proof of concept
Agile, Scrum
Waterfall
Innovation
Advantage
Product development (development...
Faster can mean higher quality
1. In a trial and error world, getting to errors
faster is the key to success
Faster can mean higher quality
1. In a trial and error world, getting to errors
faster is the key to success
2. Making mor...
Faster can mean higher quality
1. In a trial and error world, getting to errors
faster is the key to success
2. Making mor...
Upcoming SlideShare
Loading in...5
×

Rapid prototyping

7,520

Published on

A presentation I did at LinkedIn hackdays on how - and why - to build things quickly.

Published in: Engineering, Technology
2 Comments
61 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,520
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
119
Comments
2
Likes
61
Embeds 0
No embeds

No notes for slide

Transcript of "Rapid prototyping"

  1. 1. Rapid Prototyping Yevgeniy Brikman
  2. 2. Go from an idea to working code quickly.
  3. 3. Why? 1. Build products faster
  4. 4. Why? 1. Build products faster 2. ???
  5. 5. Why? 1. Build products faster 2. ??? 3. Profit!!
  6. 6. Why? 1. Build products faster 2. ??? 3. Profit!!
  7. 7. Why? 1. Build products faster 2. Build products of higher quality 3. Profit!!
  8. 8. Why? 1. Build products faster 2. Build products of higher quality 3. Become a better engineer
  9. 9. Outline 1. Instant Feedback 2. Leverage 3. Beyond prototypes
  10. 10. Instant Feedback
  11. 11. The antithesis of rapid prototyping.
  12. 12. Change the code
  13. 13. Change the code See the result
  14. 14. Change the code See the result Should be as close to 0 as possible
  15. 15. Use dynamic/interpreted languages 1. No waiting for compilation
  16. 16. Use dynamic/interpreted languages 1. No waiting for compilation 2. Generally more flexible and hackable
  17. 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. 18. Use interactive languages 1. The REPL is your friend
  19. 19. Use interactive languages 1. The REPL is your friend 2. Some static languages support hot reload (Play Framework, JRebel)
  20. 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. 21. Push everything to the client 1. Modern browsers are powerful
  22. 22. Push everything to the client 1. Modern browsers are powerful 2. JS/CSS feedback loop is nearly instantaneous
  23. 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. 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. 25. node-dev: restarts node on every change
  26. 26. Play Framework: modern web framework for Java and Scala that supports hot reload
  27. 27. Chrome dev tools: inspect the page and change it on the fly!
  28. 28. JSFiddle: create, run, and share HTML/CSS/JS snippets right in the browser.
  29. 29. apigee: try out 3rd party APIs (LinkedIn, twitter, facebook, etc) directly in the browser
  30. 30. Leverage
  31. 31. tldr: google & stackoverflow are your friends
  32. 32. Don't reinvent the wheel 1. Always, always, always google first
  33. 33. Don't reinvent the wheel 1. Always, always, always google first 2. StackOverflow has the best answers
  34. 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. 35. Use open source libraries 1. There is probably (more than) one for the problem you're solving
  36. 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. 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. 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. 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. 40. ruby-toolbox: open source ruby libraries, broken down by category, ranked by popularity and quality.
  41. 41. node-toolbox: open source node.js libraries, broken down by category, ranked by popularity and quality.
  42. 42. jquery: the de-fact cross-browser JS library. Don’t leave home without it.
  43. 43. underscore: dozens of extremely useful javascript functions. The most popular library in npm.
  44. 44. bootstrap: frontend framework that makes it easy to create a clean, responsive UI, even if you aren’t a CSS pro.
  45. 45. Google fonts: free fonts to use in your app
  46. 46. localtunnel: a quick way to share an app running on localhost with the outside world
  47. 47. Beyond prototyping
  48. 48. All software development is trial and error.
  49. 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. 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. 51. Time Maturity Mature, stable Proof of concept Product development (technology comparison) Dynamic/interpreted languages Static languages Idea
  52. 52. Time Maturity Mature, stable Proof of concept Dynamic/interpreted languages Static languages Innovation Advantage Product development (technology comparison) Idea
  53. 53. Time Maturity Mature, stable Proof of concept RoR, Play Servlets, Spring Innovation Advantage Product development (framework comparison) Idea
  54. 54. Time Maturity Mature, stable Proof of concept Agile, Scrum Waterfall Innovation Advantage Product development (development method comparison) Idea
  55. 55. Faster can mean higher quality 1. In a trial and error world, getting to errors faster is the key to success
  56. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×