00:00:00
hi everyone my name is niika CTI I'm an
00:00:02
engineer on the react team at meta and
00:00:05
I'm super excited to be here back on the
00:00:08
upjs stage to talk about Frameworks so I
00:00:12
want to ask you how many of you saw the
00:00:16
react native keynote at react com last
00:00:18
week raise your
00:00:20
hand not many not many cool so I want to
00:00:25
start with one quote from that keynote
00:00:27
and by the way go check it out that
00:00:29
keynote because we announced quite a lot
00:00:30
of things but one quote that we shared
00:00:33
during that keynote is this one you're
00:00:37
either using a framework or you're
00:00:40
building your own
00:00:43
framework so this quote comes from our
00:00:47
multi-year experience building tools to
00:00:51
create mobile apps like react
00:00:53
native we personally feel that you
00:00:56
should be building production ready
00:00:58
application and F on production code you
00:01:01
should not be solving common
00:01:03
infrastructure problems that someone
00:01:05
else already solved for you so what are
00:01:08
those problems that I'm referring to
00:01:10
those infrastructure problem so I'm
00:01:13
personally an Android engineer I've been
00:01:15
building Android apps for like 10 plus
00:01:17
years and I know how hard it is to build
00:01:20
beautiful production ready UPS which can
00:01:23
satisfy the user needs and keep up to
00:01:25
date with an evolving Market with
00:01:27
different device form factors and so on
00:01:31
every app developer out there Android or
00:01:33
iOS Developer needs that wants to ship
00:01:36
to store and reach a five star rating
00:01:39
needs to solve a set of common problems
00:01:42
problems like handling navigation deep
00:01:45
links push notification managing
00:01:47
dependencies and much more like and
00:01:50
really those problems are common to any
00:01:53
any type of mobile
00:01:55
development so in the re native space we
00:01:58
call a tool that solve all of those
00:02:00
problems are Rea native framework and
00:02:04
last week at react conf we shared how
00:02:06
using a reactnative framework is now the
00:02:09
official recommendation from the direct
00:02:11
native team and our framework of choice
00:02:14
is Expo so yes you should be using Expo
00:02:18
for newly created project so as I amjs
00:02:23
assume all of you know Expo you just saw
00:02:25
the keynote from Charlie and James and
00:02:28
now you might think okay
00:02:30
I use already use Expo so what like what
00:02:34
are you telling me well today I want to
00:02:36
Deep dive a bit into some of the
00:02:39
implications that the Advent of react
00:02:42
native Frameworks are coming and why I
00:02:45
personally believe rective Frameworks
00:02:47
are a huge deal for the rective
00:02:49
ecosystem as a
00:02:51
whole so first I want to walk you
00:02:53
through what are R Frameworks
00:02:57
exactly how they're going to affect to
00:03:00
being either app developer or a library
00:03:02
developer and why we from the react team
00:03:06
at meta we decided to implement those
00:03:08
changes right now so let's start from
00:03:11
the what what are react native
00:03:13
Frameworks so we recently updated the re
00:03:16
native. website to clarify what is a re
00:03:20
native
00:03:21
framework and we Define a re native
00:03:23
framework as a toolbox with all the
00:03:26
necessary apis to let you build
00:03:28
production ready
00:03:30
application this concept is sort of
00:03:33
similar to the same concept we have on
00:03:35
web with Frameworks such as next or
00:03:38
remix that offer a a toolkit to build
00:03:41
production ready web
00:03:44
application so let's Deep dive a little
00:03:47
bit more on what are the
00:03:48
responsibilities of what we call the
00:03:50
core of react native and the framework
00:03:54
layer so inside re native core we have
00:03:57
API such as native components modules
00:04:00
and around time those are basically our
00:04:03
bread and butter components lets you
00:04:06
render things on screen and modules lets
00:04:08
you access the native capabilities of
00:04:10
the platform where your application is
00:04:12
running the run time instead is taking
00:04:14
care of orchestrating the various
00:04:16
threads and making sure that react
00:04:18
native can just start when the
00:04:19
application is
00:04:21
starting then we have a series of apis
00:04:23
or integration points that are necessary
00:04:26
for react native to work properly for
00:04:28
example integration with bonders such as
00:04:30
Metro integration with the buger
00:04:33
tools and so on we also have integration
00:04:36
points with JavaScript engines such as
00:04:38
Hermes and Native build tools such as
00:04:41
grle and cocka pods and finally re
00:04:43
native core is also responsible of
00:04:45
defining apis that lets you extend the
00:04:48
capabilities of react native with third
00:04:51
party
00:04:52
libraries and so now let's move on to
00:04:54
the framework layer on the framework
00:04:56
layer starting from the party Library
00:04:59
the Frameworks are responsible of
00:05:01
helping you link together those
00:05:04
dependencies and we call this autol
00:05:06
linking this in a sense simplifies the
00:05:08
apis that are provided by core to link
00:05:10
libraries together and talking about
00:05:12
dependencies another crucial task is
00:05:14
keeping those dependencies up to date
00:05:17
and so another responsibility of
00:05:19
Frameworks is keeping the reactnative
00:05:21
versions up to date that we know it has
00:05:23
been a really long standing pain for the
00:05:25
rective
00:05:26
ecosystem then Frameworks are also
00:05:28
responsible of offering you solutions
00:05:31
for routing and navigation as you want
00:05:33
to probably create more complex apps
00:05:35
with various screens where users can
00:05:37
navigate through and Frameworks are also
00:05:40
responsible of helping you publish to
00:05:42
the store helping you running Builds on
00:05:45
the cloud shipping over the air updates
00:05:48
and helping you scaffolding new
00:05:51
projects so if you have been doing react
00:05:53
native you're probably either using Expo
00:05:56
that solves all of those problems in
00:05:58
green or you just teach together several
00:06:01
tools to build your own framework to
00:06:04
solve those same
00:06:07
problems
00:06:09
so we call a framework that is stitching
00:06:13
together those tools built by your
00:06:16
own a bepoke re native framework this is
00:06:19
like a self-made framework at mattera we
00:06:23
have our own bspoke framework which
00:06:26
helps us integrate react native with our
00:06:28
internal infrastructure and Tool in we
00:06:30
don't use either Expo nor the community
00:06:33
CLI and don't get me wrong there is
00:06:36
nothing bad we using a b spook framework
00:06:39
but you need to be aware of what are the
00:06:42
tradeoffs that comes from recreating
00:06:44
your own
00:06:46
solution so we believe that most users
00:06:49
out there will actually be better off
00:06:51
using a recommended re native framework
00:06:55
instead so we recently updated a re
00:06:57
native. website and by the way that's
00:07:00
the new front page go check it out if
00:07:03
you haven't yet and shout out to John
00:07:05
for helping us with the design of this
00:07:07
phage and in the front page you will
00:07:11
find uh that we give a recommendation
00:07:14
for
00:07:14
Frameworks and once we recognize that
00:07:16
our framework meets our criteria to
00:07:18
become a recommended framework we are
00:07:20
more than happy to Spotlight it in the
00:07:22
front page as we do here for Expo so now
00:07:26
you might be wondering what makes a
00:07:28
bespoke phrase framework that I create
00:07:30
over the weekend actually a recommended
00:07:34
framework so we do have a set of
00:07:36
guidelines with dos and don'ts the
00:07:39
Frameworks needs to follow to become an
00:07:41
officially recommended framework from
00:07:43
the rective
00:07:45
team so those are the dos and I want to
00:07:48
spend a couple of moments here talking
00:07:50
about one that I think it's sort of both
00:07:52
important but also a little bit
00:07:53
controversial which is be popular now
00:07:57
you might be wondering how can a
00:07:58
framework be become popular if it's not
00:08:01
recommended no it's kind of the chicken
00:08:03
and egg
00:08:04
problem well we added this requirement
00:08:06
because we wanted recommend framework
00:08:08
that have topnotch developer
00:08:11
experience Expo for example has a decade
00:08:14
long experience in building Frameworks
00:08:16
on top of sh native and we believe that
00:08:19
their developer experience is best in
00:08:21
the market you can definitely go home
00:08:24
and create your react native framework
00:08:26
over the weekend but we won't be
00:08:28
recommending it till the developer
00:08:30
experience is as polished as we expect
00:08:32
it to be and on the
00:08:35
dawn again this is the list but I want
00:08:37
to focus on how most of them starts with
00:08:39
the word fork so Dawn Fork as we want
00:08:43
Frameworks to be a great team player in
00:08:45
our ecosystem and don't create bubbles
00:08:48
where users are locked in and can't move
00:08:50
between Frameworks if they wish
00:08:53
to so I talked about what are react
00:08:55
native Frameworks now let's talk about
00:08:57
how the introduction of react Frameworks
00:09:00
in our system is going to affect
00:09:02
you and the implication here are
00:09:05
different whether you are an app
00:09:06
developer or a library
00:09:10
developer let's start from App
00:09:14
developer so if you're ready using using
00:09:17
Expo you guessed it you're fine like
00:09:21
you're basically using the recommended
00:09:22
Solutions so there is nothing for you to
00:09:24
worry about if you're not using Expo
00:09:27
you're probably using a bespoke
00:09:29
framework of some sort which most likely
00:09:32
uses the re native Community CLI under
00:09:34
the
00:09:35
hood first so if if you're in this
00:09:38
situation you can definitely consider
00:09:40
moving over to Expo that's an option and
00:09:42
folks Expo also created a web page for
00:09:45
you to help you smooth your
00:09:47
migration however sometimes it's just
00:09:50
not possible fuse Expo you might have
00:09:53
like all sorts of totally valid reasons
00:09:56
and by the way I'm sure Folks at Expo
00:09:58
will be more than happy to hear your
00:10:00
reasons on why you can't use them but
00:10:03
yeah so if that is the case you can't
00:10:06
use Expo what is going to change for you
00:10:09
well the answer is like little to
00:10:12
nothing the introduction of reactnative
00:10:14
Frameworks should be completely
00:10:16
transparent for you even if you're not
00:10:17
using a
00:10:19
framework however we implemented some
00:10:21
changes on our projects newly created
00:10:24
projects are scaffolded and created and
00:10:28
those are changes you probably want to
00:10:29
hear
00:10:31
about so whenever you create a new
00:10:34
project using reative Community CLI you
00:10:37
will invoke this command npx react
00:10:40
native in it so now they we recommending
00:10:44
Frameworks as the recommended way to
00:10:46
create new projects we wanted the need
00:10:49
command to also follow our guidelines
00:10:52
and tell you to use a framework so this
00:10:54
command had to be updated in some form
00:10:57
to understand how we updated this
00:10:59
command let's see how it actually is
00:11:01
composed so first we invoke npx and
00:11:04
there is an npm package which is the
00:11:06
react native package so this is running
00:11:08
code inside the our package but then we
00:11:11
invoke the init command and the init
00:11:13
command comes from the reative community
00:11:16
CLI that is actually responsible of
00:11:18
running this command so to fully
00:11:21
understand let's try to run this command
00:11:23
and let's see what it
00:11:26
does so now I type reative latest in it
00:11:31
name of the app and what this will do is
00:11:35
you see here at the bottom it says
00:11:37
downloading
00:11:38
template so what the NIT command is
00:11:40
actually doing is fetching a template
00:11:43
from
00:11:44
somewhere copying it over and processing
00:11:48
it so this template it's quite crucial
00:11:52
it's like as an important part of the
00:11:55
react native ecosystem no because that's
00:11:57
this sort of the starting point of all
00:12:00
the apps they're using a bisoke
00:12:02
framework so touching it and evolving it
00:12:06
can be can be
00:12:07
complicated so let's see like to fully
00:12:11
understand how the init command has
00:12:13
evolved I want to touch on how this
00:12:16
template has evolved and how the
00:12:19
reactnative community CLI has evolved so
00:12:23
let's start from the template this
00:12:25
template that we saw downloading it from
00:12:28
the NIT command
00:12:29
is actually coming from the reactnative
00:12:31
npm package is under the package and is
00:12:35
inside a folder called you guess it
00:12:38
template so yes every version of react
00:12:40
native ships its version of the template
00:12:45
inside so if in it should evolve to
00:12:48
recommend retive Frameworks we could
00:12:50
just like delete the template and let in
00:12:54
it invoke create Expo up or give you a
00:12:57
like a launcher with all the recommended
00:13:00
Frameworks but as I said template is
00:13:03
quite crucial so we just don't want to
00:13:05
remove it overnight as a lot of
00:13:08
developers are depending on
00:13:10
it so at the same time we also did
00:13:12
wanted to bundle the template inside the
00:13:14
rective package anymore because we feel
00:13:17
that the template is sort of like a
00:13:19
theault implementation of our core apis
00:13:23
I was showing you before so what we did
00:13:26
is actually we moved the template to a
00:13:28
new home so the template will now live
00:13:31
inside this other repository called
00:13:33
reative
00:13:34
community/ template and we just moved
00:13:37
over the files like nothing has changed
00:13:41
but this will make it clear that the
00:13:42
template is now one way to create a
00:13:46
retive app but not the only one and
00:13:49
actually it's not the recommended one
00:13:51
because the recommended is to use a
00:13:53
recommended Rec
00:13:55
framework and we know that a lot of
00:13:57
tools actually depending on the template
00:13:59
for example the reative upgrade Alper if
00:14:01
you have been using it to manually
00:14:03
upgrade your reative version that tool
00:14:06
is generated by diffing the template
00:14:08
files so yes that tool will still keep
00:14:11
on working even with a recommendation
00:14:14
for us to use
00:14:16
Expo so I talked about the template now
00:14:18
let me talk about the
00:14:20
CLI the CLI was already located inside
00:14:23
the re native community/
00:14:25
Clio and let me stress out for a moment
00:14:28
how
00:14:29
crucial it is that we call this the re
00:14:31
native Community CLI and not the re
00:14:34
native CLI because it's effectively
00:14:37
maintained by the community and I want
00:14:39
to give a big shout out to colst here
00:14:41
for the tremendous support in
00:14:43
maintaining this crucial piece of
00:14:45
infrastructure and we know that the
00:14:48
combo template plus Community C has been
00:14:51
used successfully for years for years to
00:14:54
be re native Ops however we don't
00:14:57
consider them a re native framework
00:14:59
because they lack all the various tools
00:15:01
such as navigation routing and so on
00:15:03
that are needed to build production
00:15:06
ready UPS hence we are not recommending
00:15:08
them anymore inside the CLI we evolve
00:15:13
some commands and move them inside
00:15:15
reactnative
00:15:16
core to make them reusable across
00:15:18
different Frameworks and also we updated
00:15:22
the init command as I mentioned before
00:15:24
to follow our recommendation so in the
00:15:27
future version of reactnative if if you
00:15:29
attempt to invoke the needit command you
00:15:31
will see this
00:15:33
warning the needit command is deprecated
00:15:36
and this Behavior will change in the
00:15:37
future you can still retain the whole
00:15:40
old Behavior by invoking the init from
00:15:43
the CLI directly or we're going to
00:15:46
appoint users to use uh to check out the
00:15:49
getting started page on native. website
00:15:52
where will be recommending folks to use
00:15:54
ative framework so as I promised little
00:15:58
to not nothing changed for app
00:15:59
developers right all we did is basically
00:16:03
clarifying what is happening behind the
00:16:05
scenes so now let's move on to library
00:16:08
developers if you're a library developer
00:16:10
there are two apis that you could use
00:16:13
today to create your library on one end
00:16:16
you have freeor specific apis and
00:16:18
abstractions such as Expo modules and on
00:16:21
the other end you have core apis from
00:16:24
react native such as for example turbo
00:16:26
modules now you might be wondering
00:16:29
with Rea native Frameworks becoming the
00:16:31
recommended solution what should I
00:16:34
use well here the answer is like
00:16:37
everything in engineering it depends if
00:16:40
you're looking for an API which has
00:16:42
better ergonomics and generally a better
00:16:44
developer
00:16:45
experience go framework specific for
00:16:49
example X modules has great support for
00:16:51
both Kling and zift and just makes for a
00:16:54
better developer experience on the other
00:16:56
hand if you're AB if your library uses
00:16:59
Expo modules you'll be imposing a
00:17:02
framework dependency on all the apps
00:17:04
that are using your library so this
00:17:07
comes at the cost of reduced
00:17:09
compatibility for your library so if
00:17:11
you're looking into wider compatibility
00:17:13
for your library you should consider
00:17:15
using core apis so in a sense Expo
00:17:18
modules framework specific abstractions
00:17:21
gives you access uh like gives you
00:17:24
access to higher level apis while re
00:17:27
native core apis offer you access to
00:17:30
lower level apis to give you a practical
00:17:32
example if you want to write like C++
00:17:34
code in your library you're better off
00:17:37
using the re native core
00:17:39
apis we believe that framework specific
00:17:42
apis like Expo modules are a great
00:17:44
incubator for new apis that can later be
00:17:47
upstreamed inside re native core so yes
00:17:51
I mean I understand they're asking
00:17:53
Library developers here to make a choice
00:17:55
between Frameworks specific and Expo
00:17:58
modules and core apis too modules and so
00:18:00
on is not ideal at the moment but we're
00:18:02
working closely with Expo to fill the
00:18:05
gaps here and horon harmonize those
00:18:09
apis so now I talked a lot about about
00:18:12
what are re Frameworks and how they're
00:18:14
going to impact you and I want to touch
00:18:16
on on why we are making those changes
00:18:20
now so when re was first open source in
00:18:24
2015 it was basically an aatham project
00:18:27
there was no react native ecosystem at
00:18:30
the moment we just created a tool that
00:18:33
lets you bring your react code from web
00:18:35
to Native and we gave it to the end of
00:18:37
the open source Community hoping it to
00:18:40
grow and
00:18:41
Foster well now things have
00:18:44
changed yeah last week at react comp we
00:18:47
mentioned how the react native package
00:18:49
is downloaded weekly more than two
00:18:51
million times and new folks downloaded
00:18:54
the mpm package of Rea native in 2023 7
00:18:58
28 million times we are not a hakon
00:19:02
project anymore and let's be realistic
00:19:06
like if you were to use only the apis
00:19:08
that are provided inside re native core
00:19:12
to build production R of application the
00:19:15
quality of the apps you'll be building
00:19:17
will be suboptimal like you will have a
00:19:20
really hard time we now have a huge
00:19:23
ecosystem of libraries and tools out
00:19:25
there and we wanted to Point new users
00:19:28
towards those
00:19:30
tools and here I want to Echo some of
00:19:33
the words that Charlie mentioned on this
00:19:35
same stage at upjs last year imagine how
00:19:40
users are asking this question over and
00:19:43
over again should I use Expo or a be
00:19:46
react native without
00:19:49
expo well we wanted to sort of answer
00:19:53
this question once for all Charlie
00:19:56
mentioned how XO wanted to make this
00:19:59
question Obsolete and I can't agree more
00:20:01
with him on this
00:20:02
statement imagine how putting users
00:20:04
towards this hard question from the GG
00:20:07
go it's just like it's hurting the whole
00:20:12
reactnative
00:20:14
ecosystem so we folks from the reative
00:20:17
team totally agree with those statements
00:20:21
we want to expose new re native users to
00:20:24
the best developer experience ever and
00:20:27
we strongly believe that this is through
00:20:29
a re native
00:20:31
framework we strongly believe that this
00:20:33
is through Expo
00:20:35
today so we took home those words from
00:20:38
appjs 2023 and we built on it for over a
00:20:43
year this is a picture from the core
00:20:45
contributor Summit we had in September
00:20:48
2023 and I recall we had a 3our session
00:20:53
on Frameworks and trust me it was
00:20:57
intense the beauty of the reative
00:20:59
community is how tus it is we do have a
00:21:02
huge variety of different companies
00:21:04
contributors and players that help us
00:21:06
shape the future of re native so we took
00:21:09
very seriously the opinions of everyone
00:21:11
involved in this
00:21:12
conversation and over the past month we
00:21:15
spend time defining the concept of Rec
00:21:18
native framework through an
00:21:20
RFC there you can find a discussion and
00:21:22
proposal repo The Proposal is quite
00:21:25
lengthy so you can go check it out I
00:21:27
presented the the the Highlights today
00:21:30
but we wrote it so much in detail
00:21:33
because we wanted to move the entire
00:21:36
ecosystem along with us and what I I
00:21:39
personally believe is going to be a
00:21:41
stepping stone for react native as a
00:21:43
whole and inside the RFC there is one
00:21:46
section that says why we're defining
00:21:49
this now and at least for me probably
00:21:52
the most important point is fostering a
00:21:56
healthy Community but if defining what
00:21:59
is a re native framework we are defining
00:22:02
boundaries between different tools and
00:22:04
players and how they interact with each
00:22:06
other and this will just help us grow
00:22:09
together again I strongly believe there
00:22:12
is a huge stepping stone for a brighter
00:22:14
future a future where reative users are
00:22:17
exposed to the best developer experience
00:22:19
on the market thanks to reative
00:22:22
Frameworks so when you go back home
00:22:25
think twice if you really want to build
00:22:28
your own framework or use AR
00:22:32
framework that's all for me thank you
00:22:35
very much and enjoy an amazing
00:22:38
conference
00:22:43
[Music]
