Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ややcomplexなBLoCへの対応

 ややcomplexなBLoCへの対応

"Flutter Meetup Tokyo #7"でのLT資料です。
https://flutter-jp.connpass.com/event/115645/

Hiroki Matsue

January 30, 2019
Tweet

More Decks by Hiroki Matsue

Other Decks in Programming

Transcript

  1. ΍΍complexͳBLoC΁ͷରԠ
    Hiroki Matsue
    Jan 30th, 2019
    Flutter Meetup Tokyo #7

    View Slide

  2. Hiroki Matsue (@macs_6)

    View Slide

  3. IIJmio޲͚ʮΈ͓εΠονʯ
    (Flutter੡)

    View Slide

  4. analysis͸࢝Ίʹઃఆ͠Α͏
    omit_local_variable_types༗ޮʹ͠·͠ΐ͏
    https://www.dartlang.org/guides/language/effective-dart/design#avoid-type-annotating-
    initialized-local-variables

    View Slide

  5. લճ͸Dart೉ಡԽͷ࿩

    View Slide

  6. ࠓճ͸BLoCͷ࿩

    View Slide

  7. BLoCͷ͓͞Β͍

    View Slide

  8. Business Logic
    Componentsύλʔϯ

    View Slide

  9. Google I/O '18: https://www.youtube.com/watch?
    v=RS36gBEp8OI

    View Slide

  10. Google I/O '18: https://www.youtube.com/watch?
    v=RS36gBEp8OI

    View Slide

  11. Google I/O '18: https://www.youtube.com/watch?
    v=RS36gBEp8OI

    View Slide

  12. ϓϩτλΠϓҎ߱ͷϑΣʔζ͸ɺBLoC
    ΍Reduxಋೖ͓ͯ͘͠ͱ҆৺

    View Slide

  13. ը໘1ͭʹBLoC1ͭͷγϯϓϧͳ
    ঢ়ଶ؅ཧͷ৔߹

    View Slide

  14. buttonͦΕͧΕʹLoading΍ErrorΛ
    දݱ͍ͨ͠
    (ΞΠςϜҰཡ͔Β1ͭΛ͓ؾʹೖΓɺΧʔυʹೖΕΔɺetc)

    View Slide

  15. ͜Μͳ࣌

    View Slide

  16. αϯϓϧ࣮૷Ͱͷ૝ఆσʔλߏ଄
    - ܖ໿1
    - sim1
    - sim2
    - ...
    - ܖ໿2
    - ...
    - ...

    View Slide

  17. ·ͣܖ໿ͱSIM2ͭͷBLoCΛܨ͙
    You should avoid having one BLoC as a parameter of another
    BLoC. Instead, plug only the required outputs to the applicable
    inputs. This helps avoid tight coupling.
    https://medium.com/flutter-io/build-reactive-mobile-apps-in-flutter-companion-
    article-13950959e381
    _bloc = SimBloc(widget.sim);
    // ܖ໿BLoCͷstreamΛSIMBLoC͕listen
    _subscription = widget.simsStream.listen(_bloc.sims.add);

    View Slide

  18. ܨ͍ͩΒ2ͭ໨ͷBLoC಺ʹࢦఆͨ͠
    SIMΛॲཧ͢ΔϩδοΫΛॻ͘

    View Slide

  19. class SimBloc {
    SimBloc(Sim sim) {
    _simController.stream
    .map((list) => list.firstWhere((s) => s == sim, orElse: () => null))
    .listen((sim) {
    if (sim == null) {
    log(errorMessage); // print log and send error to Sentry
    return;
    }
    _simSubject.add(SimState(
    switchingStatus: SimSwitchingStatus.fulfilled,
    isEnabled: sim.isEnabled,
    usage: sim.inMonthUsage(),
    ));
    ...

    View Slide

  20. ࢀߟ: filiph/[email protected]
    (ಛʹbloc_complexपΓ)

    View Slide

  21. BLoCಋೖͯ͠ྑ͔ͬͨ͜ͱ
    • ϘλϯͷΑ͏ͳ୯ҐͰͷঢ়ଶΛ؅ཧ͠΍͘͢ͳͬͨ
    • ςετ͕ॻ͖΍͘͢ͳͬͨ

    View Slide

  22. Έ͓εΠονɺੋඇ͝ར༻͍ͩ͘͞

    View Slide

  23. Thanks

    View Slide