iOSDC_LT.pdf

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

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