SwiftUIと比較してみた時のFlutter

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

Transcript

1. SwiftUIͱൺֱͯ͠Έͨ࣌ͷFlutter
   ాதୡ໵ (@tattn)
   #wwdctokyo
   

   View Slide

2. ాத ୡ໵ / ͨͳͨͭ (@tattn)
   • Yahoo!ΧʔφϏ
   ←Yahoo!৐׵Ҋ಺
   • iOSΞϓϦΤϯδχΞ
   • ৽ٕज़ͷݕূ
   @tattn
   @tanakasan2525
   @tattn
   Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
   

   View Slide

3. όʔνϟϧLODGEͲ͏Ͱ͠ΐ͏͔ʁ
   https://note.com/lodge/n/nfa4a40c057b1
   3DϞσϥʔͱUnity࢖͍͕͍Ε͹ҙ֎ͱ؆୯ʹ࡞Ε·͢ʂ
   

   View Slide

4. SwiftUI࢖ͬͯΈ·͔ͨ͠ʁ
   YES NO
   (clusterͷΤϞʔγϣϯ Ͱ൓Ԡ͍ͩ͘͞)
   

   View Slide

5. ࠓͷSwiftUI͸·ͩͭΒΈ͕ଟ͍ʂ
   

   View Slide

6. ݸਓతʹSwiftUIͰ࡞͍ͬͯͨΞϓϦΛ
   FlutterʹҠߦͨ͠Γɺ
   ۀ຿Ͱ΋FlutterΛݕূͨ͠Γ͍ͯ͠·͢
   

   View Slide

7. WWDC20௚લͱͷ͜ͱͰ
   Flutterͱൺֱͭͭ͠
   SwiftUIͷਐԽʹظ଴͢ΔLTΛ͠·͢
   

   View Slide

8. Flutterͱ͸
   

   View Slide

9. Flutterͱ͸
   • GoogleʹΑͬͯ։ൃ͞ΕͨΦʔϓϯιʔεϞόΠϧΞϓϦSDK
   • ΫϩεϓϥοτϑΥʔϜ (iOS, Android, Web, macOS)
   • DartͰهड़͢Δ
   • ίϯϙʔωϯτࢦ޲ɺϗοτϦϩʔυͳͲͷ
   ࠓͲ͖ͷઃܭ΍ػೳ
   

   View Slide

10. Flutterͷ͘͠Έ
    

    View Slide

11. Flutterͷ಺෦
    https://flutter.dev/docs/resources/technical-overview
    ಠࣗͷϨϯμϦϯάΤϯδϯ(Skia) ͰUIViewʹඳը͠ɺUIΛදࣔ
    

    View Slide

12. ΈΜͳେ޷͖View Hierarchy
    FlutterViewController಺ͷFlutterViewʹશͯඳը͞Ε͍ͯΔ
    (ScrollView͸ݟ͑ͳ͍ͱ͜Ζʹ഑ஔ)
    ͪͳΈʹ.xcworkspace΋࡞ΒΕΔͷͰ
    ωΠςΟϒͷσόοά͸XcodeͰͰ͖Δ
    

    View Slide

13. ίʔυ࣮ߦͷ͘͠Έ
    ϦϦʔεϏϧυ
    Dartίʔυ
    ػցޠ
    ίϯύΠϧ
    σόοάϏϧυ ػցޠ+Dart
    ࣮ߦதʹඞཁͳ෦෼͚ͩίϯύΠϧ͞ΕΔ (JIT)
    →ϗοτϦϩʔυ͕ޮ͘
    ࣮ߦલʹશͯίϯύΠϧ͞ΕΔ(AOT)
    →ಈ࡞͕଎͍
    

    View Slide

14. FlutterͰͷUIͷ࡞Γํ
    (ϘλϯΛԡͨ͠Β1૿͑ΔΞϓϦ)
    

    View Slide

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")
    })
    }
    }
    }
    

    View Slide

16. ϘλϯΛԡ͢ͱ1૿͑Δը໘ (Flutter)
    class CounterApp extends StatefulWidget {
    @override
    _CounterAppState createState() => _CounterAppState();
    }
    class _CounterAppState extends State {
    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++),
    )
    ],
    ),
    );
    }
    }
    ͪΐͬͱίʔυྔଟ͘ݟ͑·͕͢ɺ
    εχϖοτͰࣗಈੜ੒͞ΕΔͷͰهड़ྔ͸ಉ͘͡Β͍
    

    View Slide

17. ϘλϯΛԡ͢ͱ1૿͑Δը໘ (Flutter)
    class _CounterAppState extends State {
    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++),
    )
    ],
    ),
    );
    }
    }
    ࣗಈੜ੒෦෼ΛΧοτͯ͠ຊ࣭ͷΈʹ͢Δͱ͜Μͳײ͡
    

    View Slide

18. ϘλϯΛԡ͢ͱ1૿͑Δը໘ (Flutter | SwiftUI)
    ࣅͨΑ͏ͳײ֮Ͱॻ͚·͢
    class _CounterAppState extends State {
    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")
    })
    }
    }
    }
    

    View Slide

19. Flutterͷྑ͍ͱ͜Ζ
    (vs SwiftUI)
    

    View Slide

20. Hot Reload͕ "ͪΌΜͱ" ࢖͑Δ
    • ⌘+SΛԡ͢ͱอଘ͞ΕࣗಈͰView͕ߋ৽͞ΕΔ
    • γϛϡϨʔλͰ΋࣮ػͰ΋࢖͑Δ
    • ϓϩδΣΫτ͕େ͖ͯ͘΋൓ө·Ͱ1ඵ͘Β͍
    • Ϧϩʔυલͷঢ়ଶ͕࢒Δ
    

    View Slide

21. Hot Reload͕ "ͪΌΜͱ" ࢖͑Δ
    • ⌘+SΛԡ͢ͱอଘ͞ΕࣗಈͰView͕ߋ৽͞ΕΔ
    • γϛϡϨʔλͰ΋࣮ػͰ΋࢖͑Δ
    • ϓϩδΣΫτ͕େ͖ͯ͘΋൓ө·Ͱ1ඵ͘Β͍
    • Ϧϩʔυલͷঢ়ଶ͕࢒Δ
    SwiftUIͷϓϨϏϡʔ͸ίϯϙʔωϯτ୯Ґ͕جຊͰ͕͢ɺ
    Flutter͸σόοάϏϧυதͷΞϓϦΛಈతʹॻ͖׵͑Δײ֮
    

    View Slide

22. SwiftUIΑΓॊೈ
    • ϨΠΞ΢τͰ࣮ݱͰ͖ͳ͍έʔε͸΄΅ͳͦ͞͏
    • ଍Γͳ͍ػೳΛิ͏খ͞ͳϥΠϒϥϦ͕ଟ͍
    • ։ൃαΠΫϧ͕ૣ͘ɺ͙͢ʹ௚Δ
    

    View Slide

23. SwiftUIΑΓॊೈ
    • ϨΠΞ΢τͰ࣮ݱͰ͖ͳ͍έʔε͸΄΅ͳͦ͞͏
    • ଍Γͳ͍ػೳΛิ͏খ͞ͳϥΠϒϥϦ͕ଟ͍
    • ։ൃαΠΫϧ͕ૣ͘ɺ͙͢ʹ௚Δ
    • FlutterͷϑϨʔϜϫʔΫଆ΋Dart෦෼͸
    ΞϓϦͷσόοά࣌ʹϒϨʔΫϙΠϯτΛஔ͍ͯ
    σόοάͰ͖ΔʂͷͰमਖ਼ͷෑډ͕௿͍ (௚ͤΔਓ͕ଟ͍)
    

    View Slide

24. AndroidͰ΋ಈ͘ʂʂʂ
    

    View Slide

25. ωΠςΟϒͷػೳ͸Ͳ͏͢Δͷʁ
    

    View Slide

26. ωΠςΟϒػೳͷݺͼग़͠ํ
    PlatformView
    PlatformChannel
    UIViewΛ࢖ͬͯiOSͷ࢓૊ΈͰUIΛಈ͔͠ɺ
    දࣔ݁ՌΛSkiaʹૹͬͯϨϯμϦϯά͢Δɻ
    →ωΠςΟϒͷViewΛFlutterͷWidget಺ʹ૊ΈࠐΊΔ
    ωΠςΟϒͰػೳΛ࣮૷͠ɺDart͔Βݺͼग़͢࢓૊Έɻ
    ૬ޓʹσʔλͷ΍ΓऔΓ͕Ͱ͖Δ (σʔλܕͷ੍ݶ͸͋Δ)
    ͲͪΒ΋Swift /Kotlin Ͱॻ͚Δʂ
    

    View Slide

27. ωΠςΟϒΞϓϦʹFlutterΛຒΊࠐΉํ๏΋͋Δ
    Add to App
    ɾCocoaPodsͰFlutterΞϓϦΛऔΓࠐΉ
    ɾίϚϯυͰFrameworkԽͯ͠औΓࠐΉ
    ɾpodspecͰFrameworkԽΛCocoaPodsʹ·͔ͤͯऔΓࠐΉ
    IUUQTqVUUFSEFWEPDTEFWFMPQNFOUBEEUPBQQ
    ͳͲͷํ๏ͰطଘͷωΠςΟϒΞϓϦʹ
    FlutterΛ෦෼ಋೖ͢Δ͜ͱ΋Ͱ͖·͢ɻ
    (FlutterͷUI͸1ຕͷViewControllerͱͯ͠औΓѻ͑Δ)
    

    View Slide

28. SwiftUIͷํ͕ྑ͍෦෼
    

    View Slide

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΋͋Δ
    

    View Slide

30. ͜Ε͔Β࢝·ΔWWDCʹ
    ظ଴͢Δ͜ͱ
    

    View Slide

31. Apple͞Μ͓ئ͍͠·͢ʂ
    ɾHot ReloadͷਐԽʹظ଴ʂ
    ɹɹɾσόοάϏϧυͰಈ͔ͯ͠ΔΞϓϦΛ
    ɹɹɹঢ়ଶΛ࢒ͭͭ͠ॻ͖׵͍͑ͨ
    ɾViewͷΧελϚΠζੑΛߴͯ͘͠΄͍͠ʂ
    ɹɹɾཪʹ͍ΔUIKit΍AppKitͷViewʹ৮ΕΔ࢓૊ΈͰ΋ྑ͍Ͱ͢
    ɾWebͰಈ͘Α͏ʹͯ͠΄͍͠ʂ(ຊ౰͸Androidαϙʔτͯ͠΄͍͚͠Ͳ᩵୔͸ݴ͍·ͤΜ)
    ɹɹɾHTML / CSS / JSΛexport͢Δػೳཉ͍͠
    IUUQTqVUUFSEFWEPDTEFWFMPQNFOUUPPMTEFWUPPMTJOTQFDUPS
    

    View Slide

32. ·ͱΊ
    

    View Slide

33. ·ͱΊ
    • Flutter͸͔ͳΓΑ͘Ͱ͖͍ͯͯɺ࣮༻తɻ
    • ݱঢ়Ͱ͸SwiftUI/UIKitΑΓ΋"ѹ౗త"ʹ
    շదʹॻ͚Δɻ
    • Ͱ΋Swiftࣗମ΍SwiftUIͷઃܭ͸ັྗతʂ
    • ͜Ε͔Β࢝·ΔWWDCͰͷSwiftUIͷਐԽʹظ଴
    

    View Slide