This document discusses refactoring code to make it more maintainable and testable. It advocates separating user interfaces from state management using React for declarative UIs and Redux for centralized app state. Asynchronous work is handled by dispatching actions with side effects to update state over time rather than mutating state directly. This approach aims to make code more composable, testable, debuggable and live-reloadable by focusing on simple functions and a single source of truth for state.

1. Abstracting
Just
Enough
James Long, @jlongster
ReactiveConf 2015

3. Refactoring
SUCKS

7. Inherent
Incidental
vs

8. Benefits > Cost

11. Start Simple
Relearn Requirements
Build Up Slowly

12. Core Principals
• Must be composable
• Must be testable
• Must be debuggable
• Must be live-reloadable

13. Is it stateful?

14. function User(name, numEyes) {
this.name = name;
this.numEyes = numEyes;
}
User.prototype.isScary = function() {
return this.numEyes !== 2;
}
new User("James", 2).isScary()

15. ENCOURAGES
mutation

16. function isScary(user) {
return user.numEyes !== 2;
}
isScary({ name: "James", numEyes: 2 });

17. isScary(
immutable({ name: "James", numEyes: 2 })
);
function isScary(user) {
return user.numEyes !== 2;
}

18. What We Need
• Render the UI
• Manage State
• Asynchronous Work
• Testing

19. Where We Are
• DOM mutations
• State in DOM, custom JS classes, etc
• Promises and events everywhere
• Very few unit tests

21. Where We Want to Go
• Declarative UI
• Central App State
• Async work with atomic UI updates
• Unit tests

22. React Declarative UI
Components
No DOM Needed

23. ReduxFlux-style Actions
Central App State
Action Creators

24. UIDATA EVENTS
function App({ items }) {
return (
<ul>
{items.map(item => <li>{item}</li>)}
</ul>
);
}

25. UI
EVENTS
STATE
{ items: ["James", "Sarah", "Evelina"] }

26. UISTATE
ACTION
CREATOR
ACTION
function addItem(name) {
return {
type: ADD_ITEM,
name: name
}
}
{ type: ADD_ITEM,
name: name }

27. State Snapshotting

29. Log & Replay Actions

31. Asynchronous Work?

32. UISTATE
ACTION
CREATOR
ACTION

33. ACTION
CREATOR
STATE UI
ACTION
STATE UI
ACTION
Action Creators
Time
0ms
100ms

34. ACTION
CREATOR
STATE UI
STATE UI
ACTION
ACTION
Action Creators
Time
0ms
100ms

35. Time
0ms
1000ms
STATE UI
STATE UI
Action Creators
ACTION
CREATOR
ACTION
CREATOR
ACTION
CREATOR
STATE UI
STATE UI
STATE UI
STATE UI

36. “UIs are inherently
asynchronous”
-Everybody
Nope

37. Time
0ms
100ms
STATE UI
STATE UI
ACTION
CREATOR
ACTION
CREATOR
ACTION
CREATOR
STATE UI
STATE UI
STATE UI
STATE UI
Sync

38. How we interact with
UIs is asynchronous

39. Time
0ms
100ms
STATE UI
STATE UI
ACTION
CREATOR
ACTION
CREATOR
ACTION
CREATOR
STATE UI
STATE UI
STATE UI
STATE UI
SyncAsync

40. Time
0ms
100ms
STATE UI
STATE UI
STATE UI
STATE UI
STATE UI
STATE UI
SyncAsync
PROMISE
OBSERVABLE
CHANNEL

41. Time
0ms
100ms
STATE UI
STATE UI
STATE UI
STATE UI
STATE UI
STATE UI
SyncAsync
Relay/Falcor

42. dispatch({
type: ADD_ITEM,
status: "start",
name: "James"
})
// UI Rendered!!

43. function addItem(name) {
return dispatch => {
dispatch({
type: ADD_ITEM,
status: "start",
name: name
});
setTimeout(() => {
dispatch({
type: ADD_ITEM,
status: "finish",
name: name
})
}, 100);
}
}

44. const { PROMISE } = require('<promise-middleware>');
function addItem(name) {
return {
type: ADD_ITEM,
name: name,
[PROMISE]: api.addItem(name)
};
}

45. You might not need
promises
observables
etc

46. Testing
• State updates: simple functions
• React components: basically simple
functions
• Action creators: simple async functions

47. Testing Ideas
• Recording workflows
• Generative & property-based testing

49. Core Principals
• Must be composable
• Must be testable
• Must be debuggable
• Must be live-reloadable

50. Solved!
• Use simple functions as much as possible
• Single, central state

53. Thanks!@jlongster