Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutter Bloc 을 제품개발에 야무지게 적용하기
Search
LY Corporation Tech
PRO
October 11, 2024
Technology
0
27
Flutter Bloc 을 제품개발에 야무지게 적용하기
Future 2024 행사에서 진행한 세션 발표자료입니다.
LY Corporation Tech
PRO
October 11, 2024
Tweet
Share
More Decks by LY Corporation Tech
See All by LY Corporation Tech
合併後のインフラ環境におけるアラートフローの問題点洗い出しと改善をした話
lycorptech_jp
PRO
0
16
はじめてのアクセシビリティ実践記
lycorptech_jp
PRO
2
77
Real World Ray
lycorptech_jp
PRO
1
35
アナリティクスエンジニアとその周辺の技術について
lycorptech_jp
PRO
1
58
풍성한 디자인 요청사항에 대응하기
lycorptech_jp
PRO
0
18
Flutter Web을 활용해 제품 개발 환경 개선하기
lycorptech_jp
PRO
0
51
テクニカルライターのチームで「目標」をどう決めたか / MVV for a Team of Technical Writers
lycorptech_jp
PRO
3
140
分析者起点の企画を成功させた連携面の工夫
lycorptech_jp
PRO
1
270
Causal Impactを用いたLINE Pay UIの効果検証とABテスト実施への貢献
lycorptech_jp
PRO
3
590
Other Decks in Technology
See All in Technology
KongによるAPIライフサイクル マネジメント
hashitokyo
1
140
エンジニア組織の成果を伝えたい!経営層や非エンジニア組織との会話、どうしてる? / How do you communicate with management and non-engineering teams?
kosukeaizawa
2
120
さくっと実践!Postmanを活用した高品質で持続可能なAPI管理
yokawasa
5
300
シェルとPerlの使い分け、 そういった思考の道具は、どこから来て、どこへゆくのか?v1.1.0
fmlorg
0
670
道具としてのGraphQLから見る用途や解決する課題
saboyutaka
0
100
Grafana エコシステムの活用事例 on ABEMA
tetsuya28
4
660
ADRを運用して3年経った僕らの現在地
onk
PRO
14
6.3k
Automated Tests Now and Future @ SQiP Workshop Special Lecture 2024
teyamagu
PRO
1
160
普通の Web エンジニアのための様相論理入門 #yapcjapan / YAPC Hakodate 2024
ytaka23
7
1.7k
クレジットカードを製造する技術
yutadayo
83
50k
多数のWebサービスをECS/Fargate構成で効率よく構築・運用するなら copilot-cli
interu
2
120
From LibreOffice to « La Suite » : providing civil servants with Free Software sovereign tools
bluehats
0
110
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Agile that works and the tools we love
rasmusluckow
327
21k
Statistics for Hackers
jakevdp
796
220k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Thoughts on Productivity
jonyablonski
67
4.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Into the Great Unknown - MozCon
thekraken
31
1.4k
Faster Mobile Websites
deanohume
304
30k
WebSockets: Embracing the real-time Web
robhawkes
59
7.4k
Raft: Consensus for Rubyists
vanstee
136
6.6k
What's new in Ruby 2.0
geeforr
341
31k
Transcript
Flutter Bloc을 제품 개발에 야무지게 적용하기 최정연, LINE / ABC
Studio
https://github.com/hohoins/flutter_bloc_abc_studio
https://www.inflearn.com/courses?s=%EC%83%88%EC%B0%A8%EC%9B%90
LINE ABC Studio Flutter App 개발 데마에칸 (일본 No.1 푸드
딜리버리) https://demae-can.com/
Consumer Manager Merchant Retail Driver Merchant Driver Yahoo Quick Mart
목차 1. Bloc을 선택한 이유 2. 일회성 동작 처리 3.
코드 작성 피로도 줄이기 4. widget build 최적화 5. Bloc test 개선하기
1. Bloc을 선택한 이유
리뉴얼 + 다양한 기능 추가 예정됨 프로덕트 규모 커짐 개발자
수 증가 보다 효과적 구조 고민 https://techblog.lycorp.co.jp/ko/how-to-ux-research-and-renewal-for-overseas-users
비즈니스 로직 분리 용이 높은 인지도 (유지보수⇧, 참고자료⇧) bloc_test 용이
규모가 커진 앱에 적합하다고 판단 https://engineering.linecorp.com/ko/blog/flutter-architecture-getx-bloc-provider
2. 일회성 동작 처리
일회성 동작 ???
스낵바, 토스트 메시지, 다이얼로그 다음 화면으로 이동, 등등 일회성 동작
???
스낵바 같이 만들어 봅시다
None
https://bloclibrary.dev/naming-conventions/
https://bloclibrary.dev/naming-conventions/
None
None
None
None
스낵바 간단하네요?
하지만... 문제가 있습니다
None
반복적 실행 문제 발생 ‘+’를 눌렀는데 스낵바는 왜 보입니까?
None
status: initial counterA: 0 counterB: 0 counterC: 0
status: initial counterA: 0 counterB: 0 counterC: 0 onTap LoadData()
status: initial counterA: 0 counterB: 0 counterC: 0 onTap LoadData()
status: success counterA: 0 counterB: 0 counterC: 0
status: initial counterA: 0 counterB: 0 counterC: 0 onTap LoadData()
status: success counterA: 0 counterB: 0 counterC: 0 onTap IncrementA()
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()
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()
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()
None
반복 문제 해결하려면 success가 아닌 status로 변경 필요
None
지금의 설계로는 해결이 어렵습니다
다이얼로그 다음 화면 이전 화면
다이얼로그 다음 화면 이전 화면
다음 화면 이전 화면
이전 화면
None
논리적 충돌
불필요한 data
emit 호출 시 반복적 실행 status enum 논리적 충돌 state
class 불필요한 data
이전 화면 다음 화면 화면을 그리는 데이 터 일회성 동작
데이터
화면을 그리는 데이 터 이전 화면 다음 화면 일회성 동작
데이터
None
class Empty
class ShowDialog String dialogMessage class Empty
class ShowDialog String dialogMessage class GoToPrevPage int prevPageData class GoToNextPage
int nextPageData class Empty class ShowSnackBar
화면을 그리는 데이터 일회성 동작 데이터 중첩된 클래스로 구분
살짝 복잡해 보이는데요 코드는 어떻게 합니까
None
None
None
논리적 충돌 해 결
논리적 충돌 해 결
불필요한 data 해 결
불필요한 data 해 결
None
반복적 실행 해결
반복적 실행 해결 논리적 충돌 해결 불필요한 data 해결
None
None
그런데... 코드가 길어져서 코드 작성이 부담스럽습니다
3. 코드 작성 피로도 줄이기
작성할 최소한의 코드 파일 3개 60줄 1200자
IntelliJ IDEA: Live Templates VS Code: Snippets
Visual Studio Code
None
None
None
None
None
Snippets 작성 완료 !!! 잘 되는지 확인해 봅시다
None
이렇게 좋은 것은 반드시 팀원들과 공유!!!
https://github.com/hohoins/flutter_bloc_abc_studio/tree/main/code_snippets Snippets mac 파일 경로 ~/Library/Application Support/Code/User/snippets/
템플릿 처리 1석 3조 코딩 피로도 감소 일관된 코딩 컨벤션
작업 속도 향상
IntelliJ IDEA Android Studio Settings> Editor> Live Templates
None
None
File> Manage> IDE Settings> Export Settings File> Manage> IDE Settings>
Import Setting Live templates(schemes) 선택
팀원들과 공유하세요 1석 3조 코딩 피로도 감소 일관된 코딩 컨벤션
작업 속도 향상 https://github.com/hohoins/flutter_bloc_abc_studio/tree/main/live_templates
None
state는 정리되었습니다 UI 최적화를 해봅시다
4. widget build 최적화
State가 변경되면 대부분의 widget 다시 build 되는 문제
None
원인을 찾아봅시다
None
None
참조하는 값이 변경될 때만 build 하고 싶습니다
https://bloclibrary.dev/flutter-bloc-concepts/#blocselector
https://bloclibrary.dev/flutter-bloc-concepts/#blocselector
None
None
None
값이 1개가 아니면 BlocSelector 적용이 어렵네요
https://bloclibrary.dev/flutter-bloc-concepts/#blocbuilder
https://bloclibrary.dev/flutter-bloc-concepts/#blocbuilder
None
None
이제 잘 되겠지요?
None
아직 더 개선 가능합니다 !!!
None
유지보수가 어려운 중첩된 조건문
state 전체 접근이 가능해 bug 발생 가능성 내포
유지보수 어려운 조건문 State 노출로 bug 발생 가능성 내포
그래서 BlocSelector2 … BlocSelector6 만들었습니다
https://github.com/hohoins/flutter_bloc_abc_studio/blob/main/lib/common/bloc_selector.dart
https://github.com/hohoins/flutter_bloc_abc_studio/blob/main/lib/common/bloc_selector.dart
BlocSelector3 적용해 봅시다
None
None
유지보수가 어려운 중첩된 조건문 해결
state 전체 접근이 가능해 bug 발생 가능성 내포 해결
유지보수 어려운 조건문 해결 State 노출로 bug 발생 가능성 내포
해결
아무리 그래도... 2 ~ 6은 조금 어색한데요 BlocSelector2 BlocSelector3 BlocSelector4
BlocSelector5 BlocSelector6
https://pub.dev/documentation/provider/latest/provider/provider-library.html
widget build 최적화 완료! 마무리로 테스트 코드 작성~
5. Bloc test 개선하기
https://pub.dev/packages/bloc_test
https://pub.dev/packages/bloc_test
https://pub.dev/packages/bloc_test
https://pub.dev/packages/bloc_test
https://pub.dev/packages/bloc_test
https://pub.dev/packages/bloc_test
더하기 테스트 해봅시다
None
None
None
None
API 호출 테스트
emit 1 loading emit 2 서버 데이터 처리 emit 3
success
None
None
None
None
테스트 성공!!!
테스트 코드 작성이 어려운 문제가 있네요
state 유지가 안 되는 문 제 수작업으로 처리
state 수정 ex) 멤버 변수명 변경
수정할 내용이 많습니다 state 수정 불리한 문제
state 유지가 안 되는 문제 state 수정 불리한 문제 해결해
봅시다
None
None
None
None
None
None
None
None
None
테스트할 값에만 집중 가능 state class 변화 대응이 좋음
state 유지가 안 되는 문제 해결 state 수정 불리한 문제
해결
소개해 드린 모든 내용은 데마에칸 MerchantApp 제품 개발에 적용된 내용입니다
도움이 되었으면 좋겠습니다
Bloc 야무지게 사용하시기를 바랍니다
감사합니다 Flutter Bloc을 제품 개발에 야무지게 적용하기 샘플 코드 깃허브
https://github.com/hohoins/flutter_bloc_abc_studio