Skip to content

Commit 6cb0df4

Browse files
zbyte64zbyte64
committed
added lesson 4, code samples to follow
1 parent 5db428a commit 6cb0df4

File tree

5 files changed

+80
-6
lines changed

5 files changed

+80
-6
lines changed

‎index.html

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<section class="container">
1111
<h1>Lessons</h1>
1212
<div class="row">
13-
<div class="col-sm-4">
13+
<div class="col-sm-3">
1414
<p>
1515
<a href="lesson1.html">Lesson 1</a>
1616
<ul>
@@ -20,7 +20,7 @@ <h1>Lessons</h1>
2020
</ul>
2121
</p>
2222
</div>
23-
<div class="col-sm-4">
23+
<div class="col-sm-3">
2424
<p>
2525
<a href="lesson2.html">Lesson 2</a>
2626
<ul>
@@ -31,7 +31,7 @@ <h1>Lessons</h1>
3131
</ul>
3232
</p>
3333
</div>
34-
<div class="col-sm-4">
34+
<div class="col-sm-3">
3535
<p>
3636
<a href="lesson3.html">Lesson 3</a>
3737
<ul>
@@ -40,6 +40,16 @@ <h1>Lessons</h1>
4040
</ul>
4141
</p>
4242
</div>
43+
<div class="col-sm-3">
44+
<p>
45+
<a href="lesson4.html">Lesson 4 (incomplete)</a>
46+
<ul>
47+
<li>Contracts</li>
48+
<li>Components as Contracts</li>
49+
<li>Components as Stories</li>
50+
</ul>
51+
</p>
52+
</div>
4353
</div>
4454
</section>
4555
</section>

‎lesson1.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,11 +191,12 @@ <h2>State &amp; Events</h2>
191191
</div>
192192
</div>
193193
</section>
194-
<div class="footer">
194+
<div class="footer container">
195195
<ul class="pagination">
196196
<li class="active"><a href="lesson1.html">Lesson 1</a></li>
197197
<li><a href="lesson2.html">Lesson 2</a></li>
198198
<li><a href="lesson3.html">Lesson 3</a></li>
199+
<li><a href="lesson4.html">Lesson 4</a></li>
199200
<li><a href="lesson2.html">&raquo;</a></li>
200201
</ul>
201202
</div>

‎lesson2.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -294,12 +294,13 @@ <h1>Lifecycle &amp; Integrations</h1>
294294
</div>
295295
</div>
296296
</section>
297-
<div class="footer">
297+
<div class="footer container">
298298
<ul class="pagination">
299299
<li><a href="lesson1.html">&laquo;</a></li>
300300
<li><a href="lesson1.html">Lesson 1</a></li>
301301
<li class="active"><a href="lesson2.html">Lesson 2</a></li>
302302
<li><a href="lesson3.html">Lesson 3</a></li>
303+
<li><a href="lesson4.html">Lesson 4</a></li>
303304
<li><a href="lesson3.html">&raquo;</a></li>
304305
</ul>
305306
</div>

‎lesson3.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -361,12 +361,14 @@ <h1>Models</h1>
361361
</div>
362362
</div>
363363
</section>
364-
<div class="footer">
364+
<div class="footer container">
365365
<ul class="pagination">
366366
<li><a href="lesson2.html">&laquo;</a></li>
367367
<li><a href="lesson1.html">Lesson 1</a></li>
368368
<li><a href="lesson2.html">Lesson 2</a></li>
369369
<li class="active"><a href="lesson3.html">Lesson 3</a></li>
370+
<li><a href="lesson4.html">Lesson 4</a></li>
371+
<li><a href="lesson4.html">&raquo;</a></li>
370372
</ul>
371373
</div>
372374
</body>

‎lesson4.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<html>
2+
<head>
3+
<title>Contracts</title>
4+
<link href="lib/bootstrap.css" rel="stylesheet" />
5+
</head>
6+
<body>
7+
<section class="container">
8+
<h1>Contracts</h1>
9+
<div class="row">
10+
<div class="col-sm-12">
11+
<p>
12+
Public facing functions can be considered a contract.
13+
When you define a function you are establishing a set of desired actions that other functions depend on remaining consistent.
14+
If you change a function that is called throughout the application it should maintain its contractual obligations (or else you will need to refactor all the calls made to te function).
15+
By establishing a contract the function can be more easily re-used and is a great tool for isolating complexities.
16+
</p>
17+
<p>Obligatory wikipedia link: <a href="https://en.wikipedia.org/wiki/Design_by_contract">Design by Contact</a></p>
18+
</div>
19+
</div>
20+
</section>
21+
<section class="container">
22+
<h1>Components as Contracts</h1>
23+
<div class="row">
24+
<div class="col-sm-12">
25+
<p>
26+
Components work like statefull functions and can be designed in a contractual manner.
27+
In general components should only concern themselves with rendering the DOM and handling user interactions.
28+
If the results of those user interactions extend beyond the component itself then the handling should be done outside the component.
29+
This can be done through callbacks associated to the component (onChange, onClick, etc) or by putting an event on a channel.
30+
Not only does this keep our components lean but it makes it easier to unit test since our blocks of code are seperated by concerns.
31+
</p>
32+
</div>
33+
</div>
34+
</section>
35+
<section class="container">
36+
<h1>Components as Stories</h1>
37+
<div class="row">
38+
<div class="col-sm-12">
39+
<p>
40+
Components (and programming in general) allow the user to <a href="https://en.wikipedia.org/wiki/Choose_Your_Own_Adventure">"choose your own adventure"</a>.
41+
At each event the component updates state and the story progresses.
42+
Wherever the user chooses to progress the story should be encapsulated in a method.
43+
Wherever the component chooses something to render based on the current story line should also be encapsulated in a method.
44+
The alternative to this is to attempt to pack more logic into the "render" method which is harder to test.
45+
By delegating functionality to component methods the component contract becomes more obvious and other developers can more quickly understand how the component progresses the story.
46+
</p>
47+
</div>
48+
</div>
49+
</section>
50+
<div class="footer container">
51+
<ul class="pagination">
52+
<li><a href="lesson2.html">&laquo;</a></li>
53+
<li><a href="lesson1.html">Lesson 1</a></li>
54+
<li><a href="lesson2.html">Lesson 2</a></li>
55+
<li><a href="lesson3.html">Lesson 3</a></li>
56+
<li class="active"><a href="lesson4.html">Lesson 4</a></li>
57+
</ul>
58+
</div>
59+
</body>
60+
</html>

0 commit comments

Comments
 (0)