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
LINEヤフーTech (LY Corporation Tech)
PRO
October 11, 2024
Technology
0
360
Flutter Bloc 을 제품개발에 야무지게 적용하기
Future 2024 행사에서 진행한 세션 발표자료입니다.
LINEヤフーTech (LY Corporation Tech)
PRO
October 11, 2024
Tweet
Share
More Decks by LINEヤフーTech (LY Corporation Tech)
See All by LINEヤフーTech (LY Corporation Tech)
"LINE Planet" and AI: Conversations with AI
lycorptech_jp
PRO
0
19
Seamless inventory management with AI
lycorptech_jp
PRO
0
12
AI Frontiers Revealed: Transforming LINE Shopping TW with LLM-Driven Product Attribute Extraction
lycorptech_jp
PRO
0
22
LINEヤフーの音声AIがもたらす未来:ASR/TTSと対話技術の新たな可能性 / LY Corporation's Speech AI Vision: Towards Realtime Spoken Dialogue through Advanced ASR and TTS
lycorptech_jp
PRO
0
25
「Yahoo!検索」におけるWebパフォーマンス改善の取り組み / Efforts to Improve Web Performance in "Yahoo! JAPAN Search"
lycorptech_jp
PRO
0
31
アクセシビリティ改善の実践:プロダクトにおける具体的な取り組みと課題 / Practices for Accessibility Improvement: Specific Efforts and Challenges in Products
lycorptech_jp
PRO
0
31
「PayPayゲートウェイ」におけるStorybook活用事例 / Introducing Storybook: Enhancing Development in "PayPay Gateway"
lycorptech_jp
PRO
0
16
数字が導く洞察:Webパフォーマンスとビジネス指標の相関を探る / Insights Driven by Numbers: Exploring the Correlation Between Web Performance and Business Metrics
lycorptech_jp
PRO
0
41
Speculation Rules APIを用いたページ・広告表示の高速化によるメディア・広告KPIの改善への取り組み / Efforts to Improve Media and Advertising KPIs by Speeding Up Page and Ad Display Using Speculation Rules API
lycorptech_jp
PRO
0
45
Other Decks in Technology
See All in Technology
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
380
Connect 100+を支える技術
kanyamaguc
0
150
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
5
590
モバイル界のMCPを考える
naoto33
0
360
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
370
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
310
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
510
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
0
480
OPENLOGI Company Profile
hr01
0
67k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
250
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
110
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
370
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Code Reviewing Like a Champion
maltzj
524
40k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Agile that works and the tools we love
rasmusluckow
329
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Site-Speed That Sticks
csswizardry
10
670
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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