KitchHike Tech Blog

KitchHike Product, Design and Engineering Teams

RN Features 2021年11月号 - Hermes がデフォルトになるために、React Native アドベントカレンダー 2021、Recoil v0.5 release、React Native フォームライブラリ「Formik」のご紹介

はじめに

キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました!

React Native アドベントカレンダー 2021

今年も募集が始まりました!

qiita.com

コメント

「去年はキッチハイクから3人記事を書きました!」
「今年も書く予定です💪」

qiita.com

qiita.com

qiita.com

Hermes がデフォルトになるために

公式ブログより

reactnative.dev

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を開発している会社ですね」

forest.watch.impress.co.jp

Recoil v0.5 release

recoiljs.org

Hook for refreshing selectors

  • セレクタのキャッシュをリフレッシュできる機能が追加された。
  • キャッシュが残っているせいで意図しない値を取得してしまって、テストが落ちてしまうことがあったらしい。

github.com

Atom effect improvements

  • Atom がリセットされたかどうかがわかる isReset パラメータが追加された。
  • 他の Atom を読み込むことができるようになった。

Loadable factories

  • 独自のLoadableオブジェクトを作ることができるようになった。
  • RecoilLoadableインターフェイスが利用することで作成可能。

recoiljs.org

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製になっていっている話

leerob.io

  • Vercelの開発者 Lee Robinsonのブログ
  • JavaScriptのエコシステム内でJS用ツールの多くがJSを使って作られてきた
  • ただ、JS/TSでは実行速度の最適化の限界に達しつつある
  • そのため最近開発されたツールではRustの採用が多い
    • SWC (Rust製のコンパイラ)
    • Deno (JavaScriptランタイム)
    • Rome(リントツールを初めとしたツール群)
  • Rustは通常のWeb開発者からみると学習コストが高い
  • 言語性能よりもデータ構造、アルゴリズムのほうがパフォーマンスへの影響は大きいため、最初から必ずしもRustでツールを作る必要はない
  • Rustは将来的にJavaScriptエコシステムに大きな影響を与え続けるであろう

github.com

github.com

コメント

「VercelはNext.jsも開発しているホスティングサービス」
「Next.jsはチュートリアルがちゃんとしているのでわかりやすいです」
「今後いろんなツールがRustやGoで書かれていくんでしょうね」
「IBMがNode.jsのプロジェクトをRustで書き換えたという話もありますね」

thinkit.co.jp

React Native フォームライブラリ「Formik」のご紹介

formik.org

  • 悩ましいフォーム操作に特化したライブラリ
    • 入力フォームの管理をおこなう

codezine.jp

  • バリデーションライブラリ「Yup」と相性が良い
    • Yup が生成するバリデーションルールは Formik 公式でもサポートされている

github.com

codezine.jp

コメント

「確かに入力フォームの作成、バリデーションは悩み事が多いのでいいですね!」
Yupの記法はEnzymeとも似ていますね」

宇宙関連のアプリ Stellar のご紹介

github.com

  • 宇宙で何が起こっているかについてのリアルタイム情報を提供するアプリ、ReactNative を使用して SnackExpo で開発された
  • NASA API を利用して、ISS (国際宇宙ステーション) の位置情報をリアルタイムに表示している

コメント

「NASAがAPIを提供しているんですね!」
「AWSでも人工衛星を使用できるサービスがありましたね」

aws.amazon.com

さいごに

これからも社内で持ち寄った技術ネタを共有します!

We're Hiring

キッチハイクでは、React Native アプリエンジニアを募集中です!

www.wantedly.com www.wantedly.com www.wantedly.com