In this talk, I'm presenting an alternative approach to thinking about UI and navigation on iOS - one that is declarative and that I find easy to reason about in a big application. I did live coding and the link is on the last slide. Enjoy!

1. November 2017

2. Coming Soon…

6. Declarative
presentations

7. Imperative
vs
Declarative

8. Instructions
Facts
Understand how the system works
and based on its state and state
transitions decide what instructions to
execute.

9. Instructions
Facts
Understand how the system works
and based on its state and state
transitions decide what instructions to
execute.
State how your code should work if
certain conditions are met. You don’t
need to keep track of the current
state of the system, it calls you.

10. Example
———————————— Imperative
button.frame = CGRect(
x: inset,
y: view.bounds.size.height - buttonSize - inset,
width: view.bounds.size.width - 2 * inset,
height: buttonSize
)

11. Example
———————————— Imperative
button.frame = CGRect(
x: inset,
y: view.bounds.size.height - buttonSize - inset,
width: view.bounds.size.width - 2 * inset,
height: buttonSize
)

12. Example
———————————— Imperative
button.frame = CGRect(
x: inset,
y: view.bounds.size.height - buttonSize - inset,
width: view.bounds.size.width - 2 * inset,
height: buttonSize
) // <— Needs to be done every time view.bounds change

13. Example
———————————— Imperative
button.frame = CGRect(
x: inset,
y: view.bounds.size.height - buttonSize - inset,
width: view.bounds.size.width - 2 * inset,
height: buttonSize
)
———————————— (More) Declarative
NSLayoutConstraint.activate(
button.heightAnchor == buttonSize,
button.centerXAnchor == view.centerXAnchor,
button.bottomAnchor == view.bottomAnchor - inset,
button.leadingAnchor == view.leadingAnchor + inset
)

14. Example
———————————— Imperative
button.frame = CGRect(
x: inset,
y: view.bounds.size.height - buttonSize - inset,
width: view.bounds.size.width - 2 * inset,
height: buttonSize
)
———————————— (More) Declarative
NSLayoutConstraint.activate(
button.heightAnchor == buttonSize,
button.centerXAnchor == view.centerXAnchor,
button.bottomAnchor == view.bottomAnchor - inset,
button.leadingAnchor == view.leadingAnchor + inset
)

15. Google Facebook

16. Apple? (maybe)

17. UIKit encourages
imperative
programming style

18. UIKit encourages
imperative
programming style
but we can wrap it!

19. The concept 📚
See it in practice "
Further opportunities 🚀
The plan

20. The concept
We show things on the screen for a
reason. When presenting a view, we
need to wait for a user to take some
kind of action and then our app
responds to that action.
💡
Presenting a view == asynchronous
operation.

21. The concept

22. If view presentations
are async functions
they can have a declarative interface

23. Let’s build a small app!

25. Pay now
Shopping cart
Receipt
Check out

27. Taking it further

28. Presentable as we defined it
protocol Presentable {
associatedtype Value
func start() -> (UIViewController, FutureResult<Value>)
}

29. Presentable in iZettle
public protocol Presentable {
associatedtype Matter
associatedtype Result
/// Constructs a matter from `self` and returns it
together with the result of presenting it.
func materialize() -> (Matter, Result)
}

30. Presentable wrapper
public struct Presentation<P>
where P : Presentable, P.Matter : UIViewController {
// The presentable wrapped by `self`.
public var presentable: P
// The presentation style to use when presenting `self`.
public var style: PresentationStyle
// The presentation options to use when presenting `self`.
public var options: PresentationOptions
// The configuration to apply just before presenting `self`.
public var configure: (P.Matter, DisposeBag) -> ()
// A transformation to apply on the result of `materialize()`.
public var transform: (P.Result) -> P.Result
// A callback that will be called once presentation is done,
either with `nil` if normally dismissed, or with an error if not.
public var onDismiss: (Error?) -> ()
}

31. Example
let playVideo: (Video) -> Presentation<MoviePlayer> = { video in
return Presentation(MoviePlayer(video: video),
style: .flipPush,
configure: installDismiss(.close))
}
9:55:53 AM: TestScreen will 'flipPush' present: MoviePlayer
9:55:55 AM: TestScreen did end presentation of: MoviePlayer
9:55:55 AM: MoviePlayer was deallocated after presentation from
TestScreen
(lldb)

32. Utilising Swift type system
You can create helpers that make it
easier to write declarative code, keep
track of presentations and even detect
memory leaks!

33. Testing

34. Test failure
func testRegister_fails_whenPresentReturnsError() {
let pointOfSale = PointOfSale.dummy
let expectedError = TestError()
let result = pointOfSale.pay { _ in
return FutureResult(error: expectedError)
}
let flowCompletion = expectation(description: "Flow completed")
result.observe { flowResult in
guard case .failure(let error) = flowResult else {
XCTFail("Expected flow failure but got (flowResult)")
return
}
XCTAssertEqual(error as? TestError, expectedError)
flowCompletion.fulfill()
}
wait(for: [flowCompletion], timeout: 0.1)
}

35. Snapshot testing
func configureAndTakeSnapshots<T: Presentable, R>(
of presentable: T,
configuredAs configuration: SnapshotWindow.Configuration,
identifier: String,
file: StaticString = #file,
line: UInt = #line
) where T.Matter: UIViewController, T.Result == Future<R> {
let (window, result) = presentable.materializeAndAddToWindow(
configuredAs: configuration
)
FBSnapshotVerifyView(
window,
identifier: identifier,
file: file,
line: line
)
result.disposable.dispose()
}

36. Hiding complexity

37. Choose
Payment
More realistic checkout
Checkout
Payment
Specific
Screens
Send
Receipt
Register

38. Choose
Payment
More realistic checkout
Checkout
Receipt
Payment
Specific
Register

39. Field tested

40. Take-aways
•We show UI for a purpose - to drive
data flows in our apps and we can
express presentations as async
functions that return a Result
•Keeping the UI flow logic decoupled
makes it easy to follow and test
•Declarative programming for
presentations makes the possible user
journeys explicit.

41. Further reading
1. Live coding playground
2. iZettle - Introducing Presentation [oss]
3. Chris Eidhof - Functional View Controllers
4. Benjamin Encz - Turning UIKit Inside Out
5. iZettle - Functional Views
6. Google I/O - Declarative UI patterns
7. Matt Galagher - Declarative views
8. Less verbose constraints [oss]
…

42. @nataliya_bg
Thank you!