SwiftUIと比較してみた時のFlutter

https://yj-meetup.connpass.com/event/178577/
#wwdctokyo

Transcript

1. SwiftUIͱൺֱͯ͠Έͨ࣌ͷFlutter ాதୡ໵ (@tattn) #wwdctokyo
2. ాத ୡ໵ / ͨͳͨͭ (@tattn) • Yahoo!ΧʔφϏ ←Yahoo!৐׵Ҋ಺ • iOSΞϓϦΤϯδχΞ • ৽ٕज़ͷݕূ @tattn @tanakasan2525 @tattn Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
3. όʔνϟϧLODGEͲ͏Ͱ͠ΐ͏͔ʁ https://note.com/lodge/n/nfa4a40c057b1 3DϞσϥʔͱUnity࢖͍͕͍Ε͹ҙ֎ͱ؆୯ʹ࡞Ε·͢ʂ
4. SwiftUI࢖ͬͯΈ·͔ͨ͠ʁ YES NO (clusterͷΤϞʔγϣϯ Ͱ൓Ԡ͍ͩ͘͞)
5. ࠓͷSwiftUI͸·ͩͭΒΈ͕ଟ͍ʂ
6. ݸਓతʹSwiftUIͰ࡞͍ͬͯͨΞϓϦΛ FlutterʹҠߦͨ͠Γɺ ۀ຿Ͱ΋FlutterΛݕূͨ͠Γ͍ͯ͠·͢
7. WWDC20௚લͱͷ͜ͱͰ Flutterͱൺֱͭͭ͠ SwiftUIͷਐԽʹظ଴͢ΔLTΛ͠·͢
8. Flutterͱ͸
9. Flutterͱ͸ • GoogleʹΑͬͯ։ൃ͞ΕͨΦʔϓϯιʔεϞόΠϧΞϓϦSDK • ΫϩεϓϥοτϑΥʔϜ (iOS, Android, Web, macOS) • DartͰهड़͢Δ • ίϯϙʔωϯτࢦ޲ɺϗοτϦϩʔυͳͲͷ ࠓͲ͖ͷઃܭ΍ػೳ
10. Flutterͷ͘͠Έ
11. Flutterͷ಺෦ https://flutter.dev/docs/resources/technical-overview ಠࣗͷϨϯμϦϯάΤϯδϯ(Skia) ͰUIViewʹඳը͠ɺUIΛදࣔ
12. ΈΜͳେ޷͖View Hierarchy FlutterViewController಺ͷFlutterViewʹશͯඳը͞Ε͍ͯΔ (ScrollView͸ݟ͑ͳ͍ͱ͜Ζʹ഑ஔ) ͪͳΈʹ.xcworkspace΋࡞ΒΕΔͷͰ ωΠςΟϒͷσόοά͸XcodeͰͰ͖Δ
13. ίʔυ࣮ߦͷ͘͠Έ ϦϦʔεϏϧυ Dartίʔυ ػցޠ ίϯύΠϧ σόοάϏϧυ ػցޠ+Dart ࣮ߦதʹඞཁͳ෦෼͚ͩίϯύΠϧ͞ΕΔ (JIT) →ϗοτϦϩʔυ͕ޮ͘ ࣮ߦલʹશͯίϯύΠϧ͞ΕΔ(AOT) →ಈ࡞͕଎͍
14. FlutterͰͷUIͷ࡞Γํ (ϘλϯΛԡͨ͠Β1૿͑ΔΞϓϦ)
15. ϘλϯΛԡ͢ͱ1૿͑Δը໘ (SwiftUI) struct ContentView: View { @State var count = 0 var body: some View { VStack { Text("Count: \(count)") .font(.largeTitle) Spacer() .frame(height: 20) Button(action: { self.count += 1 }, label: { Text("Increment") }) } } }
16. ϘλϯΛԡ͢ͱ1૿͑Δը໘ (Flutter) class CounterApp extends StatefulWidget { @override _CounterAppState createState() => _CounterAppState(); } class _CounterAppState extends State<CounterApp> { int _count = 0; @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ Text('Count: $_count', style: Theme.of(context).textTheme.headline5), SizedBox(height: 20), FlatButton( child: Text('Increment'), onPressed: () => setState(() => _count++), ) ], ), ); } } ͪΐͬͱίʔυྔଟ͘ݟ͑·͕͢ɺ εχϖοτͰࣗಈੜ੒͞ΕΔͷͰهड़ྔ͸ಉ͘͡Β͍
17. ϘλϯΛԡ͢ͱ1૿͑Δը໘ (Flutter) class _CounterAppState extends State<CounterApp> { int _count = 0; @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ Text('Count: $_count', style: Theme.of(context).textTheme.headline5), SizedBox(height: 20), FlatButton( child: Text('Increment'), onPressed: () => setState(() => _count++), ) ], ), ); } } ࣗಈੜ੒෦෼ΛΧοτͯ͠ຊ࣭ͷΈʹ͢Δͱ͜Μͳײ͡
18. ϘλϯΛԡ͢ͱ1૿͑Δը໘ (Flutter | SwiftUI) ࣅͨΑ͏ͳײ֮Ͱॻ͚·͢ class _CounterAppState extends State<CounterApp> { int _count = 0; @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ Text('Count: $_count', ɹɹ style: Theme.of(context).textTheme.headline5), SizedBox(height: 20), FlatButton( child: Text('Increment'), onPressed: () => setState(() => _count++), ) ], ), ); } } struct ContentView: View { @State var count = 0 var body: some View { VStack { Text("Count: \(count)") .font(.largeTitle) Spacer() .frame(height: 20) Button(action: { self.count += 1 }, label: { Text("Increment") }) } } }
19. Flutterͷྑ͍ͱ͜Ζ (vs SwiftUI)
20. Hot Reload͕ "ͪΌΜͱ" ࢖͑Δ • ⌘+SΛԡ͢ͱอଘ͞ΕࣗಈͰView͕ߋ৽͞ΕΔ • γϛϡϨʔλͰ΋࣮ػͰ΋࢖͑Δ • ϓϩδΣΫτ͕େ͖ͯ͘΋൓ө·Ͱ1ඵ͘Β͍ • Ϧϩʔυલͷঢ়ଶ͕࢒Δ
21. Hot Reload͕ "ͪΌΜͱ" ࢖͑Δ • ⌘+SΛԡ͢ͱอଘ͞ΕࣗಈͰView͕ߋ৽͞ΕΔ • γϛϡϨʔλͰ΋࣮ػͰ΋࢖͑Δ • ϓϩδΣΫτ͕େ͖ͯ͘΋൓ө·Ͱ1ඵ͘Β͍ • Ϧϩʔυલͷঢ়ଶ͕࢒Δ SwiftUIͷϓϨϏϡʔ͸ίϯϙʔωϯτ୯Ґ͕جຊͰ͕͢ɺ Flutter͸σόοάϏϧυதͷΞϓϦΛಈతʹॻ͖׵͑Δײ֮
22. SwiftUIΑΓॊೈ • ϨΠΞ΢τͰ࣮ݱͰ͖ͳ͍έʔε͸΄΅ͳͦ͞͏ • ଍Γͳ͍ػೳΛิ͏খ͞ͳϥΠϒϥϦ͕ଟ͍ • ։ൃαΠΫϧ͕ૣ͘ɺ͙͢ʹ௚Δ
23. SwiftUIΑΓॊೈ • ϨΠΞ΢τͰ࣮ݱͰ͖ͳ͍έʔε͸΄΅ͳͦ͞͏ • ଍Γͳ͍ػೳΛิ͏খ͞ͳϥΠϒϥϦ͕ଟ͍ • ։ൃαΠΫϧ͕ૣ͘ɺ͙͢ʹ௚Δ • FlutterͷϑϨʔϜϫʔΫଆ΋Dart෦෼͸ ΞϓϦͷσόοά࣌ʹϒϨʔΫϙΠϯτΛஔ͍ͯ σόοάͰ͖ΔʂͷͰमਖ਼ͷෑډ͕௿͍ (௚ͤΔਓ͕ଟ͍)
24. AndroidͰ΋ಈ͘ʂʂʂ
25. ωΠςΟϒͷػೳ͸Ͳ͏͢Δͷʁ
26. ωΠςΟϒػೳͷݺͼग़͠ํ PlatformView PlatformChannel UIViewΛ࢖ͬͯiOSͷ࢓૊ΈͰUIΛಈ͔͠ɺ දࣔ݁ՌΛSkiaʹૹͬͯϨϯμϦϯά͢Δɻ →ωΠςΟϒͷViewΛFlutterͷWidget಺ʹ૊ΈࠐΊΔ ωΠςΟϒͰػೳΛ࣮૷͠ɺDart͔Βݺͼग़͢࢓૊Έɻ ૬ޓʹσʔλͷ΍ΓऔΓ͕Ͱ͖Δ (σʔλܕͷ੍ݶ͸͋Δ) ͲͪΒ΋Swift /Kotlin Ͱॻ͚Δʂ
27. ωΠςΟϒΞϓϦʹFlutterΛຒΊࠐΉํ๏΋͋Δ Add to App ɾCocoaPodsͰFlutterΞϓϦΛऔΓࠐΉ ɾίϚϯυͰFrameworkԽͯ͠औΓࠐΉ ɾpodspecͰFrameworkԽΛCocoaPodsʹ·͔ͤͯऔΓࠐΉ IUUQTqVUUFSEFWEPDTEFWFMPQNFOUBEEUPBQQ ͳͲͷํ๏ͰطଘͷωΠςΟϒΞϓϦʹ FlutterΛ෦෼ಋೖ͢Δ͜ͱ΋Ͱ͖·͢ɻ (FlutterͷUI͸1ຕͷViewControllerͱͯ͠औΓѻ͑Δ)
28. SwiftUIͷํ͕ྑ͍෦෼
29. SwiftUIͷྑ͍ͱ͜Ζ ϝιουνΣʔϯ (modifier) ʹΑΔViewͷΧελϚΠζ͸ ೖΕࢠΛݮΒͤͯಡΈ΍͍͢ɻ (౰ͨΓલͰ͕͢)ωΠςΟϒͷػೳΛ͔ΜͨΜʹσόοάͰ͖Δɻ Swift͸ຊ౰ʹྑ͍ݴޠɻ Text("WWDC") .padding() .border(Color.red, width: 3) Container( decoration: BoxDecoration( border: Border.all(color: Colors.red, width: 3), ), padding: const EdgeInsets.all(8), child: Text("WWDC"), ) Container( decoration: BoxDecoration( border: Border.all(color: Colors.red, width: 3), ), child: Padding( padding: const EdgeInsets.all(8), child: Text("WWDC"), ), ), ωετΛݮΒͨ͢ΊʹpaddingΛ Ҿ਺ͰࢦఆͰ͖ΔWidget΋͋Δ
30. ͜Ε͔Β࢝·ΔWWDCʹ ظ଴͢Δ͜ͱ
31. Apple͞Μ͓ئ͍͠·͢ʂ ɾHot ReloadͷਐԽʹظ଴ʂ ɹɹɾσόοάϏϧυͰಈ͔ͯ͠ΔΞϓϦΛ ɹɹɹঢ়ଶΛ࢒ͭͭ͠ॻ͖׵͍͑ͨ ɾViewͷΧελϚΠζੑΛߴͯ͘͠΄͍͠ʂ ɹɹɾཪʹ͍ΔUIKit΍AppKitͷViewʹ৮ΕΔ࢓૊ΈͰ΋ྑ͍Ͱ͢ ɾWebͰಈ͘Α͏ʹͯ͠΄͍͠ʂ(ຊ౰͸Androidαϙʔτͯ͠΄͍͚͠Ͳ᩵୔͸ݴ͍·ͤΜ) ɹɹɾHTML / CSS / JSΛexport͢Δػೳཉ͍͠ IUUQTqVUUFSEFWEPDTEFWFMPQNFOUUPPMTEFWUPPMTJOTQFDUPS
32. ·ͱΊ
33. ·ͱΊ • Flutter͸͔ͳΓΑ͘Ͱ͖͍ͯͯɺ࣮༻తɻ • ݱঢ়Ͱ͸SwiftUI/UIKitΑΓ΋"ѹ౗త"ʹ շదʹॻ͚Δɻ • Ͱ΋Swiftࣗମ΍SwiftUIͷઃܭ͸ັྗతʂ • ͜Ε͔Β࢝·ΔWWDCͰͷSwiftUIͷਐԽʹظ଴