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
66
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
毎晩の 負荷試験自動実行による効果
recruitengineers
PRO
5
180
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
550
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.3k
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
1k
TLSから見るSREの未来
atpons
2
310
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
スタックチャン家庭用アシスタントへの道
kanekoh
0
120
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
110
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
580
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
2
940
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
2
2k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Gamification - CAS2011
davidbonilla
81
5.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Six Lessons from altMBA
skipperchong
28
3.9k
Fireside Chat
paigeccino
37
3.5k
Designing for humans not robots
tammielis
253
25k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Code Reviewing Like a Champion
maltzj
524
40k
Bash Introduction
62gerente
613
210k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
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