About Flutter Architecture

About Flutter Architecture

Transcript

1. Daichi Furiya Flutter ΞϓϦΞʔΩςΫνϟྫ #gdg_yamanashi
2. About me Daichi Furiya (߱໼ େ஍) Google Developers Expert CyberAgent, Inc. @wasabeef_jp wasabeef    • ࢁསࢢग़਎ (ؠԼԹઘͷۙ͘)
3. Agenda • Flutter ͷݱࡏ஍ • ΞϓϦΞʔΩςΫνϟྫ
4. Flutter 2023 ೥ͷ Flutter/Dart Ξοϓσʔτ 1 ݄ 5 ݄ 8 ݄ 11 ݄ Flutter 3.7 Flutter 3.13 Flutter 3.10 Flutter 3.16 Dart 2.19 3.0 alpha Dart 3 Dart 3.2 Dart 3.1 Dart
5. Flutter 2024 ೥ͷॳΊͷΞοϓσʔτ 2 ݄ 5݄ 8 ݄ 11 ݄ Flutter 3.16 Dart Dart 3.3.0
6. Apps made with Flutter 500k+ apps created 2m+ developers 48k+ Flutter & Dart packages 1k+ Every day, new apps
7. Flutter apps in production - Japan
8. ΞʔΩςΫνϟ ΫϥΠΞϯτΞϓϦͷΞʔΩςΫνϟΛߟ͑Δ ্ͰҰ൪ॏཁʹߟ͍͑ͯΔ͜ͱ͸ঢ়ଶ؅ཧΛͲ ͏ѻ͏͔ͩͱࢥ͍ͬͯ·͢ɻ ※ جຊతʹΞʔΩςΫνϟ͸ɺੈͷதతʹ͸΋ͬ ͱ͍͍ͱݴΘΕΔ΋ͷ͕͋ͬͨͱͯ͠΋νʔϜ ͱͯ͠߹ҙ͕औΕ͍ͯΔঢ়ଶͰ͋Ε͹ਖ਼ղͰ͢ɻ
9. ΞʔΩςΫνϟ MVC Redux
10. Web ͷੈքΛࢀߟʹ͢Δ Flutter ͷੈքͰ͸ɺະͩʹσϑΝΫτελϯμʔυͷΑ͏ͳΞʔΩςΫνϟ͸ແ͍ͷͰྺ ࢙΋௕͍΢Σϒͷੈք͔Βߟ͑ํΛ༌ೖͯ͠ΈΔͷ͸Ͳ͏͔
11. TanStack Query/SWR import useSWR from 'swr' function Profile() { const { data, error, isLoading } = useSWR('/api/user', fetcher) if (error) return <div>failed to load </ div> if (isLoading) return <div>loading ...</ div> return <div>hello {data.name}! </ div> } SWR ͷྫ ӈͷΑ͏ʹ UI ίϯϙʔωϯτͰ௚઀ αʔόϦΫΤετΛʢΩϟογϡͷ֬ ೝʣͯ͠ UI ͱͯ͠දࣔ͢ΔྫͰ͢ɻ ͜ΕʹΑΓίϯϙʔωϯτͷϙʔλϏ ϦςΟੑΛ্͛ͯऔΓճ͠Λ͠΍͘͢ ͢ΔͨΊͷํ๏͕૿͑ͯདྷ͍ͯ·͢ɻ
12. ঢ়ଶ؅ཧ άϩʔόϧεςʔτ جຊతʹ͸αʔόΛάϩʔόϧ εςʔτͱͯ͠ଊ͍͑ͯΔͷͰ ϦΫΤετσʔλͷΩϟογϡ ͕΄ͱΜͲղܾͯ͘͠ΕΔ͸ͣ Ͱ͢ɻ ͨͩ͠ɺෳ਺ͷεΫϦʔϯͳͲͰ ࢖ΘΕΔΑ͏ͳೝূτʔΫϯͳͲ ʹ͸ Riverpod Ͱ؅ཧ͍ͯ͠·͢ɻ ϩʔΧϧεςʔτ εΫϦʔϯɺίϯϙʔωϯτ಺ Ͱ׬݁͢Δσʔλͷ؅ཧํ๏Ͱ ͢ɻΑ͋͘ΔྫͰ UI ʹදࣔ͢ ΔϩʔςΟϯάͷঢ়ଶͩͬͨ ΓɺϘλϯͷ༗ޮແޮͷ੾Γସ ͑༻ͩͬͨΓ͢Δ΋ͷ͸ Flutter Hooks Ͱ؅ཧ͍ͯ͠·͢ɻ αʔόϦΫΤετͱΩϟογϡ GraphQL Flutter Λར༻͍ͯ͠ ·͢ɻGraphQL Flutter ͸Ϩε ϙϯεσʔλͷΩϟογϡ΋͠ ͯ͘Ε·͢ɻ React Hooks ࢀߟ Recoil ࢀߟ TanStack/SWR ࢀߟ
13. ϩʔΧϧεςʔτ Flutter Hooks
14. ϩʔΧϧεςʔτ Flutter Hooks ྫͷΑ͏ʹ͜ͷ΢ΟδΣοτ಺Ͱ ׬݁͢ΔΑ͏ͳσʔλͷ৔߹͸ Flutter Hooks ͷ useState(...) Λར༻ ͯ͠؅ཧ͍ͯ͠·͢ɻ ͦΕҎ֎ʹ΋ useContext ΍ useCallback ͳͲ΋Α͘ར༻͍ͯ͠ ·͢ɻ @override Widget build(BuildContext context) { final isLoading = useState(false); // ... Կ͔ return Scaffold( body: Stack( children: [ const Text('Body'), if (isLoading.value) const Center( child: CircularProgressIndicator(), ), ], ), ); }
15. άϩʔόϧεςʔτ Riverpod
16. άϩʔόϧεςʔτ جຊతʹ͸αʔόΛάϩʔόϧεςʔ τͱͯ͠ଊ͍͑ͯΔͷͰϦΫΤετ σʔλͷΩϟογϡ͕΄ͱΜͲղܾ͠ ͯ͘ΕΔ͸ͣͰ͢ɻ ͨͩ͠ɺෳ਺ͷεΫϦʔϯͳͲͰ࢖ΘΕ ΔΑ͏ͳೝূτʔΫϯͳͲʹ͸ Riverpod Ͱ؅ཧ͍ͯ͠·͢ɻ part 'id_token_state.g.dart'; typedef IdToken = String; @Riverpod(keepAlive: true, dependencies: [firebaseAuth]) class IdTokenState extends _$IdTokenState { @override IdToken build() { return ''; } / / ॳظ஋͸ۭ Future<void> fetch() async { final user = ref.watch(firebaseAuthProvider).currentUser; if (user == null) return; update(await user.getIdToken()); } void update(String token) { if (state != token) state = token; } } @override Widget build(BuildContext context) { final idToken = ref.watch(idTokenStateProvider); // ... Կ͔ }
17. αʔόϦΫΤετͱΩϟογϡ GraphQL
18. αʔόϦΫΤετͱΩϟογϡ αʔόϦΫΤετͱΩϟογϡ͸ GraphQL Flutter ͕୲ͬͯ΋Β͍ͬͯ· ͢ɻαʔόϦΫΤετʹඞཁͳ৘ใ ʢFirebase Auth ͷ Id Token ͳͲʣҎ֎ ͸جຊతʹάϩʔόϧεςʔτͱͯ͠͸ ࣋ͨͳ͍Α͏ʹ͍ͯ͠·͢ɻ ར༻ϥΠϒϥϦɿgraphql_flutterɺgraphql_codegen
19. GraphQL ͷઃܭʹ͍ͭͯ͸ Fragment Colocation Λجຊઃܭͱ͓ͯ͠ΓɺͦΕͧ ΕͷίϯϙʔωϯτͰඞཁͳσʔλ͸ Fragment ͱͯͦ͠ΕͧΕͰίϯϙʔωϯ τͱಉ༷ͷ৔ॴͰ .graphql ϑΝΠϧΛఆٛ ͍ͯ͠·͢ɻ Query ͸ը໘͔Βݺͼ·͢ɻ Home Screen User Component Feed Component query Home { user { ... UserParts } feed { ... FeedParts } } # Ϣʔβʔ৘ใ fragment UserParts on User { id } mutation CreateAccount { signUp { user { id } } } # ϑΟʔυ৘ใ fragment FeedParts on Feed { id title body }
20. GraphQL Flutter ʹ͸ Flutter Hooks Λར༻ ͨ͠ػೳΛఏڙ͍ͯ͠ΔͷͰɺΑΓ TanStack Query ͷΑ͏ͳ͜ͱΛΠϝʔδ Ͱ͖Δͱࢥ͍·͢ɻ final readRespositoriesResult = useQuery( QueryOptions( document: gql(readRepositories), variables: { 'nRepositories': 50 }, pollInterval: const Duration(seconds: 10), ), ); final result = readRespositoriesResult.result; if (result.hasException) { return Text(result.exception.toString()); } if (result.isLoading) { return const Text('Loading'); } List? repositories = result.data?['viewer']?['repositories']?['nodes']; if (repositories == null) { return const Text('No repositories'); } return ListView.builder( itemCount: repositories.length, itemBuilder: (context, index) { final repository = repositories[index]; return Text(repository['name'] ?? ''); });
21. σΟϨΫτϦߏ੒ શମͷσΟϨΫτϦߏ଄͸͜͏͍͏ܗͰ ఆ͍ٛͯ͠·͢ɻ࡞ΔʹͭΕͯۤ͘͠ͳͬ ͍ͯ͘Օॴ͸ਵ࣌ߟ͑௚͍ͯ͠·͢ɻ lib/ ├── data/ │ ├── network/ │ └── system/ ├── foundation/ │ ├── extension/ # ֦ுؔ਺ │ └── firebase/ │ ├── auth/ # Firebase Auth ؔ࿈ │ └── messaging/ # Firebase Messaging ؔ࿈ ├── gen/ # FlutterGen ͳͲҰ෦ͷࣗಈੜ੒ϑΝΠϧ ├── l10n/ # Localization ؔ࿈ ├── route/ # auto_route ؔ࿈ ├── state/ # άϩʔόϧͷঢ়ଶ؅ཧؔ࿈ ├── ui/ # UI ؔ࿈ͷϞδϡʔϧʢGraphQL ͸֤ը໘Ͱఆٛʣ │ ├── screen/ │ │ └── home/ │ │ ├── home_screen.dart # ը໘ │ │ ├── home_screen_e2e.yaml # Maestro ͷϑΝΠϧ │ │ ├── home_screen_vrt.dart # Visual Regression Test ͷϑΝΠϧ │ │ ├── hook/ # ը໘ݻ༗ͷ Hooks │ │ │ └── use_update_home.dart │ │ ├── component/ # ը໘ݻ༗ͷίϯϙʔωϯτ │ │ │ ├── home_card.dart │ │ │ └── home_card_fragment.dart # ίϯϙʔωϯτͷ GraphQL ϑΝΠϧ │ │ └── top │ │ ├── home_top_screen_e2e.yaml │ │ └── home_top_screen.dart │ ├── theme/ # άϩʔόϧςʔϚઃఆ │ │ ├── app_theme.dart │ │ └── app_text.dart │ ├── hook/ # ൚༻తͳ Hooks │ │ ├── use_debounce.dart │ │ ├── use_debounce_test.dart │ │ ├── use_sign_in.dart │ │ ├── use_sign_in_test.dart │ │ ├── use_sign_out.dart │ │ └── use_sign_out_test.dart │ └── component/ # ൚༻ UI ίϯϙʔωϯτ │ ├── fab/ │ └── text/ └── use_case/
22. Thank you ɹɹ wasabeef_jp ɹɹ wasabeef