Video: https://www.youtube.com/watch?v=JNMWi7Z0Ssg Let us bring back the days where we could write declarative representations of how we want our UI components to work. We should be able to read our code from top to bottom and intuitively know what the output will be, just like the good old HTML, but with the power of functional programming. In this talk we'll explore bringing functional programming into views. Instead of moving logic to markup through weird DSLs we bring expressive views into the programming language. We'll see how to create a UI where we have composable, pure and referentially transparent components; components with no side-effects and predictable output. We couple this with immutable data and components with single responsibilities, and we can get a fast and smart way to build UIs with a unidirectional flow and a simpler static mental model.

1. FUNCTIONAL UIS &
UNIDIRECTIONAL DATAFLOW
@mikaelbrevik

2. ƒ( )ƒ(n)ƒ(n)
ƒ(n)
ƒ(n)ƒ(n)
ƒ(n)

5. TIGHTLY COUPLED &
MULTIDIRECTIONAL MESSAGES

6. LOOSELY COUPLED &
UNIDIRECTIONAL MESSAGES

7. REFERENTIALLY TRANSPARENT &
PURE FUNCTIONS

8. +4 ƒ(2)
4

9. 8

10. const square = (n) => n * n;
> square(2) + square(2);
> 2 * square(2);
> 2 * 4
> 8
REFERENTIAL TRANSPARENCY

11. const square = (n) => n * n;
> square(3); // 9
> square(3); // 9
> square(3); // 9
> square(3); // 9
PREDICTABILITY

12. ƒ(n) g(n) h(n)

13. p(n)

14. ƒ(n)ƒ(n)
ƒ(n)
ƒ(n)ƒ(n)
ƒ(n)

15. COMPOSABILITY

16. ƒ(n)
÷ g(n)

17. h(n)

18. ƒ(n)
÷ 8

19. ƒ’()
8

20. ƒ(n) g(n)

21. 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

22. ƒ(n) g(n)
x

23. IMMUTABILITY

24. 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

25. const obj = { name: "T'Challa" };
> obj === obj;
> obj !== { name: "T'Challa" };
> deepEqual(obj, { name: "T'Challa" });
REFERENCE CHECKS

26. const obj = { name: "T'Challa" };
> obj === obj;
> obj !== { name: "T'Challa" };
> deepEqual(obj, { name: "T'Challa" });
REFERENCE CHECKS

27. const obj = { name: "T'Challa" };
> obj === obj;
> obj !== { name: "T'Challa" };
> deepEqual(obj, { name: "T'Challa" });
REFERENCE CHECKS

28. {}
{}
{} {} {}
{}

29. {}
{}
{} {} {}
{}
{}
{}

30. ƒ(n) g(n)
{}

31. (HIGHER ORDER)
COMPONENTS

32. React.render(
<h1>Hello, world!</h1>,
document.getElementById('result')
);

33. const MyComponent = component(() => <h1>Hello!</h1>);
COMPONENTS

34. const MyComponent = component(({children}) => (
<article>
<ItalicHeader>Hello, {children}!</ItalicHeader>
</article>
));

35. const Header = component(({children}) => (..));
const Italic = component(({children}) => (..));
const ItalicHeader = compose(Header, Italic);
COMPOSABLE COMPONENTS

36. const Header = component(({type, children}) => (
<h1 className={type}>{children}</h1>
));
const MainHeader = partial(Header, 'main-title');
COMPOSABLE COMPONENTS

37. const MainHeader = partial(Header, 'main-title');
const ItalicHeader = compose(MainHeader, Italic);
const FailSafeItalicHeader = maybe(ItalicHeader);
COMPOSABLE COMPONENTS

38. render(
<FailSafeItalicHeader>
Robert Bruce Banner
</FailSafeItalicHeader>, el);
const MainHeader = partial(Header, 'main-title');
const ItalicHeader = compose(MainHeader, Italic);
const FailSafeItalicHeader = maybe(ItalicHeader);

39. render(
<FailSafeItalicHeader>
Robert Bruce Banner
</FailSafeItalicHeader>, el);
render(
<FailSafeItalicHeader>
Robert Bruce Banner
</FailSafeItalicHeader>, el);
render(
<FailSafeItalicHeader>
Robert Bruce Banner
</FailSafeItalicHeader>, el);

40. PURITY IN A STATEFUL
ENVIRONMENT

41. function updateH1 (h1) {
h1.textContent = val;
return h1;
}
// <h1>Janet van Dyne</h1>
logInTime(fetchEl(‘h1')); // Logs ‘Oops’
updateH1(fetchEl(‘h1'));
ACCIDENTAL SHARED STATE

42. GLOBAL STATE
ƒ(n)ƒ(n)
ƒ(n)
ƒ(n)ƒ(n)
ƒ(n)

43. SYSTEM AS A FUNCTION OF STATE
ƒ( )ƒ(n)ƒ(n)
ƒ(n)
ƒ(n)ƒ(n)
ƒ(n)

44. SYSTEM AS A FUNCTION OF STATE
ƒ( )ƒ(n)ƒ(n)
ƒ(n)
ƒ(n)ƒ(n)
ƒ(n)

45. STATE OVER TIME

46. STATE OVER TIME

47. REFERENCE CHECKS

48. REFERENCE CHECKS

49. • 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

51. • 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

52. @mikaelbrevik
FUNCTIONAL UIS &
UNIDIRECTIONAL DATAFLOW