非同期UI描画による高速なアプリケーションの実装

iOSアプリケーションの高速化においてメインスレッドをブロックするUIの描画コストは無視できない問題です。

日経電子版アプリでは非同期なUI描画を実現するTexture（AsyncDisplayKit）を導入し、大量のテーブルをスムーズに描画しています。
本セッションではTextureの検討から具体的な導入ステップ、導入にあたって遭遇したトラブルと対応方法について紹介します。

-----

このスライドは俺コン 2018 Summer Day 1 (https://orecon.connpass.com/event/94858/) および iOSDC 2018 Reject Conference Day 1 (https://iosdc-reject-conference.connpass.com/event/93314/) で発表予定の内容です。

Transcript

1. 1
   ඇಉظUIඳըʹΑΔߴ଎ͳ
   ΞϓϦέʔγϣϯͷ࣮૷
   

   View Slide

2. 2
   ύϑΥʔϚϯε
   ؾʹͯ͠·͔͢ʁ
   

   View Slide

3. 3
   “Most apps target a frame rate of 60 FPS,
   Equivalent to 16.67 ms per frame.”
   https://developer.apple.com/library/archive/documentation/3DDrawing/Conceptual/
   MTLBestPracticesGuide/FrameRate.html
   

   View Slide

4. 4
   16 ms…
   

   View Slide

5. 5
   ίετͷߴ͍ॲཧ
   • ϨΠΞ΢τ
   • UIΛ഑ஔ͢Δ
   • ςΩετΛ഑ஔ͢Δ
   • ΦϑεΫϦʔϯϨϯμϦϯά
   

   View Slide

6. 6
   ͍͍ͩͨରԠࡁΈ
   https://speakerdeck.com/ikait/the-way-to-60-fps
   

   View Slide

7. 7
   ͕ͬ…ବ໨ͬ…!
   

   View Slide

8. 8
   UITableView͕େྔʹฒͿ
   

   View Slide

9. 9
   UIͷඳը͸ϝΠϯεϨουͰ࣮ߦ
   ը໘ͷඳը͸16msҎ಺ʹ׬ྃ
   v.s.
   

   View Slide

10. View Slide

11. 11
    ʮUIͷඳը͸ϝΠϯεϨουͰ
    ɹ࣮ߦ͠ͳͯ͘͸ͳΒͳ͍ʯ͸
    ຊ౰͔
    

    View Slide

12. 12
    UIͷඳը͸෼ղՄೳͰ͋Δ
    ϨΠΞ΢τͷܭࢉ
    ը૾ͷσίʔυ
    จࣈ૊Έͷܭࢉ
    ϨΠϠʔॲཧ
    ը໘΁ͷඳը
    

    View Slide

13. 13
    ϝΠϯεϨουҎ֎Ͱ͍͚ͦ͏
    ϨΠΞ΢τͷܭࢉ
    ը૾ͷσίʔυ
    จࣈ૊Έͷܭࢉ
    ϨΠϠʔॲཧ
    ը໘΁ͷඳը
    

    View Slide

14. 14
    ͍͚ΔͬΆ͍
    

    View Slide

15. 15
    Texture
    • FacebookͷUIϑϨʔϜϫʔΫ͕OSSԽ͞Εͨ΋ͷ

    (౰࣌͸AsyncDisplayKit)
    • ݱࡏ͸PinterestͰओʹར༻͞Ε͍ͯΔ
    • ϝΠϯεϨουͷ֎ͰUIඳըΛ࣮ߦ͢Δ͜ͱͰ׈Β͔
    ͳUIΛ࣮ݱ͢Δ
    

    View Slide

16. 16
    Texture͕ϝΠϯεϨου͔Β
    औΓআ͘ॲཧ
    ϨΠΞ΢τͷܭࢉ
    ը૾ͷσίʔυ
    จࣈ૊Έͷܭࢉ
    ϨΠϠʔॲཧ
    ը໘΁ͷඳը
    

    View Slide

17. 17
    Texture before / after
    Before After
    

    View Slide

18. 18
    ೔ܦిࢠ൛ʹ͓͚Δ
    Texture΁ͷҠߦ
    

    View Slide

19. 19
    લఏ
    • RxSwift + MVVMΞʔΩςΫνϟ
    • ϨΠΞ΢τΤϯδϯ͸AutoLayout
    

    View Slide

20. 20
    ஈ֊తಋೖ
    • Ұ൪଎͍ͨ͘͠ը໘Λஔ͖׵͑
    • 1ϲ݄͘Β͍Ͱௐࠪ + ࣮૷
    • ViewController, ViewΛஔ͖׵͑
    • ςʔϒϧͷࠩ෼ߋ৽Λ࣮૷
    • ViewController୯ҐͰஔ͖׵͍͑ͯͬͨ
    • 1 VC / 2 ~ 3ਓ೔͘Β͍ͷϖʔε
    • Viewͷछྨ͕ଟ͍΄Ͳ͕͔͔࣌ؒΔ
    

    View Slide

21. 21
    Ҡߦεςοϓ
    • Nodeʹஔ͖׵͑
    • NodeContainerʹஔ͖׵͑
    • ίϨΫγϣϯΫϥεͷࠩ෼ߋ৽ରԠ
    • ࠷దԽ
    

    View Slide

22. 22
    Nodeʹஔ͖׵͑
    • Node
    • UIView, UITableViewCellͳͲͷ୅ସ
    • ASDisplayNode, ASCellNodeͳͲ
    • ϨΠΞ΢τΤϯδϯ + εϨουηʔϑ
    • Nodeʹ௚઀ੜ͍͑ͯΔϓϩύςΟ͸શͯεϨουηʔϑ
    • CSS FlexboxϥΠΫͳϨΠΞ΢τΤϯδϯΛར༻
    • node.view, node.layer͔ΒجఈͷΦϒδΣΫτʹ΋ΞΫηεͰ͖Δ
    • ͕ɺεϨουηʔϑͰ͸ͳ͍ͷͰཁ஫ҙ
    

    View Slide

23. 23
    ϨΠΞ΢τ͸CSS FlexboxϥΠΫͳAPIΛར༻੍ͯ͠ޚ͢Δ
    

    View Slide

24. 24
    UIWebViewͳͲ༻ҙ͞Ε͍ͯͳ͍View͸ASDisplayNodeͷίϯετϥΫλΛ
    ར༻͢Δ
    

    View Slide

25. 25
    NodeContainerʹஔ͖׵͑
    • NodeContainer
    • UIViewController, UITableViewͳͲͷ୅ସ
    • ASViewController, ASTableNodeͳͲ
    • جຊ͸Nodeͱಉ͡
    • delegate͸ϝΠϯεϨουͰಈ͘΋ͷͱͦΕҎ֎ͷεϨουͰಈ͘΋ͷ

    ͕ڞଘ͍ͯ͠ΔͷͰ஫ҙ
    • ASTableNode, ASCollectionNode͸Cellͷ࠶ར༻͕ͳ͍ͳͲ

    ಛ༗ͷҧ͍΋͋Δ
    

    View Slide

26. 26
    • UIViewControllerͷஔ͖׵͑͸ൺֱత୯७
    • Delegate͸ඇಉظʹ࣮ߦ͞ΕΔؔ਺Λฦ͢ܗࣜʹ
    

    View Slide

27. 27
    ίϨΫγϣϯͷࠩ෼ߋ৽ରԠ
    • TextureͰ͸Cellͷ࠶ར༻Λ͠ͳ͍ͷͰreloadDataͷ

    ίετ͕ߴ͍
    • TableNode, CollectionNode͸ݪଇͱͯࠩ͠෼ߋ৽Λར༻͢Δ
    • RxSwiftͱซ༻͍ͯ͠Δ৔߹͸ࠩ෼ܭࢉϥΠϒϥϦͷ

    RxASDataSources͕ར༻Ͱ͖Δ
    • https://github.com/RxSwiftCommunity/RxASDataSources
    

    View Slide

28. 28
    ࠷దԽ
    • Batch FetchingΛ࢖͏
    • TextureͰ͸UIKitΑΓ΋ࡉ͔͘ϓϦϩʔυͷঢ়ଶΛ੍ޚͰ
    ͖Δ
    • ը૾ͷಡΈࠐΈɺίϨΫγϣϯͷઌಡΈͳͲ͸ϓϦϩʔυ
    ༻ͷίʔϧόοΫΛར༻͢Δ͜ͱͰ࠷దԽ͢Δ
    http://texturegroup.org/docs/intelligent-preloading.html
    

    View Slide

29. 29
    ࠷దԽ
    • Layer Backing
    • ֘౰͢ΔASDisplayNode͕ը໘ʹඳը͞ΕΔͱ͖ʹ

    CALayerͷΦϒδΣΫτͱͯ͠ඳը͞ΕΔ
    • λονΠϕϯτΛऔΒͳ͍ΦϒδΣΫτ͸ͱΓ͋͑ͣONͰྑ͍
    • Subtree Rasterization
    • ֊૚Խ͞ΕͨUIViewΛҰͭͷ֊૚ʹ·ͱΊͯඳը͢Δ
    

    View Slide

30. 30
    ϋϚΓͲ͜Ζ
    • ϨΠΞ΢τγεςϜͷ੾Γସ͑
    • εϨουʹ·ͭΘΔ໰୊
    • UIKitͱซ༻͢ΔͱVoiceOver͕յΕΔ
    • Carthageؔ࿈ͷτϥϒϧ
    

    View Slide

31. 31
    ϨΠΞ΢τγεςϜͷ੾Γସ͑
    • AutoLayoutΛશ෦ஔ͖׵͑Δඞཁ͕͋ΔͷͰ

    ׳ΕΔ·ͰҰ൪޻਺Λ৯͏
    • TextureͷެࣜαΠτʹམͪึर͍తͳαϯϓϧ͕

    ॻ͍ͯ͋ΔͷͰΦεεϝ
    • http://texturegroup.org/docs/automatic-layout-examples-2.html
    

    View Slide

32. 32
    εϨουʹ·ͭΘΔ໰୊
    • ϩΨʔͱ͔؆қόοϑΝͱͯ͠DictionaryΛ࢖͍ͬͯΔ

    Օॴ͕Ϋϥογϡ͢Δ
    • SwiftͷDictionary͸εϨουηʔϑͰ͸ͳ͍ͷͰ஫ҙ
    • ThreadSafeDictionaryΛ࡞͓ͬͯ͘ͱָ
    • ϝΠϯεϨουνΣοΧʔΛ࢖ͬͯҰ௨Γςετ͠·͠ΐ͏
    

    View Slide

33. 33
    VoiceOver͕յΕΔ
    • ʮASViewControllerʹஔ͖׵͚͑ͨͲNodeͷஔ͖׵͑

    ɹͯ͠ͳ͍ͷͰaddSubViewΛ࢖͍ͬͯΔʯ͔ͭ

    ʮͦͷViewControllerͷ਌΋ASViewControllerʯ

    ͱ͍͏ঢ়گͰൃੜ͢Δ
    • UIKitͱTextureͰAccessibilityElementͷ୳ࡧύε͕

    ҟͳΔ͜ͱ͕ݪҼ
    

    View Slide

34. 34
    खಈͰAccessibilityElementsΛࢦఆ͢Ε͹ճආͰ͖Δ
    

    View Slide

35. 35
    Carthageؔ࿈ͷτϥϒϧ
    • ͦ΋ͦ΋࠷৽ͷTexture 2.7͕CarthageͰΠϯετʔϧ

    Ͱ͖ͳ͍…
    • masterͰ͸ղܾ͍ͯ͠Δ
    • աڈʹ΋༷ʑͳ໰୊͕͋ͬͨ
    • ࣮ߦ࣌ΤϥʔʹͳΔɹ<- ղফࡁΈ
    • ը૾Ωϟογϡ͕ʢ੩͔ʹʣແޮʹͳΔɹ<- ݱ໾ͷόά
    

    View Slide

36. 36
    ࣮ߦ࣌ΤϥʔʹͳΔ
    • 2.6Ͱݱ໾ͷ໰୊
    • 2.6͸CarthageͰਖ਼ৗʹΠϯετʔϧͰ͖Δ

    ࠷৽ͷόʔδϣϯ…
    • pinterest/PINCacheͱͷ૬ੑͷ໰୊ͳͷͰCartfileͰ

    ໌ࣔతʹ”3.0.1-beta.6"Λࢦఆ͢Δ͜ͱͰղফ͢Δ
    

    View Slide

37. 37
    ASPINRemoteImageDownloader.h / .mΛϓϩδΣΫτʹ௥Ճ͢Δ͜ͱͰ
    ճආͰ͖Δ
    ը૾Ωϟογϡ͕ແޮʹͳͬͯΔ
    

    View Slide

38. 38
    Textureͷྑ͍ͱ͜Ζ
    • ViewModelҎԼΛॻ͖׵͑Δඞཁ͕ͳ͔ͬͨ
    • ߴ͞ܭࢉͳͲΛؚΊͨϨΠΞ΢τॲཧ͕Viewͷ

    Ϋϥε಺Ͱ׬݁͢Δ
    • ϓϦϑΣονɺը૾ͷ஗ԆϩʔυͳͲͷॲཧ͕

    ؆୯ʹඳ͚ΔΑ͏ʹαϙʔτ͞Ε͍ͯΔ
    

    View Slide

39. 39
    ·ͱΊ
    • UIΛޮ཰Α͘ඳը͢ΔͨΊʹϝΠϯεϨουҎ֎ͰUIΛ

    ߋ৽Ͱ͖ΔTextureΛ࠾༻ͨ͠
    • TextureΛ࠾༻͢Δ͜ͱͰUIඳըͷύϑΥʔϚϯε͕

    ޲্ͨ͠
    • ݱঢ়ͷTextureͰ͸Carthageؔ࿈ͳͲ͍͔ͭ͘ͷ໰୊͕

    ଘࡏ͢Δ
    

    View Slide

40. 40
    RxASDataSourceͷ
    ίϯτϦϏϡʔλʔ
    ืूதͰ͢ɻ
    @fumito_ito
    fumito-ito
    

    View Slide