-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
503 lines (438 loc) · 17.5 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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Girl Develop It: Intro to Build Tools</title>
<meta name="description" content="Girl Develop It Intro to Build Tools slides">
<meta name="author" content="Pam Selle, thewebivore.com">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="dist/css/reveal.css">
<link rel="stylesheet" href="dist/css/default.css" id="theme">
<!-- For syntax highlighting -->
<!-- light editor --><link rel="stylesheet" href="dist/css/light.css">
<!-- dark editor <link rel="stylesheet" href="dist/css/dark.css">-->
<!-- <link rel="stylesheet" href="dist/css/zenburn.css"> -->
<link rel="stylesheet" href="plugin/accessibility-helper/css/accessibility-helper.css">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<!-- If use the PDF print sheet so students can print slides-->
<link rel="stylesheet" href="dist/css/print/pdf.css" type="text/css" media="print">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!--[if lt IE 9]>
<script src="dist/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<img src="dist/img/circle-gdi-logo.png" alt="GDI Logo" class="noborder"/>
<h1>How to Be a Lazy Developer</h1>
<h2>An Introduction to build tools</h2>
<p>
<small>Follow along at <a href="https://pselle.github.io/gdi-build-tools">https://pselle.github.io/gdi-build-tools</a>.</small>
</p>
</section>
<section>
<h2>Is your machine ready to go?</h2>
<ul>
<li>Node.js and npm installed</li>
<small>Please ask a TA to help you check if you aren't sure! Node 6+ please!</small>
<li>Your favorite text editor ready to go</li>
<small>I use Atom, but we often recommend Sublime Text</small>
</ul>
</section>
<section>
<h2>Introductions</h2>
<ul>
<li>Your name</li>
<li>What you hope to get out of class</li>
<li>Your favorite dinosaur</li>
</ul>
</section>
<section>
<h2>What we're learning today</h2>
<ul>
<li>Scaffolding</li>
<li>Old school build tooling (make)</li>
<li>Dependency management with npm</li>
<li>JS build tools: gulp and webpack</li>
</ul>
<aside class="notes">
We have all levels in this class, and so we start from the beginning and presume little knowledge.
Basic programming knowledge is going to be helpful, but what you'll learn will help you know what to
go learn more about. Furthermore, no question is dumb AND you help me out if you ask for clarification.
If you go beyond the scope of the class, I'll let you know!
</aside>
</section>
<section>
<h1>What do build tools help us do?</h1>
<aside class="notes">
Interactive activity, students offer suggestions
</aside>
</section>
<section>
<h2>What do build tools help us do?</h2>
<p>Developers write software to make their lives easier</p>
<ul>
<li>Start new projects</li>
<li>Optimize: minify, bundle</li>
<li>Validation: syntax errors, unit tests</li>
<li>Compile: <a href="http://sass-lang.com/">Sass</a>, <a href="https://babeljs.io/">Babel</a></li>
<li>Repeat the above when we make a file change</li>
</ul>
</section>
<section>
<h1>Scaffolding: Starting new projects</h1>
<p>We use scaffolding tools (such as "rails new" or the <a href="https://github.com/facebookincubator/create-react-app">create-react-app</a> project) to
quickly get a project started, or to see how a project works with all the pieces together</p>
<small>Although useful, scaffolding can constrain you to someone else's way of thinking. Critically analyze any scaffolding system you use for suitability!</small>
</section>
<section>
<h2>Let's Develop It!</h2>
<p>We're going to try out <strong>Yeoman</strong> a scaffolding tool for webapps</p>
<pre><code class="bash">$ npm install -g yo</code></pre>
<p>Now, run <code>yo</code> from your terminal. What happens? Now, try running one of the <a href="http://yeoman.io/generators/">many generator options</a>!</p>
<pre><code class"bash">$ mkdir [directory name]
$ cd [directory name]
$ yo [choose a generator]
</code></pre>
</section>
<section>
<h2>Build Tool Basics</h2>
<ul>
<li>Run complex series of tasks with simple commands</li>
<li>Check your code for common problems</li>
<li>Automatically run when a file changes</li>
<li>Host a local server to help development (eg Ajax requests)</li>
</ul>
</section>
<section>
<h2>Makefile</h2>
<ul>
<li>Initially used for compiling C programs</li>
<li>Can be used for any command-line tasks</li>
<li>Everything we do later with a build script (ex. gulp, npm scripts) you can do with make!</li>
<li>Pre-installed Mac/Linux</li>
</ul>
</section>
<section>
<h2>Makefile sample</h2>
<pre><code class="bash">all: clean build
clean:
rm -rf foo
build:
mkdir foo && cd foo && touch index.html
</code></pre>
</section>
<section>
<h2>Make is great!</h2>
<ul>
<li>Every "word:" can be run as a command</li>
<li>"all" runs by default when you run "make"</li>
<li>Add as many commands as you want</li>
<li>Make is smart! Runs what is necessary based on what changed</li>
</ul>
<aside class="notes">Each word with a colon can be run as a command with make. "all" is what runs by default.
What makes Make cool and revolutionary as build tooling is it's smart: it does the minimum amount of work
necessary based on what changed. In our simple example, this won't happen, but for compiling, it's A+</aside>
</section>
<section>
<h2>Let's Develop It!</h2>
<p>Try making a Makefile using the sample code. You can also download <a href="https://pselle.github.io/gdi-build-tools/class-files/make-example/Makefile">from github.</a></p>
<pre><code class="bash">all: clean build
clean:
rm -rf foo
build:
mkdir foo && cd foo && touch index.html
</code></pre>
<aside class="notes">Only a few minutes for this one, I'll walk through up front in case getting this cobbled together is difficult</aside>
</section>
<section>
<h2>Dependency management</h2>
<div><img src="images/blocks.jpg" /></div>
<small>Photo via Flickr user Steven Depolo</small>
<aside class="notes">Programming nowadays is putting blocks together well. Dependency management is how we make sure we
get the blocks we meant to, every time.</aside>
</section>
<section>
<h2>npm - Node Package Manager</h2>
<p>"npm is the package manager for JavaScript and the world’s largest software registry" - <a href="https://www.npmjs.com/">npmjs.com</a></p>
<p><a href="https://yarnpkg.com/en/">Yarn</a> is an alternative to npm, and many of the commands map. It's fast and has some strong benefits.</p>
<h3>Let's Develop It!</h3>
<p>Create a new directory and run "npm init"</p>
<aside class="notes">Yarn is interesting and I'm happy to talk more about it after class, but since we all have npm installed, we're using that!
Because yarn has general API parity with npm, anything you learn here is useful with that.</aside>
</section>
<section>
<h2>package.json</h2>
<pre><code class="json">{
"name": "intro-to-build-tools",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "GDI Philly",
"license": "MIT"
}
</code></pre>
</section>
<section>
<h2>Adding dependencies</h2>
<p>Use npm to install a package AND save it to our dependencies!</p>
<pre><code class="bash">$ npm install --save dinosaur-fetcher</code></pre>
<small>Tip! You can also use -S instead of --save!</small>
<aside class="notes">Brief walkthrough: run this install command, show node_modules folder,
rm -rf, and run npm install to show it generates same folders</aside>
</section>
<section>
<h2>Let's Develop It!</h2>
<ul>
<li>Install the dinosaur fetcher module in your node project</li>
<li>Create index.js and fill it in with the code below</li>
</ul>
<pre><code class="javascript">const dino = require('dinosaur-fetcher');
console.log(dino.random());</code></pre>
<p>BONUS activities: Be creative with how you use dinosaur fetcher! Can you prompt the user?
Do something with multiple dinosaur values?</p>
</section>
<section>
<h2>Scripts?? Let's scripts!!</h2>
<p>The "scripts" section of package.json can be any word, and you can run with "npm run [word]"</p>
<p>Some words have default behaviors, such as "start" and "install", and <a href="https://docs.npmjs.com/misc/scripts">npm
has lots of details on that</a>.</p>
<p>Edit package.json to look like:</p>
<pre><code> "scripts": {
"test": "echo \"No tests yet!\"",
"start": "node index.js"
},</code></pre>
<p>And run "npm start"</p>
<small>For a challenge, use a new word (ex. "build") and have it run any bash command! Don't forget "npm run"!</small>
<aside class="notes">Not breaking out for exercise here (challenge available to those that want it, though), but ask for questions and run through any up front</aside>
</section>
<section>
<h2>JavaScript Built Tools!</h2>
<p>We'll talk about two today:</p>
<ul>
<li>Gulp</li>
<li>Webpack</li>
</ul>
</section>
<section>
<h2>Why use web build tools?</h2>
<ul>
<li>Write in language we know (JS)</li>
<li>Run in Node runtime</li>
<li>Large plugin ecosystems</li>
</ul>
<aside class="notes">Plugins: someone has had your problem before</aside>
</section>
<section>
<h2>How do you choose your toolset?</h2>
<ul>
<li>More about <em>combinations</em> than <em>choices</em></li>
<li>Choose an overarching runner (ex. gulp or webpack) you can add on to</li>
<li>Add tooling to make development more fun: Babel for ES6, CSS pre-processor for variables, etc.</li>
<li>Common toolsets: React+Babel+Webpack, Gulp+concat+uglify</li>
</ul>
</section>
<section>
<h2>Gulp</h2>
<p><a href="http://gulpjs.com/">gulpjs.com</a></p>
<div><img src="images/cars.jpg"/></div>
<small>Photo via Flickr user Alden Jewell</small>
<aside class="notes">Pass files through the processes that need to occur. How do you make a car on the assembly line?</aside>
</section>
<section>
<h2>Gulp</h2>
<ul>
<li>Define tasks</li>
<li>Define sources</li>
<li>"Pipe" sources through processes</li>
</ul>
<pre><code class="javascript">var gulp = require('gulp');
gulp.task('default', function() {
gulp.src('./*.js')
.pipe(gulp.dest('dist'));
});</code></pre>
<aside class="notes">Walk through what is happening in the gulp file. What's a task? What's source? What's pipe?</aside>
</section>
<section>
<h2>Things we could add to our builds!</h2>
<ul>
<li>Linters - <a href="http://eslint.org/">ESLint</a></li>
<li>Compilers - <a href="https://babeljs.io/">Babel</a>, compression, etc.</li>
<li>Source maps - point a compressed line of code to its original line number</li>
<li>Watch - automatically refresh our page when we changed a file</li>
</ul>
</section>
<section>
<h2>Let's Develop It!</h2>
<ul>
<li>Install gulp as a dependency for your project, using npm</li>
<li>Create a "gulpfile.js" file in the project we used with npm</li>
<li>BONUS: Add a "script" task to run gulp</li>
<li>BONUS: Where is gulp in package.json if you install as a developer dependency (-D vs. -S)?</li>
<li>BONUS: Add <a href="https://www.npmjs.com/package/gulp-watch">gulp-watch</a> to your project</li>
</ul>
<pre><code class="javascript">var gulp = require('gulp');
gulp.task('default', function() {
gulp.src('./*.js')
.pipe(gulp.dest('dist'));
});</code></pre>
</section>
<section>
<h2>Webpack</h2>
<p><a href="https://webpack.js.org/">webpack.js.org</a></p>
<p>Webpack is a module bundler for web applications.</p>
<img src="images/webpack.gif"/>
</section>
<section>
<h2>Webpack: Simple</h2>
<p>Webpack is <em>smart</em>. It understands lots of module definitions (CommonJS, AMD, ES 6 modules, etc.) and puts things together.</p>
<pre><code class="js">// webpack.config.js
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
}
}
</code></pre>
<aside class="notes">Open webpack example and show how it can create bundle.js file rather than multiple tags</aside>
</section>
<section>
<h2>Webpack components</h2>
<ul>
<li>Entry</li>
<li>Output</li>
<li>Loaders</li>
<li>Plugins</li>
</ul>
<pre><code class="js">// webpack.config.js
module.exports = {
entry: './index.js', // Entry!
output: { // Output!
filename: 'bundle.js'
}
}
</code></pre>
<p>Note: the <a href="https://webpack.js.org/concepts/">Webpack 2 documentation has a great overview of these!</a></p>
</section>
<section>
<h2>Loaders & Plugins</h2>
<p>Loaders are how webpack understands files - how you can 'require()' a CSS file, or an image file, even!</p>
<p>Plugins perform actions on "compilations" or "chunks" of bundled code, vs. on a per file basis like a loader</p>
<aside class="notes">There is a more complex webpack example that shows loaders and plugin usage</aside>
</section>
<section>
<h2>Loaders</h2>
<p>We can use a CSS Loader to require CSS in our JS!</p>
<p>This is useful in, ex. modular components</p>
<pre><code class="js">const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css/,
loaders: ['style-loader', 'css-loader'],
include: __dirname + '/css'
}
]
}
};
</code></pre>
</section>
<section>
<h2>Including CSS in our JS</h2>
<pre><code class="js">import { coolStuff } from './coolStuff';
import styles from './css/coolStyles.css';
import mainStyles from './css/styles.css';
document.write(`<h2 class="coolness">MOAR COOL STUFF ${coolStuff}!</h2>`);
</code></pre>
<aside class="notes">But when we do this, we get style tags. Show in built file. A plugin can help us use a bundled CSS instead!</aside>
</section>
<section>
<h2>Using a plugin instead</h2>
<pre><code class="js">const path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css")
]
};</code></pre>
</section>
<section>
<h2>Let's Develop It!</h2>
<p>Try making a basic webpack configuration on your own!</p>
<aside class="notes">This is where we're ending class, feel free to work on this now, or go back to a previous exercise</aside>
</section>
<section>
<h1>Thank you!</h1>
<h4>Don't forget to fill out the survey!</h4>
<a href="http://tiny.cc/gdibuilds">http://tiny.cc/gdibuilds</a>
</section>
</div>
<footer>
<div class="copyright">
Intro to Build Tools -- GDI Philly -- Pam Selle
<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a>
</div>
</footer>
</div>
<script src="dist/js/head.min.js"></script>
<script src="dist/js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// 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: 'dist/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 },
{ src: 'plugin/accessibility-helper/js/accessibility-helper.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>