Skip to main content

51 posts tagged with "announcement"

View All Tags

React Native's Many Platform Vision

·8 min read
Christine Abernathy
Christine Abernathy
Developer Advocate at Meta
Eli White
Eli White
Software Engineer at Meta
Luna Wei
Luna Wei
Software Engineer at Meta
Timothy Yung
Timothy Yung
Software Engineer at Meta

React Native has been very successful at raising the bar for mobile development, both at Facebook and elsewhere in the industry. As we interact with computers in new ways and as new devices are invented, we want React Native to be there for everyone. Although React Native was originally created to build mobile apps, we believe that focusing on many platforms and building to each platform’s strengths and constraints has a symbiotic effect. We have seen huge benefits when we extended this technology to desktop and virtual reality, and we're excited to share what this means for the future of React Native.

React Native in H2 2021

·6 min read
Luna Wei
Luna Wei
Software Engineer at Meta

Over the past year so much has changed in our world, React Native being no exception. We've welcomed new members to our team (whom we are excited to eventually meet in person!), our projects have matured and new opportunities have arisen. We're excited to share all this with you in this post and others to come!

At Facebook, our team works in half-year cycles. Each half we review our strategy, set plans, and share them internally. Today, we want to share our H2 plans with you, our community.

H2 2021 is an exciting half for React Native. Our areas of focus include nurturing the community, beginning to roll out the new architecture to open source, and pushing the technology forward.

Announcing React Native 0.65

·3 min read
Luna Wei
Luna Wei
Software Engineer at Meta

Today we’re releasing React Native version 0.65 with a new version of Hermes, improvements to accessibility, package upgrades, and more.

What's new in Hermes 0.8?​

Hermes, Facebook’s open source JavaScript VM optimized for React Native, has been upgraded to version 0.8.1. Some of the stand-out features in this release are

You can find the full Hermes changelog here.

Follow steps here to opt-in your app to Hermes if you haven’t already to leverage these new features and gains!

Accessibility Fixes and Additions​

Last year Facebook took the GAAD pledge to improve accessibility within React Native. 0.65 shares the results of this pledge and other accessibility wins! Some notable changes include

  • Allow specification of high contrast light and dark values for iOS. See documentation for more details.
  • Android向けにgetRecommendedTimeoutMillis APIを追加しました。これは、Androidのアクセシビリティオプションで設定されたユーザーの優先するデフォルトのタイムアウト値を公開するもので、コントロールの確認や操作などに余分な時間が必要なユーザー向けです。
  • TalkBack/VoiceOverが、disabledやunselectedなどコンポーネントのUI状態を正しく読み上げることを保証するための一般的な修正を行いました。

当社の未解決のアクセシビリティに関する問題をここで確認したり、貢献したりすることができます！

注目すべき依存関係のバージョン更新と注意点​

  • package.jsonでdevDependencyとしてreact-native-codegenバージョン0.0.7が必要になりました。
  • JCenterは廃止され、現在は読み取り専用です。MavenリポジトリとしてJCenterを削除し、依存関係をMavenCentralとJitpackを使用するように更新しました。
  • OkHttpをv3からv4.9.1にアップグレードしました。変更の詳細については、OkHttp 4へのアップグレードを参照してください。
  • Xcode 12.5をサポートするためにFlipper 0.93にアップグレードしました。Flipperの変更ログはこちら。
  • Android Gradle Plugin 7のサポート
  • Apple Siliconにはリンカーの回避策が必要です。@mikehardyによるこの件に関するメモを参照してください。

感謝！​

このリリースには、61人の貢献者からの1100件以上のコミットが含まれています。このリリースに貢献し、サポートしてくれた皆様に感謝いたします。完全な変更ログはこちら。

The GAAD Pledge - One Year Later

・4 min read
Alexandra Marlette
Alexandra Marlette
React NativeのGAAD Pledgeオープンソースアクセシビリティコミュニティマネージャー

FacebookがReact NativeをアクセシブルにするためにGAAD Pledgeに署名してから1年が経ちました。このプロジェクトは私たちの期待をはるかに超える成果を上げています。このプロジェクトは2021年も継続することを発表し、これまでの進捗状況を皆様にアップデートしたいと思います。昨年、React Nativeのアクセシビリティのギャップを徹底的に分析した後、これらのギャップを埋める作業が始まりました。

90件の未解決のギャップ分析の問題から始め、2021年3月にGitHubでプロジェクトが開始されてから現在まで

  • コミュニティによって11件の問題が解決されました。

  • React Nativeチームによって19件の問題が評価され、解決されました。

  • 9件のプルリクエストがマージされました。

  • 1件のプルリクエストがReact Nativeのドキュメントにマージされました。

過去1年間、よりアクセシブルなReact Nativeを目指して大きな進歩を遂げたReact Nativeコミュニティに感謝し、称賛したいと思います。すべての貢献者の努力が、React Nativeのアクセシビリティ向上に貢献しました。

The GAAD Pledge - March Accessibility Issues Update

・3 min read
Alexandra Marlette
Alexandra Marlette
React NativeのGAAD Pledgeオープンソースアクセシビリティコミュニティマネージャー

徹底的にレビューされたギャップ分析と、React Nativeのアクセシビリティを向上させるための問題リストをGitHubコミュニティに公開してから4週間が経ちました。React Nativeコミュニティの助けを借りて、アクセシビリティの向上にすでに大きな進歩を遂げています。コミュニティメンバーは、貢献者の支援、テストのレビュー、以前のアクセシビリティの問題への注意喚起に貢献しています。3月8日以来、コミュニティは4つのプルリクエストと共に6つの問題を解決し、さらに7つのプルリクエストがレビューのために準備中です。

この作業は継続していますが、FacebookのReact Nativeおよびアクセシビリティチームは、このイニシアチブの前に提出されたアクセシビリティのバグと問題を評価し、それらが現在のギャップ分析によって既にカバーされているかどうか、またはプロジェクトに追加する必要がある追加の問題があるかどうかを判断しています。既に1つの新しい問題が発見され、プロジェクトに移動されました。さらに4つは既存の問題に直接マッピングされ、他の2つは、根本原因に対処する既存の問題に対処することで解決される予定です。

参加してくださったすべてのコミュニティメンバーに感謝いたします。皆さんの努力は、React Nativeをすべての人にとってよりアクセシブルにするために、真に大きな変化をもたらしています！

Announcing React Native 0.64 with Hermes on iOS

・4 min read
Mike Grabowski
Mike Grabowski
CallstackのCTO兼共同設立者

本日、iOSでHermesをサポートするReact Native 0.64をリリースします。

iOSでのHermesのオプトイン​

Hermesは、React Nativeの実行用に最適化されたオープンソースのJavaScriptエンジンです。メモリ使用量の削減、ダウンロードサイズの縮小、アプリが使用可能になるまでの時間（TTI：Time To Interactive）の短縮によって、パフォーマンスを向上させます。

このリリースでは、iOSでもHermesを使用してビルドできるようになったことを発表できることを嬉しく思います。iOSでHermesを有効にするには、Podfileでhermes_enabledをtrueに設定し、pod installを実行します。

use_react_native!(
   :path => config[:reactNativePath],
   # to enable hermes on iOS, change `false` to `true` and then install pods
   :hermes_enabled => true
)

iOSでのHermesのサポートはまだ初期段階であることに注意してください。さらなるベンチマークを実行しているので、オプトインとして維持しています。ご自身のアプリケーションで試していただき、その結果をお知らせいただければ幸いです！

デフォルトで有効化されたインラインRequire​

インラインRequireは、スタートアップ時にではなく、使用されるまでJavaScriptモジュールの実行を遅らせることで、スタートアップ時間を向上させるMetroの設定オプションです。

この機能は、ドキュメントのパフォーマンスセクションに記載されているように、オプトイン設定オプションとして数年前から存在し、推奨されてきました。より高速なReact Nativeアプリケーションを、追加の設定なしで実現できるように、新しいアプリケーションではこのオプションをデフォルトで有効にするようになりました。

インラインRequireは、モジュールのインポートを取り、インラインになるように変換するBabel変換です。例として、インラインRequireは、このモジュールのインポート呼び出しを、ファイルの先頭から使用されている場所に変換します。

以前

import {MyFunction} from 'my-module';

const MyComponent = props => {
  const result = MyFunction();

  return <Text>{result}</Text>;
};

後で

const MyComponent = props => {
  const result = require('my-module').MyFunction();

  return <Text>{result}</Text>;
};

インラインRequireに関する詳細は、パフォーマンスドキュメントをご覧ください。

ChromeでHermesトレースを表示​

過去1年間、FacebookはMajor League Hackingフェローシップをスポンサーし、React Nativeへの貢献を支援してきました。Jessie NguyenとSaphal Patroは、Hermesを使用している場合に、Chrome DevToolsのパフォーマンスタブを使用してアプリケーションの実行を視覚化できるようにしました。

詳細については、新しいドキュメントページをご覧ください。

Proxyサポート付きHermes​

HermesにProxyサポートを追加し、react-native-firebaseやmobxなどの一般的なコミュニティプロジェクトとの互換性を確保しました。これらのパッケージを使用していた場合は、プロジェクトをHermesに移行できます。

今後のリリースでHermesをAndroidのデフォルトのJavaScriptエンジンにする予定なので、Hermesを使用する際に発生する残りの問題を解決するために取り組んでいます。Hermesの採用を妨げている問題がある場合は、HermesのGitHubリポジトリに問題を報告してください。

React 17​

React 17には、新しい開発者向けの機能や大きな破壊的変更は含まれていません。React Nativeアプリケーションでは、主な変更点は新しいJSX変換であり、JSXを使用するためにファイルでReactをインポートする必要がなくなりました。

React 17に関する詳細は、Reactブログをご覧ください。

主要な依存関係のバージョン変更​

  • Android APIレベル16〜20を削除しました。Facebookアプリでは、使用率が十分に低いAndroidバージョンに対するサポートが常に削除されます。Facebookアプリがこれらのバージョンをサポートしなくなり、React Nativeの主要なテスト対象であるため、React Nativeもサポートを削除しています。
  • Xcode 12とCocoaPods 1.10が必要です
  • Nodeの最小サポートバージョンが10から12に引き上げられました
  • Flipperが0.75.1にアップグレードされました

感謝​

0.64を可能にしてくれた何百人もの貢献者に感謝します！0.64の変更ログには、このリリースに含まれるすべての変更が記載されています。

The GAAD Pledge - Improving React Native Accessibility

・2分間の読書
Alexandra Marlette
Alexandra Marlette
React NativeのGAAD Pledgeオープンソースアクセシビリティコミュニティマネージャー

React Nativeコミュニティの皆様へ​

2020年5月、FacebookはGAAD pledgeに署名した最初の企業となり、アクセシビリティをReact Nativeオープンソースプロジェクトの中核的な部分にすることを約束しました。5月以降、FacebookはReact Native内のアクセシビリティのギャップを慎重にレビューし、文書化することに時間を費やしてきました。これまでのギャップ分析では90件の問題が明らかになり、それらのすべてがGitHubの問題に変換されています。

全体として、React Native APIはアクセシビリティを強力にサポートしていることがわかりました。しかし、多くのコアコンポーネントがプラットフォームのアクセシビリティAPIをまだ完全に活用しておらず、プラットフォーム固有の機能の一部はサポートされていないこともわかりました。

React Nativeの開発においては、常にコントリビューターの熱意と多様性が重要な役割を果たしてきました。これらのアクセシビリティにおけるギャップは、現在および新規コントリビューターにとって絶好の機会です。React Nativeへのコントリビューションに関心のある方は、React Nativeをよりアクセシブルにする活動にご参加ください。

コントリビューターの努力を認めるため、アクセシビリティの問題が解決され、プルリクエストに添付された場合、コミュニティマネージャーからTwitterで感謝のメッセージが送られます。コードベースにプルリクエストが受け入れられたコントリビューターは、React Nativeブログの毎月の問題更新で取り上げられます。

React Nativeをすべての人にとってよりアクセシブルにする活動にご参加ください。

貢献方法:​

  • 新規コントリビューターは、コントリビューションガイド を読んで、React Native GitHubにある46個の初心者向けイシュー のリストを参照してください。

  • もう少し労力が必要なイシューに関心のあるコントリビューターは、React Nativeアクセシビリティ改善のためのプロジェクトページ を訪問して、React Nativeに関する知識を必要とするGitHubのイシューを確認してください。

  • React Nativeのドキュメントを更新して、修正されたアクセシビリティのギャップを反映することに関心のあるテクニカルライターは、React Nativeドキュメント を参照してください。

  • この取り組みを、協力できる可能性のある方々に共有してください！

  • React NativeのGAAD Pledge Open Source Accessibility Community Managerの進捗状況を最新の状態に保つには、Twitter または Facebook をフォローしてください。

React Native Documentation Update

·3 min read
Rachel Nabors
Rachel Nabors
Facebook ドキュメンテーションエンジニア

昨年、ユーザーインタビューを実施し、アンケート を実施して、人々がReact Nativeドキュメントをどのように、いつ使用しているかについて詳しく学びました。24件のインタビューと3000件以上のアンケート回答から得られたデータとガイダンスに基づき、React Nativeのドキュメントの改善に取り組んできました。そして本日、その進捗状況を共有できることを嬉しく思います。

インタビュー、アンケート、およびドキュメント作成にご参加いただいた皆様に心より感謝申し上げます！皆様の協業のおかげで実現しました。

React Native Team Principles

·読了時間：5分
Eli White
Eli White
Software Engineer at Meta

FacebookのReact Nativeチームは、React Nativeでの作業の優先順位を決定するのに役立つ原則に従っています。これらの原則は、特に私たちのチームを表すものであり、必ずしもReact Nativeコミュニティのすべての利害関係者を代表するものではありません。これらの原則を共有することで、私たちを推進するもの、意思決定の方法、そして努力の焦点を明確にしたいと思います。

ネイティブエクスペリエンス​

React Nativeの最優先事項は、各プラットフォームに対する人々の期待に応えることです。これが、React Nativeがプラットフォームプリミティブにレンダリングする理由です。クロスプラットフォームの一貫性よりも、ネイティブのルックアンドフィールを重視しています。

たとえば、React NativeのTextInputはiOSではUITextFieldにレンダリングされます。これにより、パスワードマネージャーやキーボードコントロールとの統合がすぐに機能します。プラットフォームプリミティブを使用することで、React Nativeアプリは、AndroidおよびiOSの新しいリリースからのデザインと動作の変更にも対応できます。

ネイティブアプリのルックアンドフィールに合わせるためには、パフォーマンスにも合わせなければなりません。これが、私たちが最も野心的な努力を注いでいるところです。たとえば、Facebookは、AndroidのReact Native向けにゼロから構築された新しいJavaScriptエンジンであるHermesを作成しました。Hermesは、React Nativeアプリの起動時間を大幅に向上させます。また、スレッドモデルを最適化し、ネイティブコードとの相互運用を容易にする主要なアーキテクチャ変更にも取り組んでいます。

大規模なスケール​

Facebookアプリの何百もの画面がReact Nativeで実装されています。Facebookアプリは、幅広いデバイスを使用する数十億の人々によって使用されています。これが、私たちが大規模な最も困難な問題に投資する理由です。

アプリにReact Nativeを展開することで、小規模では見られない問題を特定できます。たとえば、Facebookは、最新のiPhoneから多くの旧世代のAndroidデバイスまで、幅広いデバイス全体のパフォーマンス向上に焦点を当てています。この焦点は、Hermes、Fabric、TurboModulesなどのアーキテクチャプロジェクトに反映されています。

React Nativeは、大規模な組織にも対応できることを証明しました。何百人もの開発者が同じアプリに取り組んでいる場合、段階的な導入は必須です。そのため、React Nativeは一度に1つの画面ずつ採用できるようにしました。まもなく、既存のネイティブ画面の個々のネイティブビューをReact Nativeに移行することを可能にする、さらに一歩踏み出します。

大規模なスケールに焦点を当てているため、私たちのチームが現在取り組んでいないことがたくさんあります。たとえば、私たちのチームは業界におけるReact Nativeの採用を推進していません。また、大規模では見られない問題に対するソリューションを積極的に構築していません。私たちは、多くのパートナーとコアコントリビューター がコミュニティにとって重要な分野に焦点を当てることができることを誇りに思っています。

開発者の速度​

優れたユーザーエクスペリエンスは反復的に作成されます。実行中のアプリでコード変更の結果を確認するのに数秒しかかかりません。React Nativeのアーキテクチャにより、開発中にほぼ瞬時のフィードバックを提供できます。

React Nativeの採用により開発速度が大幅に向上したという話をチームからよく聞きます。これらのチームは、開発中の瞬時のフィードバックにより、さまざまなアイデアを試したり、小さな変更ごとにコーディングセッションを中断する必要がないため、追加の磨きをかけるのがはるかに簡単になります。React Nativeに変更を加える際には、この開発エクスペリエンスの品質を維持するようにしています。

瞬時のフィードバックは、React Nativeが開発速度を向上させる唯一の方法ではありません。チームは、高品質のオープンソースパッケージの急速に成長しているエコシステムを活用できます。チームはAndroid、iOS、およびWeb間でビジネスロジックを共有することもできます。これにより、更新を迅速にリリースし、プラットフォームチーム間の組織的なサイロを削減できます。

すべてのプラットフォーム​

2014年にReact Nativeを導入したとき、私たちは「一度学習すれば、どこでも記述できる」というモットーで発表しました—そして私たちはどこでもを意味します。開発者は、デバイスモデルやオペレーティングシステムに制限されることなく、できるだけ多くの人々にリーチできる必要があります。

React Nativeは、モバイル、デスクトップ、Web、TV、VR、ゲームコンソールなど、非常に異なるプラットフォームをターゲットにしています。開発者が最低限の共通分母のためにビルドする必要があるのではなく、各プラットフォームで豊富なエクスペリエンスを可能にしたいと考えています。そのため、各プラットフォームの独自の機能をサポートすることに重点を置いています。これは、さまざまな入力メカニズム（タッチ、ペン、マウスなど）から、VRの3D環境などの根本的に異なる消費エクスペリエンスまで多岐にわたります。

この原則は、プラットフォーム間のパリティを促進するために、クロスプラットフォームC++でReact Nativeの新しいコアアーキテクチャを実装するという決定を下しました。WindowsやmacOSなどの他のプラットフォームのメンテナンス担当者（Microsoftなど）を対象とした公開インターフェースも改良しています。あらゆるプラットフォームでReact Nativeをサポートできるように努めています。

宣言型UI​

当社は、すべてのプラットフォームで全く同じユーザーインターフェースを展開するべきだと考えていません。同じ宣言型プログラミングモデルで、各プラットフォームの独自の機能を公開することを信じています。当社の宣言型プログラミングモデルはReactです。

私たちの経験では、Reactによって普及した一方向データフローにより、アプリケーションの理解が容易になります。画面を命令的に管理されたビューではなく、宣言型コンポーネントの構成として表現することを好みます。WebにおけるReactの成功と、新しいネイティブAndroidおよびiOSフレームワークの方向性から、業界も宣言型UIを受け入れていることがわかります。

Reactは宣言型ユーザーインターフェースを普及させました。しかし、Reactが独自の立場から解決できる多くの未解決の問題が残っています。React Nativeは、Reactの革新の上に構築し続け、宣言型ユーザーインターフェース運動の最前線に留まり続けます。