FlutterKaigi2021

2021年11月29日と30日に開催されたFlutterKaigi 2021の2日目セッションFlutterにUIのマイクロサービス開発を導入し、圧倒的なDXを実現しよう！ の発表資料です。

・Flutterの状態管理とViewの更新
・FlutterでPluginを駆使して高速に開発する
・"デザインシステム"の過度な一般化とその対応について
・flutter_auth_ui

Transcript

1. FlutterʹUIϚΠΫϩαʔϏε։ൃΛಋೖ͠ɺ 
 ѹ౗తͳDXΛ࣮ݱ͠Α͏ʂ Koji Wakamiya(@koji-1009) / FlutterKaigi 2021
2. ࣗݾ঺հ • Koji Wakamiya • @koji-1009(GitHub) • Flutter/Android/iOS • Tech lead(mobile client/Studyplus, inc.)
3. ࣗݾ঺հ • Flutterͷঢ়ଶ؅ཧͱViewͷߋ৽ • FlutterͰPluginΛۦ࢖ͯ͠ߴ଎ʹ։ൃ͢Δ • "σβΠϯγεςϜ"ͷա౓ͳҰൠԽͱͦͷରԠʹ͍ͭͯ • fl utter_auth_ui(pub.dev)
4. Studyplus, inc. • ֶशه࿥؅ཧΞϓϦ Studyplus • ࢀߟॻαϒεΫΞϓϦ Porto
5. Studyplus, inc. • Studyplus • Kotlin or Swift + Add-to-App(Dart) • Porto • Dart
6. FlutterͰ࠷ߴͷDX
7. ͳͥDX(Developer Experience)? • ΞϓϦέʔγϣϯ͕େ͖͘ͳͬͨ࣌ͷ։ൃମݧΛߟ͍͑ͨ • FlutterΛ࠾༻͢Δ͜ͱͷϝϦοτΛߋʹ੔ཧ͍ͨ͠
8. FlutterͷDX • ҰൠʹޠΒΕ͍ͯΔ΋ͷ • એݴతUI • Hot Reload • ϚϧνϓϥοτϑΥʔϜ
9. FlutterͷDX • ҰൠʹޠΒΕ͍ͯͳ͍΋ͷ • σϑΝΫτελϯμʔυͷগͳ͞ • ഁյతͳมߋͷଟ͞ • εέʔϧͰ͖Δ։ൃख๏
10. FlutterͷDX • ҰൠʹޠΒΕ͍ͯͳ͍΋ͷ • σϑΝΫτελϯμʔυͷগͳ͞ • ഁյతͳมߋͷଟ͞ • εέʔϧͰ͖Δ։ൃख๏
11. Agenda • લ൒ɿFlutterͷ։ൃΛߟ͑Δ • ϚΠΫϩαʔϏε • FlutterͱFlutter Package&Plugin • Package&PluginͱGit Repository
12. Agenda • ޙ൒ɿ࣮૷αϯϓϧʹΑΔߟ࡯ • ࣮૷ྫ • ։ൃͷਐΊํ • ෼ׂʹ͍ͭͯͷߟ࡯
13. Flutterͷ։ൃΛߟ͑Δ FlutterͰͲ͏͍ͬͨ։ൃΛ͢Δͱ৺஍Α͍ͷ͔
14. ৺஍Α͍։ൃͷఆٛ • मਖ਼΍ػೳ։ൃ͕༰қ • ϦϦʔε͕༰қ • ΤϯδχΞͷࢀՃ͕༰қ
15. ࡞੒௚ޙͷΞϓϦέʔγϣϯ • मਖ਼΍ػೳ։ൃ͕༰қ • ϦϦʔε͕༰қ • ΤϯδχΞͷࢀՃ͕༰қ
16. ػೳ։ൃ͕௕͘ଓ͍ͨΞϓϦέʔγϣϯ • मਖ਼΍ػೳ։ൃ͕༰қʁ • ϦϦʔε͕༰қʁ • ΤϯδχΞͷࢀՃ͕༰қʁ
17. ௕͘ଓ͍ͨΞϓϦέʔγϣϯͷݕ౼ • ෳ਺ϓϥοτϑΥʔϜରԠ • ଟػೳͳΞϓϦέʔγϣϯ
18. ҭͬͨΞϓϦέʔγϣϯͷݕ౼ • ෳ਺ϓϥοτϑΥʔϜରԠ • ଟػೳͳΞϓϦέʔγϣϯ
19. ෳ਺ϓϥοτϑΥʔϜͷ՝୊ • ϦϦʔεαΠΫϧ • ετΞ৹ࠪͷ༗ແ΍௕͞ͳͲ • ϓϥοτϑΥʔϜݻ༗ͷ࣮૷ • iOSͷAppClips΍AndroidͷSlicesͳͲ
20. ෳ਺ϓϥοτϑΥʔϜͷ՝୊ • ରԠϓϥοτϑΥʔϜ͕૿͑Δͨͼʹݕ౼͕ඞཁ • Flutterͷ࢓૊Έతʹղܾ͕೉͍͠ • ରԠϓϥοτϑΥʔϜ͝ͱʹ෼ׂͰ͖Δ࢓૊Έ͕ඞཁ
21. ҭͬͨΞϓϦέʔγϣϯͷݕ౼ • ෳ਺ϓϥοτϑΥʔϜରԠ • ଟػೳͳΞϓϦέʔγϣϯ
22. ଟػೳΞϓϦέʔγϣϯͷͭΒ͞ • ཁ݅ͷෳࡶੑ͕ίʔυʹ൓ө͞Εͯ͠·͏ • ॲཧ͕ෳࡶʹͳΔ • ίʔυྔ͕େ͖͘ͳΔ
23. ଟػೳΞϓϦέʔγϣϯͷͭΒ͞ • ը໘ભҠ͕ෳࡶʹͳΓɺ։ൃதͷը໘͕දࣔ͠ʹ͘͘ͳΔ • UIͷදࣔ৚݅Λ੔͑Δͷ͕೉͘͠ͳΔ • ڞ௨͢ΔWidgetͱͦ͏Ͱ͸ͳ͍Widgetͷ൑அ͕೉͘͠ͳΔ
24. ҭͬͨΞϓϦέʔγϣϯͱ޲͖߹͏ • Presentation Domain Separation • ΞϓϦέʔγϣϯΛద੾ʹ෼ׂ͢Δ • ෼ׂͨ͠ίʔυΛ؅ཧ͠΍͍͢ঢ়ଶʹอͭ • νʔϜʹ߹Θͤͨ؀ڥΛ࡞Δ
25. ϚΠΫϩαʔϏε
26. ϚΠΫϩαʔϏε(microservice) • ϚΠΫϩαʔϏεͱ͸ɺΞϓϦέʔγϣϯ։ൃͷख๏·ͨ͸ ΞʔΩςΫνϟɻΞϓϦέʔγϣϯͷߏ੒ཁૉΛಠཱͨ͠αʔ Ϗε܈(ϚΠΫϩαʔϏε)΁෼͚ɺ࿈ܞͤ͞Δख๏Ͱ͢ɻ • https://www.redhat.com/ja/topics/microservices
27. ϚΠΫϩαʔϏεͷߟ࡯ • मਖ਼΍ػೳ։ൃ͕༰қ • ϦϦʔε͕༰қ • ΤϯδχΞͷࢀՃ͕༰қ
28. मਖ਼΍ػೳ։ൃ͕༰қ • ґଘؔ܎͕੔ཧ͞ΕΔ • Өڹ͕ݶఆత͔Ͳ͏͔͕Θ͔Δ • αʔϏε୯ମͰ΋ಈ࡞νΣοΫ͕Մೳ
29. ϦϦʔε͕༰қ • αʔϏε୯ମͰϦϦʔεͷੋඇΛ൑ఆͰ͖Δ • αʔϏε୯ମͰස౓Λ؅ཧͰ͖Δ • αʔϏεΛ౷߹͢Δଆͱ੾Γ཭ͤΔ • ։ൃϦϦʔεͱࢢ৔ϦϦʔε
30. ΤϯδχΞͷࢀՃ͕༰қ • ࠷ॳ͔ΒFlutterͷશͯΛ֮͑ͳͯ͘ྑ͍ • ୲౰͢ΔػೳɺൣғΛߜΔ͜ͱ͕Ͱ͖Δ • ϑϨʔϜϫʔΫʹஈ֊తʹ׳ΕΔ͜ͱ͕Ͱ͖Δ • Pure DartͳLogic͔Β୲౰͢ΔͳͲ
31. FlutterͰϚΠΫϩαʔϏε։ൃ͸Մೳ͔ʁ • ΞϓϦέʔγϣϯ͔ΒϚΠΫϩαʔϏεΛநग़͢Δ • ΞϓϦέʔγϣϯͷLogicΛಠཱͤ͞Δ • ΞϓϦέʔγϣϯͷWidgetΛಠཱͤ͞Δ • ίʔυϕʔεΛಠཱͨ͠୯ҐͰѻ͏
32. FlutterͱFlutter Package&Plugin
33. Flutterͷίʔυ෼ྨ • Pure Dart • freezed, riverpod • Flutter Widget • gap, in fi nite_scroll_pagenation • Method Channel • fi rebase_auth, shared_preferences
34. FlutterΞϓϦͷ෼ׂํ๏ • Flutter Application • fl utter create —template app • Dart(Flutter) Package • fl utter create —template package • Method Channel (Plugin) • fl utter create —template plugin
35. FlutterΞϓϦͷ෼ׂํ๏ • ΞϓϦέʔγϣϯͱͯ͠ߏ੒͍ͨ͠ • Flutter Application • ϩδοΫɺදࣔͰ෼ׂ͍ͨ͠ • Dart(Flutter) Package • ϓϥοτϑΥʔϜ͝ͱͷ࣮૷Λ͍ͨ͠ • Method Channel (Plugin)
36. Package&PluginͱGit Repository
37. FlutterͷPluginͷ؅ཧ • pub.dev • Privateͳ؀ڥͰར༻Ͱ͖Δpub.dev͸ͳ͍ • GitHub Packages͸DartʹະରԠ(2021.11ݱࡏ) • PrivateͳPluginΛ഑෍͢Δ؀ڥ͕ඞཁ
38. FlutterͷPluginͷ؅ཧ • Flutter͸Git RepositoryΛ׆༻Մೳ • pubspec.yamlʹgitͱͯ͠௥Ճ • Branch΍TagΛࢦఆ͢Δ͜ͱ΋Մೳ • https://dart.dev/tools/pub/dependencies
39. Git RepositoryͷϝϦοτ • BranchΛ෼͚Δ͜ͱͰɺෳ਺ػೳΛฒߦͯ͠։ൃͰ͖Δ • Git TagΛར༻ͨ͠ɺػೳͷόʔδϣχϯά͕Ͱ͖Δ • Git Repository΁ͷΞΫηεݖݶΛస༻Ͱ͖Δ
40. Git RepositoryͷσϝϦοτ • Pluginͷґଘؔ܎ղܾʹ੍໿͕͋Δ • ʮΑΓ৽͍͠ʯόʔδϣϯͷਪҠ͕ಈ࡞͠ͳ͍ • Git Repository΁ͷΞΫηεʹ޻෉͕ඞཁʹͳΔ͜ͱ͕͋Δ • GitHub ActionsͰར༻͢ΔࡍʹSSH Keyͷઃఆ͕ඞཁͳͲ
41. ࣮ݱͰ͖Δͷʁ
42. ࣮૷αϯϓϧʹΑΔߟ࡯ ϚΠΫϩαʔϏε։ൃΛͲͷΑ͏ʹಋೖ͢Δ͔
43. ࣮૷ྫ
44. ࣮૷αϯϓϧ • 4ͭͷPackageͰߏ੒͞ΕΔApplication • খن໛ͳΞϓϦͷͨΊɺ෼ׂ͠ͳ͍ํ͕։ൃ଎౓͸଎͍ • ։ൃ͕ਐΜͩ࣌ɺ֦ு͠΍͍͔͢Ͳ͏͔ͷࢀߟʹ • https://github.com/koji-1009/kaigi_project_2021
45. ࣮૷αϯϓϧ • Application • kaigi_project_2021 • Package • kaigi_plugin_a_2021 => Theme • kaigi_plugin_b_2021 => HomePage • kaigi_plugin_c_2021 => ScreenName • kaigi_plugin_d_2021 => ScreenCounter
46. ࣮૷αϯϓϧ(࣮ߦ࣌) QSPKFDU@ QMVHJO@C QMVHJO@D QMVHJO@E QMVHJO@B
47. ࣮૷αϯϓϧ(࣮ߦ࣌) QSPKFDU@ )PNF1BHF 4DSFFO/BNF 4DSFFO$PVOUFS 5IFNF
48. ࣮૷αϯϓϧ(։ൃ࣌) )PNF1BHF 4DSFFO/BNF 4DSFFO$PVOUFS 5IFNF
49. ࣮૷αϯϓϧͷҙਤ • PackageͱApplicationͷؔ܎ੑΛදݱ • ApplicationͱPackageͷ྆ํ͕ɺPackageʹґଘ • Package͝ͱʹӨڹΛ༩͑Δൣғ͕ҟͳΔ • exampleΞϓϦέʔγϣϯʹΑΔPackageͷಈ࡞νΣοΫ
50. ։ൃͷਐΊํ
51. ߏ੒ • kaigi_project_2021 • apk΍ipaʹ౷߹ • ΞϓϦέʔγϣϯݻ༗ͷ࣮૷ͳͲ • ΞϓϦΞΠίϯͷઃఆ • URLεΩʔϚͷઃఆ
52. ߏ੒ • Theme(plugin_a) • ΞϓϦͷςʔϚWidget • LightThemeͱDarkThemeΛ഑෍ • ଞͷશͯͷUI Package͕ґଘ
53. ߏ੒ • HomePage(plugin_b) • plugin_cͱplugin_dΛ؅ཧ • pathͱrouteͷ౷߹
54. ߏ੒ • Screen(plugin_c, plugin_d) • Theme͸plugin_aΛ൓ө • ΞϓϦ಺ͷಠཱͨ͠Widget
55. ϦϦʔεͷ࢓ํ QSPKFDU@ QMVHJO@C QMVHJO@D QMVHJO@E QMVHJO@B 1.0.0 1.0.0 1.0.0 1.0.0 1.0.0
56. ϦϦʔεͷ࢓ํ QMVHJO@C QMVHJO@D QMVHJO@E QMVHJO@B feature/dark_theme 1.0.0 1.0.0 1.0.0
57. ϦϦʔεͷ࢓ํ QSPKFDU@ QMVHJO@C QMVHJO@D QMVHJO@E QMVHJO@B 1.1.0 1.0.0 1.0.0 1.0.0 1.1.0
58. ϦϦʔεͷ࢓ํ QSPKFDU@ QMVHJO@C QMVHJO@D QMVHJO@E QMVHJO@B 1.1.0 1.0.1 1.0.1 1.0.0 1.1.1
59. ϦϦʔεͷॊೈੑ • ApplicationͰऔΓࠐ·ͳ͚Ε͹ɺࢢ৔ʹϦϦʔε͞Εͳ͍ • pubspec.yamlʹࢦఆ͞ΕΔTag΍BranchͰίϯτϩʔϧ • ϦϙδτϦͷ࠷৽ΛݟΔɺΑ͏ͳࢦఆ΋Մೳ • mainΛ͋͑ͯࢦఆ͠ɺৗʹ࠷৽Λऔಘ͢ΔͳͲ
60. ෼ׂʹ͍ͭͯͷߟ࡯
61. ෼ׂ͢Δ΂͖αΠζ • ApplicationΛ෼ׂʹ͸ࡍݶ͕ͳ͍ • ʮ1 class=1 Packageʯ·Ͱ͍͘ͱ΍Γ͗͢ײ • ͨͩ͠Themeͷ৔߹͸ద੾ͳҹ৅ • ߋ৽ස౓͕ߴ͍΋ͷΛ෼ׂ͠ɺ௿͍΋ͷΛ·ͱΊΔ޻෉ͳͲ
62. ෼ׂ͢Δ΂͖αΠζ • ͜ΕҎ্෼ׂෆՄೳ • Theme Widget • Constants
63. ෼ׂ͢Δ΂͖αΠζ • ϏδωεϩδοΫ • ෳ਺ͷWidgetͰ࢖͍ճ͢৔߹ • ࢖͍·Θ͞ͳ͍ͷͰ͋Ε͹ɺWidgetͷதʹด͓ͯ͘͡ • PDS͕Ͱ͖͍ͯΕ͹ɺ੾Γ཭͠͸༰қ
64. ෼ׂ͢Δ΂͖αΠζ • Route • Package͝ͱʹRouteʹରԠ͢ΔPathΛఏڙʁ • ϓϥοτϑΥʔϜ͝ͱʹҟͳΔRouteΛ࣮ݱʁ • Navigator 2ͷϥούʔϥΠϒϥϦʹ΋ґଘ
65. ෼ׂ͢Δ΂͖αΠζ • έʔεόΠέʔε͕ͩɺ෦෼తʹ෼ׂΛࢼ͢͜ͱ͸Ͱ͖Δ • Add-to-AppͱFlutterΞϓϦͰWidgetΛڞ௨ʹ͢ΔͳͲ • Add-to-AppͰ௥Ճ͢ΔWidgetΛ෼ׂ͓ͯ͘͠ͱྑ͍ • ݕূ൛ΞϓϦέʔγϣϯΛAndroidͰ༻ҙ͠΍͍͢
66. ·ͱΊ
67. ຊηογϣϯͷఏҊ • FlutterͷϚΠΫϩαʔϏε։ൃΛఏҊ • ΞϓϦέʔγϣϯΛPackage&Pluginͷू߹ମͱΈͳ͢ • UIͱϩδοΫΛFlutter Package&Pluginʹ෼ׂ • PrivateͳGit RepositoryΛར༻
68. Thank you!