1. FUNCTIONAL UIS & UNIDIRECTIONAL DATAFLOW @mikaelbrevik 2. ( )(n)(n) (n) (n)(n) (n) 3. TIGHTLY COUPLED & MULTIDIRECTIONAL MESSAGES 4. LOOSELY COUPLED & UNIDIRECTIONAL MESSAGES 5. REFERENTIALLY TRANSPARENT & PURE FUNCTIONS 6. +4 (2) 4 7. 8 8. const square = (n) => n * n; > square(2) + square(2); > 2 * square(2); > 2 * 4 > 8 REFERENTIAL TRANSPARENCY 9. const square = (n) => n * n; > square(3); // 9 > square(3); // 9 > square(3); // 9 > square(3); // 9 PREDICTABILITY 10. (n) g(n) h(n) 11. p(n) 12. (n)(n) (n) (n)(n) (n) 13. COMPOSABILITY 14. (n) g(n) 15. h(n) 16. (n) 8 17. () 8 18. (n) g(n) 19. const setName = (obj, val) => obj.name = val; const logInTime = (obj) => setTimeout(() => log(obj.name)); const myObj = { name: 'Janet van Dyne' }; logInTime(myObj); // Logs 'Oops' setName(myObj, 'Oops'); ACCIDENTAL SHARED STATE 20. (n) g(n) x 21. IMMUTABILITY 22. const obj = Immutable.Map({ name: "T'Challa" }); const obj2 = obj.set('name', 'Black Panther'); obj.get('name'); //=> T'Challa obj2.get('name'); //=> Black Panther IMMUTABLE MAPS 23. const obj = { name: "T'Challa" }; > obj === obj; > obj !== { name: "T'Challa" }; > deepEqual(obj, { name: "T'Challa" }); REFERENCE CHECKS 24. const obj = { name: "T'Challa" }; > obj === obj; > obj !== { name: "T'Challa" }; > deepEqual(obj, { name: "T'Challa" }); REFERENCE CHECKS 25. const obj = { name: "T'Challa" }; > obj === obj; > obj !== { name: "T'Challa" }; > deepEqual(obj, { name: "T'Challa" }); REFERENCE CHECKS 26. {} {} {} {} {} {} 27. {} {} {} {} {} {} {} {} 28. (n) g(n) {} 29. (HIGHER ORDER) COMPONENTS 30. React.render( Hello, world!, document.getElementById('result') ); 31. const MyComponent = component(() => Hello!); COMPONENTS 32. const MyComponent = component(({children}) => ( Hello, {children}! )); 33. const Header = component(({children}) => (..)); const Italic = component(({children}) => (..)); const ItalicHeader = compose(Header, Italic); COMPOSABLE COMPONENTS 34. const Header = component(({type, children}) => ( {children} )); const MainHeader = partial(Header, 'main-title'); COMPOSABLE COMPONENTS 35. const MainHeader = partial(Header, 'main-title'); const ItalicHeader = compose(MainHeader, Italic); const FailSafeItalicHeader = maybe(ItalicHeader); COMPOSABLE COMPONENTS 36. render( Robert Bruce Banner , el); const MainHeader = partial(Header, 'main-title'); const ItalicHeader = compose(MainHeader, Italic); const FailSafeItalicHeader = maybe(ItalicHeader); 37. render( Robert Bruce Banner , el); render( Robert Bruce Banner , el); render( Robert Bruce Banner , el); 38. PURITY IN A STATEFUL ENVIRONMENT 39. function updateH1 (h1) { h1.textContent = val; return h1; } // Janet van Dyne logInTime(fetchEl(h1')); // Logs Oops updateH1(fetchEl(h1')); ACCIDENTAL SHARED STATE 40. GLOBAL STATE (n)(n) (n) (n)(n) (n) 41. SYSTEM AS A FUNCTION OF STATE ( )(n)(n) (n) (n)(n) (n) 42. SYSTEM AS A FUNCTION OF STATE ( )(n)(n) (n) (n)(n) (n) 43. STATE OVER TIME 44. STATE OVER TIME 45. REFERENCE CHECKS 46. REFERENCE CHECKS 47. FUNCTIONAL PARADIGMS IN UI SYSTEM AS A FUNCTION OF STATE GLOBAL ALL-KNOWING APP STATE RENDER LOOP AND STATIC MENTAL MODEL COMPOSABLE (HIGHER ORDER) COMPONENTS 48. OMNISCIENT.JS: HTTP://OMNISCIENTJS.GITHUB.IO/ IMMUTABLE DATA STRUCTURES: HTTP://GOO.GL/KSE2U5 SIMPLER UI REASONING: HTTP://GOO.GL/5GLX5H FUNCTIONAL PATTERNS FOR VIEWS: HTTP://GOO.GL/FL3CJK OM (CLOJURESCRIPT): HTTPS://GITHUB.COM/OMCLJS/OM 49. @mikaelbrevik FUNCTIONAL UIS & UNIDIRECTIONAL DATAFLOW