In vivo prototyping

Prototypes have an important role in the design process of any web application because they allow to verify new ideas quickly and cheaply. As developers we often avoid working on prototypes, because it seems to be slow and expensive. But it doesn't have to be that way.

Transcript

1. HTML5 DEV CONF 21 OCTOBER 2014 IN VIVO PROTOTYPING BARTEK SZOPKA @BARTAZ
2. PLZEŇ CZECH REPUBLIC SAN JOSE CA USA POZNAŃ POLAND
3. WHAT? HOW? WHY?
4. pro·to·type noun 1. a first, typical or preliminary model of something, especially a machine, from which other forms are developed or copied.
 
 “the firm is testing a prototype of the weapon” /ˈprō-tə-ˌtīp/
12. – Look my liege! – Camelot! – It’s only a model! – Shh!
13. in vi·vo adverb or adjective 1. in the living body of a plant or animal
 
 “microorganisms are not ordinarily destroyed in vivo by bacteriostatic drugs” 2. in real-life situation
 
 “observing a patient’s behaviour in vivo” /in-ˈvē-vō/
14. RECENT PAGES CASE STUDY
18. QUICK & DIRTY PROGRAMMING
19. There is some lovely filth down here!
20. SEPARATE REPOSITORY master prototype
21. SEPARATE BRANCH master prototype
22. FEATURE FLAGS master prototype if config.isFeatureFlag(‘recentPages’) { // enable prototype recent pages } else { // do old stuff }
24. On second thought, let's not go to Camelot. 
 It is a silly place.
25. ~↑→↵
28. /szo↵
30. PROTOTYPE IN EXISTING CODE TEST WITH EXISTING DATA AND USERS DESIGN AND DEVELOP TOGETHER IMPROVE OR FAIL QUICKLY
31. I seek the Grail!
 I have seen it, here in this castle!
34. WORK TOGETHER DESIGNERS AND DEVELOPERS SHOULD
35. FEATURE FLAGS LEARN MORE ABOUT
36. HTML5 DEV CONF 21 OCTOBER 2014 BARTEK SZOPKA @BARTAZ THANK YOU
37. ! ‘Prototyping. A Practitioners Guide’ book by Todd Zaki Warfel: http://rosenfeldmedia.com/books/prototyping/ ! ‘Design Better And Faster With Rapid Prototyping’ article by Lyndon Cerejo: http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/ ! ‘Development is design’ and ‘Primed and ready to go’ articles by Brad Frost: http://bradfrostweb.com/blog/post/development-is-design/ http://bradfrostweb.com/blog/post/primed-and-ready-to-go/ More reading on prototyping and design+development process
38. Flickr dev blog on their use of feature flags: http://code.flickr.net/2009/12/02/flipping-out/ ! GitHub blog on releasing new features: https://github.com/blog/677-how-we-deploy-new-features ! Facebook on shipping code to production twice a day https://www.facebook.com/notes/facebook-engineering/10150985860363920 http://zkybase.org/blog/2012/12/02/pushing-twice-daily-our-conversation-with-facebooks-chuck-rossi/ ! Travis CI blog on using feature flags: http://blog.travis-ci.com/2014-03-04-use-feature-flags-to-ship-changes-with-confidence/ ! Remy Sharp on using feature flags in JSBin: https://remysharp.com/2014/03/17/feature-based-development ! More reading on feature flags
39. World Map: http://commons.wikimedia.org/wiki/Category:Blank_SVG_maps_of_the_world Monty Python and the Holy Grail BMW GINA: http://en.wikipedia.org/wiki/BMW_GINA Google car: http://googleblog.blogspot.com/2014/05/just-press-go-designing-self-driving.html Odbudowa Warszawy: http://facebook.com/odbudowawarszawy Pillars of Eternity: http://eternity.obsidian.net/media/screenshots ‘Prototyping’ book: https://www.flickr.com/photos/rosenfeldmedia/sets/72157622384497663 Axure prototyping software http://youtu.be/WPHKZcMeARE Samepage: http://samepage.io Facebook Engineering: https://www.facebook.com/notes/facebook-engineering/10150985860363920 Gmail Labs: https://mail.google.com/mail/u/0/#settings/labs Image credits (in order of appearance)