Declarative Heaven with and without React.js

Functional programming and other weird tips for writing readable, testable and declarative code in JavaScript and specifically React.

Transcript

1. HELLO THERE!
2. lets talk about javascript
3. for (var i = 10; i > 0; --i) { console.log(i) } MOV CX, 0Ah PRINT: INT 2H, CX LOOP
4. Imperative code, A nicer-looking assembly
5. declarative
6. declarative heaven
7. refactoring methods awesome
8. declarative heaven
9. GAL SCHLEZINGER @galstar Tech Officer Instructor @ MOD @schniz ex Magma (dev infra) @ MOD
10. HoF HoC FaC WTF
11. Higher Order Funcs HoC FaC WTF
12. HoF Higher Order Comps FaC WTF
13. HoF HoC Fns as Children WTF
14. HoF HoC FaC Weird Tips & Fun
15. It’s time.
16. Higher order Functions
17. Higher Order Function a function that takes a function as an argument or returning a function as the result ✍
18. Higher Order Function add = a => b => a + b increment = add(1) increment(2) //=> 3 a function that returns a function curried function
19. Higher Order Function apply = (fn, value) => fn(value) apply(add(1), 2) // => 3 a function that receives a function
20. Higher Order Function compose = (f, g) => x => f(g(x))
 log = compose(
 console.log,
 e => `log: ${e}`
 )
 log(“hey”) // console: “log: hey” a function that receives a function and returns a function
21. “HOW”s encapsulate the
22. Array#map import {map} from ‘ramda’
 
 // map = fn => arr => arr.map(fn) getNames = map(e => e.name) getNames([{ name: ‘gal’ }]) // => [‘gal’]
23. Array#map map = fn => arr => { const results = [] for (let i = 0; i < arr.length; i++) { const item = arr[i] const result = fn(item) results.push(result) } return results } Ramda’s / Lowdash fp’s
24. YOUR IMPERATIVE API SURFACE
25. YOUR IMPERATIVE API SURFACE DECLARATIVE ONE behind a
26. That’s what it’s all about.
27. Higher order Components
28. Higher Order Component a function that takes a component as an argument and returning a component as the result ✍
29. Higher Order Component const provideName = name => Component => props => <Component {...props} name={name} />
31. import React from 'react'
 const hoc = name => C => props => <C {...props} name={name} /> const UserName = ({name}) => <span>{name}</span> const C = hoc(‘gal’)(UserName) Our First HoC
32. import React from 'react'
 import hoc from './hoc'
 import renderer from 'react-test-renderer'
 const Dummy = p => <dummy props={p} /> const render = c =>
 renderer.create(c).toJSON().props.props
 it('works', () => { const C = hoc('gal')(Dummy) expect(render(<Comp />)).toMatchSnapshot() }) Testing HoCs
33. WHY • Encapsulate context usage • Encapsulate lifecycle hooks • props are easy #
34. Higher Order Component const MyComponent = ({ name }) => <span>{name}</span> const ReduxComponent = connect( state => ({ name: state.name }) )(MyComponent) Example: react-redux’s `connect`
36. HoC ARE COMPOSABLE
37. const provideName = name =>
 C =>
 props =>
 <C {...props} name={name} />
 const withName = provideName(‘gal’) const withReduxState = connect(mapState)
 const FinalComponent = 
 withName(
 withReduxState(
 Component
 )
 ) function composition hell
38. const provideName = name =>
 C =>
 props =>
 <C {...props} name={name} />
 const withName = provideName(‘gal’) const withReduxState = connect(mapState) const FinalComponent = compose( withName, withReduxState )(Component)
39. BUT If you’d rather see the data flow
40. THEN HoCs can annoy you. This is fine.
41. Functions as Children
42. That’s it “Pass functions as children”
43. const UserName = ({ id }) => <Fetch url={`/api/user/${id}`}> {details => !details ? ( <Loading /> ) : ( <span>{details.name}</span> )} </Fetch>
44. const FetchUser = ({ children, id }) => <Fetch url={`/api/user/${id}`}> {children} </Fetch> const UserName = ({ id }) => <FetchUser id={id}> {details => !details ? ( <Loading /> ) : ( <span>{details.name}</span> )} </FetchUser>
45. class Fetch extends React.Component {
 state = {value: null}
 fetch = ({url}) => {
 fetch(url).then(e => e.json()).then(value =>
 this.setState({value}))
 }
 componentDidMount() {
 this.fetch(this.props)
 }
 componentWillReceiveProps(nextProps) {
 if (nextProps.url !== this.props.url) {
 this.fetch(nextProps)
 }
 }
46. render() { return this.props.children(this.state.value) } } `children` is a function, obviously
47. YOUR IMPERATIVE API SURFACE
48. YOUR IMPERATIVE API SURFACE DECLARATIVE ONE behind a
49. weird tips and FUN
50. A simple trick I found for Rx Subjects $ vim ./BehaviorSubject.js Avoiding Lifecycle Hooks
51. const MyComponent = ({ data }) => !data.me ? <Spinner /> : ( <div>{data.me.name}</div> ) graphql(gql`{ me { name } }`)(MyComponent) happens way too much
52. THE Maybe(null).map( e => e.toUpperCase() ) // => Maybe(null) MAYBE FUNCTOR Maybe(“gal”).map( e => e.toUpperCase() ) // => Maybe(“GAL”)
53. THE Maybe(null).map( e => e.toUpperCase() ).fold(e => e) // => null MAYBE FUNCTOR Maybe(“gal”).map( e => e.toUpperCase() ).fold(e => e) // => “GAL”
54. THE Maybe = a =>
 a == null || a == undefined
 ? Nothing()
 : Just(a)
 Nothing = () => ({
 fold: fn => null,
 map: fn => Nothing()
 })
 Just = a => ({
 fold: fn => fn(a),
 map: fn => Just(fn(a))
 }) MAYBE FUNCTOR
55. const MyComponent = ({ Dataloader }) => <div> my name is <Dataloader> {d => d.me.name} </Dataloader> </div> grql(gql`{ me { name } }`)(MyComponent)
56. const MyComponent = ({ Dataloader }) => <div> my name is <Dataloader spinnerType=“text”> {d => d.me.name} </Dataloader> </div> grql(gql`{ me { name } }`)(MyComponent)
57. Custom React Component from HoC or FaC
58. You can also handle errors with an Either!
59. THE Maybe = a =>
 a == null || a == undefined
 ? Nothing()
 : Just(a)
 Nothing = () => ({
 fold: fn => null,
 map: fn => Nothing()
 })
 Just = a => ({
 fold: fn => fn(a),
 map: fn => Just(fn(a))
 }) MAYBE FUNCTOR
60. THE fromNullable = a =>
 a == null || a == undefined
 ? Left(null)
 : Right(a)
 Left = a => ({
 fold: (l, r) => l(a),
 map: fn => Left(a)
 })
 Right = a => ({
 fold: (l, r) => r(a),
 map: fn => Right(fn(a))
 }) EITHER FUNCTOR
61. const MyComponent = ({ Dataloader }) => <div> my name is <Dataloader foldLeft={e => <Error data={e} />} foldRight={d => d.me.name} /> </div> grql(gql`{ me { name } }`)(MyComponent)
62. • Custom Components as Props • Avoiding Lifecycle with components and ref • Using algebraic structures (Maybe, Either) weird tips and FUN
63. HoF HoC FaC WEIRD STUFF ?