React Native for Web をはじめよう

https://sumidagawajs.connpass.com/event/179311/

Transcript

1. React Native for Web をはじめよう 2020/07/21 隅田川.js#2 (オンライン) stand.fm, Inc. Yuta Mori
2. Yuta Mori Twitter: @moriyuu__ GitHub: @moriyuu
3. 音声配信プラットフォーム
4. stand.fm 技術スタック アプリ - React Native - Flow - Redux - Objective-C - Swift - Java - Node.js - express - bull - MongoDB - Redis - Google Kubernetes Engine - React - React Native for Web - Flow - Redux サーバー ウェブ
5. React Native for Web - 2017年くらいから開発開始 - 2017/09 くらいには Twitter Lite に導入 - 先月 v0.13 リリース
6. 実際なんなのか React Native が提供しているコンポーネント（View, Text, FlatList 等）を web でレンダリングできるように、全く同じ 使用感（インターフェース）で再現したもの → React Native の顔をした React のコンポーネント集
7. 基本的な使い方 import .... from ‘react-native’ import .... from ‘react-native-web’ - Webpack か babel 等で となってる箇所を と書き換えるだけ → React Native を使っていなくても 　 React Native for Web だけ使う、というのが可能
8. 実戦投入していこう ・導入するのにおすすめの環境 ・web と app のコードの共有 ・semantic な HTML にできるか？
9. 導入するのにおすすめの環境 1. React Native のプロジェクトが元々ある 2. storybook と組み合わせる - アプリで使用するコンポーネントを一覧するドキュメントを 作れる - Visual Regression Test 3. web アプリを react-native-web 前提で作ってしまう - Twitter Lite がそう
10. web と app のコードの共有 「コンポーネントの使い回し」がメインの用途 → 現状、エンジニアが3人で iOS, Android, Web, Server を書い てるのでかなり実装減らせている
11. ある web のページで component を import してきている箇所。半分くらいは app から import している
12. semantic な HTML にできるか？ - 何も気にしないと、すべてが div になる - aria-label, role などの属性は accessibilityLabel, accessibilityRole などの props で対応してるので、適切に 指定してあげれば、良い感じにしてくれる
13. semantic な HTML にできるか？ https://necolas.github.io/react-native-web/docs/?path=/docs/guides-accessibility--page
14. h t t p s : / / c o r p . s t a n d . f m / r e c r u i t メ ンバ ー 募 集 中
15. stand.fm 技術スタック アプリ - React Native - Flow - Redux - Objective-C - Swift - Java - Node.js - express - bull - MongoDB - Redis - Google Kubernetes Engine - React - React Native for Web - Flow - Redux サーバー ウェブ