BloC..? understand by like Android

Transcript

1. Copyright ⓒ rainist . All rights reserved BLoC..? 안드로이드스럽게 이해하기!. @omjoonkim, Rainist
3. 01 02 03 Index vs Android Implementation DI Navigation Stateless BLoC? Advanced✨ Deep Dive
4. BLoC? vs Android 01
5. Business Logic Component BLoC? 서비스의 Business Logic을 담은(책임을 가진) 객체 ୹୊ : https://www.slideshare.net/NaverEngineering/techcon-2019-mobile-android-model
6. BLoC? The BLoC Pattern has been designed by Paolo Soares and Cong Hui, from Google and first presented during the DartConf 2018 (January 23-24, 2018). ୹୊ : https://www.didierboelens.com/2018/08/reactive-programming---streams---bloc/
7. BLoC? ୹୊ : https://www.youtube.com/watch?v=PLHln7wHgPE
8. End
9. Business Logic Component Repository UI BLoC
10. Business Logic Component Repository UI BLoC View VieModel
11. BLoC is BLoC == ViewModel = true?
12. BLoC is BLoC == ViewModel = true?
13. 플랫폼 독립성. BLoC vs ViewModel
14. 플랫폼 독립성 ୹୊ : https://www.youtube.com/watch?v=PLHln7wHgPE
15. 플랫폼 독립성. BLoC vs ViewModel Kotlin, Java Dart Backend, Web, Etc..?
16. 플랫폼 독립성 - BLoC BLoC
17. 플랫폼 독립성 - ViewModel ViewModel Backend, Web, Etc..?
18. 플랫폼 독립성 - ViewModel ViewModel Backend, Web, Etc..?
19. BLoC is ViewModel == Presentation Logic ViewModel == Business Logic BLoC == Presentation Logic BLoC == Business Logic
20. BLoC is ViewModel == Presentation Logic ViewModel == Business Logic BLoC == Presentation Logic BLoC == Business Logic
21. Business Logic on CleanArchitecture UI
22. BLoC is . BLoC == Domain = true?
23. BLoC is UseCase? BLoC == Service(or UseCase) = true?
24. Component graph View VieModel Repository BLoC UI UseCase
25. Component graph View VieModel Repository BLoC UI UseCase
26. Deep Dive Implementation 02
27. Component - Normal BLoC UI Repository (Data)
28. Component - Redux ݂௼ : https://github.com/lzyy/bloc_redux
29. Component - Redux ݂௼ : https://github.com/lzyy/bloc_redux Implementation can be whatever you want!✨✨ BLoC UI
30. Business Logic Component Rule - BLoC 로직(서비스)이 담긴 객체 The BLoC Pattern has been designed by Paolo Soares and Cong Hui, from Google and first presented during the DartConf 2018 (January 23-24, 2018). https://www.youtube.com/watch?v=PLHln7wHgPE ୹୊ : https://www.didierboelens.com/2018/08/reactive-programming---streams---bloc/
31. Business Logic Component Rule - UI 로직(서비스)이 담긴 객체 The BLoC Pattern has been designed by Paolo Soares and Cong Hui, from Google and first presented during the DartConf 2018 (January 23-24, 2018). https://www.youtube.com/watch?v=PLHln7wHgPE ୹୊ : https://www.didierboelens.com/2018/08/reactive-programming---streams---bloc/
32. Component - Normal BLoC UI Repository (Data)
33. BLoC UI Repository (Data) Component - Normal
34. BLoC UI Repository (Data) Component - Normal
35. BLoC UI Repository (Data) Important thing is vs
36. On Android View VieModel Repository BLoC UI UseCase
37. On Android ୹୊ : https://www.slideshare.net/NaverEngineering/22efficient-and-testable-mvvm-pattern Rx Databidning LiveData +
38. On Flutter Repository BLoC UI Rx Rx Rx Rx Stream StreamBuilder Databinding Observable or Future with Acync Await
39. Stream Stream Observable Stream 단독 사용 가능(with StreamController). listen() 을 통해 Subscription하는 형태로 동작. Subject docs : https://api.dart.dev/stable/2.4.0/dart-async/Stream-class.html
40. Stream Stream Listen Subscription StreamController Add (Sink)
41. Stream -> Observable Observable Listen Subscription Subject Add (Sink) ଵҊ(ठۑ) : https://gdgkr.slack.com/archives/CAT0YEFEY/p1562064409012900
42. StreamBuilder @override Widget build(BuildContext context) => Scaffold( body: StreamBuilder( stream: bloc.state, builder: (context, AsyncSnapshot<HomeState> snapshot) => !snapshot.hasData || snapshot.data.loading ? Center(child: CircularProgressIndicator()) : _buildContentView(topPadding, snapshot.data.meetUps), ), bottomSheet: _buildBottomSheet(bottomPadding) )
43. StreamBuilder @override Widget build(BuildContext context) => Scaffold( body: StreamBuilder( stream: bloc.state, builder: (context, AsyncSnapshot<HomeState> snapshot) => !snapshot.hasData || snapshot.data.loading ? Center(child: CircularProgressIndicator()) : _buildContentView(topPadding, snapshot.data.meetUps), ), bottomSheet: _buildBottomSheet(bottomPadding) )
44. StreamBuilder @override Widget build(BuildContext context) => Scaffold( body: StreamBuilder( stream: bloc.state, builder: (context, AsyncSnapshot<HomeState> snapshot) => !snapshot.hasData || snapshot.data.loading ? Center(child: CircularProgressIndicator()) : _buildContentView(topPadding, snapshot.data.meetUps), ), bottomSheet: _buildBottomSheet(bottomPadding) )
45. StreamBuilder @override Widget build(BuildContext context) => Scaffold( body: StreamBuilder( stream: bloc.state, builder: (context, AsyncSnapshot<HomeState> snapshot) => !snapshot.hasData || snapshot.data.loading ? Center(child: CircularProgressIndicator()) : _buildContentView(topPadding, snapshot.data.meetUps), ), bottomSheet: _buildBottomSheet(bottomPadding) )
46. StreamBuilder @override Widget build(BuildContext context) => Scaffold( body: StreamBuilder( stream: bloc.state, builder: (context, AsyncSnapshot<HomeState> snapshot) => !snapshot.hasData || snapshot.data.loading ? Center(child: CircularProgressIndicator()) : _buildContentView(topPadding,snapshot.data.meetUps), ), bottomSheet: _buildBottomSheet(bottomPadding) )
47. 정리 vs Stream : Observable StreamBuilder with Stream : DataBinding with LiveData Rx ✨
48. Advanced ✨ DI Navigation Stateless 03
49. DI Advanced ✨ Navigation Stateless
50. Di Dependency Injection Inversion of Control Repository UI BLoC bloc repository something(api or xx) Maintainability and Testable
51. Di - On Android
52. Di - On Flutter Provider Inject.dart
53. Di - Provider 가장 기본적인? DI 방식. ଵҊ : https://pub.dev/packages/provider Package로도 지원. ୹୊ : https://medium.com/flutterpub/architect-your-flutter-project-using-bloc-pattern-part-2-d8dd1eca9ba5 InheritedWidget✨
54. Di - Inject.dart == Dagger ଵҊ : https://github.com/google/inject.dart Package로도 지원.
55. Navigation Navigation(Route) 코드의 위치. Android에서도 고민…. Build Context or App
56. Stateless 더 효율적으로 렌더링 할 수는 없을까? Output이 State하나일 경우 State가 변경되었을 때 모든 Widget이 다시 Build 된다. BLoC에 관점(플래폼 독립성)에서 가장 효율적인 렌더링 방법은..?
57. Cons BLoC Deep Dive Advanced ✨ Business Logic of Component Rx everywhere DI, Navigation, Stateless )
58. THANK YOU