-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathrails-product-planning.html
261 lines (257 loc) · 23.4 KB
/
rails-product-planning.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Rails and Product Planning · RailsApps</title>
<meta name="viewport" content="width=device-width">
<link href="https://plus.google.com/117374718581973393536" rel="publisher">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.min.css">
<link rel="stylesheet" href="http://railsapps.github.io/css/railsapps.css" />
<link rel="stylesheet" href="http://railsapps.github.io/css/syntax.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script type="text/javascript">
window.analytics=window.analytics||[],window.analytics.methods=["identify","group","track","page","pageview","alias","ready","on","once","off","trackLink","trackForm","trackClick","trackSubmit"],window.analytics.factory=function(t){return function(){var a=Array.prototype.slice.call(arguments);return a.unshift(t),window.analytics.push(a),window.analytics}};for(var i=0;i<window.analytics.methods.length;i++){var key=window.analytics.methods[i];window.analytics[key]=window.analytics.factory(key)}window.analytics.load=function(t){if(!document.getElementById("analytics-js")){var a=document.createElement("script");a.type="text/javascript",a.id="analytics-js",a.async=!0,a.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.io/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n)}},window.analytics.SNIPPET_VERSION="2.0.9",
window.analytics.load("l1stqfqqbf");
window.analytics.page();
window.analytics.ready(function () {
ga('require', 'linker');
ga('linker:autoLink', ['railscomposer.com','learn-rails.com','blog.railsapps.org','tutorials.railsapps.org']);
});
</script>
</head>
<body>
<div class="fixed">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<a href="http://railsapps.github.io/" class="brand">RailsApps Project</a>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><a href="https://tutorials.railsapps.org/" class="google">Tutorials</a></li>
<li><a href="http://twitter.com/rails_apps" class="twitter">Twitter</a></li>
<li><a href="http://blog.railsapps.org/" class="twitter">Blog</a></li>
<li><a href="https://github.com/RailsApps" class="github">GitHub Repository</a></li>
</ul>
</section>
</nav>
</div>
<div class="row">
<div class="large-12 columns">
<div class="content wikistyle gollum textile">
<h1>Rails and Product Planning</h1>
<h4>by Daniel Kehoe</h4>
<p><em>Last updated 15 July 2013</em></p>
<p>This article from the <a href="http://railsapps.github.io/">RailsApps project</a> suggests how entrepreneurs can plan software development for startups and personal projects. It describes product planning with “user stories” and introduces the concept of behavior-driven development as part of the software development process.</p>
<h4>If You Are New to Rails</h4>
<p>If you’re new to Rails, see <a href="http://railsapps.github.io/what-is-ruby-rails.html">What is Ruby on Rails?</a>, the book <a href="http://learn-rails.com/learn-ruby-on-rails.html">Learn Ruby on Rails</a>, and recommendations for a <a href="https://tutorials.railsapps.org/rails-tutorial">Rails tutorial</a>.</p>
<h4><a href="http://railsapps.github.io/"><img src="http://railsapps.github.io/images/join/join-railsapps.png" title="Join RailsApps" alt="Join RailsApps"></a></h4>
<h4>What is the RailsApps Project?</h4>
<p>This is an article from the RailsApps project. The <a href="http://railsapps.github.io/">RailsApps project</a> provides example applications that developers use as starter apps. Hundreds of developers use the apps, report problems as they arise, and propose solutions. Rails changes frequently; each application is known to work and serves as your personal “reference implementation.” Each application is accompanied by a tutorial so there is no mystery code. Support for the project comes from subscribers. Please accept our invitation to <a href="http://railsapps.github.io/">join the RailsApps project</a>.</p>
<h2>Software Development Process</h2>
<p>Some people think software development begins with writing code. But in fact, product planning is the first stage of the software development process. Product planning, which is at the heart of going from “concept to code,” is critical in getting a project off to a good start.</p>
<p>Arguably, for a simple application you build yourself, you don’t need a lot of “ceremony.” There’s no need for a written specification. Just write some code. But though your application may seem simple, if you’re a solo operator, product planning can be helpful. Software projects have a tendency to grow complex and take longer than planned. At a minimum, product planning will help you focus your ideas before you begin coding. If the application grows complex, it will help you track progress and stay on course.</p>
<p>For ambitious projects, when you are part of a team, or when other people’s time and money are at risk, product planning is a key element of a robust software development process. If you plan on growing a company, product planning is fundamental.</p>
<p>It’s up to you to decide how much time you will spend in product planning. But consider some of the benefits:</p>
<ul>
<li>It helps you discover the functionality you need to implement.</li>
<li>It helps you describe and discuss features with your business partners.</li>
<li>It serves as a “to-do list” to help you track progress.</li>
<li>It is the basis for acceptance testing or integration testing.</li>
</ul>
<p>A robust software development process will also include project management and testing. See an article on <a href="http://railsapps.github.io/rails-project-management.html">Rails and Project Management</a> for more on project management.</p>
<h2>Product Owner</h2>
<p>Who is in charge of deciding what features and functionality will be included in an application? If you are a startup founder or building your own project, it’s obvious, you are in charge of defining what your application will do. You are the product owner.</p>
<p>But think for a moment about the more difficult role of a student who is given an assignment, a consultant who builds a client’s project, or a team in a corporate development environment. Someone has given you the task of building an application. Somewhere between the lofty goal of the project and the implementaton details lies a grey area of product features and requirements. Typically a client or executive management will not provide a fullly developed specification of product requirements. And many developers just want to know what to build. Into that void steps the the product owner.</p>
<p>The product owner can be a technologist or a business person. The responsibility is to look at the application from the point of view of the application user and decide what features and functionality are essential for the user and what must be left out. Without a product owner, a project can collapse in vagueness or drift by whim, ultimately satisfying no one.</p>
<h2>User Stories</h2>
<p>A product owner’s principal tool for product planning is the user story.</p>
<p>User stories (definition: <a href="http://en.wikipedia.org/wiki/User_story">user stories</a>) are a way to discuss and describe the requirements for a software application. The process of writing user stories will help you identify all the features that are needed for your application. Breaking down the application’s functionality into discrete user stories will help you organize your work and track progress toward completion.</p>
<p>User stories are often expressed in the following format:</p>
<pre>
As a <role>
I want <goal>
so that <benefit>
</pre>
<p>As an example, here are user stories for the <a href="https://github.com/RailsApps/rails-prelaunch-signup/">rails-prelaunch-signup</a> application from the RailsApps project.</p>
<pre>
*Request Invitation*
As a visitor to the website
I want to request an invitation
so I can be notified when the site is launched
*See Invitation Requests*
As the owner of the site
I want to view a list of visitors who have requested invitations
so I can know if my offer is popular
*Send Invitations*
As the owner of the site
I want to send invitations to visitors who have requested invitations
so users can try the site
*Collect Email Addresses*
As the owner of the site
I want to collect email addresses for a mailing list
so I can send announcements before I launch the site
*Social Network Sharing After Sign Up*
As a user
I want an option to post to a social network after I sign up
so my followers will learn about the site
</pre>
<p>We can use this list of user stories as our task list in implementing the application. The article <a href="http://railsapps.github.io/rails-project-management.html">Rails and Project Management</a> shows how you can track progress implementing user stories with a simple to-do list or more complex project management tools.</p>
<h2>Behavior-Driven Development</h2>
<p><a href="http://en.wikipedia.org/wiki/Behavior_Driven_Development">Behavior-driven development</a> (<span class="caps">BDD</span>) is a software development methodology that uses user stories as a basis for automated testing. User stories are turned into scenarios that are accompanied by tests. With automated tests, a product owner can determine if developers have succeeded in implementing the required features. This process is called <em>acceptance testing</em>. Automated tests also make it easy for developers to determine if the application still works as they add features, fix bugs, or reorganize code. This process is called <em>integration testing</em>.</p>
<p>Here’s how user stories can be the basis for behavior-driven development using <a href="http://cukes.info/">Cucumber</a>:</p>
<ul>
<li>write user stories</li>
<li>user stories become Cucumber scenarios</li>
<li>create acceptance tests based on Cucumber scenarios</li>
<li>code each feature</li>
<li>run acceptance tests as each feature is completed</li>
</ul>
<p>Cucumber scenarios turn user stories into plain-English descriptions of a series of steps to execute a product feature. Cucumber is appropriate when a team includes nonprogrammers who are involved in defining product requirements or there is a need for a specification and acceptance tests to be maintained independently of implementation (for example, when implementation is outsourced).</p>
<h2>Behavior-Driven Development Without Cucumber</h2>
<p>There are alternatives to Cucumber that may be more appropriate for smaller projects or teams of people who are comfortable reading software code.</p>
<p>Many Rails developers create integration tests using <a href="http://inancgumus.com/66712574">Capybara in combination with RSpec</a> as described in Ryan Bates’s <a href="http://railscasts.com/episodes/275-how-i-test">How I Test</a> Railscast.</p>
<p>User stories can still be the basis of product planning using the RSpec and Capybara approach; instead of using Cucumber, features are tested with RSpec and Capybara but the features are still based on user stories.</p>
<h3>Wireframes and Mockups</h3>
<p>User stories are not the only technique you can use to plan a web application. Often, before writing user stories, a product owner will make rough sketches of various web pages. Sketching is a phase where you try out ideas to clarify your vision for the application.</p>
<p>Sketching can lead to a wireframe or a mockup. These terms are often used interchangeably but there are differences in meaning.</p>
<p>A <em>wireframe</em> is a drawing showing all functional elements of a web page. It should not depict a proposed graphic design for a website, rather it should be a diagram of a web page, without color or graphics.</p>
<p>A <em>mockup</em> adds graphic design to a wireframe; including branding devices, color, and placeholder content. A mockup gives an impression of the web site’s “personality” as well as proposed functionality.</p>
<p>One of the most popular tools for creating wireframes is <a href="http://balsamiq.com/products/mockups/">Balsamiq Mockups</a> (despite the name, it is for wireframes, not mockups).</p>
<p>There are dozens of others:</p>
<p><a href="http://www.axure.com/">Axure</a><br>
<a href="http://www.balsamiq.com/">Balsamiq Mockups</a><br>
<a href="http://cacoo.com/">Cacoo</a><br>
<a href="http://www.conceptdraw.com/">Concept Draw</a><br>
<a href="http://dub.washington.edu:2007/denim/">Denim</a><br>
<a href="http://www.designervista.com/">Designer Vista</a><br>
<a href="http://www.flairbuilder.com/">FairBuilder</a><br>
<a href="http://www.foreui.com/">ForeUI</a><br>
<a href="http://www.hotgloo.com/">HotGloo</a><br>
<a href="http://www.inpreso.com/">Inpreso</a><br>
<a href="http://iplotz.com/">iPlotz</a><br>
<a href="http://jmockups.com/">jMockups</a> (HTML5)<br>
<a href="https://www.jumpchart.com/">Jumpchart</a><br>
<a href="http://www.justinmind.com/">Justinmind</a><br>
<a href="http://www.justproto.com/">Justproto</a><br>
<a href="http://lovelycharts.com/">Lovely Charts</a><br>
<a href="http://www.lucidchart.com/">LucidChart</a><br>
<a href="http://www.lumzy.com/">Lumzy</a><br>
<a href="http://www.mockflow.com/">MockFlow</a><br>
<a href="http://gomockingbird.com/">Mockingbird</a><br>
<a href="http://www.mocklinkr.com/">MockLinkr</a><br>
<a href="http://www.napkee.com/">Napkee</a><br>
<a href="https://addons.mozilla.org/sv-SE/firefox/addon/8487">Pencil Firefox Add-on</a><br>
<a href="http://pidoco.com/">Pidoco</a><br>
<a href="http://www.protoshare.com/">ProtoShare</a><br>
<a href="http://www.serena.com/products/prototype-composer/index.html">Prototype Composer</a><br>
<a href="http://quplo.com/">Quplo</a><br>
<a href="http://www.simulify.com/home.aspx">Simulify</a><br>
<a href="https://gotiggr.com">Tiggr</a><br>
<a href="http://wireframe.talltree.us/default.asp">Website Wireframe</a><br>
<a href="http://wireframesketcher.com/">WireframeSketcher</a></p>
<h3>Graphic Design</h3>
<p>By necessity, graphic design is a separate process from application development. Very few people have skills as both a visual designer and a programmer. The tools are different; graphic designers typically use Adobe Photoshop, though web-savvy designers now often create designs directly in <span class="caps">HTML</span> and <span class="caps">CSS</span>.</p>
<p>If you’re lucky, you will have help from a skilled graphic designer as you build your web application. If you are very lucky, you may work with someone who is a <em>user experience</em> (UX) designer or <em>interaction designer</em> (IxD).</p>
<p>If you’re working with a graphic designer you might collaborate on a <em>moodboard</em> or a <em>design brief</em> to define the look and feel of your application. If the designer works in Photoshop, you’ll face the challenge of converting design layouts from Photoshop to <span class="caps">HTML</span> and <span class="caps">CSS</span>. There are service firms that do this for a fee but obviously it’s easier to work with a designer who can implement a layout directly in <span class="caps">HTML</span> and <span class="caps">CSS</span>.</p>
<p>Rails can be particularly challenging when it comes to integrating graphic design with code. Rails uses a hybrid of <span class="caps">HTML</span> markup mixed with Ruby programming code in its <em>view</em> files (depending on the stack you’ve selected, the view files can use <em><span class="caps">ERB</span></em>, <em>Haml</em>, or other syntaxes for mixing <span class="caps">HTML</span> and Ruby). Few designers are comfortable with Ruby code mixed with <span class="caps">HTML</span> so you may end up doing integration yourself.</p>
<p>If you don’t have a skilled graphic designer available to help, you can always use <a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a> or other front-end frameworks such as <a href="http://foundation.zurb.com/">Zurb Foundation</a> to quickly add an attractive design to your application.</p>
</div>
<div class="comments" id="comments">
<div class="content wikistyle gollum">
<h2>Comments</h2>
</div>
<p>Is this helpful? Your encouragement fuels the project. Please tweet or add a comment. Couldn't get something to work? For the example apps and tutorials, it's best to open an issue on GitHub so we can help you.</p>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'railsapps'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div><!-- class="comments" -->
</div><!-- class="columns" -->
</div><!-- class="row" -->
<footer class="row">
<div class="large-12 columns">
<div class="row">
<div class="medium-4 large-4 columns">
<dl class="footer_nav">
<dt>RailsApps · Getting Started</dt>
<dd><a href="http://railsapps.github.io/ruby-and-rails.html">Ruby on Rails</a></dd>
<dd><a href="http://railsapps.github.io/what-is-ruby-rails.html">What is Ruby on Rails?</a></dd>
<dd><a href="http://learn-rails.com/learn-ruby-on-rails.html">Learn Ruby on Rails</a></dd>
<dd><a href="https://tutorials.railsapps.org/rails-tutorial">Rails Tutorial</a></dd>
<dd><a href="http://learn-rails.com/ruby-on-rails-tutorial-for-beginners">Ruby on Rails Tutorial for Beginners</a></dd>
<dd><a href="http://railsapps.github.io/installing-rails.html">Install Ruby on Rails</a></dd>
<dd><a href="http://railsapps.github.io/installrubyonrails-mac.html">Install Ruby on Rails - Mac OS X</a></dd>
<dd><a href="http://railsapps.github.io/installrubyonrails-ubuntu.html">Install Ruby on Rails - Ubuntu</a></dd>
<dd><a href="http://railsapps.github.io/rubyonrails-nitrous-io.html">Ruby on Rails - Nitrous.io</a></dd>
<dd><a href="http://railsapps.github.io/updating-rails.html">Update Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-composer/">Rails Composer</a></dd>
<dd><a href="http://railsapps.github.io/">Rails Examples</a></dd>
<dd><a href="http://railsapps.github.io/rails-examples-tutorials.html">Rails Starter Apps</a></dd>
</dl>
</div>
<div class="medium-4 large-4 columns">
<dl class="footer_nav">
<dt>RailsApps · Articles</dt>
<dd><a href="http://railsapps.github.io/rails-authorization.html">Rails Authorization</a></dd>
<dd><a href="http://railsapps.github.io/rails-google-analytics.html">Analytics for Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-heroku-tutorial.html">Heroku and Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-javascript-include-external.html">JavaScript and Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-environment-variables.html">Rails Environment Variables</a></dd>
<dd><a href="http://railsapps.github.io/rails-git.html">Git and Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-github.html">Rails GitHub</a></dd>
<dd><a href="http://railsapps.github.io/rails-send-email.html">Send Email with Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-haml.html">Haml and Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-default-application-layout.html">Rails Application Layout</a></dd>
<dd><a href="http://railsapps.github.io/rails-html5-boilerplate.html">HTML5 Boilerplate for Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-3-2-example-gemfile.html">Example Gemfiles for Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-application-templates.html">Rails Application Templates</a></dd>
<dd><a href="http://railsapps.github.io/rails-product-planning.html">Rails Product Planning</a></dd>
<dd><a href="http://railsapps.github.io/rails-project-management.html">Rails Project Management</a></dd>
</dl>
</div>
<div class="medium-4 large-4 columns">
<dl class="footer_nav">
<dt>RailsApps · Tutorials</dt>
<dd><a href="http://railsapps.github.io/twitter-bootstrap-rails.html">Rails Bootstrap</a></dd>
<dd><a href="http://railsapps.github.io/rails-foundation.html">Rails Foundation</a></dd>
<dd><a href="http://railsapps.github.io/rails-omniauth/">OmniAuth Tutorial</a></dd>
<dd><a href="http://railsapps.github.io/tutorial-rails-devise.html">Rails Devise Tutorial</a></dd>
<dd><a href="http://railsapps.github.io/tutorial-rails-devise-rspec-cucumber.html">Devise RSpec</a></dd>
<dd><a href="http://railsapps.github.io/tutorial-rails-bootstrap-devise-cancan.html">Devise Bootstrap</a></dd>
<dd><a href="http://railsapps.github.io/rails-devise-roles">Role-Based Authorization</a></dd>
<dd><a href="http://railsapps.github.io/rails-devise-pundit">Rails Authorization with Pundit</a></dd>
<dd><a href="https://tutorials.railsapps.org/rails-stripe-membership-saas">Rails Membership Site with Stripe</a></dd>
<dd><a href="https://tutorials.railsapps.org/rails-recurly-subscription-saas">Rails Subscription Site with Recurly</a></dd>
<dd><a href="https://tutorials.railsapps.org/rails-prelaunch-signup">Startup Prelaunch Signup Application</a></dd>
</dl>
<dl class="footer_nav">
<dt>RailsApps Profile</dt>
<dd><a href="https://plus.google.com/108039160165742774777?rel=author">Google</a></dd>
<dd><a href="https://plus.google.com/117374718581973393536" rel="publisher">Find us on Google+</a></dd>
</dl>
</div>
</div>
</div>
</footer>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>