KitchHike Tech Blog

KitchHike Product, Design and Engineering Teams

RN Features 2020年9月号 - React Native Community公式のライブラリ検索ツール, Shopifyが実践するソフトウェア品質担保, iOS 14リリース

はじめに

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

iOS14リリース

【React Native】 Xcode12でビルドするとiOS14で画像が表示されない問題に対処する - Qiita

コメント
「今回のiOS14リリースとそれにまつわるXcodeガチャといわれる問題は大変でした...」
「React Nativeを使っていてもiOSのリリースを気にする必要は当然ある」
「Webでいうとimageタグが使えなくなるのと同じですもんね」
「React Native Communityではすでに問題を解決している人がいて頼もしかったです」

Shopify が実践しているソフトウェア品質担保 Tophatting (トップハッティング)とは

Tophatting in React Native

A vital part of the software quality process at Shopify is a practise called tophatting. Tophatting is manually testing your coworker’s changes and making sure everything is working properly before approving their pull request (PR).

Shopify での Software quality process での重要な部分は、Tophatting (トップハッティング)と呼ばれるプラクティスです。Tophatting とは、同僚の変更を手動でテストし、すべてが正しく動作していることを確認してから、彼らのプルリクエスト(PR)を承認することです。

要約

  • Tophatting をスムーズに実践するために、開発者が数秒以内に仲間の作品を素早くロードできるようにするツールを作った
  • もともと、ネイティブアプリの Tophatting 支援ツールは2年前に開発していた
  • アプリのビルドをクラウドストレージに保存して、開発者はアプリを任意のタイミングでダウンロードできる
  • React Native ではネイティブコード以外の変更はJSバンドルをロードすることで反映できることを利用した
  • 新しくビルドされた JavaScript バンドルを保存するツールを開発し、React Native アプリが任意のバンドルを取得して、ほぼ即座に変更をロードできるようにした
  • 新しいPRやコミットをトリガーに、CIでJavaScript バンドルをビルド。その後、ダウンロードできるQRコードを発行する
  • 今回のRNアプリ Tophatting 支援ツールでは、認証とクラウドストレージとしてサードパーティのバンクエンドサービスを使った

f:id:narukami894:20200923193841p:plain:w500

f:id:narukami894:20200923193858g:plain:w200

コメント
「Shopifyのような大きなところも手動で動作確認しているんだな〜」
「E2Eや自動テストだけではないんですね、重要なところは手動なのか」
「WebでもHerokuを使えばHeroku Review Appという機能がありますね」
「アプリはビルドに時間がかかるので、即座に変更をダウンロードできるのは大きい」
「ネイティブ開発だと、忙しいときは裏技としてマシンを複数台使ったりしてました」
「エンジニアが100人いたら、動作確認準備が2分短縮されるだけでも200分ですもんね」

RNコミュニティ公式のReact Nativeライブラリ検索ページ React Native Directory

React Native Directory

github.com

コメント

calculate-score.js,面白いね!issueがたくさん開いていると検索スコアが下がるのか」
「licenseがなかったりGPLでも検索スコアが下がるようになっているのは面白い」
.directory っていうgTLDがあるんですね...」

React Nativeのメンテナーによるパフォーマンス改善のリンク集

The React Native Performance Compendium

  • メンテナーのLorenzoさん( a.k.a. @kelset )が作成したパフォーマンス改善のリンク集
  • Library of Linksに以下がまとまっている
    • DevTools(ライブラリ、Gistのまとめ)
    • Twitter's Post(Twitterの投稿)
    • Documentation(公式ドキュメント集)
    • Blog Posts(ブログ記事)
  • 定期的にメンテナンスする予定なのでブックマークしておくとよさそう
  • https://github.com/kelset/kelset/issues/1
  • Githubレポジトリでコメントも募っている

コメント
「数が膨大!ツリー形式で見たいね」
「パフォーマンス改善については情報が多い、みんな気になっているんだ」
「ブログ記事はMediumの記事が多いですね」
「RNの流れが早いからパフォーマンス関連の知識も古びるのが早そう」

Enable Hermes to work on iOS

  • React NativeのiOSでJS EngineにHermesを使えるようにするPRが出ている

コメント

「すごいね!ついにiOSのJS Engineが変更できるようになるってこと?」
「React NativeのRe-architectureが進んでいるっていうことなのか」
「Javascript Engineは名前が面白いのが多い、IEのJS EngineでChakraっていうのがお気に入り」
「インターフェースさえあれば好きなJS Engineが使えるっていうのはアツいですね」

react native vs flutter

コメント
「最近Flutter人気なんですね〜」
「Google Trend上だと、他のフレームワークを加えてみるとionicがずっと優勢みたいです」
f:id:narukami894:20200923194745p:plain

iOSDC Japan 2020 が開催された

iosdc.jp

  • SwiftUI の導入事例の話や、SwiftUI 時代のアーキテクチャとフレームワークの話があった
  • WEB, PWA, ネイティブアプリ, App Clips の使い所や組み合わせに関する話があった
  • Flutter のトークが2つあった

リンク

コメント
「SwiftUIが少しずつ広まってきていて、注目されている」
「宣言的UIとアーキテクチャについてのスライド」
「ネイティブアプリ開発の話ですが、Reduxの名前が挙がっていますね」

さいごに

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

We're Hiring

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

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