Functions, A Love Story

Big, complex things are made out of many little, simple things—or least they should be. Simple things are easier to write, easier to debug, and easier to change. Functions are beautifully simple. Composing them lets us make big things out of small things. By thinking differently about app architecture, we can start to build our apps out of smaller, simpler things.

Transcript

1. Functions A Love Story Josh Abernathy
2. Functions Legos A Love Story Josh Abernathy
8. Big things are made of many little things
10. Functions! A Love Story!
11. Functions are the Lego block of programming. — Someone, probably.
12. Small building blocks
13. Big things are made of many little things
14. Functions!
15. func myFunction()
16. [...] a relation between a set of inputs and a set of permissible outputs with the property that each input is related to exactly one output. — Wikipedia
17. Consistent Relation
18. func CollectionType.dropFirst(n: Int) -> Self.SubSequence
19. Easy to reason about
20. Easy to compose
21. Func-y
22. func UIViewController.showViewController(vc: UIViewController, sender: AnyObject?)
23. Abstracted unit of work
24. Hard to reason about
25. Compose?
26. Functions!
27. Functions easy in the small
28. let myThings = originalThings.map { String("My Thing: \($0)") }
29. class AppDelegate: NSObject, NSApplicationDelegate { @IBOutlet weak var window: NSWindow! func applicationDidFinishLaunching(notification: NSNotification) { let output = runMyApp(input: ???) doSomethingWithOutput(output) } } func runMyApp(input: ???) -> ??? { }
30. Functions not so easy in the large
31. Are apps functions?
32. func myApp(input: ???) -> ???
33. wc -- word, line, character, and byte count func wc(input: String) -> Int
34. ls -- list directory contents func ls(currentDirectory: NSURL = default) -> [NSURL]
35. $ ls | wc -l
36. myApp -- social thought leadership through counting clicks func myApp(input: ???) -> ???
37. What is the input?
38. Touches + Camera + Network + Sensors (GPS, etc.) + Data on disk + … = State
39. What is the output?
40. UI (Mostly)
41. UIs are big, messy, mutable, stateful bags of sadness. — me, probably
42. func renderApp(state: State) -> UI
43. State change ← renderApp
44. State change ← renderApp State change ← renderApp State change ← renderApp
45. State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp State change ← renderApp
46. func renderApp(state: State) -> UI
47. Big things are made of many little things
48. func renderLogin(state: LoginState) -> UI func renderPhotos(state: PhotosState) -> UI func renderButton(title: String) -> UI func renderVerticalList(UIs: [UI]) -> UI
49. struct Button { let title: String ... } struct VerticalList { let children: [UI] }
51. UI is composition
52. Big functions are made of many little functions
53. Big UIs are made of many little UIs
54. class AppDelegate: NSObject, NSApplicationDelegate { @IBOutlet weak var window: NSWindow! func applicationDidFinishLaunching(notification: NSNotification) { doSomeMagic(render: renderApp, view: window.contentView) } } func renderApp(state: Int) -> UI { return renderVerticalList([ renderLabel("Click count: \(state)"), renderButton("Click me!", action: { updateState(state + 1) }), ]) }
55. React
56. React Native
57. ComponentKit
58. ! Few !
59. Example
60. let appComponent = Component(initialState: 0, render: renderApp) class AppDelegate: NSObject, NSApplicationDelegate { @IBOutlet weak var window: NSWindow! func applicationDidFinishLaunching(notification: NSNotification) { appComponent.addToView(window.contentView) } } func renderApp(component: Component<Int>, state: Int) -> Element { return View( backgroundColor: .orangeColor()) .justification(.Center) .childAlignment(.Center) .direction(.Column) .children([ Label("You've clicked \(state) times!"), Button(title: "Click me!", action: { component.updateState { $0 + 1 } }) .margin(Edges(uniform: 10)) .width(100), ]) }
62. func renderApp(component: Component<Int>, state: Int) -> Element { return View( backgroundColor: .orangeColor()) .justification(.Center) .childAlignment(.Center) .direction(.Column) .children([ Label("You've clicked \(state) times!"), Button(title: "Click me!", action: { component.updateState { $0 + 1 } }) .margin(Edges(uniform: 10)) .width(100), ]) }
63. Now
64. Separate the calculation from the doing
65. Separate the function from the func-y
66. GitHub Desktop
68. @mdiep
69. struct Graph { let currentBranch: Branch? let compareBranch: Branch? ... } struct GraphUpdate { let type: GraphUpdateType init(oldGraph: GHComparisonGraph?, newGraph: GHComparisonGraph) ... }
70. // Graph.swift let newGraph = calculateGraph(repository) let update = GraphUpdate(oldGraph: oldGraph, newGraph: newGraph) // GraphViewController.swift switch (update.type) { case .Append: // do the needful ... }
71. Separate the calculation from the doing
72. $ ls | wc -l
73. Compose apps?
74. $ alias instagram="camera | filters"
75. $ alias my_app="touches | instagram"
76. There are a lot of unknowns
77. That's OK
78. See Also — "Boundaries" by Gary Bernhardt — "Tangible Functional Programming" by Conal Elliott — "Refactor the Mega-Controller" by Andy Matuschak — Most anything by Rich Hickey
79. Thanks!