Purely functional UIs
0 likes415 views
This document discusses purely functional user interfaces. It introduces Vagmi Mudumbai and their work at τarka λabs. Some key aspects of purely functional interfaces discussed include embracing immutability, using pure components with no side effects, and tuning for performance. Specific frameworks and libraries mentioned that support this approach include React, Immutable.js, and Immstruct. The document also notes some challenges faced in implementing purely functional interfaces.
![τarka λabs@vagmi
let ifjs = Immutable.fromJS;
var todos = Immutable.List()
.push(ifjs({id: 1, desc: 'Kill Jeoffrey', tags: ['kings', 'landing']}))
.push(ifjs({id: 2, desc: 'Kill Cersei', tags: ['kings', 'landing']}))
.push(ifjs({id: 3, desc: 'Kill Walder Frey', done: true, tags: ['frey', 'pie']}))
.push(ifjs({id: 4, desc: 'Kill Meryn Trant', done: true, tags: ['braavos']}))
.push(ifjs({id: 5, desc: 'Kill Tywin Lannister'}))
.push(ifjs({id: 6, desc: 'Kill The Mountain'}))
.push(ifjs({id: 7, desc: 'Kill The Hound', done: true}));](https://image.slidesharecdn.com/jschannel-pfuis-160715083851/85/Purely-functional-UIs-10-320.jpg)
![τarka λabs@vagmi
appState.cursor(['state', 'tasks']).update(() => tasks)](https://image.slidesharecdn.com/jschannel-pfuis-160715083851/85/Purely-functional-UIs-13-320.jpg)
Purely functional UIs
- 1. PURELY FUNCTIONAL USER INTERFACES Vagmi Mudumbai - @vagmi (github / twitter) τarka λabs
- 2. τarka λabs@vagmi @vagmi on twitter and github CTO at @tarkalabs I enjoy working with
- 3. τarka λabs@vagmi An Experience Report
- 4. τarka λabs@vagmi David Nolen / Om
- 5. τarka λabs@vagmi ‣Embrace Immutability ‣Pure Components (no side effects) ‣Tuneable for performance
- 7. τarka λabs@vagmi React and Virtual DOM
- 9. τarka λabs@vagmi var map1 = Immutable.Map(); var map2 = map1.set('key1', 'value1'); map1 === map2 // false
- 10. τarka λabs@vagmi let ifjs = Immutable.fromJS; var todos = Immutable.List() .push(ifjs({id: 1, desc: 'Kill Jeoffrey', tags: ['kings', 'landing']})) .push(ifjs({id: 2, desc: 'Kill Cersei', tags: ['kings', 'landing']})) .push(ifjs({id: 3, desc: 'Kill Walder Frey', done: true, tags: ['frey', 'pie']})) .push(ifjs({id: 4, desc: 'Kill Meryn Trant', done: true, tags: ['braavos']})) .push(ifjs({id: 5, desc: 'Kill Tywin Lannister'})) .push(ifjs({id: 6, desc: 'Kill The Mountain'})) .push(ifjs({id: 7, desc: 'Kill The Hound', done: true}));
- 11. τarka λabs@vagmi Immstruct and Cursors
- 12. τarka λabs@vagmi let tasks = todos.reduce( (m, t) => m.set(t.get('id'), t), Immutable.Map() );
- 14. τarka λabs@vagmi Challenges we faced