Alex Hunt – Metro and React Native DevX in 2023

Summary

アレックスは、Mata社のReact開発者エクスペリエンスチームのソフトウェアエンジニアとして、React Nativeに組み込まれたJavaScriptビルドツールであるMetroの紹介と、2023年の焦点を話します。Metroは、React Native CLIやExpo CLIがアプリケーションをコンパイルする際に使用され、JavaScriptコードと依存関係を最適化されたバンドルに変換します。MetroはReact Native開発の中心的な役割を果たしており、高速でスケーラブルなアーキテクチャを持っています。また、MetroはReact Nativeのニーズに合わせて設計されており、React Native CLIやExpo Dev Serverに組み込まれています。2022年にチームが拡大し、オープンソースコミュニティにMetroの利点を提供するようになりました。今後の焦点は、npmの互換性やDynamic Importsなどの機能の向上、React Native開発体験全体の改善にあります。また、React Nativeのデバッグ機能の強化も計画中です。

Takeaways

• 📚 AlexはMataのReact開発者経験チームのソフトウェアエンジニアで、React Nativeに組み込まれているMetroについて話しました。
• 🚀 MetroはReact NativeのJavaScriptビルドツールで、アプリケーションのJavaScriptコードと依存関係を最適化されたバンドルにコンパイルします。
• 🔄 Metroは高速でスケーラブルで、エピックな規模でのパフォーマンスを維持し、開発者が即時のフィードバックを得られるように設計されています。
• 🌟 2022年にReact Native CLIとExpo CLIが使用するようにMetroが成長し、オープンソースコミュニティと協力して機能を強化しました。
• 🔍 MetroはReact Nativeの開発体験に組み込まれており、React Native CLIとExpo Dev Serverに組み込まれています。
• 🔗 MetroはReact Nativeと密接に連携し、React Nativeのニーズに焦点を当てた開発ツールです。
• 🔄 2022年には、Metroは33のリリースと52のバグフィックスを含んでいます。また、`require.context`とシンボリックリンクのサポートが追加されました。
• 📦 パッケージエクスポートのサポートは、npmパッケージとの互換性を向上させるとともに、React Nativeのパッケージメンテナーが新しい機能を活用できるようになります。
• 🔍 ラズリバンドルは、開発者が大規模なアプリケーションで作業する際に、コンパイルにかかる時間を短縮し、素早くアプリを開始できるようにします。
• ⚡️ SWCはBabelの代替として、より高速なコンパイルとバンドルを可能にします。MetroはSWCと統合し、より高速で正確なバンドルを目指しています。
• 🛠️ MetroはReact Nativeの開発体験を向上させるために、デバッグ、プロジェクト設定、アップグレードなどの他の問題にも取り組んでいます。
• 🤝 コミュニティへの貢献を歓迎し、初心者向けの問題をリポジトリに追加し、オープンソースで機能を構築する手助けを提供しています。

Q & A

アレックスが所属しているチームの主な責任は何ですか？

アレックスは、Mata社内のReact開発者体験チームに所属しており、MetroのほかにもReact NativeとReactコンポーネントを担当しています。彼らのチームは、React開発ツールチェーンのエンドツーエンドの体験を担当しており、その中にはMetroやFB Metro（内部機能セットを持つMetroのラッパー）のカバレッジが含まれます。

MetroはなぜReact Nativeの開発に不可欠なツールですか？

MetroはReact NativeのJavaScriptビルドツールであり、アプリケーションを実行するために必要なJavaScriptコード、依存関係、アセットを準備し、最適化されたJavaScriptバンドルをターゲットプラットフォーム用にコンパイルします。また、開発中の迅速な更新や、デバイス上のJavaScriptエンジンとのインターフェースなど、React Native開発エクスペリエンスの主要な機能を支える役割を果たしています。

Metroがスケーラビリティを持つ理由は何ですか？

Metroは並列処理を使用し、ワーカーを活用して可能なかぎり不要な作業を避けることによりスケーラビリティを確保しています。また、キャッシュアーティファクトを再利用することで、同じプロジェクトで作業するチームのスピードを上げています。これにより、変更されていないファイルの再ビルドをローカルマシンが行う必要がなくなります。

アレックスが言及した「ファストリフレッシュ」とは何ですか？

「ファストリフレッシュ」は、開発中に開発者に即時のフィードバックを提供する機能で、コードベースの規模に関係なく動作します。Metroはこの機能をサポートし、開発者がコード変更を行った際に即座にフィードバックを得られるようにしています。

Metroが提供する「遅延バンドル」とは何ですか？

遅延バンドルは、開発者が作業している画面のコードのみをバンドルする新しい機能です。これにより、アプリが大きくなっても開発が素早く始められます。遅延バンドルは、標準のJavaScriptのDynamic import構文とreact.lazy APIをサポートし、必要になったときにクライアントがMetroから別々のバンドルを取得できるようにしています。

アレックスが言及した「パッケージエクスポート」とは何ですか？

「パッケージエクスポート」は、npmパッケージがパッケージエントリーポイントを指定するための現代の仕様です。これにより、React Nativeのアプリ開発者は、npmパッケージとの互換性が向上し、プロジェクトですぐに使用できるようになります。また、パッケージのエンカプスレーションや条件付きエクスポートなどの新機能を使用することもできるようになります。

Metroで使用されているSWCとは何ですか？

SWCは、Babelの強力な代替品であり、多くのWebバンドルツールで使用されています。MetroはSWCと統合することで、JavaScriptコードのコンパイルを高速化し、Reactコードをより簡単に記述できるようにしています。

React Nativeのデバッグに対するアレックスのチームの取り組みとは何ですか？

アレックスのチームは、React Nativeのデバッグを改善するために、X Google ignorelist Source map拡張機能や、Chrome DevToolsでの1クリックHermesデバッグ、React DevToolsのイントグリッシュを提供することで、デバッグの簡便化を目指しています。また、デバッグワーキンググループを形成し、パートナーと共に取り組みを進めています。

アレックスが言及した「ツリーシェイキング」と「バンドル分割」とは何ですか？

「ツリーシェイキング」は、コードベースから未使用のコードを削除することで、バンドルサイズを小さくするプロセスです。「バンドル分割」は、大きなアプリケーションを複数の小さなバンドルに分割し、必要なものだけを読み込むことでパフォーマンスを向上させる手法です。これらは、Metroで今後取り上げられる予定の最適化機能の一部です。

アレックスが言及した「React Native EU」とは何ですか？

「React Native EU」は、React Native開発者のためのカンファレンスであり、アレックスのチームはそのイベントでMetroの機能について議論し、フィードバックを得るために参加しました。これはReact Nativeコミュニティと密接に連絡を取り、共に成長する取り組みの一環です。

アレックスが言及した「パブリックRFC」とは何ですか？

「パブリックRFC」（Request for Comments）は、提案や機能の変更についてコミュニティにフィードバックを求めるプロセスです。アレックスのチームは、Metroのパッケージエクスポート機能の開発でRFCを使用し、公開してフィードバックを集め、最終的な解決策に至るまで繰り返し議論しました。

Outlines

00:00

👋 紹介とチームの拡大

アレックスはMataのReact開発者経験チームのソフトウェアエンジニアとして、React NativeとMetroの統合、新機能、2023年の焦点について語ります。彼らは主にロンドンに拠点を置いており、2022年に大幅に成長しました。チームはReact NativeとReactのコンポーネントをサポートし、開発者ツールチェーン全体を担当しています。また、FB Metroと呼ばれる内部機能セットでMetroをラップし、JavaScriptツールチェーン、デバッグ、React DevToolsをカバーしています。

05:05

🚀 Metroの役割と将来の展望

MetroはReact NativeのJavaScriptビルドツールであり、バンドラーとして機能します。Expo CLIやReact Native CLIで使用され、アプリケーションのJavaScriptコードを最適化されたバンドルにコンパイルします。MetroはReact Native開発ループに深く統合されており、開発者が即時のフィードバックを得られるように設計されています。MetroはEpicの規模でパフォーマンスを発揮し、並列処理とキャッシュを活用してスケーラビリティを実現しています。また、オープンソースコミュニティとの連携を強化し、FB MetroからオープンソースのMetroへの機能移行を進めています。

10:07

🔍 Metroの新機能と改善点

MetroはReact Nativeニーズに焦点を当てた開発ツールであり、React NativeがMataで成功するUIフレームワークとなることを支援します。チームは、より幅広い機能を提供し、オープンソースコミュニティと密接に協力して開発を進めています。重要な改善点として、Dynamic Imports、シムリンク、npmの互換性、およびパッケージエクスポートが挙げられます。これらの機能は、React Nativeの開発者により多くの柔軟性とnpmパッケージとの互換性を提供します。

15:09

🛠️ 2022年および2023年のハイライト

2022年から2023年現在までに、Metroは33のリリースと52のバグフィックスを提供しました。注目すべきは、require contextと呼ばれる外部貢献で、これはExpoから貢献され、Metroに組み込まれています。また、シムリンクのサポートが追加され、npmパッケージマネージャーやworkspaces、monoreposのサポートが向上しました。さらに、パッケージエクスポートのサポートが追加され、React Nativeの開発者により多くのnpmパッケージとの互換性を実現しました。

20:10

🔗 開発中の新機能と改善

Metroは、遅延バンドル機能を組み込み、開発者が大規模なアプリケーションを扱いやすくなります。遅延バンドルは、Dynamic import構文とreact.lazy APIをサポートし、必要に応じてコードをバンドルします。また、SWCという高速コンパイラの使用を検討し、Babelの代わりに使用することで、Reactコードをより簡単に記述できるようにしています。さらに、Metroはインクリメンタルビルドシステムを改善し、より正確で高速なビルドを実現しています。

25:12

🔧 デバッグとReact Native開発体験の改善

React Nativeのデバッグ機能の強化が進められており、Chrome DevToolsで見るスタックトレースを改善する機能が追加されました。また、One-click Hermes debug機能を提供し、開発者が簡単にデバッグできるようにしています。さらに、React DevToolsの改善と、デバッグ用のブラウザライクなUIコントロールが計画されています。これらの機能は、React Native開発者の開発体験を向上させることを目指しています。

🤝 貢献者の歓迎とコミュニティへの協力

Metroはオープンソースプロジェクトであり、新しい機能や改善点を歓迎しています。リポジトリには良い最初のissueが作成されており、コミュニティのメンバーが貢献しやすくなっています。また、React Native開発体験全体を改善するために、Metro以外の問題にも取り組む予定です。

Keywords

💡React Native

React Nativeは、Facebookによって開発されたクロスプラットフォームのフレームワークで、JavaScriptを使用してiOSとAndroidのネイティブアプリケーションを開発できます。このビデオでは、React Nativeの開発体験チームがMetroというJavaScriptビルドツールについて話しており、React Nativeの開発プロセスに密接に関与しています。

💡Metro

MetroはReact NativeのJavaScriptビルドツールであり、アプリケーションのJavaScriptコード、依存関係、アセットをReact Nativeで実行するための最適化されたJavaScriptバンドルを作成します。ビデオでは、MetroがReact Nativeの開発ループに深く統合されており、開発者が即時のフィードバックを得られるようにサポートしていると説明されています。

💡Fast Refresh

Fast RefreshはReact Nativeの機能で、開発者がコードの変更を即座にプレビューできるように設計されています。ビデオでは、Metroがこの機能をサポートし、開発者が大規模なコードベースで迅速に作業できるようになるものとされています。

💡SWC

SWCは高速なコンパイラで、Babelの代替として多くのウェブバンドルツールで使用されています。ビデオでは、MetroがSWCと統合することで、Reactコードの書込みを容易にし、バンドルプロセスをさらに高速化する可能性があると触れています。

💡Lazy Bundling

Lazy Bundlingは、開発者が作業している画面のコードだけをバンドルするMetroの機能で、アプリの起動時間を短縮し、開発体験を向上させます。ビデオでは、大きなアプリケーションでの開発プロセスを高速化するためにLazy Bundlingが導入されており、標準のJavaScriptのDynamic import構文とReact.lazy APIをサポートしていると説明されています。

💡Package Exports

Package Exportsは、npmパッケージがパッケージエントリーポイントを指定するための最新の仕様であり、Node.jsランタイムとバンドラーでサポートされています。ビデオでは、MetroがPackage Exportsをサポートすることで、React Nativeのアプリ開発者がnpmパッケージとより互換性のあるプロジェクトを作成できるようになると述べています。

💡Sim Links

Sim Linksは、ディレクトリやファイルへのシンボリックリンクを追跡できるMetroの機能で、開発者がより柔軟なパッケージ管理と依存関係のオーバーライドができるようになります。ビデオでは、Sim LinksがMetroに追加され、開発者がシンボリックリンクを含むプロジェクトをより効率的に扱えるようになると紹介されています。

💡Incremental Build System

Incremental Build Systemは、変更された部分だけを再ビルドすることで、ビルド時間を短縮するシステムです。ビデオでは、Metroがインクリメンタルビルドシステムを改善し、より正確で高速な開発体験を提供する取り組みを行っていると説明されています。

💡Debugging

デバッグは、ソフトウェア開発者がアプリケーションのバグを特定し修正するプロセスです。ビデオでは、React Nativeのデバッグ体験の向上が重要な領域として挙げられており、Metroチームがデバッグ機能を改善し、開発者がより効率的に作業できるように取り組んでいると述べています。

💡Open Source Community

オープンソースコミュニティは、ソフトウェアの開発と配布を通じて協力し合う人々で構成されています。ビデオでは、Metroチームがオープンソースコミュニティと密接に連携し、Metroの機能を共有し、コミュニティからのフィードバックに基づいて改善を進めていると語っています。

💡Epic Scale

Epic Scaleは、非常に大規模なプロジェクトを扱うことを意味し、ビデオではMetroがFacebookのモバイルコードベースをサポートしていると触れています。これは約30万以上のJavaScriptソースファイルと175以上のReact Nativeアプリエントリーポイントを1つのMetro設定で実行していることを示しています。

Highlights

Alex is a software engineer on the React Developer Experience team at Meta, focusing on Metro and its integration with React Native.

The React Developer Experience team is based in London and has grown significantly in 2022.

Metro is a JavaScript build tool for React Native, acting as a bundler and preparing code for the target platform.

Metro is deeply integrated into the React Native development loop, supporting features like fast refresh and JavaScript debugging.

Metro's architecture allows for parallel work and efficient caching, enabling scalability at Epic's scale.

The team has been focusing on improving npm compatibility and addressing issues like dynamic imports and symbolic links.

Metro is transitioning features from FB Metro to open source and engaging more with the community.

The team has formed a bundler working group and hosted a Core Contributors Summit to gather feedback on Metro features.

Microsoft has been a significant partner, contributing feedback and use cases for improving Metro's behavior on Windows.

Expo has collaborated with the team on performance optimizations and new features like CSS support and server-side rendering.

The vision for Metro is to be a modern, fully web-compatible build system for truly universal apps.

The team shipped 33 releases of Metro from 2022 to now, including bug fixes and features like require context and simlink support.

Package exports, a modern spec for npm packages, is now supported in Metro, improving compatibility and ecosystem capacity.

Lazy bundling is being developed to allow Metro to bundle only the screen being worked on, improving startup times for large apps.

The team is exploring the use of SWC, a fast compiler, to potentially improve cold start times and build speeds.

Improvements to Metro's incremental build system aim to make it more resilient and maintainable.

The team is committed to enhancing debugging tools and experiences for React Native developers.

New features like the X Google ignorelist Source map extension and one-click Hermes debug aim to simplify the debugging process.

The team welcomes contributions and is creating 'good first issues' on the repository for community involvement.

Transcripts

hi everyone my name is Alex and I'm a

software engineer on the react developer

experience team at Mata

today I'd like to talk to you about

Metro how it fits into react native

recent new features in Metro and what

we're focusing on in 2023

so we're the react developer experience

team

we look after Metro and other react

native and react components and we're

predominantly based in London

some good news we grew significantly in

2022

as a long time react native user getting

to join this team really is an honor I'm

delighted to get to work alongside such

wonderful and talented people on this

amazing technology

in fact many of the team are present in

the audience today

please say hi if you see us and we'll be

around for the community Lounge later

today

it might be useful to explain what

develop experience is in a couple of

ways

this is how our team sits in the react

team supporting products at Mata

we're right between runtime capabilities

I.E react natives native components the

native framework and release functions

which supports how we test and ship

releases at Mata

for developer experience we handle the

end-to-end experience when using the

react development tool chain this

encompasses Metro and FB Metro which

wraps Metro with an internal feature set

this covers the JavaScript tool chain

debugging and react Dev tools

in addition we look after internal

infrawork and supporting our product

teams that matter

and this is roughly a 50 50 time split

this pie chart is a useful view just to

understand that you won't be seeing work

from all of the team members all of the

time

again supporting internal tooling at

Mata for our product teams

then for roughly the other half the time

building and supporting our open source

tools

with a bigger team focused on developer

experience let's put in context the

value of Metro today and the principles

will follow investing in its future

so Metro is the JavaScript build tool

for react native

at its core Metro is a bundler

it's the tool used by Expo CLI and react

native CLI when compiling your

application

It prepares your JavaScript code

dependencies and assets to run in react

native resolving Imports between your

JavaScript modules to compile an

optimized JavaScript bundle for the

Target platform

as well as statically bundling Metro is

deeply integrated into the react native

development Loop

Metro's runtime component supports fast

refresh during development giving

developers instant feedback independent

of the scale of the code base

Metro incrementally serves Source Maps

so developers can instantly understand

stack traces and where they appeared in

source code

Metro also interfaces with the

JavaScript engine on the device to

support JavaScript debugging

so it Powers these core features of the

react native development experience

built into react native CLI and the Expo

Dev server

Metro is designed to be fast scalable

and integrated

Metro is built for performance at Epic

scale

in addition to incremental and error

resistant fast refresh one of the key

reasons Metro scales is because of its

architecture

Metro does work in parallel using

workers and avoids where possible doing

unnecessary work

transformation is one of the most

expensive operations which we run in

parallel

Metro transforms files individually and

leaves the simplest work to the end this

happens hand in hand with module

resolution before the very fast

operation of serialization

because module Transformations happen

per file they're individually cachable

the security is important to enable

scale

at Mata we speed up teams working on the

same project by reusing cache artifacts

this uses a remote cache meaning local

machines don't have to rebuild files

that haven't changed relative to the

main branch

what do we mean by epic scale

meta's mobile code base has roughly or

greater than 300 000 JavaScript source

files and 175 or more react native app

entry points running off the same Metro

config

with our remote transform cache we're

able to achieve a roughly four second

typical bundle request and 220

milliseconds typical fast refresh

updates

with our architecture

the speed that Developers

receive scales with

changes and not with the size of the

code base

and we've also seen similar success

stories in open source

Airbnb were able to achieve a roughly 55

reduction in average build time using

Metro's layer transform cache

over webpack

Metro isn't just a bundler it's from the

react team

it's a development tool that's focused

on react native needs and this will be

an ongoing design goal

a case study here is far to refresh this

is a feature that rolled out first on

react native before it existed on react

web internally

Metro was the in-house bundler where

this feature could be built end to end

and proven at scale before being rolled

out to users with a complete ux picture

we'll see another example of this later

today with lazy bundling

we want Metro to continue doing all

these things well Metro is a vital

component of every react native app and

serves some of the biggest react native

products out there as well as our own

apps that matter

in the past our team's Focus was on

internal use cases for Metro and

ensuring that react native was a

successful UI framework at Mata was our

top priority

since 2022 the Metro team at meta grew

and this now allows us to focus more

heavily on sharing the full benefits of

Metro with the open source community

we absolutely recognize that there are

open source features many of you have

been waiting to see in Metro which we

couldn't prioritize when the team was

smaller

in particular around npm compatibility

features because we weren't using these

internally it's taken time to prioritize

these features with the smaller team we

had before

for example Dynamic Imports was

something we already had a custom

internal solution for but was tied

closely to meta's tooling

and of course not forgetting issue

number one sim links more on this later

so in the last year we've been working

to make this better

we want to build Metro in the open and

with the react native community

we've moved to fortnightly release

schedule we are shipping improved docks

with four new guides deep Dives in 2022

and 2023

we're moving the features from FB metro

into open source Metro and we're

engaging with the community more

um and Publishing public rfcs when we do

so

in 2022 we've also been building up our

relationships with existing Partners we

formed a bundler working group to

restore participation by us and partners

in developing Metro

understanding partner and Community

needs and coordinating work

along with building this relationship in

the bundler working group

the core contributors Summit was a

second turning point for re-engaging

with the community

this event was hosted over two days by

our friends at coolstack last September

at react native EU

we decided to run two sessions for the

Metro team to put ideas out in the open

and get design feedback on features we

were considering for Metro and the

ecosystem

and we're extremely grateful for the

conversations we had in the open that

day

in particular with Microsoft it's great

to see another company using metro with

react native at a similar scale

Microsoft have gone all in on react

native across several products

specifically for our team a huge win

here is Microsoft's been bringing back

the use of Metro across the projects

Microsoft's use cases on Windows have

brought useful feedback and

contributions for improving mattress

behavior on this platform

our next kit is a community project that

has used extension points in metro to

deliver functionality for Microsoft and

the community

when we've historically lacked the

bandwidth

this has validated Concepts such as Sim

links validating the real needs of users

were there

and we can later pull these ideas into

Metro

next Expo

we're happy to fill a very active

collaboration with Expo in particular

motivated around performance Universal

apps and Expo router

together we've worked on the design of

new features and have supported Expo in

becoming core contributors to the Metro

code base

shipping features like require context

web performance optimizations and

typescript import aliases

Metro is becoming the default bundler

for Universal Expo app development on

all platforms and we're committed to

improving the bundling tool chain

together

we also have new experimental features

in coming contributed by Expo

such as CSS support

and the use of Metro on the server for

static rendering of websites

before going into the new features we've

shipped and what we're planning for the

future I want to take a moment to talk

about our overall vision for Metro and

what we want Metro to be

Metro is the build system for Yak native

we want to make it modern and fully web

compatible so that you can write use it

to write truly Universal apps

Metro is a scalable build system it's

fast and reliable and it stays that way

as your project grows and your team

grows

we design Metro specifically to work

well with react native and Frameworks

like Expo router out of the box

the ability to deeply integrate with

react native gizmetro superpowers and

we'll see another example of this later

we're always looking to share more of

what we've built around Metro at meta

with open source users our goal is to

run the exact same version of Metro

internally

we're building Metro to be ready for the

future of react as react continues to

innovate on ways to build great user

experiences we'll continue to innovate

on developer experience and in

supporting the latest react features

let's move into the Highlight Reel of

some of the features we've shipped in

2022 and 2023 so far

from 2022 to now

we've brought back activity in the code

base we've shipped 33 releases of Metro

which have included 52 distinct bug

fixes along with some features

[Applause]

the very first big feature from one of

strengthened Partnerships is required

context

and is the single largest external

contribution in metro to date

required context is a feature originally

available in webpack which Expos

contributed to Metro

this is an advanced feature typically

used by Frameworks where you can require

directory of modules with an optional

search pattern

and of course it Powers the new file

based routing in Expo router

require contacts fully supports Metro's

incremental file system independency

graph

meaning added and roof files can update

Expo router using fast refresh

simlink supports

yes

we really appreciate Microsoft for

kicking off the conversation of this in

our in RX kit and providing a first

implementation that solved the most

common simlink workflow for users

trust us we're very happy to finally

tackle this issue directly in Metro

with Sim link support metro is now able

to follow and track symbolic links to

directories and files

what does this enable support for

signaling based node modules layouts

which means we can now support newer

package managers such as pmpm

support for workspaces and monorepa

setups for the time being for react

native template projects this will still

need corresponding changes for Native

dependencies but we're working on this

finally support for Linked packages such

as to temporarily override a dependency

during development

we've worked hard to make the first

party support for Sim links and Metro

fast and correct

Metro will follow multiple SIM link hops

so long as they're inside the Project's

watch folders

Sim links are fully represented in

Metro's in-memory Farm app and

dependency graph

this means we have fast Refresh on

signaling changes

these changes are fully cachable and we

have file existence checks that greater

than 1 million Ops per second

and with and siblings on the Metro is a

feature we universally support on all

desktop platforms with or without

Watchmen

so the speech is currently experimental

because we've yet to fully roll it out

internally at Mata

once we do it will become stable

and also today watch folders containing

Sim links will still need to be

specified

this is out really soon in react native

zero Sims 2 and will be enabled by

default targeting react native 073

next fixture is package exports

package exports is the modern spec for

npm packages to specify package entry

points

it's supported in the node.js runtime

and by bundlers when resolving package

parts

by supporting exports and react natives

app developers should gain more

compatibility with npm packages out of

the box in their projects

and this enables react native package

maintainers to make use of this format

and its new capabilities

this is part of our commitment to

improve the correctness and ecosystem

capacity of Metro

let's quickly cover a couple of these

new capabilities

the basic idea behind package exports is

that packages can specify explicit

mapping of subpaths

this enables package encapsulation

a module matched by export subparts can

be imported externally I.E within your

app but anything not exported is not

accessible outside the package

this format also allows aliases which

point to an underlying file at a

different path

meaning you can export Alias subparts

and change the underlying file

implementation later

today we've implemented package

encapsulation as a warning to reduce

friction in react native projects but do

strongly recommend actioning all

warnings if you encounter them

second feature is conditional exports

this replaces what we've done in the

past with the browser and react native

root fields

and moves to a standardized approach

where

modules can be conditionally selected

for the entry point or

per subath

for instance Metro will now dynamically

match the browser condition when the

platform is web

as part of using the standardized spec

we sent a PR to node to introduce the

react native Community condition

this is available today and will enable

all npm packages to precisely Target

react native apps under Metro and react

native 073

the development of package exports is a

great example of reaching out for

Community input as it's a feature that

posed interesting design questions that

would affect the whole react native

package ecosystem

so at last Autumn's core contributors

Summit AT coolstack that's where we

first pitched this feature

and we published a public RFC that had

multiple feedbackgrounds as we iterated

towards the solution we wanted

for more information on breaking changes

and our migration guide for factory

maintainers check out the new guide in

the Metro Docs

now let's take a look at what we're

working on next

again this is a highlight reel of

projects that we're working on and that

we're happy to share publicly

Metro

we're building lazy bundling into Metro

currently in preview this is another

feature that we've been building in the

open and brings an internal FB Metro

feature to open source

in development before your app can run

Metro has to compile your JavaScript

code and deliver it to the device

when you have a large app with lots of

screens this means that you have more

code so it takes longer to compile all

of it as a result you need to wait

longer before you can actually work on

your app

lazy bundling is a new feature that lets

Metro bundle just the screen you're

working on so no matter how big your app

gets it always starts up super fast in

development

behind the scenes lazy bundling works by

supporting the standard JavaScript

Dynamic import syntax and the react.lazy

API which now both work in react native

the same way they do in web

when Metro encounters an import call for

example inside react.lazy it will stop

bundling and generate a link to a

separate bundle

but the client can fetch lazily from

Metro when the code is needed

Expo router V2 supports lazy bundling

out of the box with async routes

from react native 073

lazy bundling will work out of the box

for all apps all you need to do is use

the navigation framework that uses

standard Imports and react lazy to tell

Metro where the entry point to each

screen is

whoa

swc

as shed so far Metro is already Fast By

Design particularly because we run the

transformer in parallel and heavily used

caching to avoid recompiling modules

that haven't changed

this doesn't mean there isn't room for

improvement and we're open for

integrating with other tools even ones

written in other languages where the

trade-offs fit

this project is around speeding up the

Transformer itself so we're exploring

the potential use of a fast compiler

which in particular could improve cold

start times and build speeds in CI

environments

swc has been established as a strong

alternative to Babel and is used in many

web bundling tools we want to align

Metro with the shift in the industry to

make it even easier to write react code

that runs on all platforms

we're still in the research phase on

this but for most apps We Believe swc

should be a drop-in replacement

you'll always have the option to run

your own custom Babel plugins and

presets alongside swc

but we believe most apps will end up not

needing to run Babel at all

we believe that fast refresh or

incremental bundling is one of Metro's

most important features for developers

to work fast in huge code bases

Metro Joe's inspiration from Modern

large-scale build systems like bug and

was one of the first bundlers to bring

these ideas into the JavaScript world

this gives us confidence that it's

possible to create an incremental build

system that's both fully correct and

Incredibly fast

therefore we've invested in getting the

infra in the bundler that powers fast

refresh to be correct and even faster in

some cases

here's two big changes we're making

towards the skull

last year we shipped a new cycle

collection algorithm

we fixed the call Bug affecting how we

handle changes to modules that have

circular dependencies and we use the

opportunity to rewrite the incremental

build algorithm to be more resilient and

easier to maintain

we now have arise set on absolute

reliability for incremental bundling

this is powered by Metro's incremental

file system where in most cases today

fast refresh works really well

however we've seen cases where it might

not work completely

for example on an npm reinstall that

brings wide code base changes

the aim with this project is to close

the gap on tracking classes of change

event that we haven't before

example

modeling the set of potential files when

you add or remove files of platform

Civic extensions

all modular resolutions which are

dependent on package.json rules such as

package exports

with this ongoing effort we want to get

into a place where you never have to

restart Metro and never have to clear

the cache

and excitingly this could even enable us

to Cache the dependency graph as well

for faster Metro starts

we believe that this level of

incremental bonding correctness is an

area where Metro is leading the way in

the bundling ecosystem

we hear your input there are many more

features raised by users that we'd love

to and we'll begin working on next

in particular optimization features such

as tree shaking and bundle splitting

and features for web such as webpack

style externals

so in addition to Metro our larger

developer experience team is beginning

to tackle other problem spaces for

reactive users

from the state of react native survey

we've heard that users have identified

react native debugging as a key area of

improvement and we absolutely agree

the first small feature we've been able

to ship towards this is the X Google

ignorelist Source map extension

this allows stack traces when viewed in

Chrome devtools to

ignore files from frames that likely

have no useful information

the Chrome Dev tools team presented this

feature in February this year

and we're glad to have been able to come

back and implement it so soon

by default we're going to hide

stack Tracer smaller model sources so

collapsed by default but can be expanded

this is going to help you see denser

output and more useful output in your

console logs

one click Hermes debug is a feature to

make debugging simple and delightful

now you'll be able to click on one

button to open Hermes in debugging in

Chrome Dev tools straight from the dev

menu

we believe the Chrome expector to be an

all-in-one solution for 90 of use cases

and we'll be working with our partners

to improve its feature set as a react

native debugger

you'll be hearing more about this from

Cedric later today

and will simply be enabling instant

launch for react Dev tools

one more feature is

pause breakpoint overlay

right now when you create a breakpoint

and pause it in the debugger the app

will freeze without much indication of

if the app is Frozen

we plan to implement a very browser-like

UI control above react native apps to

indicate that it's paused and debugger

[Applause]

so debugging is a common theme and

something we're committed to investing

in throughout 2023

again we're reaching out to multiple

partners to form a debugging working

group to make sure we're aligned on

efforts approaches and standards going

forward and investing in this area

together

so in summary

we're back

our new team investment from 2022

enables us to work on long-standing

issues in Metro where we didn't have

capacity before

we want Metro to provide the best

end-to-end developer experience for Yak

native

addressing feature gaps always focused

on Epic scale and we will keep

innovating and we're going to make that

innovation in the open source code base

and with our partners

finally we're looking at features Beyond

Metro to improve debugging project setup

upgrading and other areas of the react

native development experience

oops

sorry

finally we welcome contributors

we've started creating some good first

issues on the repository and we'd love

you to get in touch if you want to help

us build these features in the open

most of the London team is here today to

chat both about Metro and wider devx

features

thank you

[Applause]

[Music]

foreign

[Music]

[Music]