BLoC Pattern Introduction with Swift

# TL;DL
BLoC is (Flutter発祥の)状態管理に関する軽量アーキテクチャパターン

# SeeAlso
- https://qiita.com/kabochapo/items/8738223894fb74f952d3
- https://medium.com/flutter-jp/bloc-provider-70e869b11b2f

Transcript

1. BLoC Pattern
   Introduction with Swift
   2019.01.20
   #shinjukult
   @to4iki
   1
   

   View Slide

2. Me
   • @to4iki
   • 
   • AbemaTV
   •
   ! ☕ ♨ $
   2
   

   View Slide

3. BLoC?
   3
   

   View Slide

4. Business Logic Component
   4
   

   View Slide

5. DartConf 2018
   Flutter / AngularDart – Code sharing, better together
   5
   

   View Slide

6. Google I/O '18
   Build reactive mobile apps with Flutter
   6
   

   View Slide

7. BLoC =
   (Flutterൃ঵ͷ)
   ঢ়ଶ؅ཧʹؔ͢Δ
   ΞʔΩςΫνϟύλʔϯ
   7
   

   View Slide

8. Motivation
   • Web (Angular Dart)ͱMobile (Flutter)ͰϏδωεϩδοΫͷ
   ίʔυΛڞ༗͍ͨ͠
   • ݴޠɾϓϥοτϑΥʔϜΛ໰Θͳ͍ঢ়ଶ؅ཧͷύλʔϯ͕ཉ
   ͍͠
   8
   

   View Slide

9. BLoC pattern layer design
   9
   

   View Slide

10. BLoC pattern layer design
    https://medium.com/flutterpub/architecting-your-flutter-project-bd04e144a8f1
    10
    

    View Slide

11. Guideline 1
    1. BLoCͷೖग़ྗΠϯλʔϑΣʔε͸͢΂ͯ Stream/Sink Ͱ͋
    Δ
    2. BLoCͷґଘ͸ඞͣ஫ೖՄೳͰɺ؀ڥʹґଘ͠ͳ͍
    3. BLoC಺ʹ؀ڥ͝ͱͷ৚݅෼ذ͸࣋ͨͳ͍
    4. Ҏ্ͷϧʔϧʹै͏ݶΓɺଞͷ࣮૷ΛͲ͏͢Δ͔͸໰Θͳ͍
    1 https://github.com/tenhobi/flashcards/issues/12#issuecomment-373922966
    11
    

    View Slide

12. TL;DL
    • ϏδωεϩδοΫΛίϯϙʔωϯτπϦʔͱผͷ৔ॴʹஔ͘
    • BLoCͷ֎෦΁ͷΠϯλʔϑΣʔε͸ Stream(Observable)
    12
    

    View Slide

13. https://www.youtube.com/watch?v=RS36gBEp8OI
    13
    

    View Slide

14. e.g. Dart
    class Bloc {
    final emailController = StreamController();
    // Add data to stream
    get changeEmail => emailController.sink.add;
    // Retrieve data from stream
    get email => emailController.stream;
    }
    void main() {
    final bloc = Bloc();
    bloc.email.listen((value) {
    print(value);
    });
    bloc.changeEmail("NEW EMAIL");
    }
    14
    

    View Slide

15. ͜Μ͚ͩ
    !
    ※ ΠϝʔδΛ௫ΉͨΊͷٖࣅίʔυͰ͢
    class Bloc {
    let input: Observer
    let output: Observable
    }
    15
    

    View Slide

16. e.g. Swift
    final class TaskBloc {
    /// input
    let addTask = PublishRelay()
    /// output
    var tasks: Observable<[Task]> { return _tasks.asObservable() }
    private let _tasks = BehaviorRelay<[Task]>(value: [])
    private let disposeBag = DisposeBag()
    init() {
    addTask
    .withLatestFrom(tasks) { ($0, $1) }
    .map { [$0] + $1 }
    .bind(to: _tasks)
    .disposed(by: disposeBag)
    }
    }
    16
    

    View Slide

17. e.g. Swift
    taskBlock.tasks
    .subscribe(onNext: { tasks in
    print(tasks)
    })
    .disposed(by: disposeBag)
    addButton.rx.tap
    .throttle(0.5, latest: false, scheduler: ConcurrentMainScheduler.instance)
    .map { Task(name: "task_01") }
    .bind(to: taskBlock.addTask)
    .disposed(by: disposeBag)
    17
    

    View Slide

18. Feature
    • BLoC͔Βͷσʔλͷऔಘ͸ Observable.subscribe
    • BLoC΁ͷσʔλͷૹ৴͸ Observer.next
    18
    

    View Slide

19. Feature
    • Components(View)͸Stream͔Βड͚औΔɾStreamʹσʔλΛ௥Ճ͢Δ͚ͩ
    • simple
    • MVVM, Flux, Reduxͱಉ͡
    19
    

    View Slide

20. Pros
    • ࣗ༝
    • ܰྔReduxతͳ
    • ଞͷBLoCΛड͚औΔ͜ͱ΋Մೳ
    • Streamͷ߹੒ʹΑΓදݱྗ͕ߴ͍
    Cons
    • Rxґଘ
    • Gࣾ
    20
    

    View Slide

21. and more..
    21
    

    View Slide

22. ෳ਺ίϯϙʔωϯτ͔ΒBLoCΛࢀর͍ͨ͠2
    • ֤ίϯϙʔωϯτ͔ΒBLoCΛΠϯελϯεԽ͢Δͱঢ়ଶ͕ڞ༗ग़དྷͳ͍
    • BLoCΛSingletonΠϯελϯεʹ͢Δ?
    !
    2 https://qiita.com/kabochapo/items/8738223894fb74f952d3
    22
    

    View Slide

23. InheritedWidget
    23
    

    View Slide

24. Flutter.widgets.InheritedWidget3
    Base class for widgets that efficiently propagate information down
    the tree.
    To obtain the nearest instance of a particular type of inherited
    widget from a build context, use
    BuildContext.inheritFromWidgetOfExactType.
    3 https://docs.flutter.io/flutter/widgets/InheritedWidget-class.html
    24
    

    View Slide

25. InheritedWidget
    • Provider extends InheritedWidget
    • BLoCʹΞΫηε͍ͨ͠Widget͕௚઀ܨ͕ΔͷͰ͸ͳ͘ɺProviderΛܦ༝͢Δ
    25
    

    View Slide

26. e.g. Flutter
    class BlocProvider extends InheritedWidget {
    BlocProvider({Key key, Widget child}) : super(key: key, child: child);
    Bloc get bloc => Bloc();
    @override
    bool updateShouldNotify(_) => true;
    // BlocProviderʹैଐ͢ΔWidgetͰ͜ͷϝιουΛ࢖͑͹BlocProviderͷΠϯελϯε͕ಘΒΕ
    // ͦΕΛ࢖ͬͯBlocͷΠϯελϯε΋ಘΒΕΔ
    static BlocProvider of(BuildContext context) {
    return (context.inheritFromWidgetOfExactType(BlocProvider) as BlocProvider);
    }
    }
    26
    

    View Slide

27. e.g. Swift
    TBD
    • context ͱ͍͏࢓૊Έ͕ͳ͍..
    • ୳ࡧͰ͖Μ(ແཧ΍ΓͳΒ͍͚Δ͕)
    • BlocProvider͸ϚετͰ͸ͳ͍ͱࢥ͏
    • SingletonͰྑ͍͔ͳ
    !
    • σʔλ૚͸ΞϓϦݻ༗Ͱอ࣋͢ΔͳͲ
    27
    

    View Slide

28. e.g. Swift
    ※ ΠϝʔδΛ௫ΉͨΊͷٖࣅίʔυͰ͢
    final class BlocProvider {
    let block: T
    static func of(_ view: UIView) -> TaskBloc {
    // Ҿ਺view͔Βଐ͢Δ `BLoC` Λ୳ࡧ͢Δ
    fatalError("implement")
    }
    }
    28
    

    View Slide

29. Conclusion
    • BLoCύλʔϯ͸ܰྔͳঢ়ଶ؅ཧͷख๏
    • ߦ͖ண͘ઌ͸MVVM, Flux, ReduxͳͲͷύλʔϯʹۙࣅͯ͠
    ͍͘ͱࢥ͏
    29
    

    View Slide

30. "ઃܭύλʔϯ͸࠶ݱੑͷ͋Δ໰୊ʹର͢Δڞ௨ͷղܾࡦ"4
    "ઃܭʹۜͷ஄ؙ͸ͳ͍͕ɺ
    ༷ʑͳύλʔϯΛ஌͍ͬͯΔ͜ͱͰۜͷ໋த཰͸্͛ΒΕΔ"
    4 iOSΞϓϦઃܭύλʔϯೖ໳: https://peaks.cc/books/iOS_architecture
    30
    

    View Slide

31. ֓೦Λ஌ͬͯɺख਺Λ૿΍͍ͯ͜͠͏
    31
    

    View Slide

32. Thanks
    32
    

    View Slide

33. SeeAlso
    • https://qiita.com/kabochapo/items/8738223894fb74f952d3
    • https://medium.com/flutter-jp/bloc-provider-70e869b11b2f
    33
    

    View Slide