Faça programação funcional com JavaScript codando menos

Transcript

1. FAÇA PROGRAMAÇÃO FUNCIONAL COM JAVASCRIPT CODANDO MENOS o que não fazer para alcançar um código mais simples e funcional
2. 2 @_rchaves_
3. os exemplos serão mostrados em JS, mas eles podem ser adaptados pra praticamente qualquer linguagem de programação que possa passar funções ou lambdas como argumentos 3
4. as primeiras duas regras são as mais importantes, as outras são uma mera consequência dessas 4
5. Premissa: com menos features, nós podemos ter um código mais funcional e (discutivelmente) mais simples 5
6. MUTABILIDADE É UMA FEATURE 6 x = x + 1 x - x = 1 0 = 1 n o n s e n s e !
7. NÃO USE MUTABILIDADE 7 Não use Use var const let no-var + no-let* + no-mutation* *usando eslint-plugin-immutable ESLint
8. EXEMPLOS 8 let myValues = [ 1, 2, 3 ]; myValues.push(4); return myValues; const myValues = [ 1, 2, 3 ]; return [ ...myValues, 4];
9. 9 let foo = { name: 'Foo' }; foo.age = 32; return foo; const foo = { name: 'Foo' }; return { ...foo, age: 32 }; EXEMPLOS
10. AVOID VOID 10 doThis(); doThat(); return foo; eslint-plugin-no-implicit-side-effects ESLint result = myFn(); Não use Use
11. 11 addItemsToCart(); savePurchase(); updateScreen(); const updatedCart = addItems(cart, items); const purchase = savePurchase(updatedCart); return view(purchase); EXEMPLOS
12. EXEMPLOS 12 addItemsToCart(); savePurchase(); updateScreen(); return view(savePurchase(addItems(cart, items)));
13. EXEMPLOS 13 array.push(5); object.key = 'five'; myObj.setFoo('bar'); i++; post('http://url', {}); return [ ...array, 5 ]; return { ...object, key: 5 }; return new MyObj('bar'); return i + 1; return post('http://url', {});
14. CAN’T TOUCH THIS 14 this params () => {} .bind(this) *no-this *usando eslint-plugin-immutable ESLint doesn’t create this! Não use Use
15. EXEMPLOS 15 function distance () { return Math.abs(this.x - this.y); } const distance = (x, y) => Math.abs(x - y);
16. EXEMPLOS 16 const name = user.getFormattedName(); const name = getFormattedName(user);
17. NÃO USE FOR/EACH 17 for reduce map .forEach filter no-for-loops* + no-implicit-side-effects** *usando bahmutov/eslint-rules ESLint **usando eslint-plugin-no-implicit-side-effects Não use Use
18. EXEMPLOS 18 let uppercaseNames = []; for (let i = 0; i < names.length; i++) { let uppercaseName = toUpperCase(names[i]); uppercaseNames.push(uppercaseName); } return uppercaseNames; return names.map(toUppercase);
19. EXEMPLOS 19 let total = 0; items.forEach((item) => { total += item.price; }); return total; return items.reduce((total, item) => total + item.price , 0);
20. EXEMPLOS 20 let names = []; let result = []; list.forEach((item) => { const uppercasedName = toUpperCase(item.name); if (names.indexOf(uppercasedName) < 0) { names.push(uppercasedName); result.push({ name: uppercasedName, count: 1 }); } else { result[names.indexOf(uppercasedName)].count++; } }); return result; // input: [{name: ‘foo'}, {name: 'foo'}, {name: 'foo'}, {name: 'bar'}, {name: 'bar'}, {name: 'baz'}] // output: [{name: 'FOO', count: 3}, {name: 'BAR', count: 2}, {name: 'BAZ', count: 1}]
21. EXEMPLOS 21 const mapToUpperCase = list => list.map(item => ({ ...item, name: toUpperCase(item.name) })); const countRepeated = (list, value) => list.reduce((total, item) => item.name === value.name ? total + 1 : total, 0); const addRepeatCount = list => list.map(item => ({ ...item, count: countRepeated(list, item) })); const removeDuplicates = list => list.filter((item, index) => list.indexOf(list.find(x => x.name === item.name)) === index); return removeDuplicates(addRepeatCount(mapToUpperCase(list)));
22. NÃO USE IF SEM ELSE 22 just if if/else if/return ternary none :( ESLint Não use Use
23. 23 if (foo) { return 'bar'; } if (foo) { return 'bar'; } return 'baz'; if (foo) { return 'bar'; } else { return 'baz'; } foo ? 'bar' : 'baz'; EXEMPLOS
24. NÃO USE CLASSES 24 class functions *no-class *usando eslint-plugin-no-class ESLint Não use Use
25. 25 class Person { getFormattedName (person) { return person.name.toUpperCase(); } save (person) { return post('http://saveName', { name: person.name }); } } const getFormattedName = (person) => person.name.toUpperCase(); const save = (person) => post('http://saveName', { name: person.name }); EXEMPLOS
26. 26 class ListComponent extends React.Component { render () { return <ul>{ this.listItems() }</ul>; } listItems () { return this.props.items.map(item => <li>{ item.name }</li>); } } const listComponent = (props) => <ul>{ listItems(props.items) }</ul>; const listItems = (items) => items.map(item => <li>{ item.name }</li>); EXEMPLOS
27. OU VOCÊ PODE USAR ELM vamos remover todas essas features!
28. OBRIGADO! ALGUMA PERGUNTA? bit.ly/pf-codando-menos
29. NO OPTIONAL ARGS (BONUS) 29 optional args for changing behaviour specialized functions none :( ESLint function composition currying default args for common scenarios Não use Use
30. 30 const getPrices = (items, onlyOdds = true) => { const prices = items.map(item => item.price); if (onlyOdds) { return prices.filter(price => price % 2 !== 0); } return items; }; const getPrices = items => items.map(item => item.price); const getOddPrices = items => getPrices(items).filter(price => price % 2 !== 0); EXEMPLOS
31. 31 const increasePrices = (items, by = 5) => items.map(item => ({ ...item, price: item.price + by })); increasePrices(list1); increasePrices(list2); increasePrices(list3, 10); const increasePrices = amount => items => items.map(item => ({ ...item, price: item.price + amount })); const increasePricesBy5 = increasePrices(5); const increasePricesBy10 = increasePrices(10); increasePricesBy5(list1); increasePricesBy5(list2); increasePricesBy10(list3); EXEMPLOS