$30 off During Our Annual Pro Sale. View Details »

iOSDC_LT.pdf

aboy
September 01, 2018

 iOSDC_LT.pdf

iOSDC 2018 9/1(土)のルーキーズLT枠で発表した内容です

aboy

September 01, 2018
Tweet

More Decks by aboy

Other Decks in Programming

Transcript

  1. ˏcosmeΞϓϦʹ͓͚Δ
    Textureͷ׆༻
    2018/09/01 iOSDC 2018 LT@aboy

    View Slide

  2. ࣗݾ঺հ
    • Ѩอ༑໵
    • aboy/@suxisuxido
    • גࣜձࣾΞΠελΠϧ
    • iOSΤϯδχΞ/GoͰAPIΛॻ͖࢝ΊͨϚϯ

    View Slide

  3. ࿩͢͜ͱ
    • ˏcosmeͱ͍͏εϚϗΞϓϦͷύϑΥʔϚϯ
    εվળͷҰ؀ͱͯ͠ɺTextureΛҰ෦ͷը໘Ͱ
    ݕূͯ͠ΈͨͷͰͭΒͭΒͱ࿩͢

    View Slide

  4. ˏcosmeΞϓϦͷͭ͘Γ
    • MVVM/Clean Architecture + RxSwift
    • جຊ 1view <=> 1view model
    • xib/storyboardʹΑΔview؅ཧ
    • جຊ 1view <=> 1xib/storyboard
    • AutoLayout/UIStackViewΰϦΰϦ࢖ͬͯΔ

    View Slide

  5. ͱ͋Δը໘
    • iPod TouchͰಈ͔͢
    • ͍͍ͩͨ30~45fps
    ಈը

    View Slide

  6. αΫαΫಈ͘Α͏ʹ͍ͨ͠

    View Slide

  7. View Slide

  8. Textureͱ͸
    • Pinterest͕࡞ͬͯΔඇಉظUIϑϨʔϜϫʔΫ
    • ϨΠΞ΢τܭࢉ͸όοΫάϥ΢ϯυεϨουͰඇಉظతʹߦ
    ΘΕΔ
    • ϨΠΞ΢τ͸શͯίʔυͰߦ͏
    • CSS FlexboxϥΠΫͳಠࣗͷϨΠΞ΢τAPI
    • UIKitͰ͍͏View͸TextureͰ͸NodeͱݺͿ
    • UIKitͷओཁͳView͸˓˓NodeʹϦϓϨΠε͞ΕͯΔ
    https://github.com/TextureGroup/Texture

    View Slide

  9. Texture΁ͷஔ͖׵͑

    View Slide

  10. UIKit͔ΒTexture΁ͷஔ͖׵͑
    • UITableViewController ->
    ASViewController
    • ௥ՃಡΈࠐΈ͸

    tableNode(_ tableNode: ASTableNode,
    willBeginBatchFetchWith context: ASBatchContext)

    View Slide

  11. UIKit͔ΒTexture΁ͷஔ͖׵͑
    • UITableViewCell -> ASCellNode
    • UIView -> ASDisplayNode
    • ViewModel͸ͦͷ··ར༻Մೳ
    • attributed string΍isHiddenܥͷ஋͸
    ViewModelͰ؅ཧ͠View΁όΠϯσΟϯά

    View Slide

  12. • ଞͷը໘Ͱ΋࢖͍ͬͯΔڞ௨ύʔπ͸࠷ѱ
    UIViewͷϥοϓͰରԠ
    • ͨͩ͠ϝΠϯεϨου͕࢖ΘΕΔ
    UIKit͔ΒTexture΁ͷஔ͖׵͑
    node = ASDisplayNode { () -> UIView in
    let view = StarView(frame: CGRect.zero)
    view.configure(component.displayScore) //configure
    return view
    }

    View Slide

  13. ϨΠΞ΢τ
    override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) ->
    ASLayoutSpec {

    let baseStack = ASStackLayoutSpec.vertical()

    baseStack.spacing = 4.0 // UIStackView.Spacing

    var verticalElements: [ASLayoutElement] = []

    if let messageNode = messageNode {
    verticalElements.append(messageNode)
    }
    verticalElements.append(contentNode)
    verticalElements.append(footerNode)
    baseStack.children = verticalElements

    return ASInsetLayoutSpec(

    insets: UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0),

    child: baseStack

    )
    }

    View Slide

  14. Textureʹஔ͖׵͑ͨ݁Ռ…

    View Slide

  15. UIKit Texture
    ಈը ಈը

    View Slide

  16. UIKit Texture
    30~45fps 50~55fps

    View Slide

  17. Texture
    UIKit
    - Layer Backing

    - Subtree Rasterization
    View Hierarchy

    View Slide

  18. ͓ΘΓʹ
    • TextureΛ࢖ͬͯύϑΥʔϚϯεΛ͋Δఔ౓վળͰ͖ͨ
    • ϓϩμΫγϣϯίʔυʹ૊ΈࠐΉ͔͸·ͩݕ౼த
    • xib/storyboard͔Βͷஔ͖׵͑͸ͦ͜·Ͱ೉͘͠ͳ͍ҹ৅
    • ը໘୯ҐͰஔ͖׵͑Ͱ͖ΔɻStackLayout͕ศརͰϥΫɻςΩετͷ৭
    ΍ϑΥϯτͷ؅ཧΛAttributedStringʹపఈͯ͠Ε͹΋ͬͱϥΫͩͬͨ
    • UIܥϥΠϒϥϦ࢖ͬͯΔͱશஔ͖׵͑͸೉ͦ͠͏
    • UIViewΛϥοϓͰ͖Δ͚ͲɺϝΠϯεϨου͕࢖ΘΕΔͷͰϘτϧ
    ωοΫʹͳΔ͔΋

    View Slide