Your SlideShare is downloading. ×
Rapid prototyping
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Rapid prototyping

7,000
views

Published on

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

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,000
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
101
Comments
2
Likes
61
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×