Flutter Bloc 을 제품개발에 야무지게 적용하기

Slide 1

Slide 1 text

Flutter Bloc을 제품 개발에 야무지게 적용하기 최정연, LINE / ABC Studio

Slide 2

Slide 2 text

https://github.com/hohoins/flutter_bloc_abc_studio

Slide 3

Slide 3 text

https://www.inflearn.com/courses?s=%EC%83%88%EC%B0%A8%EC%9B%90

Slide 4

Slide 4 text

LINE ABC Studio Flutter App 개발 데마에칸 (일본 No.1 푸드 딜리버리) https://demae-can.com/

Slide 5

Slide 5 text

Consumer Manager Merchant Retail Driver Merchant Driver Yahoo Quick Mart

Slide 6

Slide 6 text

목차 1. Bloc을 선택한 이유 2. 일회성 동작 처리 3. 코드 작성 피로도 줄이기 4. widget build 최적화 5. Bloc test 개선하기

Slide 7

Slide 7 text

1. Bloc을 선택한 이유

Slide 8

Slide 8 text

리뉴얼 + 다양한 기능 추가 예정됨 프로덕트 규모 커짐 개발자 수 증가 보다 효과적 구조 고민 https://techblog.lycorp.co.jp/ko/how-to-ux-research-and-renewal-for-overseas-users

Slide 9

Slide 9 text

비즈니스 로직 분리 용이 높은 인지도 (유지보수⇧, 참고자료⇧) bloc_test 용이 규모가 커진 앱에 적합하다고 판단 https://engineering.linecorp.com/ko/blog/flutter-architecture-getx-bloc-provider

Slide 10

Slide 10 text

2. 일회성 동작 처리

Slide 11

Slide 11 text

일회성 동작 ???

Slide 12

Slide 12 text

스낵바, 토스트 메시지, 다이얼로그 다음 화면으로 이동, 등등 일회성 동작 ???

Slide 13

Slide 13 text

스낵바 같이 만들어 봅시다

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

https://bloclibrary.dev/naming-conventions/

Slide 16

Slide 16 text

https://bloclibrary.dev/naming-conventions/

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

스낵바 간단하네요?

Slide 22

Slide 22 text

하지만... 문제가 있습니다

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

반복적 실행 문제 발생 ‘+’를 눌렀는데 스낵바는 왜 보입니까?

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

status: initial counterA: 0 counterB: 0 counterC: 0

Slide 27

Slide 27 text

status: initial counterA: 0 counterB: 0 counterC: 0 onTap LoadData()

Slide 28

Slide 28 text

status: initial counterA: 0 counterB: 0 counterC: 0 onTap LoadData() status: success counterA: 0 counterB: 0 counterC: 0

Slide 29

Slide 29 text

status: initial counterA: 0 counterB: 0 counterC: 0 onTap LoadData() status: success counterA: 0 counterB: 0 counterC: 0 onTap IncrementA()

Slide 30

Slide 30 text

status: initial counterA: 0 counterB: 0 counterC: 0 onTap LoadData() status: success counterA: 0 counterB: 0 counterC: 0 status: success counterA: 1 counterB: 0 counterC: 0 onTap IncrementA()

Slide 31

Slide 31 text

status: initial counterA: 0 counterB: 0 counterC: 0 onTap LoadData() status: success counterA: 0 counterB: 0 counterC: 0 status: success counterA: 1 counterB: 0 counterC: 0 onTap IncrementA() onTap IncrementA()

Slide 32

Slide 32 text

status: initial counterA: 0 counterB: 0 counterC: 0 onTap LoadData() status: success counterA: 0 counterB: 0 counterC: 0 status: success counterA: 1 counterB: 0 counterC: 0 status: success counterA: 2 counterB: 0 counterC: 0 onTap IncrementA() onTap IncrementA()

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

반복 문제 해결하려면 success가 아닌 status로 변경 필요

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

지금의 설계로는 해결이 어렵습니다

Slide 37

Slide 37 text

다이얼로그 다음 화면 이전 화면

Slide 38

Slide 38 text

다이얼로그 다음 화면 이전 화면

Slide 39

Slide 39 text

다음 화면 이전 화면

Slide 40

Slide 40 text

이전 화면

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

논리적 충돌

Slide 43

Slide 43 text

불필요한 data

Slide 44

Slide 44 text

emit 호출 시 반복적 실행 status enum 논리적 충돌 state class 불필요한 data

Slide 45

Slide 45 text

이전 화면 다음 화면 화면을 그리는 데이 터 일회성 동작 데이터

Slide 46

Slide 46 text

화면을 그리는 데이 터 이전 화면 다음 화면 일회성 동작 데이터

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

class Empty

Slide 49

Slide 49 text

class ShowDialog String dialogMessage class Empty

Slide 50

Slide 50 text

class ShowDialog String dialogMessage class GoToPrevPage int prevPageData class GoToNextPage int nextPageData class Empty class ShowSnackBar

Slide 51

Slide 51 text

화면을 그리는 데이터 일회성 동작 데이터 중첩된 클래스로 구분

Slide 52

Slide 52 text

살짝 복잡해 보이는데요 코드는 어떻게 합니까

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

논리적 충돌 해 결

Slide 57

Slide 57 text

논리적 충돌 해 결

Slide 58

Slide 58 text

불필요한 data 해 결

Slide 59

Slide 59 text

불필요한 data 해 결

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

반복적 실행 해결

Slide 62

Slide 62 text

반복적 실행 해결 논리적 충돌 해결 불필요한 data 해결

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

그런데... 코드가 길어져서 코드 작성이 부담스럽습니다

Slide 66

Slide 66 text

3. 코드 작성 피로도 줄이기

Slide 67

Slide 67 text

작성할 최소한의 코드 파일 3개 60줄 1200자

Slide 68

Slide 68 text

IntelliJ IDEA: Live Templates VS Code: Snippets

Slide 69

Slide 69 text

Visual Studio Code

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

Snippets 작성 완료 !!! 잘 되는지 확인해 봅시다

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

이렇게 좋은 것은 반드시 팀원들과 공유!!!

Slide 78

Slide 78 text

https://github.com/hohoins/flutter_bloc_abc_studio/tree/main/code_snippets Snippets mac 파일 경로 ~/Library/Application Support/Code/User/snippets/

Slide 79

Slide 79 text

템플릿 처리 1석 3조 코딩 피로도 감소 일관된 코딩 컨벤션 작업 속도 향상

Slide 80

Slide 80 text

IntelliJ IDEA Android Studio Settings> Editor> Live Templates

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

File> Manage> IDE Settings> Export Settings File> Manage> IDE Settings> Import Setting Live templates(schemes) 선택

Slide 84

Slide 84 text

팀원들과 공유하세요 1석 3조 코딩 피로도 감소 일관된 코딩 컨벤션 작업 속도 향상 https://github.com/hohoins/flutter_bloc_abc_studio/tree/main/live_templates

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

state는 정리되었습니다 UI 최적화를 해봅시다

Slide 87

Slide 87 text

4. widget build 최적화

Slide 88

Slide 88 text

State가 변경되면 대부분의 widget 다시 build 되는 문제

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

원인을 찾아봅시다

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

참조하는 값이 변경될 때만 build 하고 싶습니다

Slide 94

Slide 94 text

https://bloclibrary.dev/flutter-bloc-concepts/#blocselector

Slide 95

Slide 95 text

https://bloclibrary.dev/flutter-bloc-concepts/#blocselector

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

값이 1개가 아니면 BlocSelector 적용이 어렵네요

Slide 100

Slide 100 text

https://bloclibrary.dev/flutter-bloc-concepts/#blocbuilder

Slide 101

Slide 101 text

https://bloclibrary.dev/flutter-bloc-concepts/#blocbuilder

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

이제 잘 되겠지요?

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

아직 더 개선 가능합니다 !!!

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

유지보수가 어려운 중첩된 조건문

Slide 109

Slide 109 text

state 전체 접근이 가능해 bug 발생 가능성 내포

Slide 110

Slide 110 text

유지보수 어려운 조건문 State 노출로 bug 발생 가능성 내포

Slide 111

Slide 111 text

그래서 BlocSelector2 … BlocSelector6 만들었습니다

Slide 112

Slide 112 text

https://github.com/hohoins/flutter_bloc_abc_studio/blob/main/lib/common/bloc_selector.dart

Slide 113

Slide 113 text

https://github.com/hohoins/flutter_bloc_abc_studio/blob/main/lib/common/bloc_selector.dart

Slide 114

Slide 114 text

BlocSelector3 적용해 봅시다

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

유지보수가 어려운 중첩된 조건문 해결

Slide 118

Slide 118 text

state 전체 접근이 가능해 bug 발생 가능성 내포 해결

Slide 119

Slide 119 text

유지보수 어려운 조건문 해결 State 노출로 bug 발생 가능성 내포 해결

Slide 120

Slide 120 text

아무리 그래도... 2 ~ 6은 조금 어색한데요 BlocSelector2 BlocSelector3 BlocSelector4 BlocSelector5 BlocSelector6

Slide 121

Slide 121 text

https://pub.dev/documentation/provider/latest/provider/provider-library.html

Slide 122

Slide 122 text

widget build 최적화 완료! 마무리로 테스트 코드 작성~

Slide 123