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

by fumito-ito

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

2 ύϑΥʔϚϯε ؾʹͯ͠·͔͢ʁ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

4 16 ms…

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

7 ͕ͬ…ବ໨ͬ…!

Slide 8

Slide 8 text

8 UITableView͕େྔʹฒͿ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

14 ͍͚ΔͬΆ͍

Slide 15

Slide 15 text

15 Texture • FacebookͷUIϑϨʔϜϫʔΫ͕OSSԽ͞Εͨ΋ͷ  (౰࣌͸AsyncDisplayKit) • ݱࡏ͸PinterestͰओʹར༻͞Ε͍ͯΔ • ϝΠϯεϨουͷ֎ͰUIඳըΛ࣮ߦ͢Δ͜ͱͰ׈Β͔ ͳUIΛ࣮ݱ͢Δ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

17 Texture before / after Before After

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

25 NodeContainerʹஔ͖׵͑ • NodeContainer • UIViewController, UITableViewͳͲͷ୅ସ • ASViewController, ASTableNodeͳͲ • جຊ͸Nodeͱಉ͡ • delegate͸ϝΠϯεϨουͰಈ͘΋ͷͱͦΕҎ֎ͷεϨουͰಈ͘΋ͷ  ͕ڞଘ͍ͯ͠ΔͷͰ஫ҙ • ASTableNode, ASCollectionNode͸Cellͷ࠶ར༻͕ͳ͍ͳͲ  ಛ༗ͷҧ͍΋͋Δ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

27 ίϨΫγϣϯͷࠩ෼ߋ৽ରԠ • TextureͰ͸Cellͷ࠶ར༻Λ͠ͳ͍ͷͰreloadDataͷ  ίετ͕ߴ͍ • TableNode, CollectionNode͸ݪଇͱͯࠩ͠෼ߋ৽Λར༻͢Δ • RxSwiftͱซ༻͍ͯ͠Δ৔߹͸ࠩ෼ܭࢉϥΠϒϥϦͷ  RxASDataSources͕ར༻Ͱ͖Δ • https://github.com/RxSwiftCommunity/RxASDataSources

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

29 ࠷దԽ • Layer Backing • ֘౰͢ΔASDisplayNode͕ը໘ʹඳը͞ΕΔͱ͖ʹ  CALayerͷΦϒδΣΫτͱͯ͠ඳը͞ΕΔ • λονΠϕϯτΛऔΒͳ͍ΦϒδΣΫτ͸ͱΓ͋͑ͣONͰྑ͍ • Subtree Rasterization • ֊૚Խ͞ΕͨUIViewΛҰͭͷ֊૚ʹ·ͱΊͯඳը͢Δ

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

31 ϨΠΞ΢τγεςϜͷ੾Γସ͑ • AutoLayoutΛશ෦ஔ͖׵͑Δඞཁ͕͋ΔͷͰ  ׳ΕΔ·ͰҰ൪޻਺Λ৯͏ • TextureͷެࣜαΠτʹམͪึर͍తͳαϯϓϧ͕  ॻ͍ͯ͋ΔͷͰΦεεϝ • http://texturegroup.org/docs/automatic-layout-examples-2.html

Slide 32

Slide 32 text

32 εϨουʹ·ͭΘΔ໰୊ • ϩΨʔͱ͔؆қόοϑΝͱͯ͠DictionaryΛ࢖͍ͬͯΔ  Օॴ͕Ϋϥογϡ͢Δ • SwiftͷDictionary͸εϨουηʔϑͰ͸ͳ͍ͷͰ஫ҙ • ThreadSafeDictionaryΛ࡞͓ͬͯ͘ͱָ • ϝΠϯεϨουνΣοΧʔΛ࢖ͬͯҰ௨Γςετ͠·͠ΐ͏

Slide 33

Slide 33 text

33 VoiceOver͕յΕΔ • ʮASViewControllerʹஔ͖׵͚͑ͨͲNodeͷஔ͖׵͑  ɹͯ͠ͳ͍ͷͰaddSubViewΛ࢖͍ͬͯΔʯ͔ͭ  ʮͦͷViewControllerͷ਌΋ASViewControllerʯ  ͱ͍͏ঢ়گͰൃੜ͢Δ • UIKitͱTextureͰAccessibilityElementͷ୳ࡧύε͕  ҟͳΔ͜ͱ͕ݪҼ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

35 Carthageؔ࿈ͷτϥϒϧ • ͦ΋ͦ΋࠷৽ͷTexture 2.7͕CarthageͰΠϯετʔϧ  Ͱ͖ͳ͍… • masterͰ͸ղܾ͍ͯ͠Δ • աڈʹ΋༷ʑͳ໰୊͕͋ͬͨ • ࣮ߦ࣌ΤϥʔʹͳΔɹ<- ղফࡁΈ • ը૾Ωϟογϡ͕ʢ੩͔ʹʣແޮʹͳΔɹ<- ݱ໾ͷόά

Slide 36

Slide 36 text

36 ࣮ߦ࣌ΤϥʔʹͳΔ • 2.6Ͱݱ໾ͷ໰୊ • 2.6͸CarthageͰਖ਼ৗʹΠϯετʔϧͰ͖Δ  ࠷৽ͷόʔδϣϯ… • pinterest/PINCacheͱͷ૬ੑͷ໰୊ͳͷͰCartfileͰ  ໌ࣔతʹ”3.0.1-beta.6"Λࢦఆ͢Δ͜ͱͰղফ͢Δ

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

38 Textureͷྑ͍ͱ͜Ζ • ViewModelҎԼΛॻ͖׵͑Δඞཁ͕ͳ͔ͬͨ • ߴ͞ܭࢉͳͲΛؚΊͨϨΠΞ΢τॲཧ͕Viewͷ  Ϋϥε಺Ͱ׬݁͢Δ • ϓϦϑΣονɺը૾ͷ஗ԆϩʔυͳͲͷॲཧ͕  ؆୯ʹඳ͚ΔΑ͏ʹαϙʔτ͞Ε͍ͯΔ

Slide 39

Slide 39 text

39 ·ͱΊ • UIΛޮ཰Α͘ඳը͢ΔͨΊʹϝΠϯεϨουҎ֎ͰUIΛ  ߋ৽Ͱ͖ΔTextureΛ࠾༻ͨ͠ • TextureΛ࠾༻͢Δ͜ͱͰUIඳըͷύϑΥʔϚϯε͕  ޲্ͨ͠ • ݱঢ়ͷTextureͰ͸Carthageؔ࿈ͳͲ͍͔ͭ͘ͷ໰୊͕  ଘࡏ͢Δ

Slide 40

Slide 40 text

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