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
7MASTERS Programação Funcional - Javascript Fun...
Search
Ana Luiza Portello
July 25, 2018
Programming
1
170
7MASTERS Programação Funcional - Javascript Funcional Com Ramda
Ana Luiza Portello
July 25, 2018
Tweet
Share
More Decks by Ana Luiza Portello
See All by Ana Luiza Portello
FRONTIN | Elas Programam - Programação Funcional no Front-end
anabastos
0
61
Workshop JSFP - SEMCOMP 2021
anabastos
0
230
Clojure é um Java melhor que Java - Codecon 2021
anabastos
0
120
Clojure 101 - Criciuma Dev
anabastos
0
290
TDC POA - GraphQL
anabastos
1
240
TDC Porto Alegre 2019 - JS Funcional com Ramda
anabastos
0
210
BackEndSP - GraphQL
anabastos
0
200
Git & Github - RLadies
anabastos
1
210
Programaria Summit - Performance FrontEnd
anabastos
1
190
Other Decks in Programming
See All in Programming
ドメインイベント増えすぎ問題
h0r15h0
2
320
rails statsで大解剖 🔍 “B/43流” のRailsの育て方を歴史とともに振り返ります
shoheimitani
2
930
fs2-io を試してたらバグを見つけて直した話
chencmd
0
230
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
1
440
Cloudflare MCP ServerでClaude Desktop からWeb APIを構築
kutakutat
1
550
責務を分離するための例外設計 - PHPカンファレンス 2024
kajitack
6
970
たのしいparse.y
ydah
3
120
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
270
MCP with Cloudflare Workers
yusukebe
2
220
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
400
創造的活動から切り拓く新たなキャリア 好きから始めてみる夜勤オペレーターからSREへの転身
yjszk
1
130
フロントエンドのディレクトリ構成どうしてる? Feature-Sliced Design 導入体験談
osakatechlab
8
4.1k
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
28
900
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Fireside Chat
paigeccino
34
3.1k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Site-Speed That Sticks
csswizardry
2
190
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Transcript
ANA LUIZA BASTOS github.com/anabastos @naluhh @anapbastos Software Developer na Quanto
e cientista da computação na PUC-SP anabastos.me
JAVASCRIPT FUNCIONAL COM RAMDA
JS pode ser usado como uma linguagem funcional?
Javascript tem funções de primeira ordem (HOF)
Quando falamos de funcional nessas linguagens falamos de “Mantenabilidade” “Menos
bugs” “Declaratividade”
JS vem aos poucos adotando elementos de linguagens funcionais
PROPOSALS
Flatmap Partial Application Pipeline operator Pattern Matching
RAMDA
Biblioteca que foi pensada para tornar mais fácil o javascript
funcional
• 100% imutável • ganho em performance • legibilidade •
point-free / tacit programming
• Lists(map, filter, reduce, contains, replace, passAll, crop, flatten, find)
• Maths(inc, add, mean, sum) • String(split, replace) • Logics(equals, cond, not) • Relation(intersection, clamp, gt, lt) • Functions(curry, pipe, compose, ifElse, etc)
TODAS AS FUNÇÕES SÃO CURRIED
const add = (x, y) => x + y add(1,
2); // 3 add(1) // Error
const add = x => y => x + y
add(1, 2); // 3 add(1) // Function
R.add(1, 2); // 3 R.add(1) // Function
CURRY (PROPOSAL PARTIAL APPLICATION)
const curryAdd = R.curry((x, y) => x + y)) curryAdd(1,
2); // 3 curryAdd(1)(2); // 3
PIPE / COMPOSE (PROPOSAL PIPELINE OPERATOR)
PIPE / COMPOSE: compõe funções de forma sequencial function1 function2
INPUT OUTPUT
EXEMPLINHO
Happy Hour: • Soma o consumido • Adiciona os 10%
• Divide entre os colegas
const conta = [9, 9, 9, 9, 15]
const divideConta = R.pipe( R.sum, // 51 R.mul(1.1), // 56,1
R.divide(6) // 9,35 ) divideConta(conta)
PIPE COMPOSE
const ListOfItems = R.compose( Box, List, ListItems )([{...}, {...}, {...}])
PIPEP / COMPOSEP
then().then().then().then()
const asyncStuff = R.pipeP( getId, getUserById, asyncStuff ) // Promise
IFELSE (maybe monad)
const findName = R.ifElse( R.has('name'), R.prop('name'), R.always('no name'), )({ id:
123, name: “ana”}) // “ana”
FLATTER (PROPOSAL FLATMAP)
R.flatten([1, 2, [3, 4], 5, [6, [7, 8, [9, 12]]]]);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
DATA HANDLING
EVOLVE
{ name: “Ana” email: “
[email protected]
”, phone: “11 98698-3010”, address: “rua
da aparecida 304 apt34 ”, }
R.evolve({ email: R.toLower, phone: R.replace(‘-’, ‘’), })(data) // { //
name: “Ana” // email: “
[email protected]
”, // phone: “11 9869983010” // address: ... // }
APPLY SPEC
const createObj = R.applySpec({ counter: R.inc, userData: { phone: R.trim},
}) createObj(0, “ 98499-1900”) // {1, userData{ phone: “9849919000”}}
TryCatch Cond Memoization Lenses
BOM TOOLBOX
COOKBOOK
• Rambda - github.com/selfrefactor/rambda • Ramda-fantasy - github.com/ramda/ramda-fantasy • Thinking
Ramda - randycoulman.com/blog/2016/05/24/thinking-in-ramda-getting -started • Ramda - Derek Stavis(Pagar.me talks)
OBRIGADA :) speakerdeck.com/anabastos anabastos.me github.com/anabastos @naluhh @anapbastos