Skip to content

Commit d3a103b

Browse files
leecrossleyleecrossley
committed
Slides content
1 parent 1536a62 commit d3a103b

File tree

5 files changed

+196
-445
lines changed

5 files changed

+196
-445
lines changed

‎css/fjs.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ body {
1919
font-size: 36px;
2020
font-weight: normal;
2121
letter-spacing: -0.02em;
22-
color: #000;
22+
color: #52234d;
2323
}
2424

2525
::selection {
@@ -43,7 +43,7 @@ body {
4343
.reveal h4,
4444
.reveal h5,
4545
.reveal h6 {
46-
margin: 0 0 20px 0;
46+
margin: 0 0 30px 0;
4747
color: #52234d;
4848
font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
4949
font-weight: 300;
@@ -74,7 +74,7 @@ body {
7474
* OTHER
7575
*********************************************/
7676
.reveal p {
77-
margin-bottom: 15px;
77+
margin-bottom: 20px;
7878
line-height: 1.2em;
7979
}
8080

@@ -164,7 +164,7 @@ body {
164164
display: block;
165165
position: relative;
166166
width: 90%;
167-
margin: 15px auto;
167+
margin: 15px auto 30px;
168168
text-align: left;
169169
font-size: 0.55em;
170170
font-family: monospace;

‎index.html

+187-11
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
<img alt="functional.js" src="http://functionaljs.com/css/images/[email protected]" />
2020
<h1>functional.js</h1>
2121
<p>
22-
<a href="http://functionaljs.com" target="_blank">Documentation</a> /
23-
<a href="https://github.com/leecrossley/functional-js" target="_blank">GitHub</a>
22+
<a href="http://functionaljs.com" target="_blank">docs</a> /
23+
<a href="https://github.com/leecrossley/functional-js" target="_blank">source</a>
2424
</p>
2525
<p><small>
2626
<a href="https://twitter.com/lee_crossley" target="_blank">@lee_crossley</a> /
@@ -29,12 +29,184 @@ <h1>functional.js</h1>
2929
</section>
3030

3131
<section>
32-
<h2>Code</h2>
33-
<pre><code data-trim contenteditable>
34-
var thing = function () {
35-
// Stuff
32+
<h3>Straight in...</h3>
33+
<pre><code spellcheck="false" data-trim contenteditable>
34+
var enabledProducts = [];
35+
36+
for (var i = 0; i < products.length; i++) {
37+
if (products[i].enabled) {
38+
enabledProducts.push(products[i]);
39+
}
40+
}
41+
</code></pre>
42+
43+
<h4>With fjs</h4>
44+
45+
<pre><code spellcheck="false" data-trim contenteditable>
46+
var enabledProducts = fjs.select(function(item) {
47+
return item.enabled;
48+
}, products);
49+
</code></pre>
50+
51+
<p><small>
52+
<a href="http://functionaljs.com/collections/select-filter/" target="_blank">view in docs</a>
53+
</small></p>
54+
55+
</section>
56+
57+
<section>
58+
<h3>Skinning the cat</h3>
59+
60+
<pre><code spellcheck="false" data-trim contenteditable>
61+
var enabledProducts = fjs.select(function(item) {
62+
return item.enabled;
63+
}, products);
64+
</code></pre>
65+
66+
<h4>Currying for reuse</h4>
67+
68+
<pre><code spellcheck="false" data-trim contenteditable>
69+
var enabled = function (item) {
70+
return item.enabled;
71+
};
72+
73+
var selectEnabled = fjs.select(enabled);
74+
75+
selectEnabled(products);
76+
</code></pre>
77+
78+
<p><small>
79+
<a href="http://functionaljs.com/collections/select-filter/" target="_blank">view in docs</a>
80+
</small></p>
81+
82+
</section>
83+
84+
<section>
85+
<h3>More techniques</h3>
86+
<h4>Lambda expressions</h4>
87+
88+
<pre><code spellcheck="false" data-trim contenteditable>
89+
var enabledProducts = fjs.select("p => p.enabled", products);
90+
</code></pre>
91+
92+
<h4>Curried lambda expression</h4>
93+
94+
<pre><code spellcheck="false" data-trim contenteditable>
95+
var selectEnabled = fjs.select("p => p.enabled");
96+
97+
selectEnabled(products);
98+
</code></pre>
99+
100+
<p><small>
101+
<a href="http://functionaljs.com/basics/lambda/" target="_blank">view in docs</a>
102+
</small></p>
103+
104+
</section>
105+
106+
<section>
107+
<h3>fjs functions for collections</h3>
108+
<p>each, map, reduce, fold, apply, every, any, select, pluck, toArray, first, last, best, partition, group, while</p>
109+
110+
<p><small>
111+
<a href="http://functionaljs.com/collections/each/" target="_blank">view in docs</a>
112+
</small></p>
113+
</section>
114+
115+
<section>
116+
<h3>Fold product prices</h3>
117+
118+
<pre><code spellcheck="false" data-trim contenteditable>
119+
var add = function (a, b) {
120+
return a + b;
36121
};
37-
</code></pre>
122+
123+
var sum = fjs.fold(add, 0);
124+
125+
sum(prices);
126+
</code></pre>
127+
128+
<pre><code spellcheck="false" data-trim contenteditable>
129+
fjs.fold("a, b => a + b", 0, prices);
130+
</code></pre>
131+
132+
<p><small>
133+
<a href="http://functionaljs.com/collections/fold/" target="_blank">view in docs</a>
134+
</small></p>
135+
</section>
136+
137+
<section>
138+
<h3>From the DOM</h3>
139+
140+
<pre><code spellcheck="false" data-trim contenteditable>
141+
var $ = document.querySelectorAll.bind(document);
142+
143+
var prices = [].slice.call($(".price"));
144+
145+
fjs.fold("a, b => a + b", 0, prices);
146+
</code></pre>
147+
148+
<p><small>
149+
<a href="http://functionaljs.com/collections/fold/" target="_blank">view in docs</a>
150+
</small></p>
151+
</section>
152+
153+
<section>
154+
<h3>Roll your own</h3>
155+
156+
<pre><code spellcheck="false" data-trim contenteditable>
157+
var converter = fjs.curry(function(rate, symbol, input) {
158+
var output = input * rate;
159+
return symbol + output.toFixed(2);
160+
});
161+
162+
var poundsToUSD = converter(1.52, "$");
163+
var poundsToEUR = converter(1.27, "€");
164+
165+
poundsToUSD(100);
166+
poundsToEUR(50);
167+
</code></pre>
168+
169+
<p><small>
170+
<a href="http://functionaljs.com/basics/curry/" target="_blank">view in docs</a>
171+
</small></p>
172+
</section>
173+
174+
<section>
175+
<h3>Why fjs?</h3>
176+
<ul>
177+
<li>Functional from the ground up but still JS</li>
178+
<li>Consistent implementation</li>
179+
<li>Client (cross browser, mobile) / Server (nodejs)</li>
180+
<li>&lt; 2kB minified and gzipped</li>
181+
<li>Best curry you'll get anywhere</li>
182+
</ul>
183+
</section>
184+
185+
<section>
186+
<h3>There's much, much more</h3>
187+
188+
<ul>
189+
<li>Multiple function composition with fjs.compose</li>
190+
<li>Extending function arity beyond the expected length</li>
191+
</ul>
192+
</section>
193+
194+
<section>
195+
<h3>Try it</h3>
196+
<ul>
197+
<li>npm install functional.js --save</li>
198+
<li>bower install functional.js</li>
199+
<li>http://bit.ly/funcmin</li>
200+
<li>here (open your dev console)</li>
201+
</ul>
202+
</section>
203+
204+
<section>
205+
<h3>Get involved</h3>
206+
<ul>
207+
<li><a href="https://github.com/leecrossley/functional-js" target="_blank">Open source</a></li>
208+
<li><a href="https://github.com/leecrossley/functionaljs-docs" target="_blank">Open docs</a></li>
209+
</ul>
38210
</section>
39211
</div>
40212
</div>
@@ -43,6 +215,7 @@ <h2>Code</h2>
43215

44216
<script src="js/head.js"></script>
45217
<script src="js/reveal.js"></script>
218+
<script src="js/functional.js"></script>
46219

47220
<script>
48221
Reveal.initialize({
@@ -52,10 +225,13 @@ <h2>Code</h2>
52225
center: true,
53226
transition: "none",
54227
dependencies: [
55-
{ src: "js/marked.js" },
56-
{ src: "js/markdown.js" },
57-
{ src: "js/highlight.js", async: true,
58-
callback: function() { hljs.initHighlightingOnLoad(); } }
228+
{
229+
src: "js/highlight.js",
230+
async: true,
231+
callback: function() {
232+
hljs.initHighlightingOnLoad();
233+
}
234+
}
59235
]
60236
});
61237
</script>

‎js/functional.js

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)