This repository was archived by the owner on Jul 21, 2023. It is now read-only.
forked from imakewebthings/deck.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
287 lines (252 loc) · 12.7 KB
/
index.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
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=1024, user-scalable=no">
<title>Galleon Deployments</title>
<!-- Required stylesheet -->
<link rel="stylesheet" href="core/deck.core.css">
<!-- Extension CSS files go here. Remove or add as needed. -->
<link rel="stylesheet" media="screen" href="extensions/goto/deck.goto.css">
<link rel="stylesheet" media="screen" href="extensions/menu/deck.menu.css">
<link rel="stylesheet" media="screen" href="extensions/navigation/deck.navigation.css">
<link rel="stylesheet" media="screen" href="extensions/status/deck.status.css">
<link rel="stylesheet" media="screen" href="extensions/scale/deck.scale.css">
<!-- Style theme. More available in /themes/style/ or create your own. -->
<link rel="stylesheet" media="screen" href="themes/style/swiss.css">
<!-- Transition theme. More available in /themes/transition/ or create your own. -->
<link rel="stylesheet" media="screen" href="themes/transition/horizontal-slide.css">
<!-- Basic black and white print styles -->
<link rel="stylesheet" media="print" href="core/print.css">
<!-- Required Modernizr file -->
<script src="modernizr.custom.js"></script>
</head>
<body>
<div class="deck-container">
<!-- Begin slides. Just make elements with a class of slide. -->
<section class="slide">
<h2>Galleon Continuous Integration and Deployments</h2>
<p><a href="http://sflyphotobooks.github.io/2014-deployment-presentation/">http://sflyphotobooks.github.io/2014-deployment-presentation</a></p>
<p>Presented by: Jason Rose ([email protected])</p>
</section>
<section class="slide">
<h2>Table of Contents</h2>
<ul>
<li><a href="#slide-2">Galleon Project Overview</a></li>
<li><a href="#slide-3">Galleon Development Workflow</a></li>
<li><a href="#slide-9">Continuous Integration</a></li>
<li><a href="#slide-11">Deployments</a></li>
<li><a href="#slide-15">Next Steps</a></li>
</ul>
</section>
<section class="slide">
<h2>Galleon Project Overview</h2>
<ul>
<li>HTML5 photo books creation path</li>
<li>Started in October 2013</li>
</ul>
<div style="text-align:center;">
<img style="display: inline;" height="128" width="128" src="images/github.png" alt="github" />
<img style="display: inline;" height="128" width="128" src="images/coffeescript.png" alt="CS" />
<img style="display: inline;" height="128" width="128" src="images/angular.jpeg" alt="angularjs" />
<img style="display: inline;" height="128" width="128" src="images/less.png" alt="LESS" />
<img style="display: inline;" height="128" width="128" src="images/grunt.jpeg" alt="grunt" />
<img style="display: inline;" height="128" width="128" src="images/bower.png" alt="bower" />
</div>
</section>
<section class="slide">
<h2>Galleon Development Workflow</h2>
<h3>Git Flow - <a href="http://nvie.com/posts/a-successful-git-branching-model/">http://nvie.com/posts/a-successful-git-branching-model/</a></h3>
<ul>
<li>One branch <code>master</code> tracks what is production-ready</li>
<li>One branch <code>develop</code> tracks the current active line of development</li>
<li>Many "feature" branches track specific user stories
<ul>
<li>Feature branches prevent in-progress work from interfering with QE and PM acceptance</li>
<li>They are a short-lived sandbox so atomic units of work can be merged into <code>develop</code></li>
</ul>
</li>
</ul>
</section>
<section class="slide">
<h2>Galleon Development Workflow (cont)</h2>
<h3>A developer's daily work pattern with git flow</h3>
<ul>
<li><code>git pull</code> to update my local <code>develop</code> branch with the team's merged work</li>
<li><code>git checkout -b my-next-user-story</code> to create a feature branch for my upcoming work</li>
<li><em>code, code, code, code, test, code, existential crisis, test...</em></li>
<li><code>git add -A && git commit -m "All done!"</code> to stage my feature work</li>
<li><code>git push -u origin my-cool-feature</code> to publish my feature branch on github</li>
<li>Browse to github and open a "pull request" to start my code review</li>
<li><em>review, update, update, review, debate, accept pull request</em></li>
<li>Merge <code>my-next-user-story</code> into <code>develop</code> so we can deploy, test, and accept the story</li>
</ul>
</section>
<section class="slide">
<h2>Galleon Development Workflow (cont)</h2>
<h3>Creating a production release</h3>
<ul>
<li>Once development has implemented the features for a release...</li>
<li><code>git checkout -b release-x.y</code></li>
<li><em>deploy, test, harden, work, work, work</em></li>
<li><code>git checkout master && git merge release-x.y</code></li>
<li><code>git checkout develop && git merge release-x.y</code></li>
</ul>
</section>
<section class="slide">
<h2>Galleon Development Workflow (cont)</h2>
<h3>Patching a production release</h3>
<ul>
<li><code>git checkout master && git checkout -b bugfix-x.y.1</code></li>
<li><em>work, work, test, deploy, harden</em></li>
<li><code>git checkout master && git merge bugfix-x.y.1</code></li>
<li><code>git checkout develop && git merge bugfix-x.y.1</code></li>
</ul>
</section>
<section class="slide">
<h2>Galleon Development Workflow (cont)</h2>
<h3>Benefits of git flow</h3>
<ul>
<li>Creating patch releases for production issues is trivial because daily work doesn't affect <code>master</code></li>
<li>Creation of QA-able builds for beta deployments is consistent because only fully-implemented user stories are merged into <code>develop</code></li>
<li>It's easy to work on multiple user stories because each story is isolated in its own feature branch</li>
<li>We can use pull requests to perform code reviews before code is merged into <code>develop</code></li>
</ul>
</section>
<section class="slide">
<h4 style="margin-top:200px; text-align: center;">We now have a rapid cycle from feature branch to develop, but how do we turn that into a build?</h4>
</section>
<section class="slide">
<h2>Continuous Integration</h2>
<ul>
<li>Jenkins polls github and will build each branch that changes</li>
<li>The build job will compile, minify, and run our unit test suite across our supported browser matrix</li>
<li>Developers must link to the successful Jenkins build for their feature branch during a pull request</li>
</ul>
</section>
<section class="slide">
<h2>Continuous Integration (cont)</h2>
<h3>What does CI buy us?</h3>
<ul>
<li>All unit tests and static code checks must demonstrably pass before work can be merged</li>
<li>"It passes on my box!" is no longer an issue</li>
<li>Code changes require unit testing to pass code review</li>
</ul>
</section>
<section class="slide">
<h2>Deployments</h2>
<ul>
<li>At the point that the pull request has been accepted, we can assert that:
<ul>
<li>All unit tests pass on our CI server</li>
<li>Code is lint-free and passes our other static analyses</li>
<li>The other developers on the team agree with the new feature's implementation</li>
</ul>
</li>
<li>Merging the feature branch into <code>develop</code> triggers a new build, with the checks and tests repeated</li>
<li>Successful builds of the <code>develop</code> branch are packaged and deployed to artifactory and beta</li>
<li>Since Galleon doesn't include Java code, we can deploy at-will (~5-10x daily)</li>
</ul>
</section>
<section class="slide">
<h2>Deployments (cont)</h2>
<h3>Why deploy more frequently?</h3>
<ul>
<li>"D'oh" moments don't hold up the team</li>
<li>We can test smaller changes without worrying about breaking the app for hours</li>
<li>We can iterate with QE and PM over intended behavior and fixing bugs on a "real" server</li>
<li>It's possible to merge, deploy, test, and accept work within minutes</li>
</ul>
</section>
<section class="slide">
<h2>Deployments (cont)</h2>
<h3>Deploying all feature branches to internal environments</h3>
<ul>
<li>The "primary" version of the app is always http://beta|dev|stage.shutterfly.com/pb/</li>
<li>Feature branches that pass the CI build end up at http://foo.shutterfly.com/pb/builds/x
<li>We can now preview a code change on a real environment before merging it into <code>develop</code></li>
<li>If a change is merged into <code>develop</code>, we update <code>/pb/</code> to link to that build</li>
</ul>
</section>
<section class="slide">
<h4 style="margin-top:200px; text-align: center;">Deploying often is nice and all, but where are you taking this?</h4>
</section>
<section class="slide">
<h2>Next Steps</h2>
<ul>
<li>Run automated functional tests against deployed feature branches</li>
<li>Swapping out the "primary" version of the application in a given environment</li>
<li>CI integration with team</li>
</ul>
</section>
<section class="slide">
<h2>Next Steps (cont)</h2>
<h3>Run automated functional tests against deployed feature branches</h3>
<ul>
<li>We can run integration tests against a specific build on beta without interrupting other development</li>
<li>This lets us require the integration tests to pass before merging the feature branch, raising confidence in the build</li>
<li>We can catch more regression issues before merging code and handing off to QE</li>
</ul>
</section>
<section class="slide">
<h2>Next Steps (cont)</h2>
<h3>Manually updating the primary deployed version</h3>
<ul>
<li>Since deployments are now decoupled from the version hosted at <code>/pb/</code>, we can validate a build on-site</li>
<li>When a build passes testing, acceptance, and is ready to "go live", we swap the symlink for the primary version to our new version</li>
<li>Rolling back deploys becomes the simple process of swapping the symlink back to the old primary version</li>
</ul>
</section>
<section class="slide">
<h2>Next Steps (cont)</h2>
<h3>Integration between CI and team</h3>
<ul>
<li>If Jenkins is now managing the entire build and deployment process, we can add tooling to enhance the development to deployment cycle
<ul>
<li>It can send out emails to the team upon successful deployments</li>
<li>It can comment on pull requests once the build and deployment jobs run</li>
<li>It can continue to comment on pull requests if the codebase changes, or <code>develop</code> changes upstream</li>
</ul>
</li>
</ul>
</section>
<!-- End slides. -->
<!-- Begin extension snippets. Add or remove as needed. -->
<!-- deck.navigation snippet -->
<div aria-role="navigation">
<a href="#" class="deck-prev-link" title="Previous">←</a>
<a href="#" class="deck-next-link" title="Next">→</a>
</div>
<!-- deck.status snippet -->
<p class="deck-status" aria-role="status">
<span class="deck-status-current"></span>
/
<span class="deck-status-total"></span>
</p>
<!-- deck.goto snippet -->
<form action="." method="get" class="goto-form">
<label for="goto-slide">Go to slide:</label>
<input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
<datalist id="goto-datalist"></datalist>
<input type="submit" value="Go">
</form>
<!-- End extension snippets. -->
</div>
<!-- Required JS files. -->
<script src="jquery.min.js"></script>
<script src="core/deck.core.js"></script>
<!-- Extension JS files. Add or remove as needed. -->
<script src="extensions/menu/deck.menu.js"></script>
<script src="extensions/goto/deck.goto.js"></script>
<script src="extensions/status/deck.status.js"></script>
<script src="extensions/navigation/deck.navigation.js"></script>
<script src="extensions/scale/deck.scale.js"></script>
<!-- Initialize the deck. You can put this in an external file if desired. -->
<script>
$(function() {
$.deck('.slide');
});
</script>
</body>
</html>