{"id":2498,"date":"2012-03-21T12:35:04","date_gmt":"2012-03-21T20:35:04","guid":{"rendered":"http:\/\/blog.mozilla.org\/webdev\/?p=2498"},"modified":"2012-03-21T12:35:04","modified_gmt":"2012-03-21T20:35:04","slug":"rapid-prototyping","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/webdev\/2012\/03\/21\/rapid-prototyping\/","title":{"rendered":"Rapid Prototyping"},"content":{"rendered":"<p>If you\u2019re like me, you enjoy doing lots of quick CRUD (create\/read\/update\/delete) applications that are highly experimental, highly volatile and require low commitment until you know where you want to go with it.<\/p>\n<p>Having worked with various web frameworks (Django, Rails, Sinatra, webpy, Struts, Express, Flask, and probably some other ones I\u2019ve missed), I find that as a coder, one needs a nice balance of getting code up and running on a local machine and not having to organize and plan too much when in \u201cplay mode\u201d. By \u201cplay mode\u201d, I mean MTAWGSBWATL a.k.a. \u201cMaybe This App Will Go Somewhere But Worry About That Later\u201d.<\/p>\n<p>This kind of mentality is very useful for both beginners and those who are more advanced in their programming career. Think of it as taking a bunch of clay and molding it until you feel that you have the right fit. The last thing the experimental coder needs is to think about is the \u201cideal organization\u201d of their code and more about getting it running on a local webserver as soon as possible.<\/p>\n<p>I find two frameworks quite efficient at getting this done &#8211; Sinatra and Flask. In this post, I\u2019ll be specifically talking about <a href=\"http:\/\/flask.pocoo.org\">Flask<\/a>, <a href=\"http:\/\/browserid.org\">BrowserID<\/a> and <a href=\"http:\/\/www.mongodb.org\">MongoDB<\/a>.<\/p>\n<p>Now a quick summary of these three things:<\/p>\n<ol>\n<li>Flask is a lightweight Python framework<\/li>\n<li>BrowserID is a secure authentication service<\/li>\n<li>MongoDB is a nosql database<\/li>\n<\/ol>\n<p>Why would one use these for an application, especially one that is prototypical? First, because we don\u2019t want to over-engineer our code right now. Second, because we don\u2019t want to write our own or maintain an authentication platform that requires us to either handle anything beyond a user\u2019s session, uses a third-party service (such as <a href=\"http:\/\/twitter.com\">Twitter<\/a> or <a href=\"http:\/\/facebook.com\">Facebook<\/a>) which some people may not feel comfortable in signing in with and we want to get things done as fast as possible. Finally, because there\u2019s no point in planning a relational database with something like MySQL or PostgreSQL when you may not even know what you are designing. You may not even know what you\u2019re doing! So keep it simple and to the point.<\/p>\n<p>For my examples, I started with <a href=\"http:\/\/lexicrypt.com\">Lexicrypt<\/a>. Lexicrypt is a fun, small project that generates encrypted messages as images. It took me about a week to get the first iteration up and running on a publicly accessible server. Your mileage may vary &#8211; if you\u2019re experienced in Python, this may take you about the same amount of time or less. If this is your first time, don\u2019t worry about taking longer &#8211; you\u2019ll eventually find your comfort zone and your modus operandi for developing personal scaffolds of your projects.<\/p>\n<p>Shortly after I created Lexicrypt, I decided to make a small photo service that enables you to sign in, upload photos, tag and favourite them. Instead of starting from scratch I took the scaffold of Lexicrypt, popped out the encryption functionality and replaced it with the photo functionality. This enabled me to go from idea to deployment for the first iteration within a weekend!<\/p>\n<p>To view the source for these projects and get an idea of their similarities and differences you can check out the Github repositories at <a href=\"https:\/\/github.com\/ednapiranha\/lexicrypt\">https:\/\/github.com\/ednapiranha\/lexicrypt<\/a> and <a href=\"https:\/\/github.com\/ednapiranha\/snapshots-from-here\">https:\/\/github.com\/ednapiranha\/snapshots-from-here<\/a>.<\/p>\n<p>As for your rapid prototyping endeavours, good luck and continue to code and code some more. Remember, the process is not only a way for you to learn how to code more efficiently and collaborate with others as you gain more experience, but it is also a way for you to learn more about yourself in the development of your application.<\/p>\n<p>Here is a video of me giving a lightning talk on the subject:<\/p>\n<p><video id=\"movie\" width=\"640\" height=\"360\" controls=\"controls\" poster=\"http:\/\/blog.mozilla.org\/webdev\/files\/2011\/07\/mozilla_wht.png\" preload=\"none\"><source src=\"http:\/\/videos-cdn.mozilla.net\/serv\/flux\/lightningtalks-q1-2012\/6-edna-rapid-prototyping.webm\" type=\"video\/webm; codecs=&quot;vp8, vorbis&quot;\" \/><source src=\"http:\/\/videos-cdn.mozilla.net\/serv\/flux\/lightningtalks-q1-2012\/6-edna-rapid-prototyping.ogv\" type=\"video\/ogg; codecs=&quot;theora, vorbis&quot;\" \/><source src=\"http:\/\/videos-cdn.mozilla.net\/serv\/flux\/lightningtalks-q1-2012\/6-edna-rapid-prototyping.mp4\" \/><\/video><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you\u2019re like me, you enjoy doing lots of quick CRUD (create\/read\/update\/delete) applications that are highly experimental, highly volatile and require low commitment until you know where you want to go with it. Having worked with various web frameworks (Django, &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/webdev\/2012\/03\/21\/rapid-prototyping\/\">Continue reading<\/a><\/p>\n","protected":false},"author":1438,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[288],"tags":[],"coauthors":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Rapid Prototyping - Mozilla Web Development<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/webdev\/2012\/03\/21\/rapid-prototyping\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"mozilla\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2012\/03\/21\/rapid-prototyping\/\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/2012\/03\/21\/rapid-prototyping\/\",\"name\":\"Rapid Prototyping - Mozilla Web Development\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\"},\"datePublished\":\"2012-03-21T20:35:04+00:00\",\"dateModified\":\"2012-03-21T20:35:04+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/70ae25c16f09d053c6d8b5eac29dbda9\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2012\/03\/21\/rapid-prototyping\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/webdev\/2012\/03\/21\/rapid-prototyping\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2012\/03\/21\/rapid-prototyping\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/webdev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Rapid Prototyping\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/\",\"name\":\"Mozilla Web Development\",\"description\":\"For make benefit of glorious tubes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/70ae25c16f09d053c6d8b5eac29dbda9\",\"name\":\"mozilla\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/e77ee64829d0c3831212656324f746d1\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/75d2017e019c87560fe5d148a64659dc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/75d2017e019c87560fe5d148a64659dc?s=96&d=mm&r=g\",\"caption\":\"mozilla\"},\"url\":\"https:\/\/blog.mozilla.org\/webdev\/author\/mozilla-2\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Rapid Prototyping - Mozilla Web Development","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/webdev\/2012\/03\/21\/rapid-prototyping\/","twitter_misc":{"Written by":"mozilla","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/webdev\/2012\/03\/21\/rapid-prototyping\/","url":"https:\/\/blog.mozilla.org\/webdev\/2012\/03\/21\/rapid-prototyping\/","name":"Rapid Prototyping - Mozilla Web Development","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#website"},"datePublished":"2012-03-21T20:35:04+00:00","dateModified":"2012-03-21T20:35:04+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/70ae25c16f09d053c6d8b5eac29dbda9"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2012\/03\/21\/rapid-prototyping\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/webdev\/2012\/03\/21\/rapid-prototyping\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/webdev\/2012\/03\/21\/rapid-prototyping\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/webdev\/"},{"@type":"ListItem","position":2,"name":"Rapid Prototyping"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/webdev\/#website","url":"https:\/\/blog.mozilla.org\/webdev\/","name":"Mozilla Web Development","description":"For make benefit of glorious tubes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/70ae25c16f09d053c6d8b5eac29dbda9","name":"mozilla","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/e77ee64829d0c3831212656324f746d1","url":"https:\/\/secure.gravatar.com\/avatar\/75d2017e019c87560fe5d148a64659dc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/75d2017e019c87560fe5d148a64659dc?s=96&d=mm&r=g","caption":"mozilla"},"url":"https:\/\/blog.mozilla.org\/webdev\/author\/mozilla-2\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/2498"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/users\/1438"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/comments?post=2498"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/2498\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/media?parent=2498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/categories?post=2498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/tags?post=2498"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/coauthors?post=2498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}