Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Collection Update

Khoa Pham
November 27, 2017

Collection Update

Demo how UITableView, UICollection performs batch update

Khoa Pham

November 27, 2017
Tweet

More Decks by Khoa Pham

Other Decks in Programming

Transcript

  1. Collection Update

    View Slide

  2. About
    [email protected]
    —https://github.com/onmyway133
    —https://github.com/hyperoslo

    View Slide

  3. Content
    —TableView / CollectionView
    —Drag and Drop
    —Let's play some games
    !
    —Diff

    View Slide

  4. NSCollectionView
    !

    View Slide

  5. Newsloop

    View Slide

  6. Drag and Drop
    Demo
    !

    View Slide

  7. index vs offset
    Array(0..<10).enumerated().forEach { (offset, element) in
    }
    - https://en.wikipedia.org/wiki/Zero-based_numbering
    - offset from the starting position

    View Slide

  8. NSInternalInconsistencyException
    Terminating app due to uncaught exception 'NSInternalInconsistencyException',
    reason: 'Invalid update: invalid number of items in section 0.
    The number of items contained in an existing section after the update (213)
    must be equal to the number of items contained in that section before
    the update (154), plus or minus the number of items inserted or
    deleted from that section (40 inserted, 0 deleted) and plus
    or minus the number of items moved into or out of
    that section (0 moved in, 0 moved out).'

    View Slide

  9. Game of IndexPath
    —https://github.com/onmyway133/
    CollectionUpdateExample
    —10 quizzes
    items = ["a", "b", "c", "d", "e", "f"]

    View Slide

  10. 1) insert 3 items at the end
    items.append(contentsOf: ["g", "h", "i"])
    // a, b, c, d, e, f, g, h, i
    let indexPaths = Array(6...8).map { IndexPath(item: $0, section: 0) }
    collectionView.insertItems(at: indexPaths)

    View Slide

  11. 2) delete 3 items at the end
    items.removeLast()
    items.removeLast()
    items.removeLast()
    // a, b, c
    let indexPaths = Array(3...5).map { IndexPath(item: $0, section: 0) }
    collectionView.deleteItems(at: indexPaths)

    View Slide

  12. 3) update item at index 2
    items[2] = "
    !
    "
    // a, b,
    !
    , d, e, f
    let indexPath = IndexPath(item: 2, section: 0)
    collectionView.reloadItems(at: [indexPath])

    View Slide

  13. 4) move item "c" to the end
    items.remove(at: 2)
    items.append("c")
    // a, b, d, e, f, c
    collectionView.moveItem(
    at: IndexPath(item: 2, section: 0),
    to: IndexPath(item: 5, section :0)
    )

    View Slide

  14. 5) delete 3 items at the beginning, then insert 3
    items at the end
    items.removeFirst()
    items.removeFirst()
    items.removeFirst()
    items.append(contentsOf: ["g", "h", "i"])
    // d, e, f, g, h, i
    collectionView.performBatchUpdates({
    let deleteIndexPaths = Array(0...2).map { IndexPath(item: $0, section: 0) }
    collectionView.deleteItems(at: deleteIndexPaths)
    let insertIndexPaths = Array(3...5).map { IndexPath(item: $0, section: 0) }
    collectionView.insertItems(at: insertIndexPaths)
    }, completion: nil)

    View Slide

  15. 6) insert 3 items at the end, then delete 3 items
    beginning
    items.append(contentsOf: ["g", "h", "i"])
    items.removeFirst()
    items.removeFirst()
    items.removeFirst()
    // d, e, f, g, h, i
    collectionView.performBatchUpdates({
    let insertIndexPaths = Array(6...8).map { IndexPath(item: $0, section: 0) }
    collectionView.insertItems(at: insertIndexPaths)
    let deleteIndexPaths = Array(0...2).map { IndexPath(item: $0, section: 0) }
    collectionView.deleteItems(at: deleteIndexPaths)
    }, completion: nil)

    View Slide

  16. !
    Terminating app due to uncaught exception
    'NSInternalInconsistencyException',
    reason: 'attempt to insert item 6 into section 0,
    but there are only 6 items in section 0 after the update'

    View Slide

  17. performBatchUpdates
    Deletes are processed before inserts in batch
    operations

    View Slide

  18. 6) insert 3 items at the end, then delete 3 items
    beginning
    !
    items.append(contentsOf: ["g", "h", "i"])
    items.removeFirst()
    items.removeFirst()
    items.removeFirst()
    // d, e, f, g, h, i
    collectionView.performBatchUpdates({
    let deleteIndexPaths = Array(0...2).map { IndexPath(item: $0, section: 0) }
    collectionView.deleteItems(at: deleteIndexPaths)
    let insertIndexPaths = Array(3...5).map { IndexPath(item: $0, section: 0) }
    collectionView.insertItems(at: insertIndexPaths)
    }, completion: nil)

    View Slide

  19. Operations
    insertItems(at indexPaths: [IndexPath])
    deleteItems(at indexPaths: [IndexPath])
    reloadItems(at indexPaths: [IndexPath])
    moveItem(at indexPath: IndexPath, to newIndexPath: IndexPath)
    performBatchUpdates(_ updates, completion)
    insertSections(_ sections: IndexSet)
    deleteSections(_ sections: IndexSet)
    reloadSections(_ sections: IndexSet)
    moveSection(_ section: Int, toSection newSection: Int)

    View Slide

  20. Ordering of Operations and Index Paths
    —https://developer.apple.com/library/content/
    documentation/UserExperience/Conceptual/
    TableView_iPhone/ManageInsertDeleteRow/
    ManageInsertDeleteRow.html

    View Slide

  21. Wagner–Fischer algorithm
    —https://en.wikipedia.org/wiki/
    Wagner%E2%80%93Fischer_algorithm
    —https://en.wikipedia.org/wiki/
    Dynamic_programming
    Computes the edit distance between two strings of
    characters.

    View Slide

  22. "kit" -> "kat"

    View Slide

  23. Deletions
    "k" -> ""
    !
    1 deletion
    "ki" -> ""
    !
    2 deletions
    "kit" -> ""
    !
    3 deletions

    View Slide

  24. Insertions
    "" -> "k"
    !
    1 insertion
    "" -> "ka"
    !
    2 insertions
    "" -> "kat"
    !
    3 insertions

    View Slide

  25. If equal, take value from the top left

    View Slide

  26. horizonally: insertion
    vertically: deletion
    diagonally: substitution
    If not equal, check minimum value from left, top, top
    left. Then increase by one

    View Slide

  27. "k" -> "kat"
    !
    2 insertions

    View Slide

  28. It equals again, take value from top left.
    Bottom right value gives edit distance (number of
    steps)
    "kit" -> "kat"
    !
    Substitute "i" with "a"

    View Slide

  29. insertions: insertItems
    deletions: deleteItems
    substitutions: reloadItems
    move: deletion + insertion moveItem

    View Slide

  30. Edit steps
    —delete, insert, move, substitute
    —https://github.com/onmyway133/DeepDiff

    View Slide

  31. Complexity
    —O(mn)
    —10k items
    !
    Performance
    —Collection size
    —Equatable
    —Hashable

    View Slide

  32. Alternatives
    —Heckel http://documents.scribd.com/docs/
    10ro9oowpo1h81pgh1as.pdf
    —Wu https://publications.mpi-cbg.de/
    Wu19906334.pdf
    —Myers http://www.xmailserver.org/diff2.pdf

    View Slide

  33. Q & A
    Thanks for listening. Hope you have a great time

    View Slide