Declarative presentations UIKonf

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

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.

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

Example
x: inset,
height: buttonSize
) // <— Needs to be done every time view.bounds change

Example
x: inset,
height: buttonSize
)
———————————— (More) Declarative
NSLayoutConstraint.activate(
button.heightAnchor == buttonSize,
button.centerXAnchor == view.centerXAnchor,
button.bottomAnchor == view.bottomAnchor - inset,
button.leadingAnchor == view.leadingAnchor + inset
)

UIKit encourages
imperative
programming style

UIKit encourages
imperative
programming style
but we can wrap it!

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

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.

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

Pay now
Shopping cart
Receipt
Check out

Presentable as we deﬁned it
protocol Presentable {
associatedtype Value
func start() -> (UIViewController, FutureResult<Value>)
}

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)
}

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?) -> ()
}

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)

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!

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)
}

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()
}

Choose
Payment
More realistic checkout
Checkout
Payment
Speciﬁc
Screens
Send
Receipt
Register

Choose
Payment
More realistic checkout
Checkout
Receipt
Payment
Speciﬁc
Register

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

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]
…

Declarative presentations UIKonf

More Related Content

What's hot (20)

Similar to Declarative presentations UIKonf (20)

Recently uploaded (9)

Declarative presentations UIKonf