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
Lazy application authentication with Tailscale
bluehatbrit
0
210
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
Connect 100+を支える技術
kanyamaguc
0
200
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
140
2025 AWS Jr. Championが振り返るAWS Summit
kazukiadachi
0
110
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
120
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
440
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.5k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
What's in a price? How to price your products and services
michaelherold
246
12k
Visualization
eitanlees
146
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fireside Chat
paigeccino
37
3.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Writing Fast Ruby
sferik
628
62k
Site-Speed That Sticks
csswizardry
10
690
A better future with KSS
kneath
238
17k
How GitHub (no longer) Works
holman
314
140k
Facilitating Awesome Meetings
lara
54
6.4k
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