Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Texture΁ͷஔ͖׵͑

Slide 10

Slide 10 text

UIKit͔ΒTexture΁ͷஔ͖׵͑ • UITableViewController -> ASViewController • ௥ՃಡΈࠐΈ͸
 tableNode(_ tableNode: ASTableNode, willBeginBatchFetchWith context: ASBatchContext)

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

ϨΠΞ΢τ 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 ) }

Slide 14

Slide 14 text

Textureʹஔ͖׵͑ͨ݁Ռ…

Slide 15

Slide 15 text

UIKit Texture ಈը ಈը

Slide 16

Slide 16 text

UIKit Texture 30~45fps 50~55fps

Slide 17

Slide 17 text

Texture UIKit - Layer Backing
 - Subtree Rasterization View Hierarchy

Slide 18

Slide 18 text

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