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

Farewell SnapKit

kameike
July 26, 2018

Farewell SnapKit

ありがとう!!!!さようなら!(?)

kameike

July 26, 2018
Tweet

More Decks by kameike

Other Decks in Programming

Transcript

  1. Farewell SnapKit
    さようなら、ありがとうSnapkit!
    pixiv Inc.
    kameike 亀田 彗
    2018.6.5

    View full-size slide

  2. - パルシィというアプリを書いているもの
    です
    - 10月に福岡から上京
    2
    だれ
    @kameike

    View full-size slide

  3. ● SnapKitよりもAnchorがDXが良いと思うよという話
    ● 最近わりと pod SnapKitを見かけたので...
    ● 13,000スターのスーパースター。ありがとうの気持ち、大切!
    4
    今日の話の要約

    View full-size slide

  4. 6
    AutoLayout(viewに制約を追加するやつ)
    をコードで作りたい!

    View full-size slide

  5. let constraints = NSLayoutConstraint(
    item: subview,
    attribute: .left,
    relatedBy: .equal,
    toItem: view,
    attribute: .left,
    multiplier: 1.0,
    constant: 0.0)
    普通に作る
    10

    View full-size slide

  6. let constraints = NSLayoutConstraint.constraints(
    withVisualFormat: "H:|-15-[view]-15-|",
    metrics: nil,
    views: ["view": subView])
    例のアレ(VisualFormatLanguage)
    10

    View full-size slide

  7. // SnapKit
    subview.snp.makeConstraints { constraintMaker in
    constraintMaker.top.equalTo(view)
    constraintMaker.bottom.equalTo(view)
    constraintMaker.left.equalTo(view)
    constraintMaker.right.equalTo(view)
    }
    SnapKit
    10

    View full-size slide

  8. // Anchor
    NSLayoutConstraint.activate([
    subview.topAnchor.constraint(equalTo: view.topAnchor),
    subview.bottomAnchor.constraint(equalTo: view.bottomAnchor),
    subview.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    subview.leadingAnchor.constraint(equalTo: view.leadingAnchor)
    ])
    Anchor(iOS9~)
    10

    View full-size slide

  9. 13
    書き方こそ似ているけども、
    Anchorの方がDXが良いぞ〜!
    (あとUIKitだし...寿命も長いはず...)

    View full-size slide

  10. 14
    Anchorのよさ

    View full-size slide

  11. // SnapKit
    subview.snp.makeConstraints { constraintMaker in
    constraintMaker.top.equalTo(_ other: ConstraintRelatableTarget)
    }
    // ConstraintRelatableTargetとして使える型
    // Int UInt Float Double CGFloat CGSize CGPoint
    // UIEdgeInsets, UIView
    SnapKit
    10

    View full-size slide

  12. 16
    暗黙的...

    View full-size slide

  13. // Anchor
    subview.topAnchor.constraint(_ equalTo: NSLayoutAnchor)
    Anchor
    10

    View full-size slide

  14. 20
    よさ2
    ありえない組み合わせが
    型によって排除されている

    View full-size slide

  15.   // SnapKit
    subview.top.equalTo(superView.snp.right)
    このようなコード
    10

    View full-size slide

  16. 期待される挙動
    10

    View full-size slide

  17. 23
    実行時エラー:sob:

    View full-size slide

  18.   // Anchor
    view.topAnchor.constraint(equalTo: superView.leadingAnchor)
    Anchorだと...!
    10

    View full-size slide

  19.   // Anchor
    view.topAnchor.constraint(equalTo: superView.leadingAnchor)
    このようなコード
    10
    NSLayoutXAxisAnchor

    View full-size slide

  20. 26
    コンパイルエラーになる:joy:

    View full-size slide

  21.   // SnapKit
    subview.top.bottom.equalTo(view).offset(10).offset(20)
    ちなみにSnapKitはこんなコードを
    コンパイルできてしまう
    10

    View full-size slide

  22. 28
    Anchor便利...!

    View full-size slide

  23. 29
    SnapKit->Anchorで
    移行Tips

    View full-size slide

  24. 30
    基本的にはすんなり行くはず!

    View full-size slide

  25. // SnapKit
    let offset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
    make.edges.equalTo(view).offset(offset)
    Edgeがほしい!
    10

    View full-size slide

  26. extension UIView {
    func edges(equalTo view: UIView, offset: UIEdgeInsets = UIEdgeInsets()) {
    NSLayoutConstraint.activate([
    topAnchor.constraint(equalTo: view.topAnchor, constant: offset.top),
    bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -offset.bottom),
    leftAnchor.constraint(equalTo: view.leftAnchor, constant: offset.left),
    rightAnchor.constraint(equalTo: view.rightAnchor, constant: -offset.right)
    ])
    }
    }
    extensionでなんとかなる!10行ぐらい!
    10

    View full-size slide

  27. // SnapKit
    view.edges.equalTo(view).offset(UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10))
    // Anchor+Extension
    view.edges(equalTo: view, offset: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10))
    なんとかなった...!
    10

    View full-size slide

  28. // leading, trailing
    extension UIView {
    func edges(equalTo view: UIView, offset: NSDirectionalEdgeInset) {
    NSLayoutConstraint.activate([
    topAnchor.constraint(equalTo: view.topAnchor, constant: offset.top),
    bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -offset.bottom),
    leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: offset.leadingAnchor),
    trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -offset.trailingAnchor)
    ])
    }
    }
    余談
    leading trailingを使いたいなら
    10

    View full-size slide

  29. let offset = 3 * 5
    // SnapKit だと大丈夫だけど
    make.top.equalTo(view).offset(offset)
    // Anchor だとコンパイルエラー
    subview.topAnchor.constraint(equalTo: view.topAnchor, constant: offset)
    ConstraintXXXTarget的なものを
    CGFloatにする必要がある
    10

    View full-size slide

  30. 36
    余談の余談

    View full-size slide

  31. @available(iOS 6.0, *)
    open func addConstraint(_ constraint: NSLayoutConstraint)
    // This method will be deprecated in a future release and should be avoided.
    // Instead, set NSLayoutConstraint's active property to YES.
    10
    addConstraintは
    使わない方がいい

    View full-size slide

  32. let constraint = view.bottomAnchor.constraint(equalTo: bottomAnchor)
    constraint.isActive = true
    // もしくは
    NSLayoutConstraint.activate([constraint])
    // でconstraintを有効に...!
    こういう感じで
    10

    View full-size slide

  33. 39
    SnapKit余談

    View full-size slide

  34. ● 7/17にSwift4対応!(そろそろ保守されなくなってきてるって言おうとおもっていたのに)
    ● ので、まだ慌てる時間じゃない...!?
    40
    まだしっかり保守されている...!

    View full-size slide

  35. ● 3000行の本体コード(RxCocoaの1/3ぐらいコードがある...!)
    ● 大体全ての型にMapperを書いてDSL上では独自型だけで表現できる世界を実現してい
    る(その分よしなであり、上述の問題もあり
    ...)
    41
    整ったコード(整いすぎでは...?!)

    View full-size slide

  36. 42
    Priorityに若干のカスタマイズ
    public static var medium: ConstraintPriority {
    #if os(OSX)
    return 501.0
    #else
    return 500.0
    #endif
    }

    View full-size slide

  37. ● 時々example作ったからマージしてよ!という
    PRがきていた
    ● 苦労をかんじる最適化
    43
    13000スターつくと何が起こるか

    View full-size slide

  38. ● SnapKit→Anchor
    ● ありがとうSnapKit!さようなら!(?)
    44
    まとめ

    View full-size slide