はじめに
キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました!
- はじめに
- React Native アドベントカレンダー 2021
- Hermes がデフォルトになるために
- Recoil v0.5 release
- JavaScript用ツールの多くがRust製になっていっている話
- React Native フォームライブラリ「Formik」のご紹介
- 宇宙関連のアプリ Stellar のご紹介
- さいごに
- We're Hiring
- 技術書典 11に共著で出展しました!キッチハイクアプリの事例も掲載されています。 React Nativeに支えられる企業
React Native アドベントカレンダー 2021
今年も募集が始まりました!
コメント
「去年はキッチハイクから3人記事を書きました!」
「今年も書く予定です💪」
Hermes がデフォルトになるために
公式ブログより
HermesをReact Nativeのための最高のJavaScriptエンジンにするために、過去2年間で行ってきた最もエキサイティングな進歩を紹介する記事
React Nativeへの最適化
Hermesを有効にしたReact Nativeアプリは、プレーンなJavaScriptソースではなく、プリコンパイルされた最適化バイトコードで出荷される。
Fabric用の新しいガーベッジコレクターの構築
GenGCからHadesへ。GCのStop the world時間を大幅に短縮した。
パフォーマンス上の問題点を克服
- 起動時間の短縮のため、BabelトランスをHermesのネイティブなESNextの実装に置き換える実験中
- JSでの値はすべて64ビットNaN-boxingエンコードされたタグ付き値で表現されるが、ほとんどの数値はSMI(Small integers)であることに注目。最適化を行いJavaScriptのヒープサイズを約30%削減させた。
- Hermesでは、ジャストインタイム(JIT)コンパイラを実装せず、インタープリタのパフォーマンスとコンパイラの最適化に集中している。HermesのスループットをReact Nativeのワークロードに対する他のエンジンと競争できるようにするため。
垂直統合の先駆者
- HermesがChrome DevTools Protocolに対応し、ChromeデバッガによるオンデバイスのJavaScriptデバッグをサポート。同期したネイティブコールのデバッグをサポートし、一貫したランタイム環境を保証するため、従来の「リモートJSデバッグ」(アプリ内プロキシを使用してデスクトップChromeでJSを実行する)よりも優れている
- JSエンジンを保守するチームがJSI APIの実装も保守することで、信頼性、性能、そしてFacebookの規模での実戦性を備えた、可能な限り最高の統合を提供
コミュニティ全体を巻き込む
- Callstackは、React Native 0.64でHermesをiOSに導入する取り組みを主導
- マイクロソフトは、WindowsとmacOSのReact NativeにHermesを導入
- HermesはOculus Homeを含む、OculusのReactファミリーで構築されたすべてのバーチャルリアリティ体験にも力を発揮
サマリ
Hermesチームのビジョンは、HermesがすべてのReact NativeプラットフォームでデフォルトのJavaScriptエンジンになる準備を整えること
コメント
「HermesではJITは実装しないコンセプト、JIT以外の箇所を最適化することで高速化しようとしている」
「JITはセキュリティホールになりがちという記事も見つけました」
「同じチームが一気通貫でJSエンジンとJSIのAPIも作っているということですね」
「AppleのM1チップも垂直統合の結果だね」
「Callstackはreact-native-testing-library
を開発している会社ですね」
Recoil v0.5 release
Hook for refreshing selectors
- セレクタのキャッシュをリフレッシュできる機能が追加された。
- キャッシュが残っているせいで意図しない値を取得してしまって、テストが落ちてしまうことがあったらしい。
Atom effect improvements
- Atom がリセットされたかどうかがわかる isReset パラメータが追加された。
- 他の Atom を読み込むことができるようになった。
Loadable factories
- 独自のLoadableオブジェクトを作ることができるようになった。
- RecoilLoadableインターフェイスが利用することで作成可能。
RecoilLoadable.of(123); RecoilLoadable.of(Promise.resolve(123)); RecoilLoadable.error(new Error('ERROR')); RecoilLoadable.all([ RecoilLoadable.of(1), RecoilLoadable.of(10), RecoilLoadable.of(100), ]).map(([a, b, c]) => a+b+c);
コメント
「Loadableはatomやselectorの状態を返すオブジェクト」
「もう0.5になったんですね!experimentalが取れる日も近いかも」
JavaScript用ツールの多くがRust製になっていっている話
Vercel
の開発者 Lee Robinsonのブログ- JavaScriptのエコシステム内でJS用ツールの多くがJSを使って作られてきた
- ただ、JS/TSでは実行速度の最適化の限界に達しつつある
- そのため最近開発されたツールではRustの採用が多い
- SWC (Rust製のコンパイラ)
- Deno (JavaScriptランタイム)
- Rome(リントツールを初めとしたツール群)
- Rustは通常のWeb開発者からみると学習コストが高い
- 言語性能よりもデータ構造、アルゴリズムのほうがパフォーマンスへの影響は大きいため、最初から必ずしもRustでツールを作る必要はない
- Rustは将来的にJavaScriptエコシステムに大きな影響を与え続けるであろう
コメント
「VercelはNext.jsも開発しているホスティングサービス」
「Next.jsはチュートリアルがちゃんとしているのでわかりやすいです」
「今後いろんなツールがRustやGoで書かれていくんでしょうね」
「IBMがNode.jsのプロジェクトをRustで書き換えたという話もありますね」
React Native フォームライブラリ「Formik」のご紹介
- 悩ましいフォーム操作に特化したライブラリ
- 入力フォームの管理をおこなう
- バリデーションライブラリ「Yup」と相性が良い
- Yup が生成するバリデーションルールは Formik 公式でもサポートされている
コメント
「確かに入力フォームの作成、バリデーションは悩み事が多いのでいいですね!」
「Yup
の記法はEnzyme
とも似ていますね」
宇宙関連のアプリ Stellar のご紹介
- 宇宙で何が起こっているかについてのリアルタイム情報を提供するアプリ、ReactNative を使用して SnackExpo で開発された
- NASA API を利用して、ISS (国際宇宙ステーション) の位置情報をリアルタイムに表示している
コメント
「NASAがAPIを提供しているんですね!」
「AWSでも人工衛星を使用できるサービスがありましたね」
さいごに
これからも社内で持ち寄った技術ネタを共有します!
We're Hiring
キッチハイクでは、React Native アプリエンジニアを募集中です!