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.7k
Atomic DesignをFlutterでやってみた
つっちー
December 10, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
Amazon Qを使ってIaCを触ろう!
maruto
0
420
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.8k
Arm移行タイムアタック
qnighy
0
340
subpath importsで始めるモック生活
10tera
0
330
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
Remix on Hono on Cloudflare Workers
yusukebe
1
310
最新TCAキャッチアップ
0si43
0
200
ローコードSaaSのUXを向上させるためのTypeScript
taro28
1
650
RubyLSPのマルチバイト文字対応
notfounds
0
120
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
290
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Writing Fast Ruby
sferik
627
61k
KATA
mclloyd
29
14k
Automating Front-end Workflow
addyosmani
1366
200k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
It's Worth the Effort
3n
183
27k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
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ͷྑ͞Λࣦ͏