Alex Hunt – Metro and React Native DevX in 2023
Summary
TLDRアレックスは、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
👋 紹介とチームの拡大
アレックスはMataのReact開発者経験チームのソフトウェアエンジニアとして、React NativeとMetroの統合、新機能、2023年の焦点について語ります。彼らは主にロンドンに拠点を置いており、2022年に大幅に成長しました。チームはReact NativeとReactのコンポーネントをサポートし、開発者ツールチェーン全体を担当しています。また、FB Metroと呼ばれる内部機能セットでMetroをラップし、JavaScriptツールチェーン、デバッグ、React DevToolsをカバーしています。
🚀 Metroの役割と将来の展望
MetroはReact NativeのJavaScriptビルドツールであり、バンドラーとして機能します。Expo CLIやReact Native CLIで使用され、アプリケーションのJavaScriptコードを最適化されたバンドルにコンパイルします。MetroはReact Native開発ループに深く統合されており、開発者が即時のフィードバックを得られるように設計されています。MetroはEpicの規模でパフォーマンスを発揮し、並列処理とキャッシュを活用してスケーラビリティを実現しています。また、オープンソースコミュニティとの連携を強化し、FB MetroからオープンソースのMetroへの機能移行を進めています。
🔍 Metroの新機能と改善点
MetroはReact Nativeニーズに焦点を当てた開発ツールであり、React NativeがMataで成功するUIフレームワークとなることを支援します。チームは、より幅広い機能を提供し、オープンソースコミュニティと密接に協力して開発を進めています。重要な改善点として、Dynamic Imports、シムリンク、npmの互換性、およびパッケージエクスポートが挙げられます。これらの機能は、React Nativeの開発者により多くの柔軟性とnpmパッケージとの互換性を提供します。
🛠️ 2022年および2023年のハイライト
2022年から2023年現在までに、Metroは33のリリースと52のバグフィックスを提供しました。注目すべきは、require contextと呼ばれる外部貢献で、これはExpoから貢献され、Metroに組み込まれています。また、シムリンクのサポートが追加され、npmパッケージマネージャーやworkspaces、monoreposのサポートが向上しました。さらに、パッケージエクスポートのサポートが追加され、React Nativeの開発者により多くのnpmパッケージとの互換性を実現しました。
🔗 開発中の新機能と改善
Metroは、遅延バンドル機能を組み込み、開発者が大規模なアプリケーションを扱いやすくなります。遅延バンドルは、Dynamic import構文とreact.lazy APIをサポートし、必要に応じてコードをバンドルします。また、SWCという高速コンパイラの使用を検討し、Babelの代わりに使用することで、Reactコードをより簡単に記述できるようにしています。さらに、Metroはインクリメンタルビルドシステムを改善し、より正確で高速なビルドを実現しています。
🔧 デバッグとReact Native開発体験の改善
React Nativeのデバッグ機能の強化が進められており、Chrome DevToolsで見るスタックトレースを改善する機能が追加されました。また、One-click Hermes debug機能を提供し、開発者が簡単にデバッグできるようにしています。さらに、React DevToolsの改善と、デバッグ用のブラウザライクなUIコントロールが計画されています。これらの機能は、React Native開発者の開発体験を向上させることを目指しています。
🤝 貢献者の歓迎とコミュニティへの協力
Metroはオープンソースプロジェクトであり、新しい機能や改善点を歓迎しています。リポジトリには良い最初のissueが作成されており、コミュニティのメンバーが貢献しやすくなっています。また、React Native開発体験全体を改善するために、Metro以外の問題にも取り組む予定です。
Mindmap
Keywords
💡React Native
💡Metro
💡Fast Refresh
💡SWC
💡Lazy Bundling
💡Package Exports
💡Sim Links
💡Incremental Build System
💡Debugging
💡Open Source Community
💡Epic Scale
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]
Weitere ähnliche Videos ansehen
10 Takeaways for React Native Devs from the App.js conference
What's an Expo Development Build?
Flutter vs React Native vs. Swift/Kotlin In 5 Minutes
Reactとは?|Reactとは何か、特徴などを3分でわかりやすく解説します【プログラミング初心者向け】
【2024最新】アプリ開発、どのプログラミング言語がいいのか?
Can you use Clojure for mobile, backend, frontend, scripts, desktop and embedded development?
5.0 / 5 (0 votes)