Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Atomic Designは「マルチ」で真価を発揮する

1,191 views

Published on

WaterCell Tech Night #1で喋ったやつです

Published in: Technology
  • Be the first to comment

Atomic Designは「マルチ」で真価を発揮する

  1. 1. Atomic Design @Nkzn 2018.11.9 WCI Tech Night #1
  2. 2. • Atomic Design Atomic Design • Atoms Molecules Organisms • Pages Template • React Native React Native for Web 
 https://watercelldev.hatenablog.jp/entry/2018/07/18/122604
  3. 3. Atomic Design
  4. 4.
  5. 5. Atomic Design
  6. 6. Atomic Design
  7. 7. 2
  8. 8. Atomic Design
  9. 9. • Organisms • Molecules • Atoms Pages Templates
  10. 10. MOTTAINAI
  11. 11. Atomic Design Organisms
  12. 12. Pages Templates
  13. 13. A
  14. 14. 7 10
  15. 15. Web
  16. 16.
  17. 17.
  18. 18. History React URL
  19. 19. • • React Navigation • • React Router
  20. 20. A
  21. 21. B
  22. 22. Pages Templates
  23. 23. 7 10
  24. 24. Template
  25. 25. Template const MobileTemplate = (props) => ( <View> <View style={/* */}> {props.renderHeader()} </View> <View style={/* */}> {props.renderContent()} </View> </View> );
  26. 26. 7 Template const Tab7Template = (props) => ( <View> <View style={/* */}> {props.renderHeader()} </View> <View style={/* 7 */}> {props.renderLeft()} </View> <View style={/* 7 */}> {props.renderRight()} </View> </View> );
  27. 27. 10 Template const Tab10Template = (props) => ( <View> <View style={/* */}> {props.renderHeader()} </View> <View style={/* 10 */}> {props.renderLeft()} </View> <View style={/* 10 */}> {props.renderRight()} </View> </View> );
  28. 28. Page import { Header, Menu } from "./organisms"; const HogeMobilePage = (props) => ( <View style={{flex: 1}}> <MobileTemplate renderHeader={() => ( <Header navigateA={() => {/* */}}/> )} renderContent={() => ( <Menu navigateB={() => {/* */}}/> )}/> </View> );
  29. 29. Page import { Header, Menu, Content } from "./organisms"; const HogeTablet7Page = (props) => ( <View style={{flex: 1}}> <Tab7Template renderHeader={() => ( <Header navigateA={() => {/* */}}/> )} renderLeft={() => ( <Menu navigateB={() => {/* */}}/> )} renderRight={() => ( <Content navigateC={() => {/* */}}/> )}/> </View> );
  30. 30. Page import { Header, Menu, Content } from "./organisms"; const HogeTablet10Page = (props) => ( <View style={{flex: 1}}> <Tab10Template renderHeader={() => ( <Header navigateA={() => {/* */}}/> )} renderLeft={() => ( <Menu navigateB={() => {/* */}}/> )} renderRight={() => ( <Content navigateC={() => {/* */}}/> )}/> </View> );
  31. 31. Template
  32. 32. Pages
  33. 33. const HogePage = (props) => ( <View style={{flex: 1}}> {/* Template */} </View> );
  34. 34. Pages
  35. 35. Pages • Template • Template Redux • Pages
  36. 36. Web
  37. 37. Pages
  38. 38. Pages props const HogeMobileXXXPage = (props) => ( <View style={{flex: 1}}> <MobileTemplate renderHeader={() => ( <Header navigateA={() => {/* */}}/> )} renderContent={() => ( <Menu navigateB={() => {/* */}}/> )}/> </View> );
  39. 39. Web const HogeMobileWebPage = (props) => ( <View style={{flex: 1}}> <MobileTemplate renderHeader={() => ( <Header navigateA={() => {/* */}}/> )} renderContent={() => ( <Menu navigateB={() => { props.history.push("/content"); }}/> )}/> </View> );
  40. 40. const HogeMobileNativePage = (props) => ( <View style={{flex: 1}}> <MobileTemplate renderHeader={() => ( <Header navigateA={() => {/* */}}/> )} renderContent={() => ( <Menu navigateB={() => { props.navigation.navigate("ContentPage"); }}/> )}/> </View> );
  41. 41. Pages • • • Pages
  42. 42. Pages • Web • Template Web •
  43. 43. Pages
  44. 44. Atomic Design

×