Recommended
More Related Content
Similar to Linux conf-2018-fp-miniconf-slideshare
Similar to Linux conf-2018-fp-miniconf-slideshare (20)
Recently uploaded
Recently uploaded (20)
Linux conf-2018-fp-miniconf-slideshare
- 2. reason-react Functional Programming for React developers @keirasaid
- 5. The State of JS 2017
- 8. <button> {this.props.buttonText} </button> <h1>{this.props.headerText}</h1> ContentContainer.propTypes = { headerText: PropTypes.string.isRequired, buttonText: PropTypes.string.isRequired, }; Unidirectional Data-flow Stateful component Stateless component Stateless component
- 9. <button> {this.props.buttonText} </button> <h1>{this.props.headerText}</h1> ContentContainer.propTypes = { headerText: PropTypes.string.isRequired, buttonText: PropTypes.string.isRequired, }; Unidirectional Data-flow Stateful component Stateless component Stateless component
- 11. render() { return ( <ContentContainer> <Header headerText=“My Header” /> <Button buttonText=“Click Me” /> </ContentContainer> ); }
- 12. JavaScript
- 13. https://wiki.haskell.org/The_JavaScript_Problem 1. JavaScript, the language, has some issues that make working with it inconvenient and make developing software harder : lack of module system (only pre-Ecmascript 2015), weak-typing, verbose function syntax (pre-Ecmascript 2015), late binding, finicky equality/automatic conversion, ‘this’ behaviour, and lack of static types. 2. We need JavaScript
- 17. + =>
- 21. Syntax JavaScript Reason OCaml “Hello Linux Conf 2018!” Same as JS Same as JS ‘Hello Linux Conf 2018’ Must use double quotation marks Must use double quotation marks “Hello” + “Linux Conf” “Hello” ++ “Linux Conf” “Hello” ^ “Linux Conf”
- 22. Syntax JavaScript Reason OCaml true, false Writes like JS, compiles differently Writes like JS, compiles differently !true Writes like JS, compiles differently not true ||, &&, <=, >=, <, > Writes like JS, compiles differently Writes like JS, compiles differently
- 23. Syntax JavaScript let greaterThan = (num1, num2) => num1 > num2; Reason let greaterThan = (num1, num2) => num1 > num2; Bucklescript var greaterThan = Caml_obj.caml_greaterthan;
- 24. Syntax JavaScript let x = 5; x = x + 1;
- 25. Syntax JavaScript Reason OCaml let x = 5; x = x + 1; let x = ref(5); x := x^ + 1; let x = ref 5 x := ((!x) + 1)
- 26. OCaml Syntax OCaml Semantics Bytecode Native https:// spyder.wordpress.com/ 2017/05/14/ocaml-to- javascript-buzzwords/
- 27. OCaml Syntax OCaml Semantics Bytecode Native https:// spyder.wordpress.com/ 2017/05/14/ocaml-to- javascript-buzzwords/ js_of_ocaml
- 32. + =>
- 35. Learning and chunking • Miller, G.A. (1956) The magical number seven, plus or minus two: some limits on our capacity for processing information. Psychol. Rev. 63, 81–97 • Gobet, F., Lane, P. C. R., Croker, S., Cheng, P. C. H., Jones, G., Oliver, I., & Pine, J. M. (2001). Chunking mechanisms in human learning. Trends in Cognitive Sciences, 5(6), 236-243. • Guida, A., Gobet, F., Tardieu, H., & Nicolas, S. (2012). How chunks, long-term working memory and templates offer a cognitive explanation for neuroimaging data on expertise acquisition: A two-stage framework. Brain and Cognition, 79(3), 221-244. doi: 10.1016/j.bandc.2012.01.010
- 36. • Syntax • Workflow • React mental model Key similarities
- 37. Immutable by default NPM / Yarn Refmt Rtop Static Typing ReasonRouter NPM / Yarn JavaScript Console Prettier EsLint ReactRouter Immutable.js Flow
- 38. NPM / Yarn NPM / Yarn Included included in Browser Included in toolchain language feature Includedin syntax Dependency Dependency Dependency Dependency Immutable by default Dependency
- 39. npm install -g bs-platform then yarn create react-app my-app --scripts-version reason-scripts or bsb -init my-react-app -theme react
- 43. React mental model Key similarities
- 44. React Component Lifecycle ReasonReact Component Lifecycle componentDidMount() didMount componentWillReceiveProps() willReceiveProps shouldComponentUpdate() shouldUpdate componentWillUpdate() willUpdate componentDidUpdate() didUpdate componentWillUnmount() willUnmount componentWillMount() not implemented - use didMount
- 45. props => labeled arguments React mental model
- 46. {this.props.someProp} example.js <Example someProp=“hello!” /> React mental model
- 47. <Example someProp=“hello!” /> example.re let make(~someProp, _children) { ...component, render /* etc */ };
- 48. let make(~someProp=?, _children) { ...component, render /* etc */ }; example.re <Example someProp=?someDataVariable /> Optional argument
- 49. let make(~someProp=“hi!”, _children) { ...component, render /* etc */ }; example.re <Example someProp=someDataVariable /> Default argument
- 50. stateless & stateful components React mental model
- 53. type state = { counter: int } type action = | DoSomething | DoSomethingElse | DoAnotherThing
- 54. type action = | Click | Toggle; let make = (_children) => { ...component, initialState: () => { count: 0 }, reducer: (action, state) => switch(action) { | Click => ReasonReact.Update({…state etc | Toggle => ReasonReact.Update({…state
- 55. type action = | Click | Toggle; let make = (_children) => { ...component, initialState: () => { count: 0 }, reducer: (action, state) => switch(action) { | Click => ReasonReact.Update({…state etc | Toggle => ReasonReact.Update({…state
- 56. reducer: (action, state) => switch(action) { | Click => ReasonReact.UpdateWithSideEffects( {…state, count: state.count + 1}), (self => self.send(DoSomething) | Toggle => ReasonReact.Update({…state
- 57. Intermission
- 59. ship it
- 60. Inside the Magic 8 Ball App Using a React component Fetching data from an API Option type pattern matching
- 61. Using a React component in ReasonReact buttonWrapper.re Button.js
- 62. Button.js
- 67. Using a Reason component in React
- 68. Using Bucklescript with APIs MagicEightBall.re yarn add -D bs-fetch bs-json
- 70. { magic: { question: "Will I ever let you down?", answer: "Reply hazy, try again", type: "Neutral" } }
- 74. type state = { data: option(MagicEightBall.data), / * …other state */ }
- 75. switch (state.data: option(MagicEightBall.data)) { | Some(data) => <Answer data=data /> | None => <div><img src=loading /></div> }; render: ({state, handle, send}) => { let answer =
- 77. “At the language level, it has features that we’ve previously had to bolt on top of the JavaScript such as allocation-less named arguments, prop types, and more. In short, it is the best way to take React to the next level - unlocking far better user experiences and fast-loading applications Jordan Walke (creator, React and Reason, Reactiflux Discord Channel Q & A, 2017)
- 78. JavaScript and HTML - I can build things! React - I can reuse my things! ReasonReact - I can reuse my React things more safely! All Functional Programming
- 80. FIN join the community on http://discord.gg/reasonml