-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfeature-flipping.html
211 lines (210 loc) · 11.7 KB
/
feature-flipping.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
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class='no-js' lang='en'>
<!--<![endif]-->
<head>
<meta charset='utf-8' />
<title>Presentations</title>
<meta content='' name='description' />
<meta content='' name='author' />
<meta content='width=device-width, initial-scale=1.0' name='viewport' />
<link rel="stylesheet" href="/assets/stylesheets/f8e4077dc2ace41cdb84085427d83812.css" media="all" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet">
<!-- /%script{ :src => "js/libs/modernizr-2.0.6.min.js" } -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js'></script>
<script type='text/javascript'>
//<![CDATA[
window.jQuery || document.write("<script src='js/jquery.min.js'>\x3C/script>")
//]]>
</script>
<script src='http://fast.fonts.com/jsapi/7d092f6e-0908-442f-89fa-36c746e4fa83.js' type='text/javascript'></script>
</head>
<body>
<div class='feature-flipping' id='impress'>
<div class='step centered' data-scale='2.5' data-x='-1400' data-y='-2200' id='first'>
<h1>Feature Flipping</h1>
<h2>Mal Curtis</h2>
</div>
<div class='step centered' data-x='-1400' data-y='-1500'>
<h1>What is feature flipping?</h1>
</div>
<div class='step centered' data-x='-1400' data-y='-1000'>
<h1>Abstract Overview</h1>
<p>"an approach to development that helps solve some of the issues associated with risk management and quality assurance when a fast moving development team expands." <em>Chris Campbell, 99designs</em></p>
</div>
<div class='step centered' data-x='-1400' data-y='-500'>
<h1>Functional Benefits</h1>
<p>"Feature flags and flippers mean we don’t have to do merges, and that all code (no matter how far it is from being released) is integrated as soon as it is committed. Deploys become smaller and more frequent; this leads to bugs that are easier to fix, since we can catch them earlier and the amount of changed code is minimized." <em>Ross Harmes, Flickr</em></p>
</div>
<div class='step centered' data-x='-1400' data-y='100'>
<h1>Typically Dry Martin Fowler Explanation</h1>
<p>"The basic idea is to have a configuration file that defines a bunch of toggles for various features you have pending. The running application then uses these toggles in order to decide whether or not to show the new feature." <em>Martin Fowler, Famous Developer Type</em></p>
</div>
<div class='step centered' data-scale='0.5' data-x='00' data-y='100'>
<h1>Why would you do this?</h1>
</div>
<div class='step centered' data-scale='0.5' data-x='00' data-y='300'>
<h2>Test new features in a <strong>live</strong> production environment</h2>
</div>
<div class='step centered' data-scale='0.5' data-x='00' data-y='450'>
<h2>Allow stakeholders to view new features without a staging server, or a VM</h2>
</div>
<div class='step centered' data-scale='0.5' data-x='00' data-y='550'>
<h2>Branches suck</h2>
</div>
<div class='step centered' data-scale='0.5' data-x='00' data-y='670'>
<h2>Don't fear deployment</h2>
</div>
<div class='step centered' data-scale='0.1' data-x='500' data-y='670'>
<img height='450' src='/assets/images/keep-calm.png' />
</div>
<div class='step centered' data-scale='0.5' data-x='00' data-y='800'>
<h2>Easy to rollback</h2>
</div>
<div class='step centered' data-scale='0.5' data-x='00' data-y='950'>
<h2>Phased rollout:<br>Test things on your users, react to responses</h2>
</div>
<div class='step centered' data-scale='0.5' data-x='700' data-y='950'>
<h2>
<img src='/assets/images/doing-it-wrong.jpg' />
</h2>
<h2>Users</h2>
</div>
<div class='step centered' data-scale='0.5' data-x='1400' data-y='950'>
<h2>
<img src='/assets/images/servers.jpg' />
</h2>
<h2>Infrastructure</h2>
</div>
<div class='step centered' data-scale='0.5' data-x='00' data-y='1100'>
<h2>Get marketing off your back</h2>
</div>
<div class='step centered' data-rotate='90' data-scale='0.5' data-x='00' data-y='1500'>
<h1>How does it work?</h1>
</div>
<div class='step centered light' data-rotate='90' data-x='-800' data-y='1500'>
<h2>Wrap content in simple conditionals</h2>
<code><pre>if some_feature<br>
 do some feature thing<br>
end<br>
</pre></code>
</div>
<div class='step centered dark' data-rotate='90' data-x='-1600' data-y='1500'>
<img src='http://dl.dropbox.com/u/3155323/Screenshots/vszh.png' />
</div>
<div class='step centered dark' data-rotate='90' data-x='-2000' data-y='1500'>
<img src='http://dl.dropbox.com/u/3155323/Screenshots/07ye.png' />
</div>
<div class='step centered dark' data-rotate='90' data-x='-2400' data-y='1500'>
<img src='http://dl.dropbox.com/u/3155323/Screenshots/0enn.png' />
</div>
<div class='step centered light' data-rotate='180' data-x='-3300' data-y='1500'>
<h1>Determining a feature’s state</h1>
</div>
<div class='step centered' data-rotate='180' data-x='-5000' data-y='1500'>
<h2>1. Default: On or Off</h2>
</div>
<div class='step centered' data-rotate='180' data-x='-5000' data-y='1300'>
<h2>2. Database / Persistent Store</h2>
</div>
<div class='step centered' data-rotate='180' data-x='-5000' data-y='1100'>
<h2>3. Cookie (Oh yea.)</h2>
</div>
<div class='step centered' data-rotate='180' data-x='-5000' data-y='900'>
<h2>4. Code</h2>
<h3>User.admin?, User.member?, User.courses.size > 4</h3>
</div>
<div class='step centered' data-rotate='180' data-x='-5000' data-y='700'>
<h2>5. Performance</h2>
<h3>Load > 5, AvgResponseTime > 2s</h3>
</div>
<div class='step centered' data-rotate-x='90' data-rotate-y='0' data-rotate-z='180' data-rotate='180' data-x='-5000' data-y='300'>
<h1>Implementations</h1>
</div>
<div class='step centered' data-rotate-x='130' data-rotate-y='0' data-rotate-z='180' data-rotate='180' data-x='-5000' data-y='-600' data-z='-300'>
<h2>Ruby</h2>
<h3>Flip github.com/pda/flip</h3>
<h3>Rollout github.com/jamesgolick/rollout</h3>
<h3>Degrade github.com/jamesgolick/degrade</h3>
</div>
<div class='step centered' data-rotate-x='60' data-rotate-y='0' data-rotate-z='180' data-rotate='180' data-x='-5000' data-y='-1500' data-z='-300'>
<h2>PHP</h2>
<h3>FeatureToggle (Symfony) github.com/marekkalnik/FeatureToggleBundle</h3>
</div>
<div class='step centered' data-rotate-x='130' data-rotate-y='0' data-rotate-z='180' data-rotate='180' data-x='-5000' data-y='-2400' data-z='-300'>
<h2>Python</h2>
<h3>Gargoyle (Django) github.com/disqus/gargoyle</h3>
<h3>Django Waffle (Django) github.com/jsocol/django-waffle</h3>
</div>
<div class='step centered' data-rotate-x='60' data-rotate-y='0' data-rotate-z='180' data-rotate='180' data-x='-5000' data-y='-3300' data-z='-300'>
<h2>JavaScript</h2>
<h3>FeatureFlipperJS (Node)</h3>
<h3>github.com/bigodines/feature-flipper-js</h3>
</div>
<div class='step centered' data-rotate-x='130' data-rotate-y='0' data-rotate-z='180' data-rotate='180' data-x='-5000' data-y='-4200' data-z='-300'>
<h2>.net</h2>
<h3>FeatureToggle</h3>
<h3>github.com/jason-roberts/FeatureToggle</h3>
</div>
<div class='step centered light' data-rotate-x='60' data-rotate-y='0' data-rotate-z='180' data-rotate='180' data-x='-5000' data-y='-5100' data-z='-300'>
<h2>Groovy</h2>
<h3>GrailsFeatureToggle</h3>
<h3>github.com/ryannorris/grails-feature-toggle</h3>
</div>
<div class='step centered dark' data-rotate-x='90' data-rotate-y='0' data-rotate-z='180' data-rotate='180' data-x='-5000' data-y='-6100' data-z='-300'>
<h1>Demo</h1>
</div>
<div class='step centered light' data-rotate-x='90' data-rotate-y='0' data-rotate-z='180' data-rotate='180' data-x='-5000' data-y='6100' data-z='-300'>
<h1>Danger Zone</h1>
</div>
<div class='step centered light' data-rotate-x='180' data-rotate-y='0' data-rotate-z='180' data-rotate='180' data-x='-5000' data-y='6100' data-z='-300'>
<img src='/assets/images/danger-zone.jpg' />
</div>
<div class='step centered light' data-rotate-x='180' data-rotate-y='0' data-rotate-z='180' data-rotate='180' data-x='-5640' data-y='6100' data-z='-300'>
<h2>4.7/10 from 393 users</h2>
<p>"Robert Downey Jr. is scraping the barrel bottoms. Billy Zane seems to have one expression: disdain/disgust. You want cliche's? This movie is one BIG cliche'." <em>rlowe, New Orleans</em></p>
</div>
<div class='step centered light' data-rotate-x='180' data-rotate-y='0' data-rotate-z='180' data-rotate='180' data-x='-7500' data-y='6100' data-z='-300'>
<h1>Feature Flipping is not always appropriate</h1>
</div>
<div class='step centered light' data-rotate-x='180' data-rotate-y='0' data-rotate-z='180' data-rotate='180' data-x='-7500' data-y='6500' data-z='-300'>
<h2>Database schema changes</h2>
<h3>Add, not alter</h3>
<h3>Remove when safe</h3>
</div>
<div class='step centered light' data-rotate-x='180' data-rotate-y='0' data-rotate-z='180' data-rotate='180' data-x='-7500' data-y='6900' data-z='-300'>
<h2>Infrastructure changes</h2>
</div>
<div class='step centered light' data-rotate-x='180' data-rotate-y='0' data-rotate-z='180' data-rotate='180' data-x='-7500' data-y='7500' data-z='-300'>
<img src='/assets/images/shit.png' style='float:left; ' />
<h2>Don't create technical debt</h2>
<h2>Clean up your shit.</h2>
</div>
<div class='step centered light' data-rotate-x='180' data-rotate-y='0' data-rotate-z='180' data-rotate='180' data-x='-7500' data-y='8500' data-z='-300'>
<h1>Que?</h1>
<h2>Mal Curtis</h2>
<h3>@snikchnz</h3>
</div>
<div class='step centered light' data-rotate-x='180' data-rotate-y='0' data-rotate-z='180' data-rotate='180' data-x='-7500' data-y='9600' data-z='-300'>
<h1>Links</h1>
</div>
<div class='step centered light' data-rotate-x='180' data-rotate-y='0' data-rotate-z='180' data-rotate='180' data-x='-7500' data-y='10000' data-z='-300'>
<h3>Flipping Out</h3>
<h4>code.flickr.com/blog/2009/12/02/flipping-out/</h4>
<h3>Feature Flipping</h3>
<h4>99designs.com/tech-blog/blog/2012/03/01/feature-flipping/</h4>
<h3>FeatureToggle</h3>
<h4>martinfowler.com/bliki/FeatureToggle.html</h4>
<h3>How does Etsy manage development and operations?</h3>
<h4>codeascraft.etsy.com/2011/02/04/how-does-etsy-manage-development-and-operations/</h4>
<h3>Feature Bits: Enabling Flow Within and Across Teams</h3>
<h4>www.infoq.com/presentations/Feature-Bits</h4>
</div>
</div>
<script type="text/javascript" src="/assets/javascripts/329e51453c294b87088d26e5aa3ec34c.js"></script>
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
</body>
</html>