BENJAMIN ENCZ @BENJAMINENCZ 1 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

TURNING UIKIT INSIDE OUT 2 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

❤+⚔ VIEW PROGRAMMING 3 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

4 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

AGENDA 1. Issues With UI Programming 2. Imperative vs. Declarative UIs 3. State of UI programming with UIKit 4. Build Your Own Declarative View Layer 5. Declarative UIs Everywhere? 5 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Invalid update: invalid number of rows in section 0. The number of rows contained in an existing section after the update (2) must be equal to the number of rows contained in that section before the update (3), plus or minus the number of rows inserted or deleted from that section (0 inserted, 2 deleted) and plus or minus the number of rows moved into or out of that section (0 moved in, 0 moved out).' 6 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

INTERACTIVE UIS WITH IMPERATIVE CODE 1. Build Initial UI 2. Update App State 3. Poke at UI to Update it 7 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

"This looks broken!" "Well, it's UI code; what can we do?" 8 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

IMPERATIVE VS. DECLARATIVE VIEW CODE 9 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

DECLARATIVE VIEW CODE? render: function() { return ( ); 10 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

IMPERATIVE VS. DECLARATIVE 11 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

▸ Hard to Reason About, Hard to Test ▸ Defers Complexity to the User ▸ Encourages Coupling ▸ View Code Can Have Arbitrary Side Effects 12 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

▸ View Code Can Only Map From State to View ▸ Easy to Test: Provide Input, Assert Output ▸ Defers Complexity to the System 13 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

THE STATE OF UIKIT 14 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

IS UIKIT DECLARATIVE YET? ✅ (Mostly) Static Individual Views ❌ Dynamic Content 15 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

API EXAMPLE: UITABLEVIEW 16 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

Who loves implementing UITableViewDataSource for a living? 17 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

let userSection = 1 let storySection = 2 let settingSection = 3 func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { let tableViewCell: UITableViewCell switch indexPath.section { case userSection: tableViewCell = tableView.dequeueReusableCellWithIdentifier("user")! // ... case storySection: tableViewCell = tableView.dequeueReusableCellWithIdentifier("story")! // ... case settingSection: tableViewCell = tableView.dequeueReusableCellWithIdentifier("setting")! // ... default: fatalError("No cell for indexPath: \(indexPath)") } return tableViewCell } 18 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

override func tableView(tableView: UITableView, shouldHighlightRowAtIndexPath indexPath: NSIndexPath) -> Bool { switch indexPath.row { case UserAction.Status.rawValue: return self.canChangeStatus || self.canClose case UserAction.Assignee.rawValue, UserAction.Phone.rawValue, UserAction.Title.rawValue, UserAction.Description.rawValue: return self.canEdit case UserAction.Shared.rawValue: return self.canShare && !self.allUsersShared case UserAction.RemoveMaster.rawValue: return self.canUnshare && !self.allUsersNotShared case UserAction.Archive.rawValue: return self.canDelete default: return true } } 19 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

We're taking a declarative description of what we want to see on the screen and are turning it into a sequence of imperative statements, just so UIKit can understand us. 20 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

TURNING UIKIT INSIDE OUT 21 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

BUILD YOUR OWN DECLARATIVE VIEW LAYER 22 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

EXISTING SOLUTIONS ▸ React Native ▸ ComponentKit ▸ Few.swift (experimental) 23 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

NO PRODUCTION READY SOLUTION FOR DO IT YOURSELF 24 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

(STATE) -> VIEW TREE 25 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

26 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

var users: [User] = [ User(username: "A"), User(username: "B"), User(username: "C"), User(username: "D") ] override func viewDidLoad() { self.tableViewRenderer = TableViewShim(cellTypes: [ CellTypeDefinition( nibFilename: "UserCell", cellIdentifier: "UserCell" )], tableView: tableView) self.tableViewRenderer.tableViewModel = tableViewModelForUserList( users, deleteClosure: deleteUser ) } 27 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

func tableViewModelForUserList(users: [User], deleteClosure: CommitEditingClosure) -> TableViewModel { return TableViewModel(sections: [ TableViewSectionModel(cells: users.map { viewModelForUser($0, deleteClosure: deleteClosure) } ) ]) } func viewModelForUser(user: User, deleteClosure: CommitEditingClosure) -> TableViewCellModel { func applyViewModelToCell(cell: UITableViewCell, user: Any) { guard let cell = cell as? UserCell else { return } guard let user = user as? User else { return } cell.nameLabel.text = user.username } return TableViewCellModel( cellIdentifier: "UserCell", applyViewModelToCell: applyViewModelToCell, commitEditingClosure: deleteClosure, customData: user ) } 28 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

func deleteUser(indexPath: NSIndexPath) { self.users.removeAtIndex(indexPath.row) self.tableViewRenderer.newViewModelWithChangeset( tableViewModelForUserList( users, deleteClosure: deleteUser ), changeSet: .Delete(indexPath) ) } 29 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

TableViewModel( sections: [ TableViewSectionModel( cells: users.map(cellModelForUser(actionHandler)) ), TableViewSectionModel( cells: stories.map(storyModelForUser(actionHandler)) ) ] ) vs. 100s of line of UITableViewDataSource 30 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

GITHUB.COM/BEN-G/AUTOTABLE 31 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

CAN WE USE THIS FOR ENTIRE APPS? 32 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

DEMO 33 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

IMPLEMENTATION DETAILS ▸ Components Map To Views ▸ Components Have Platform Specific Renderers ▸ Renderers Understand How to Update With New Component State ▸ Library relies on Dwifft to Diff Two Component Trees 34 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

35 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

⚠⚠GitHub.com/Ben-G/UILib⚠⚠ ⚠GitHub.com/joshaber/Few.swift⚠ 36 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

CONCLUSION 37 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

✅ EASY TO REASON ABOUT ✅ WELL ENCAPSULATED ✅ TESTABLE ✅ NOT REDUNDANT 38 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

Generic Declarative View Layer? Hard Wrapper Around Some Components: You can do this! ! 39 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016 

THANK YOU! bit.ly/uikit-inside-out github.com/Ben-G/AutoTable github.com/Ben-G/UILib github.com/joshaber/Few.swift @BENJAMINENCZ 40 — Turning UIKit Inside Out | @benjaminencz | iOSCon 2016, May 2016