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

1. Atomic Design
@Nkzn
2018.11.9 WCI Tech Night #1

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. Atomic Design

4. ※

21. Atomic Design

23. Atomic Design

24. 2

28. Atomic Design

29. • Organisms
• Molecules
• Atoms
Pages Templates

30. MOTTAINAI

31. Atomic Design
Organisms

32. Pages Templates

34. A

37. 7 10

39. Web

42. History
React URL

43. •
• React Navigation
•
• React Router

45. A

46. B

47. Pages Templates

48. 7 10

49. Template

52. Template
const MobileTemplate = (props) => (
<View>
<View style={/* */}>
{props.renderHeader()}
</View>
<View style={/* */}>
{props.renderContent()}
</View>
</View>
);

53. 7 Template
const Tab7Template = (props) => (
<View>
<View style={/* */}>
{props.renderHeader()}
</View>
<View style={/* 7 */}>
{props.renderLeft()}
</View>
<View style={/* 7 */}>
{props.renderRight()}
</View>
</View>
);

54. 10 Template
const Tab10Template = (props) => (
<View>
<View style={/* */}>
{props.renderHeader()}
</View>
<View style={/* 10 */}>
{props.renderLeft()}
</View>
<View style={/* 10 */}>
{props.renderRight()}
</View>
</View>
);

55. Page
import { Header, Menu } from "./organisms";
const HogeMobilePage = (props) => (
<View style={{flex: 1}}>
<MobileTemplate
renderHeader={() => (
<Header navigateA={() => {/* */}}/>
)}
renderContent={() => (
<Menu navigateB={() => {/* */}}/>
)}/>
</View>
);

56. 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>
);

57. 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>
);

58. Template

59. Pages

61. const HogePage = (props) => (
<View style={{flex: 1}}>
{/* Template */}
</View>
);

62. Pages

63. Pages
• Template
• Template Redux
•
Pages

64. Web

65. Pages

66. Pages
props
const HogeMobileXXXPage = (props) => (
<View style={{flex: 1}}>
<MobileTemplate
renderHeader={() => (
<Header navigateA={() => {/* */}}/>
)}
renderContent={() => (
<Menu navigateB={() => {/* */}}/>
)}/>
</View>
);

67. Web
const HogeMobileWebPage = (props) => (
<View style={{flex: 1}}>
<MobileTemplate
renderHeader={() => (
<Header navigateA={() => {/* */}}/>
)}
renderContent={() => (
<Menu navigateB={() => {
props.history.push("/content");
}}/>
)}/>
</View>
);

68. const HogeMobileNativePage = (props) => (
<View style={{flex: 1}}>
<MobileTemplate
renderHeader={() => (
<Header navigateA={() => {/* */}}/>
)}
renderContent={() => (
<Menu navigateB={() => {
props.navigation.navigate("ContentPage");
}}/>
)}/>
</View>
);

69. Pages
•
•
• Pages

70. Pages
• Web
• Template Web
•

71. Pages

72. Atomic Design