React Native in Webview: Everything You Need to Know - Simone Carazzai | React Native Heroes 2023

Summary

Simone, 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

00:00

🛠️ 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.

05:01

🔗 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.

10:03

🛑 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.

15:04

📈 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.

20:04

🚀 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.

Keywords

💡React Native

React Native is a popular framework for building native apps using React, a JavaScript library. It allows developers to create applications for Android, iOS, and other platforms with a single codebase. In the video, the speaker discusses the migration from a WebView-based approach to using React Native, which is part of the theme of transitioning to more performant and integrated mobile app development.

💡WebView

A WebView is a component that displays web content within a native app. It acts as a 'black box' where the app has limited interaction with the web content. The script mentions WebView as the initial method companies use for mobile presence, which is later discussed in the context of migrating to React Native for better performance and integration.

💡Session Management

Session management refers to the way user sessions are handled within an application, ensuring a user's login state and data persist across interactions. The video discusses the challenges of maintaining stable sessions, especially when integrating WebView with native components, and how the migration to React Native helps in addressing these issues.

💡Remote Config

Remote Config is a feature that allows developers to change the behavior of an app without publishing an app update. It is used for A/B testing, feature toggling, and more. In the script, the speaker mentions using Remote Config as a 'parachute' during the migration process to quickly revert changes if issues arise.

💡Post Message

The 'post message' is a JavaScript function used for cross-document communication between the WebView and the native app. It allows the WebView to send messages to the app, which can then respond accordingly. The script explains how this is used to facilitate communication between the web content and the React Native app.

💡Redux

Redux is a state management library used in React applications to manage the state of the app in a predictable way. In the context of the video, Redux is used to save and manage the state of the app, such as the user's selected store, ensuring that the state is consistent across different parts of the app.

💡Interceptors

Interceptors are a pattern used to intercept and modify requests or responses in a chain of operations. In the script, the speaker discusses using interceptors with Axios, a promise-based HTTP client, to add cookies and authorization headers to requests, which is crucial for maintaining user sessions.

💡User Agent

The user agent is a string that identifies the client software originating a request to a server. It can be used by the server to tailor responses based on the client's capabilities. In the video, the user agent is mentioned as a way to differentiate between requests coming from a WebView or a React Native app, allowing for conditional logic on the server side.

💡Performance Limitations

Performance limitations refer to the constraints in speed, efficiency, and responsiveness of an app or system. The script discusses how WebViews have performance limitations compared to native components, which is one of the reasons companies might choose to migrate to React Native.

💡A/B Testing

A/B testing is a method of comparing two versions of a webpage, app, or other content to determine which performs better. In the context of the video, A/B testing is implied as a strategy that could be used in conjunction with Remote Config to test new features or changes in the app before a full rollout.

💡Phased Rollout

A phased rollout is a strategy for releasing a product update or feature to a small group of users initially and gradually increasing the audience over time. The script mentions phased rollout as a strategy for the migration process, allowing developers to monitor the performance and user feedback before making the update available to all users.

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