-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
530 lines (497 loc) · 20.6 KB
/
index.html
File metadata and controls
530 lines (497 loc) · 20.6 KB
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
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Git Basics - Live coding session</title>
<meta name="description" content="A presentation about Git basics with some coding examples">
<meta name="author" content="Cédric Dué">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Git basics</h1>
<p>
Learn a bit about Git during this live coding session
</p>
<img src="assets/logo_git.png" width="200" style="background: none; border:none; box-shadow:none;"/>
<p>
<a href="https://github.com/cdue/git-basics-presentation">https://github.com/cdue/git-basics-presentation</a>
</p>
<p>
<small>Created by <a href="http://twitter.com/cedricdue">Cédric Dué</a> / <a href="http://twitter.com/cedricdue">@cedricdue</a> with <a href="http://lab.hakim.se/reveal-js">reveal.js</a></small>
</p>
</section>
<section>
<section>
<h2>What is Git?</h2>
<p>
Git is a VCS (Version Control System).
</p>
<br/>
<p class="fragment">Not a local one, like RCS.</p>
<p class="fragment">Not a centralized one, like CVS or SVN.</p>
<p class="fragment">It's a distributed one, like Mercurial.</p>
</section>
<section>
<p>
Created from 2005 by Linus Torvald and the Linux dev community to replace the VCS they were using for Linux kernel (BitKeeper).
</p>
<aside class="notes">
Git goals at start:
<ul>
<li>Speed</li>
<li>Simple design</li>
<li>Strong support for non-linear development (thousands of parallel branches)</li>
<li>Fully distributed</li>
<li>Able to handle large projects like the Linux kernel efficiently (speed and data size)</li>
</ul>
<aside>
</section>
</section>
<section>
<section>
<h2>Git VS older VCS</h2>
<h3>Compared to CVS, SVN... Git is:</h3>
<div class="fragment">
<ul style="display:inline-block; vertical-align: middle">
<li>harder</li>
<li>better</li>
<li>faster</li>
<li>stronger</li>
</ul>
<img src="assets/daft_punk.jpg" width="300" style="background: none; border:none; box-shadow:none; vertical-align: middle; margin-left: 30px"/>
</div>
<p class="fragment">Almost...</p>
</section>
<section>
<h2>Git VS older VCS</h2>
<h3>Compared to CVS, SVN... Git:</h3>
<ul>
<li class="fragment">is distributed</li>
<li class="fragment">works offline</li>
<li class="fragment">is faster</li>
<li class="fragment">repositories are much smaller</li>
<li class="fragment">branches are easier to use and less heavy</li>
<li class="fragment">branches carry their full commits history</li>
<li class="fragment">is less prone to repo corruption (high integrity thanks to SHA-1 usage)</li>
<li class="fragment">don't use incremetal version numbers (SVN do) but hashes.</li>
</ul>
<aside class="notes">
<ul>
<li>
Distributed (SVN is not): every developper own a local clone of the repo.
</li>
<li>
Offline: thx to the local repository, you can: commit, create/switch/merge branches, review history, etc.<br/>
The entire content of the repo is stored in the .git folder. It contains metadata (tags, branches, history, etc.).
</li>
<li>
Faster: mostly no network overhead as most of the operations are made on you local disk.
</li>
<li>
smaller repo: Mozilla project Git repo is 30x smaller than SVN one.
</li>
<li>
Less corruption: because every commit is uniquely identified by a SHA-1 hash, and contains references to all its parent commits.<br/>
Which mean you'll soon get informed of any corruption and will be able to fix it using another cloned repo.
</li>
<li>
No incremetal version numbers: makes it harder to walk through versions in Git history.
</li>
</ul>
</aside>
</section>
<section>
<h2>Git VS older VCS</h2>
<h3>Compared to CVS, SVN... Git:</h3>
<br/>
<ul>
<li class="fragment">doesn't store data as "deltas" between 2 versions</li>
<li class="fragment">stores data as a stream of full repo snapshots on every commit</li>
<li class="fragment">provides a set of powerful tools</li>
</ul>
<aside class="notes">
<ul>
<li>
Snapshot: if a file hasn't change between 2 commits, git only stores a link to previous file version.
Git is nearly like a mini filesystem.
</li>
</ul>
</aside>
</section>
</section>
<section>
<section>
<h2>Basic worflow </h2>
<h3>The 3 states</h3>
<br/>
<ul>
<li>commited</li>
<li>modified</li>
<li>staged</li>
</ul>
<aside class="notes">
<ul>
<li>
commited: data safely stored in local database
</li>
<li>
modified: file changed but not committed to database
</li>
<li>
staged: modified file marked in its current version to go into the next commit snapshot
</li>
</ul>
</aside>
</section>
<section>
<h2>Basic worflow </h2>
<h3>The 3 states</h3>
<img src="assets/3states.png" width="60%" style="background: none; border:none; box-shadow:none;"/>
<aside class="notes">
<p>
Basic Git workflow:
<ol>
<li>You modify files in your working directory.</li>
<li>You stage the files, adding snapshots of them to your staging area.</li>
<li>You do a commit, which takes the files as they are in the staging area and stores that snapshot permanently to your Git directory.</li>
</ol>
</p>
</aside>
</section>
</section>
<section>
<h2>Command line or GUI?</h2>
<p>
Obviously: command line<br/>
<small>If you want to take full advantage of git commands.</small>
</p>
<p>
Or you can use GUIs (Eclipse plugin, Smart Git, or whatever).<br/>
<small>If you want to use basic commands in a nice looking way.</small>
</p>
<aside class="notes">
</aside>
</section>
<section>
<section>
<h2>Main workflows</h2>
<p>
You can work with Git in many ways.<br/>
Here are some commonly used workflows.<br/>
But you can pick up the best of each and mix it to fit your needs.<br/>
<small style="margin-top:60px">
Find more info about workflows on:<br/>
<a href="https://es.atlassian.com/git/tutorials/comparing-workflows/">https://es.atlassian.com/git/tutorials/comparing-workflows/</a>
</small>
</p>
<aside class="notes">
</aside>
</section>
<section>
<h2>Centralized</h2>
<p style="margin-bottom: 40px">
Mostly, looks like SVN workflow.<br/>
But brings some of the Git power.
</p>
<ul>
<li>Single branch used (master)</li>
<li>Conflicts are managed by: <br/>fetching from remote / rebasing / pushing</li>
<li>Linear history</li>
</ul>
<aside class="notes">
Single point of entry for every developper<br/>
trunk (SVN) = master (Git)<br/>
Difference: Every local commits are pushed at the same time.<br/>
Linear history: if conflits, you must rebase so that your work appears on top of other developpers' work.<br/>
</aside>
</section>
<section>
<h2>Feature branch</h2>
<ul style="margin-bottom: 40px">
<li>1 feature = 1 branch (with explicit name)</li>
<li>Multiple developers can work on the same feature</li>
<li>Work in progress do not disturb main codebase</li>
<li>master contains official/production-ready code</li>
<li>Easy CI on master branch</li>
<li>Pull request ready</li>
</ul>
<img src="assets/feature-branch-workflow.svg" width="60%" style="background: white; border:none; box-shadow:none;"/>
<aside class="notes">
Easy continuous integration: master branch should never contain broken code.<br/>
Pull requests: can be use between developers to discuss others features:<br/>
<ul>
<li>if someone needs some help</li>
<li>if a code review is needed</li>
</ul>
This workflow still uses a centralized repo.
</aside>
</section>
<section>
<h2>Gitflow</h2>
<ul>
<li>Strict and robust branching model</li>
<li>Based on Feature Branching working</li>
<li>
Adds specific branches for specific actions:
<ul>
<li>master = production release history (tags)</li>
<li>develop = features integration</li>
<li>release = production release build (+ feature fix)</li>
<li>hotfix = quick production maintenance patches</li>
</ul>
</li>
</ul>
<p>
<small style="margin-top:50px">
See original description of this worflow by Vincent Drissen:<br/>
<a href="http://nvie.com/posts/a-successful-git-branching-model/">http://nvie.com/posts/a-successful-git-branching-model/</a><br/>
And really good branching tools:<br/>
<a href="http://danielkummer.github.io/git-flow-cheatsheet/index.html">http://danielkummer.github.io/git-flow-cheatsheet/index.html</a>
</small>
</p>
<aside class="notes">
This workflow still uses a centralized repo.
</aside>
</section>
<section>
<h2>Gitflow</h2>
<img src="assets/gitflow-workflow.svg" width="80%" style="background: white; border:none; box-shadow:none;"/>
<aside class="notes">
</aside>
</section>
<section>
<h2>Forking</h2>
<ul>
<li>No centralized repo</li>
<li>
Every developer owns 2 local repositories:
<ul>
<li>a public server one</li>
<li>a private client one</li>
</ul>
</li>
<li>Developers push to their local server</li>
<li>Developers can pull from official server</li>
<li>Project maintainer can pull from dervelopers repos</li>
<li>Project maintainer (only) can push to the official repo</li>
<li>Secure workflow</li>
<li>Ideal for open source projects</li>
</ul>
<aside class="notes">
</aside>
</section>
<section>
<h2>Forking</h2>
<img src="assets/forking-workflow.svg" width="80%" style="background: white; border:none; box-shadow:none;"/>
<aside class="notes">
</aside>
</section>
<section>
<h2>Branch Per Feature</h2>
<p>
Described by <a href="https://twitter.com/adymitruk">Adam Dymitruk</a>, this workflow is a bit more "confidential" but it brings some new ideas:
<ul>
<li>Features are small, atomic, flexible</li>
<li>Every feature branch have the same source commit</li>
<li>You must integrate as often as possible</li>
<li>Conflict resolutions are shared using Git rerere</li>
<li>You can easily take a feature out of a release build</li>
</ul>
</p>
<small style="margin-top:40px">
See <a href="http://dymitruk.com/blog/2012/02/05/branch-per-feature/">http://dymitruk.com/blog/2012/02/05/branch-per-feature/</a>
</small>
<aside class="notes">
</aside>
</section>
</section>
<section>
<section>
<h2>Pull request</h2>
<ul>
<li>Collaborate to a project (notify team members)</li>
<li>Propose code instead of pushing it</li>
<li>Forum to discuss about the proposed feature </li>
<li>Code reviewed by team members before being merged into the project</li>
<li>Follow-up commits</li>
<li>The whole activity around the proposed feature is stored in the pull request</li>
<li>Incompatible with Centralized workflow</li>
</ul>
<aside class="notes">
Instead of directly pushing his code on a repo, a developper who wants to collaborate to a project can send a pull request.<br/>
His code will be reviewed before being integrated, and developpers can discuss of the feature to integrate in a user-friendly web interface.<br/>
<br/>
Follow-up commits can be added by teammates to modify the feature before integrating it.<br/>
<br/>
Discussions about proposed feature aren't lost in emails.
<br/>
Incompatible with Centralized workflow because it needs 2 repos or 2 branches.
</aside>
</section>
<section>
<h2>Pull request general process</h2>
<p>A developper wants to collaborate to a project. What he has to do is:</p>
<ul>
<li>Clone the project / Fork and clone the project</li>
<li>Create a new local branch</li>
<li>Code, code, code...</li>
<li>Push branch to a public repo</li>
<li>Fill a pull request form</li>
<li>Project teammates review, [discuss, modify] the code</li>
<li>Project maintainer merges the feature into an offical branch</li>
<li>Project maintainer closes the pull request</li>
</ul>
<aside class="notes">
</aside>
</section>
<section>
<h2>Pull request example</h2>
<h3>Open</h3>
<img src="assets/pull-request-review-page.png" width="50%" style="background: none; border:none; box-shadow:none;"/>
<aside class="notes">
</aside>
</section>
<section>
<h2>Pull request example</h2>
<h3>Discuss</h3>
<img src="assets/pull-request-discussion.png" width="60%" style="background: none; border:none; box-shadow:none;"/>
<aside class="notes">
</aside>
</section>
</section>
<section>
<section>
<h2>Migrating from SVN to Git</h2>
<p>
Git provides importers for the most common VCSs.<br/>
For SVN, you just need to follow these steps:
</p>
<ul>
<li>
Create a "SVN IDs / Git Authors" mapping file (ex: user.txt):<br/>
<pre><code data-trim data-noescape class="hljs">svnUser = Author NAME <author@email.org></code></pre>
</li>
<li>
Import SVN repo with:
<pre><code data-trim data-noescape class="hljs bash" style="word-wrap: break-word;">$ git svn clone http://svn_repo/ \ <br/> --authors-file=users.txt --no-metadata -s git_project</code></pre>
</li>
<li>
Importing a SVN repo creates branches instead of tags.<br/>
Convert them to real Git tags:
<pre><code data-trim data-noescape class="hljs bash" style="word-wrap: break-word;">$ cp -Rf .git/refs/remotes/origin/tags/* .git/refs/tags/<br/>$ rm -Rf .git/refs/remotes/origin/tags</code></pre>
</li>
</ul>
<aside class="notes">
</aside>
</section>
<section>
<ul>
<li>
Then convert others SVN remote refs to Git local branches:
<pre><code data-trim data-noescape class="hljs bash" style="word-wrap: break-word;">$ cp -Rf .git/refs/remotes/* .git/refs/heads/ <br/>$ rm -Rf .git/refs/remotes</code></pre>
</li>
<li>
And eventually, add a reference to your Git server as a project "remote" and push it:
<pre><code data-trim data-noescape class="hljs bash" style="word-wrap: break-word;">$ git remote add origin git@my-git-server:myrepository.git <br/>$ git push origin --all</code></pre>
</li>
</ul>
</section>
<section data-background="assets/carlton.gif">
<h1>Here you are!</h1>
<h2>... Ready to use Git! ...</h2>
</section>
</section>
<section>
<section>
<h1>The end</h1>
<p class="fragment">Of course not...</p>
<p class="fragment">Let's practice a bit!</p>
<aside class="notes">
</aside>
</section>
<section>
<h1>First lesson:</h1>
<h2>working with branches</h2><br/>
<h3>Start by checking out a branch:</h3>
<pre><code data-trim data-noescape class="hljs">git checkout f-demo-working_with_branches</code></pre>
</section>
</section>
<section>
<h3>Thanks for listening</h3>
<p>
Licensed under the <a href="https://github.com/cdue/git-basics-presentation/blob/master/LICENSE-MIT">MIT license</a>.
</p>
<hr>
<p>
<small>Created with <a href="http://lab.hakim.se/reveal-js">reveal.js</a> - The HTML Presentation Framework</small>
</p>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
<div class="hidden-mobile">
<div style="display: block; position: absolute; bottom: 14px; left: 50%; margin-left: -200px; z-index: 20;">
<table>
<tr>
<td>
<a href="https://twitter.com/cedricdue" class="twitter-follow-button" data-show-count="false">Follow @cedricdue</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</td>
<td>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://github.com/cdue/git-basics-presentation" data-text="Git basics - Presentation for a little live coding session" data-via="cedricdue" data-hashtags="gitbasics">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</td>
<td>
<iframe src="https://ghbtns.com/github-btn.html?user=cdue&type=follow&count=true" frameborder="0" scrolling="0" width="150px" height="20px"></iframe>
</td>
<td>
<iframe src="https://ghbtns.com/github-btn.html?user=cdue&repo=git-basics-presentation&type=star&count=true" frameborder="0" scrolling="0" width="150px" height="20px"></iframe>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>