Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Less Frustration, More Readable Code: Functiona...
Search
Syntax Conference
June 08, 2018
Technology
0
180
Less Frustration, More Readable Code: Functional Programming in JavaScript with RamdaJS
A presentation by Nate Taylor at Syntax Conference (SyntaxCon) 2018, in Charleston, South Carolina
Syntax Conference
June 08, 2018
Tweet
Share
More Decks by Syntax Conference
See All by Syntax Conference
PouchDB, the Database that Syncs
syntaxcon
1
240
Building Smarter Apps with Cognitive APIs
syntaxcon
0
65
WordPress As An Application Foundation
syntaxcon
0
70
Building Security into Your Data Back-End
syntaxcon
0
87
Baby Got Back(end) – How to Choose A Backend for Your Mobile App
syntaxcon
0
130
An Introduction to MonoGame
syntaxcon
0
230
Just Gimme the Data!
syntaxcon
0
53
Other Decks in Technology
See All in Technology
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
180
Connect 100+を支える技術
kanyamaguc
0
200
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
270
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
120
OPENLOGI Company Profile
hr01
0
67k
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
550
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
150
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
OPENLOGI Company Profile for engineer
hr01
1
34k
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.8k
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
200
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
How to train your dragon (web standard)
notwaldorf
95
6.1k
Adopting Sorbet at Scale
ufuk
77
9.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Speed Design
sergeychernyshev
32
1k
Transcript
NATE TAYLOR Developer | Conference Speaker Less Frustration, More Readable
Code: Functional Programming with RamdaJS
© 2017 NATE TAYLOR @taylonr taylonr.com let candyBars = [milkyWay,
hersheys, snickers]; let regularSize = []; candyBars.forEach(function(c){ c.versions.forEach(function(v) { if(v.size === 'regular’){ regularSize.push({name: c.name, versions: [v]}); } }); }); Have You Seen This Code?
RamdaJS © 2017 NATE TAYLOR @taylonr taylonr.com
A practical functional library for JavaScript programmers. © 2017 NATE
TAYLOR @taylonr taylonr.com What is Ramda?
Overarching Goals © 2017 NATE TAYLOR @taylonr taylonr.com Immutable
An object whose state cannot change after being created ©
2017 NATE TAYLOR @taylonr taylonr.com Immutable
C a n d y b a r s !
© 2017 NATE TAYLOR @taylonr taylonr.com
© 2017 NATE TAYLOR @taylonr taylonr.com Don’t Lick My Candy
Bar The Big Idea
Overarching Goals © 2017 NATE TAYLOR @taylonr taylonr.com Immutable Currying
The process of transforming a function that takes multiple arguments
into a function that takes just a single argument and returns another function if any arguments are still needed. © 2017 NATE TAYLOR @taylonr taylonr.com Currying
C a n d y b a r s !
© 2017 NATE TAYLOR @taylonr taylonr.com
© 2017 NATE TAYLOR @taylonr taylonr.com contains('peanuts’, candy) containsPeanuts =
contains('peanuts'); containsPeanuts(candy); Currying
© 2017 NATE TAYLOR @taylonr taylonr.com Define Once, Use Everywhere
The Big Idea
Overarching Goals © 2017 NATE TAYLOR @taylonr taylonr.com Immutable Currying
Composition
The act of pipelining the result of one function, to
the input of another, creating an entirely new function. © 2017 NATE TAYLOR @taylonr taylonr.com Function Composition
C a n d y b a r s !
© 2017 NATE TAYLOR @taylonr taylonr.com
© 2017 NATE TAYLOR @taylonr taylonr.com const getMultipiecePeanutCandy = (candy)
=> { const multiPiece = eliminateSinglePieces(candy); return eliminateNonPeanuts(multiPiece); } Function Composition
© 2017 NATE TAYLOR @taylonr taylonr.com const getMultipieceCandy = (candy)
=> eliminatePeanuts(eliminateSinglePieces(candy)); Function Composition
© 2017 NATE TAYLOR @taylonr taylonr.com Increase Readability The Big
Idea
S a m p l e R a m d
a F u n c t i o n s © 2017 NATE TAYLOR @taylonr taylonr.com
Using Multiple Functions © 2017 NATE TAYLOR @taylonr taylonr.com const
arr = ['Milky Way', 'Twix', 'Snickers’, ‘3 Musketeers', 'm&ms']; const containsCandy = (candy) => { contains(candy, take(2, sortBy(toLower, arr))); } containsCandy('Milky Way'); //false
Using Multiple Functions © 2017 NATE TAYLOR @taylonr taylonr.com const
arr = ['Milky Way', 'Twix', 'Snickers’, ‘3 Musketeers', 'm&ms']; const containsCandy = (candy) => { contains(candy, take(2, sortBy(toLower, arr))); } containsCandy('Milky Way'); //false
Pipe © 2017 NATE TAYLOR @taylonr taylonr.com const containsCandy =
(candy) => { let arr = ['Milky Way', 'Twix', 'Snickers’, '3 Musketeers', 'm&ms']; return pipe( sortBy(toLower), take(2), contains(candy) )(arr) } containsCandy('Milky Way'); //false
List Functions © 2017 NATE TAYLOR @taylonr taylonr.com
all | any | none © 2017 NATE TAYLOR @taylonr
taylonr.com R.all(_ => _ % 2 == 0, [1, 2, 3, 4]) //false R.any(_ => _ % 2 == 0, [1, 2, 3, 4]) //true R.none(_ => _ % 2 == 0, [1, 2, 3, 4]) //false
zip © 2017 NATE TAYLOR @taylonr taylonr.com zip([1, 2, 3],
['a', 'b', 'c']); //=> [[1, 'a'], [2, 'b'], [3, 'c']]
Combining Together © 2017 NATE TAYLOR @taylonr taylonr.com var csvHeaders
= ['accountName', 'assetName', 'quantity’]; var firstRow = ['accountName', 'assetName', 'quantity']; var createObj = x => {return {csv: x[0], val: x[1]};}; var csvMatchesValue = x => x.csv === x.val; var isHeader = R.pipe( R.zip(csvHeaders), R.map(createObj), R.all(csvMatchesValue) ); isHeader(firstRow)
Object Functions © 2017 NATE TAYLOR @taylonr taylonr.com
path | pathOr © 2017 NATE TAYLOR @taylonr taylonr.com let
milkyWay = { name: 'Milky Way’, nutrition: { fat: 10 } }; R.path(['nutrition', 'fat’]); //10 R.path(['nutrition', 'sodium’]); //undefined R.pathOr('0%', ['nutrition', 'vitamins', 'A’]); //0%
pick © 2017 NATE TAYLOR @taylonr taylonr.com let milkyWay =
{ name: 'Milky Way', calories: 210, funSize: false, nutrition: { fat: 10, carbohydrate: 41, protein: 2.3 } }; R.pick(['name', 'calories'], milkyWay); //{name: 'Milky Way', calories: 210}
Other Categories © 2017 NATE TAYLOR @taylonr taylonr.com Logic Math
String Relation
Why Use Ramda? © 2017 NATE TAYLOR @taylonr taylonr.com
Any fool can write code that a computer can understand.
Good programmers write code that humans can understand. © 2017 NATE TAYLOR @taylonr taylonr.com -- Martin Fowler
© 2017 NATE TAYLOR @taylonr taylonr.com var buyACandyBar = (me,
cashier) => { pipe( driveToStore(), findAllCandyBars(), eliminateKingSize(), eliminatePeanuts(), takeOne(), pay(cashier) )(me); }; Readable Code
How Do I Get Started? © 2017 NATE TAYLOR @taylonr
taylonr.com Start With Lists Eliminate For Loops Think Small Think Transformation
NATE TAYLOR @taylonr|
[email protected]
THANK YOU