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
Atomic DesignをFlutterでやってみた
Search
つっちー
December 10, 2019
Programming
7
1.9k
Atomic DesignをFlutterでやってみた
つっちー
December 10, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
AIエージェント開発、DevOps and LLMOps
ymd65536
1
330
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
8
3.1k
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
12
6.4k
コンテキストエンジニアリング Cursor編
kinopeee
1
690
TDD 実践ミニトーク
contour_gara
0
130
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
240
学習を成果に繋げるための個人開発の考え方 〜 「学習のための個人開発」のすすめ / personal project for leaning
panda_program
1
110
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
200
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
1
260
tool ディレクティブを導入してみた感想
sgash708
1
150
実践!App Intents対応
yuukiw00w
1
330
ワープロって実は計算機で
pepepper
2
1.4k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Embracing the Ebb and Flow
colly
87
4.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Six Lessons from altMBA
skipperchong
28
4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Site-Speed That Sticks
csswizardry
10
780
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Transcript
ATOMIC DESIGN Λ FLUTTER Ͱ ͬͯΈͨ
ࣗݾհ ϓϩϑΟʔϧ ͭͬͪʔ FlutterͰͭͬͨ͘ओͳΞϓϦ ‣ ֶੜׂ͚࣌ؒཧΞϓϦ ʮͭ͘Δʯ ‣ ςχεΠϕϯτˍۭ͖ίʔτݕࡧΞϓϦ ʮςχεϕΞʯ
‣ ࣾձਓ2 ‣ גࣜձࣾhirundo CEO
ATOMIC DESIGN ATOMIC DESIGN Page (ը໘) Organism(৫ମ) Molecule(ࢠ) Atom(ݪࢠ) ‣
WidgetͷΓ͚ํͷҰͭ ‣ WidgetΛ࠶ར༻͘͢͠࡞ΕΔ
BLOC BLOCͷઃܭ ‣ GLOBAL BLOC ‣ ೝূॲཧͳͲ ‣ UI BLOC
‣ UIͷঢ়ଶΛอ࣋͢Δ PAGE ORGANISMS MOLECULES ATOMS GLOBAL BLOC UI BLOC UI BLOC AtomsͱMoleculesUI BLoCʹґଘ͞ ͤͳ͍Α͏ʹ͢Δ
ISSUE ͳͥ͜ͷઃܭʁ ‣ Atoms, Molecules͕UI BLoCґଘ͢ΔͱɺଞͷUIͰѻ͍ ͮΒ͍ͷͰBLoCʹґଘͤͨ͘͞ͳ͍ ‣ Organismsػೳ͝ͱऔΓճ͍ͨ͠ ‣
͓ؾʹೖΓ ‣ ભҠઌ PAGE ORGANISMS MOLECULES ATOMS GLOBA L UI BLOC UI BLOC
ISSUE Ͱ͋Δ ‣ ൖ ‣ UI BLoCͩͱProvider ͷྑ͕͞׆͔͖͠Εͳ ͍ ‣
ཧ͕େม ‣ ଞͷUIݻ༗ͷઃఆ͕Ͳ ΜͲΜೖͬͯ͘Δ PAGE ORGANISMS MOLECULES ATOMS GLOBAL BLOC UI BLOC UI BLOC
SOLUTION ղܾࡦ ࠶ར༻ΛఘΊΔ
SOLUTION ͭ·Γ... ‣ Flutterͷྑ͍ͱ͜ΖUI͕؆୯ʹૉૣ࣮͘Ͱ͖Δ͜ͱ ‣ ߴʹநԽ͞ΕͨͷΑΓ୯७Ͱͳํ͕Α͍ ‣ શʹ࠶ར༻͠ͳ͍ͱ͍͏͜ͱͰͳ͘ɺOrganismsϨϕ ϧͰ࠶ར༻Ͱ͖ΔΑ͏ʹ͍͍͔ͭͬͯ͘
SOLUTION ·ͱΊ ‣ Atomic DesignWidgetΛ͖Ε͍ʹཧͰ͖Δ ‣ ݪີʹ࠶ར༻ੑΛ֬อ͠Α͏ͱ͢ΔͱFlutterͷྑ͞Λࣦ͏