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
380
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)
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
3
360
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
290
Yahoo!しごとカタログ 新しい境地を創るエンジニア募集!
lycorptech_jp
PRO
3
350
データグループにおけるフロントエンド開発
lycorptech_jp
PRO
2
340
Yahoo!知恵袋におけるフロントエンド開発
lycorptech_jp
PRO
0
360
"LINE Planet" and AI: Conversations with AI
lycorptech_jp
PRO
0
59
Seamless inventory management with AI
lycorptech_jp
PRO
0
35
AI Frontiers Revealed: Transforming LINE Shopping TW with LLM-Driven Product Attribute Extraction
lycorptech_jp
PRO
0
57
LINEヤフーの音声AIがもたらす未来:ASR/TTSと対話技術の新たな可能性 / LY Corporation's Speech AI Vision: Towards Realtime Spoken Dialogue through Advanced ASR and TTS
lycorptech_jp
PRO
0
64
Other Decks in Technology
See All in Technology
[MIRU25] NaiLIA: Multimodal Retrieval of Nail Designs Based on Dense Intent Descriptions
keio_smilab
PRO
1
170
LLMをツールからプラットフォームへ〜Ai Workforceの戦略〜 #BetAIDay
layerx
PRO
1
360
AIエージェントを支える設計
tkikuchi1002
12
2.8k
地域コミュニティへの「感謝」と「恩返し」 / 20250726jawsug-tochigi
kasacchiful
0
110
完璧を目指さない小さく始める信頼性向上
kakehashi
PRO
0
130
AI時代の経営、Bet AI Vision #BetAIDay
layerx
PRO
1
560
SAE J1939シミュレーション環境構築
daikiokazaki
1
200
AI コードレビューが面倒すぎるのでテスト駆動開発で解決しようとして読んだら、根本的に俺の勘違いだった
mutsumix
0
130
【CEDEC2025】『ウマ娘 プリティーダービー』における映像制作のさらなる高品質化へ!~ 豊富な素材出力と制作フローの改善を実現するツールについて~
cygames
PRO
0
130
[TechNight #91] Oracle Database 最新パフォーマンス分析手法
oracle4engineer
PRO
4
300
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
layerx
PRO
1
440
MCPに潜むセキュリティリスクを考えてみる
milix_m
2
950
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
860
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Why Our Code Smells
bkeepers
PRO
337
57k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Bash Introduction
62gerente
613
210k
GraphQLとの向き合い方2022年版
quramy
49
14k
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