React Native in Webview: Everything You Need to Know - Simone Carazzai | React Native Heroes 2023
Summary
TLDRSimone, a React Native developer at Accentor, discusses the migration from WebView-based apps to React Native. He outlines the process, starting with identifying sections to switch, maintaining UI/UX, and addressing session management challenges. Simone shares strategies for development, testing, and deployment, highlighting the use of tools like Redux Saga for data handling and React Native's capabilities for enhancing user experience. He concludes with a real-case project example, demonstrating improved performance and user engagement post-migration.
Takeaways
- 🌐 The script discusses the migration from web-based applications to React Native, focusing on the transition process and the benefits of using React Native for mobile app development.
- 🔍 Simone, a React Native developer at Accentor, introduces the topic and outlines the agenda, which includes understanding the web view, identifying sections for migration, and discussing development and release strategies.
- 🛠️ Web views are described as components that display web content within a native view, acting as a 'black box' to the app, with limited interaction capabilities.
- 🏢 Companies often rely on web views because they have an existing online presence and believe it is unnecessary to invest in a separate mobile application, aiming for quick and cost-effective solutions.
- 🔄 The immediate update feature of web views is highlighted as a pro, where changes on the web reflect immediately in the app without needing user updates.
- 🚧 The cons of web views include performance limitations, difficulty in maintaining stable sessions, and challenges in continuous information flow due to the 'black box' nature of web views.
- 📈 Tools like Firebase Analytics or SDK integrations can help identify the most used pages in an app, guiding the migration process by prioritizing these sections for React Native development.
- 🛑 Remote config is emphasized as a crucial tool during migration, allowing for quick adjustments and rollbacks in case of issues post-deployment.
- 🔗 The importance of maintaining session management and cross-flow between web view and React Native sections is discussed, with strategies to ensure a seamless user experience.
- 🛍️ A real case study is presented, detailing the migration process of an e-commerce app, focusing on session management, API integration, and user engagement strategies.
- 📝 The use of Redux Saga middleware for managing API calls and state in React Native is explained, showcasing its role in handling data flow and error handling in the migrated app.
- 📈 The script concludes with the ongoing process of migrating more pages to React Native and the continuous improvement of user experience, with plans to migrate the cart page next.
Q & A
What is the main topic discussed by Simone in the script?
-Simone discusses the migration from web view based applications to React Native, including the reasons for such a migration, the process, and strategies for a smooth transition.
Why might companies initially rely on web views for their mobile presence?
-Companies might rely on web views because they already have an established online presence with a website and believe it's unnecessary to invest additional resources to develop a new mobile application.
What are some advantages of using web views for mobile applications?
-Advantages include immediate updates to the application whenever changes are made to the website, and no need for users to update the app or for the company to manage deployments.
What are the main disadvantages of using web views in mobile applications?
-Disadvantages include performance limitations, slower page loading, difficulty in maintaining a stable session, and challenges in continuous information flow due to the web view being a 'blackbox'.
What is a WebView in React Native and how is it used?
-A WebView in React Native is a component that displays web content within a native view. It can be configured with properties like user agent and source, and can communicate with the app through post messages, cookies, and user agent.
How can a React Native application communicate with a WebView?
-A React Native application can communicate with a WebView using post messages, cookies, and the user agent. Post messages allow JavaScript functions to send data to the app, while cookies can maintain user sessions.
What is the role of remote config in the migration process from web view to React Native?
-Remote config can be used as a safety net during the migration process, allowing developers to turn off new features or revert to old components if issues arise post-deployment.
What strategies can be used to maintain a stable user session during the migration to React Native?
-Strategies include using cookie-based sessions, where the session ID is sent by the server and resent with every API call to maintain user login, and managing session cross-app behavior to ensure users remain logged in across different parts of the application.
How does the speaker describe the use of Redux Saga middleware in managing API calls in the migrated PLP page?
-Redux Saga middleware is used to manage API calls with function generators, allowing for pause and resume capabilities, and handling of responses with request and response interceptors to manage session and data flow.
What is the significance of using a phased rollout strategy during the migration process?
-A phased rollout strategy allows for the gradual introduction of the new React Native components to users, enabling the monitoring of performance and user experience, and making adjustments as needed before a full-scale deployment.
What is the importance of maintaining the same UI during the UI/UX implementation phase of the migration?
-Maintaining the same UI is crucial to ensure a seamless user experience and to avoid confusion or dissatisfaction among users who are accustomed to the existing interface.
How can Firebase Analytics or similar tools be utilized in identifying the most important sections for migration to React Native?
-Firebase Analytics can track user actions and provide data on the most used pages, helping developers identify which sections to prioritize for migration to React Native based on user engagement.
Outlines
🛠️ React Native Migration Overview
Simone, a React Native developer at Accentor, introduces the topic of migrating from web view to React Native. The discussion covers the reasons companies initially rely on web views, including cost and time efficiency, and the subsequent decision to switch to React Native due to performance limitations and the 'black box' nature of web views. Simone outlines the agenda for the talk, which includes development migration steps, release strategies, and real-case scenarios from a project they have been working on for two months.
🔗 Communication Between Web and Mobile Apps
This section delves into the methods web apps use to communicate with mobile applications, such as post messages, cookies, and user agents. Post messages are JavaScript functions that facilitate data transfer between the website and the mobile app, which can be intercepted by the web view. Cookies are useful for maintaining user sessions and authentication, and React Native offers a package to manage cookies effectively. The user agent is a string that describes the browser making the request, which can be used by servers to apply different logic based on the type of client. Tools like Firebase Analytics can help identify the most important sections of a web app for migration to React Native.
🛑 Session Management and Cross-Flow Behaviors
The script discusses the importance of session management and maintaining cross-flow behaviors during the migration process. It describes the use of axios for API management, including request and response interceptors to handle cookies and authorization. The project aimed to stabilize sessions by using cookie sessions, which improved user experience by preventing logouts and data loss when the app was backgrounded. Additionally, the script mentions the implementation of session cross-app and web behavior, ensuring users remain logged in when redirected to web pages from the React Native app.
📈 Implementing Redux and React Animated for Enhanced UX
Simone explains the use of Redux and Redux Saga middleware in the migrated PLP (Product Listing Page) to manage state and side effects. Function generators are utilized for pausing and resuming operations, allowing for efficient data handling. The script also covers the use of React Animated to maintain the user's scroll position after filtering or sorting products, enhancing the user experience by preventing loss of view. The importance of remote configuration and phased rollouts for testing and gradual implementation is highlighted, ensuring a smooth transition and the ability to revert if issues arise.
🚀 Future Steps in React Native Migration
The final paragraph outlines the next steps in the migration process, focusing on improving user experience by continuing to bring more pages into React Native. The plan is to migrate the cart page next, following the same steps as the PLP. Simone concludes by offering assistance for any questions, emphasizing the ongoing nature of the project and the iterative approach to migration.
Mindmap
Keywords
💡React Native
💡WebView
💡Session Management
💡Remote Config
💡Post Message
💡Redux
💡Interceptors
💡User Agent
💡Performance Limitations
💡A/B Testing
💡Phased Rollout
Highlights
Introduction to the topic of migrating from WebView to React Native, emphasizing the importance of understanding the web and its communication methods.
Simone's self-introduction as a React Native developer at Accentor and the outline of the talk's agenda.
The four key questions Simone asks when considering the migration from web to React Native.
Explanation of what a WebView is and its role as a 'black box' within mobile applications.
Reasons companies rely on WebViews, including cost and time efficiency of using existing websites.
The cons of using WebViews, such as performance limitations and session management challenges.
Different methods for communication between the web and mobile application, including postMessage, cookies, and userAgent.
The use of Firebase Analytics and SDK integrations to identify the most important sections for migration.
Importance of maintaining UI/UX consistency during the migration process and the addition of engagement features like push notifications.
Utilization of remote config for migration as a safety net to quickly revert changes if issues arise.
Real case study of a project Simone has been working on, focusing on session management and API optimization.
Implementation of axios for API management with interceptors to handle session and authorization.
The use of Redux and Redux Saga for state management and data flow control in the migrated app.
How React Native's animated library and refs are used to enhance user experience with dynamic UI behaviors.
The phased rollout strategy for the migration, using remote config to manage the release of new features.
Performance improvements observed after migrating parts of the app to React Native, including faster API responses.
Future plans for further migration of pages to React Native and continuous improvement of user experience.
Closing remarks inviting questions and further discussion on the migration process.
Transcripts
now then that we know more what the web
is and how we can communicate with it we
can start talking about some development
migration steps the first one is to
identify which is the section to switch
in R native the UI and ux implementation
some remote config and the testing part
before go with the go live so with the
deployment
hello everyone thank you first of all
let me introduce myself I am Simone and
I am a react native de developer at
accentor and today I want to talk about
a topic that all of us at least once
during our career have encountered or
will face the migration from web view
based up to react native every time I
come across this situation I always ask
to myself four mailing questions the
first one is why do many companies rely
on web use what are the pros and the
cons of the web use and why do the
companies at some times decided to
switch web VI to react native after that
how can we keep track of a long term
development and releases I will try to
give an answer to all of these four
questions following this agenda so we
can start knowing more about the web
view in R native sliding into the
development migration step with some
release strategies and some parachutes
that I always added in my code and uh
closing with a real cases that uh for a
real project I'm working since two
months ago let's start talking about the
web view in react native what is a web
view a web view is a component that
display web content within a native view
we can say that the web view for an
application mobile is a blackbox so the
app doesn't know anything about what
happened inside the web view we only
know that in that specific component
there is a web view in this snap off
code we can see how we are using a web
view in uh in a generic class using two
properties that the web view offers the
user agent and the source but we can see
that we have other properties for
example the loan load to do some actions
during the web loads they own message
and inject the JavaScript that useful to
inject some JavaScript into the website
why do some many companies relies on web
views the first reason is because they
already have taken the necessary step to
establish their online presences in
other words they already have a website
so that they think that it's not
necessary to spend other money or invest
other time to develop a new application
mobile the only thing that is needed is
to joke with the website and do it
resizable so that they can uh put it in
a web VI and uh after that they think
that the game is done so they have a web
app another reason another uh yeah
reason why company rely on the web VI is
because uh whenever they edited the web
they immediately
have also the application updated the
only things needed is that the user
refresh the web app and so that they
don't have any dependencies with some
deploy or the fact that the user must
update the the app obviously it it is
not enough because we know that the web
you have a lot of different cons the
first cons is related the session
because it's not easy to maintain a
stable session specifically with some uh
application the mobile that are not
totally web VI because we know that the
store doesn't accept the app that are
totally web view but the difficult is to
maintain the session with some uh pages
in web and the the native one another uh
important cons to highlight is that the
web view have performance limitation and
a slower page loading if you have in
your hands two different apps and you uh
try uh with the one developing in the
web View and the one in the rective you
immediately see which one is the web VI
because you can see the different
related the performance another
important things that is to highlight on
the cons slide is about the continuous
information flow challenging as we said
the web VI is a blackbox for the app so
uh the app doesn't know when the user
tap on a specific component or do some
more action to do it we need that the
web send a message to the application to
say that the user did something in this
side of code there are three different
method that the web app uh the web you
can talk with the application mobile the
post message the cookies and the user
agent what is the post message the post
message is a function that permit to
communicate the website with the
application mobile is a function is a
JavaScript function that accept three
different properties the message that is
the data to be sent to the other window
the target origin specifies and the
transfer that is a sequence of
transferable object that are transferred
obviously with the message the post
message could be intercepted by the web
View using the on message uh properties
in this code we can see how we are using
the function the on message props we are
adding a switch case because the case of
this function as already defined with
the web View and so that we can do some
actions based on this uh post message
there is the possibility also to send a
post message from a react native
application to the web view we can do it
using the injected JavaScript properties
as we can see here we are injecting a
web view ref so the references of the
web View and then we can send a post
message to to talk with the with the web
the other method that is H available and
is possible to use to talk with the web
is the cookie cookies are also useful to
H have a cookie based
authentication we can uh use it to keep
the user always logged in in the web VI
and in the react native uh
Pages how it works basically at the
first API the server send to the app a
cookie session ID after that we can
reuse it and resend in the all other
API so that the server can get this
cookie and can maintain the user logged
in is also possible to use another
cookie the anonymous cookie to keep some
information for example the cart if we
are in a e-commerce
app uh using this the anonymous cookie
react native offer a package called um
cookie manager that can help us to
manage the
cookies we need to keep in mind that
every time the user logged out so decide
to log out to our app we need to clean
all the cookies and we can do it with
the function cleaned all then we have
the user agent a user agent is basically
a string that describe the browser that
is making the
request uh this is more useful for the
server because they can split a logic
based on this user agent for example if
you have a previous app that was
developed only by web View and the new
one with some API that need that return
aison they can split these returns using
the the user agent how we can identify
the most important section we can use
different tool for example Firebase
analytics or as we can see in this case
we are integrating the um the the SDK of
dinr that is tool that can permit us to
read the action and know more about the
user actions and reading this data we
can see which are which is the the most
used pages and start porting this page
into re
native then we have the uix and UI
implementation this phase is also very
important because we need to maintain
the same UI but another important things
to remember to add is related
engagement with the push notification we
can use uh it to our advantage because
we making sure that they lead to the new
section app then we have the remote
config remote config are uh useful for
many reason for example in this
migration step we can use it to have a
parachutes in case something goes wrong
so for example if we go live with a new
app and uh we can see that it have a lot
of bugs we can simply turn off the flag
done by uh remote config and so that the
user after the refresh can see the old
and the previous component also we can
use the remote config uh to um hide some
new feature that we want to uh turn on
after a few days and uh it can be
possible because we can create a
realtime list
that open the HTTP connection to a
remote config back end and we need to
fetch it when the app start or when the
app change the status for example from
inactive to active I want to also uh
talk about a real case of a project that
uh we are working
on and uh basically the goal of this
first phase is to bring some section
into react native keeping the less
Priority One still in web view we must
maintain session management and cross
flow going to Define behaviors that can
Works in both sections when we start
with this project the app was
underperforming with a lot of problem
with the session some poorly and not
optimiz logic and some unexpected
crashes the structor of the app was
basically um
the homepage that was the only one pages
in page in re native then we have the
PLP that the is the page candidate to be
migrate the PDP and the checkout one the
first things that uh we decided and we
developed was about the pi management
what we choose is axio because it can
help us with some interceptors and the
promise that are as synchronous call so
the promise is that we promise that that
specific API will be resolved with a do
then or dot catch uh branch and the
interceptors we have two different
interceptors the request and the
response one the request is important to
modify request before they are sent in
this case we are using the request
interceptors to add some cookies and
heater authorization before the request
uh are sent and then we have the the
response Interceptor to hand of response
just after they are received so that we
can manage the data before that arrives
in the application mobile as I said we
are using the Interceptor uh to add some
cookies inside uh thei and it helps us
to manage a challenge that we have and
an issue that we had and it was related
the session in fact
every time the user kill the app or put
the app in the background for a few
hours after that the app return in the
foreground the user see that it was
logged out or it lose some items that
added in the cart or all the information
that is selected uh disappear for do uh
to fix this uh Behavior we decide as I
already said to use the cookie session
with the cookie session uh we received
the session ID as I said before and we
are resend it in every call that we did
that we do for um to to make that the
server can uh recognize the user and
make it logged in the final result so is
that the user now have a stable session
and so that he can navigate without any
issue another important tips that uh we
added uh in our app is the session cross
app
web behavior in this case in the react
native page uh there are some button
that redirect the user outside the app
for example in the web of the same
family of the the application and the
the request was that the user was also
my be logged in we did it uh firing and
calling an API that after some server
check return the a token and if the
check is okay if the token is valid we
are concatenating it in the url url that
we wanted to open and after
that uh the user can navigate in the
browser and they stay logged in the page
that uh we uh migrated was the
PLP uh how the PLP
Works H immediately when the user tap on
the PLP page uh a web view appears in
this web view the you the the user must
be selected the store is not redu store
but the phical store to get all the
items that he want to see so that after
the the store selection ends the web you
send a post message to the app that can
intercept and after that we receive the
right post message we are calling an API
that return the store selecting and
after that we are going to save it in
Redux so that we can use every time and
uh everywhere we want in the in the
other native page the PLP also uh give
the possibility to the user to filter
and sorting the data in this case we uh
can see how we developed the fetch
product API we can see that we are using
the function generator because we are
using Redux Saga middleware to keep the
data uh saved in the store what is the
function generator the function
generator are a function that can be
paced and resumed which uh which enable
a variety of
application it play three different
rules the iterator The Observer and the
Cure routines the C routines because
generator are posable as I said and can
be both data producer and data consumer
the Redux Saga middleware offer also
three different keyword the E keyword
that permit to pay P pose the generator
function execution and the value of the
expression follow
following and then we have the put
keyword that invoke the on success
method so invoke the action that could
be the on success or on failure in case
there is something wrong there is an
important difference between the E and
the eeld generator the Y as I said is
let me say an a syn weight function the
E generator instead is used to delegate
another iterable object such as a
generator if something goes
wrong um we are also managing the error
handling and in that case uh we are
fetching the on failure action so that
we can save the m message that arrived
from the pi and we can render the error
message to the web view or to the native
app uh another tip that uh we added in
the PLP page is based uh on a scrollable
uh flat list let me say the user for
example scroll the flat list for example
is in the page three and he decided to
filter or sorting the items but the
request was that the user is redir to
the top of the of the flatlist otherwise
maybe he lose some product that he he
never seen to do it we used react
animated uh library and uh in details
thanks to use animated ref that is a UK
that provides us to have this type of
behavior and so that when the user now
filter a section it was in not page one
is red to to the top of the screen um
without any any kind of
issue how we are using it is in this
naap of code so we can see that we have
a reference a reference of the flat list
and we are using the scroll to offset
with offset a zero and animating that is
true now that uh we have the PLP
migrated there are other steps to
follow the first one is the remote
config that we already talked the crowd
testing to test it uh before they go
live so that can help us to identify
some unexpected uh Behavior unexpected
problem then we have the phase R out
it's useful because when we migrate so
when we do an important changes in our
app we cannot go live with as let me say
as a big bang with the phe roll out we
can go live and so uh increasing the
percentage of the of the user that can
see the new updated app day by day after
that we can check the progress so that
we can see if all is going as expected
or maybe there are some problem that uh
doesn't work as
expected checking this uh this data uh
we can see that the pii now responds
faster we have uh a better rendering and
a flow navigation
improved we can see that we we have only
API that um have a response time more
than uh 2 seconds this is because we
also integrated a
preach um logic basically when the user
land in the PLP page before that he
select the store we immediately fire the
API to get the nearest store the nearest
item of the
store and if the store select is the
same that you choose
we we can immediately have the result
otherwise obviously we need to refetch
the the pii to get the updated items The
Next Step are to continue bringing more
pages to react native and improve the
user to experience so that we are in
plan to uh migrate other page the first
one that we want to migrate is um the
card page and so that we will
uh follow the same step that we did for
the for the
PLP hope that can helps you so thank you
so much and if you have any questions
you can
uh reach me here
تصفح المزيد من مقاطع الفيديو ذات الصلة
Kim Chouard – Zero to Music Hero: Building Cross-Platform Games in Months With React Native & Skia
React Native Mock Interview | Interview Questions for Senior React Native Developers
Why I Do NOT Use Flutter for Mobile App Development
DjangoCon 2022 | From React to htmx on a real-world SaaS product: we did it, and it's awesome!
Learn Redux Toolkit in under 1 hour
My Final Flutter Video
5.0 / 5 (0 votes)