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.

Storybook web-and-circleci

288 views

Published on

Efficiently develop mobile apps with React Native using storybook, react-native-web, and circle ci

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Storybook web-and-circleci

  1. 1. React Native WebとStorybookによるアプリケーション開発の効率化 @natural_clar RNstartup #2
  2. 2. 自己紹介 Jesse Katsumata CureApp React Nativeを使った治療アプリの開発 アメリカ人 Twitter: @natural_clar Github: @Naturalclar
  3. 3. storybookとは
  4. 4. Componentを表示して、見た目が期待通りであるかテストする為のツー ル React, React-Native, Vue等いろんなライブラリで使える
  5. 5. react-native版のstorybook @storybook/react-native
  6. 6. RN版Storybookの利点 実機での見た目の確認が行える Expoアプリとしてデザイナーチームに共有できる
  7. 7. RN版Storybookの欠点 エミュレータの立ち上げに時間がかかる Portを取られるので実行中、アプリの方の動作確認が行えない
  8. 8. もっと効率良く行えないか?
  9. 9. react-native-web
  10. 10. react-native特有の<View>や<Text>等のコンポーネントをWebで表示さ せる Twitter Liteで使用されている
  11. 11. react-nativeのstorybookをwebで表示させる
  12. 12. .storybookにwebpack.config.jsをいれる aliasを使ってreact-nativeをimportしてる箇所をreact-native- webに変換する @storybook/reactの方を使用
  13. 13. webpack.config.js .storybookフォルダにいれる module.exports = (config, configType) => { config.resolve = { modules: ['node_modules'], extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'], alias: { 'react-native$': require.resolve('react-native-web'), }, } }
  14. 14. RN-Web版Storybookの利点 エミュレータの起動を待つ必要が無い アプリとStorybookを同時に開ける 静的サイトとして楽に共有できる!
  15. 15. CircleCi Artifacts
  16. 16. CircleCI が持つS3 に立てれるサイト build-storybook でビルドしたStorybook を格納させる PRに自動的にURLを送るコメントを別途作成
  17. 17. config.yml circleciのConfigファイル - run: name: "Build Storybook" command: yarn storybook:build - store_artifacts: path: storybook-static - run: name: "Report storybook URL to Pull Request" command: 'scripts/report-artifact storybook-static/index.html'
  18. 18. 利点
  19. 19. 開発タスクを完全に分離できる Component の実装 Domain 要件の実装 Action の実装
  20. 20. 実演 Github Repo: https://github.com/Naturalclar/expo-typescript-starter
  21. 21. Expoで使うにあたっての問題点
  22. 22. @expo/vector-icons がそのまま使えない React Nativeのライブラリに依存している react-native-vector-iconsなら大丈夫そう でもexpo なので  react-native-vector-icons は使えない
  23. 23. Babel プラグイン作成してます babel-plugin-expo-vector-icons-storybook
  24. 24. 露骨な宣伝
  25. 25. ありがとうございました

×