‫الجامعة السعودية االلكترونية‬

‫الجامعة السعودية االلكترونية‬

‫‪26/12/2021‬‬
College of Computing and
Informatics
Bachelor of Science in Computer
Science
IT487
Mobile Application Development
IT487
Mobile Application Development

Module 7
Why React and Why React Native
Contents
1.What is React?
2.React Features
3.What's new in React?
4.What is React Native?
5.React and JSX are familiar
6.The mobile browser experience
7. Android and iOS – different yet the same
8. The case for mobile web apps
Weekly Learning
Outcomes
1. Describe the advantages of React
2. Explain how Does React Native Work?
Required Reading
1. Chapter 1 and Chapter 13 (React and React
Native: A complete hands-on guide to modern
web and mobile development with React.js,3rd
Edition, 2020, Adam Boduch, Roy Derks)

Recommended Reading
React: https:/ / facebook. github. io/ react
What is React?
What is React?
• React is "A JavaScript library for building user interfaces."
• It is a library for building user interfaces (UIs) for web and mobile apps.
• It is view layer in an application.
• *It is similar to jQuery manipulates UI elements OR Handlebars
templates are inserted into the page.
• The following diagram illustrates where React fits in our frontend code:
• We have some application code that generates some Data. We want to render
this Data to the UI, so we pass it to a React Component, which handles the job
of getting the HTML into the page.
• The Document Object Model (DOM) is a way to represent HTML in
the browser
• React component is the building block of a React application. DOM/ UI Tree
• *React components change what the user sees.
• *Handles the job of getting HTML into the page to render data to UI.
• *Rendering technology
• *Simplifies the application development
Components of React
• React is divided into two major APIs: React component API & React DOM
• React component: Parts of the page that are rendered by React DOM
• Data: data that comes from somewhere and is rendered by the component.
• Life Cycle: Consists of methods that respond to components entering and exiting phase
• Events: the code that we write for responding to user interactions.
• JSX: syntax of React components used to describe UI structures.
• React DOM: This is the API that has methods to perform the actually rendering on a web
page.
Declarative UI structures
• Syntax used by React components is called JSX (JavaScript XML).
• JSX is central to React components.
• JSX is an extension to JavaScript where you will have the power of using
HTML/XML and JavaScript together.
• Here is a simple example of a JSX code.
const h1tag = "<h1> Hello, from JSX Tutorials! </h1>";
• JSX uses declarative programming approach – *Need not perform little micro-
operations to change the content of a component.
• In declarative programming approach, we declare what is the results we want and leave the
programming languages to figure out how to produce them.
• JSX NOT uses Imperative programming:
• In imperative programming approach, we have to write a sequence of instructions to tell the
programming languages what to do.
• Issue in UI development.
*Declarative UI structures
• The JSX itself is usually HTML markup, mixed with custom tags for React
components.
• React components don't require executing steps in an imperative way.
• The XML-style syntax makes it easy to describe the structure of the UI.
• Called declarative programming and is very well suited for UI development.
• Once the UI structure is declared – specification of changes has to be given.
*Time and data
• React components rely on data being passed into them.
• This data represents the dynamic parts of the UI.
• For example, a UI element that's rendered based on a Boolean value could change the next time
the component is rendered. Here's a diagram of the idea:
• Each time the React component is rendered, it's like taking a snapshot of the JSX at that exact
moment in time.
• As the application moves forward through time, an ordered
collection of rendered UI components will be obtained.
• In addition to declaratively describing what a UI should be,
re-rendering the same JSX content makes things much
easier for developers.
• The challenge is making sure that React can handle the
performance demands of this approach.
*Performance matters
• Using React to build UIs means that we can declare the structure of the UI with JSX.
• Less error-prone than the imperative approach of assembling the UI piece by piece.
• Declarative approach does present a challenge: performance.
• For example, having a declarative UI structure is fine for the initial rendering, because
there's nothing on the page yet. So, the React renderer can look at the structure declared
in JSX and render it in the DOM browser.
• The Document Object Model (DOM) represents HTML in the browser after it has been
rendered. The DOM API is how JavaScript is able to change content on the page.
*Performance matters
• On the initial render, React components and their JSX are no different from other template
libraries.
• For instance, Handlebars will render a template to HTML markup as a string, which is
then inserted into the browser DOM.
• Where React is different from libraries such as Handlebars is when data changes, the
components has to be re-rendered.
• Handlebars will just rebuild the entire HTML string, the same way it did on the initial
render. Since this is problematic for performance, implementing imperative workarounds
leads to manually update tiny bits of the DOM.
• Causes a tangled mess of declarative templates and imperative code to handle the
dynamic aspects of the UI.
• This does not occur in React which differentiates React from other libraries.
• Components are declarative for the initial render, and they stay this way even as they're
re-rendered. It's what React does under the hood that makes re-rendering declarative UI
structures possible.
Virtual DOM
• The Document Object Model (DOM) allows JavaScript to read and manipulate the content of a
document (in this case, an HTML document). (DOM is a map of a website)
• A simple way to think of the DOM is in terms of the document tree
• Whenever an HTML document is
loaded in the browser as a web page,
a corresponding Document Object
Model is created for that page.
• This way, JavaScript can connect and
dynamically manipulate the DOM.

• React has something called the virtual DOM, which is used to keep a representation of the real
DOM elements in memory.
*Virtual DOM
• It does this so that each time we re-render a component, it can compare the new content to the
content that's already displayed on the page.
• Based on the difference, the virtual DOM can execute the imperative steps necessary to make the
changes. So, not only do we get to keep our declarative code when we need to update the UI, but
React will also make sure that it's done in a performant/efficient way.
• Here's what this process looks like:
• Like any other JavaScript library, React is constrained by
the run-to-completion nature of the main thread.
• For example, if the React internals are busy diffing content
and patching the DOM, the browser can't respond to user
input
• React should be flexible enough to adapt to different
platforms where the app would be deployed in future.
*The Right level of abstraction
• React code is abstraction.
• Abstraction means don't necessarily care what the render target is.
• *JSX syntax translates to low-level operations that update the UI.
• *The render target happens to be the browser DOM with React, but it isn't restricted to
the browser DOM.
• *It is not mandatory to know the target for react to translate the declarative UI
Components
• React has the potential to be used for any UI to create, on any conceivable device.
• *The abstraction level with React is at the right level, and it's in the right place.
React targeting more than just the browser:
• The following diagram gives you an idea of how React can target more than just the
browser:

• From left to right, we have React Web (just plain React), React Native, React Desktop,
and React Toast. Same pattern is applied to target something new:
 *Implement components specific to the target.
 *Implement a React renderer that can perform the platform-specific operations under the
hood.
• React knowledge can be used to focus on describing the structure of the UI on any
platform.
React Features
React Features
The features of React 16 include the following:
1. Revamped core architecture
2. Lifecycle methods
3. Context API
4. Rendering fragments
5. Portals
6. Rendering lists and strings
7. Handling errors
8. Server-side rendering
Revamped ‫ متجدد‬core architecture
• Biggest change in React 16 - change made to the internal reconciliation code.
• *These changes don't impact the way that you interact with the React API.
• *These changes were made to address some pain points that were preventing
React from scaling up in certain situations.
• For example, one of the main concepts of this new architecture is that of fibers.
• React Fiber is a complete, backwards compatible rewrite of the React core.
• The goal of React Fiber is to increase its suitability for areas like animation.
• **Instead of rendering every component on the page in a run-to compilation way,
React renders fibers—smaller chunks of the page that can be prioritized and
rendered asynchronously.
Lifecycle methods
• React 16 had to renovation some of the lifecycle methods that are available to
class components.
• Some lifecycle methods are deprecated and will eventually be removed
because they will be problematic for future async rendering functionality in
React.
• **For example, a common way to initialize state in a React component is to use
the componentWillMount() lifecycle method. Once this method is removed from
React, the initial state directly can be set as an instance value.
The Context API
• React has provided an experimental Context API for developers.
• Context is an alternative approach to passing data from one component to
the next.
• *For example, using properties, data can be passed through a tree of
components that is several layers deep.
• *The components in the middle of this tree don't actually use any of these
properties—they're just acting as intermediaries.
• **This becomes problematic as your application grows more properties in the
source add to the complexity.
Rendering fragments
• React component renders several sibling elements,
• Eg: Three <p> elements: have to wrap them in <div>
• *React would only allow components to return a single element.
• *The only problem with this approach - leads to a lot of unnecessary DOM
structure; <div> elements.
• Wrapping your elements with <Fragment> is the same as wrapping them with
<div>, except there won't be any extra DOM elements.
Portals
• React portal provides a way to render an element outside of its component
hierarchy (DOM tree), i.e., in a separate component.
• *When a React component returns content, it gets rendered into its parent
component.
• *Then, that parent's content gets rendered into its parent component and so on,
all the way to the tree root.
• *Render something that specifically targets a DOM element.
• *For example, a component that should be rendered as a dialog probably doesn't
need to be mounted at the parent.
• *Using a portal can control precisely where the component's content is rendered.
• Rendering lists and strings: Similar to returning string value. Can just
return a list of strings or a list of elements.
Handling errors
• A JavaScript error in a part of the UI break the whole app.
• To solve this problem for React users, React 16 introduces a new concept of an
“error boundary”.
• Error boundaries are React components that catch JavaScript errors anywhere in
their child component tree, log those errors, and display a fallback UI instead of
the component tree that crashed.
• *Where exactly to handle errors?
• *Error boundaries: created by implementing the componentDidCatch() lifecycle
method in a component.
• *Serve as the error boundary by wrapping other components.
• *If any of the wrapped components throw an exception, the error boundary
component can render alternative content.
Server-side rendering (SSR)
• In React, Server-side rendering is where the server returns a ready to render
HTML page and JavaScripts required to make the page interactive.
• *The html is rendered immediately with all the static elements.
• *Popular technique for rendering a client-side single page application (spa) on
the server.
• Then send a fully rendered page to the client.
• *Allows for dynamic components to be served as static html markup.
What's new functions in React?
What's new functions in React?
• Memoizing functional components.
• Code splitting and loading.
• Hooks.
Memoizing functional components
• Using react.Memo() function, memoized components avoid re-rendering a
components if the component data hasn't changed by using Virtual DOM.
• *The react.Memo() function is the modern equivalent of the purecomponent
class.
• *react.Memo() function automatically handle checking whether the component
data has changed or not and whether or not the component should re-render.
• *The challenge with this approach is that it is now common for large react
applications to have a lot of functional components.
• *Can pass functional components to react.Memo() and they'll behave like
purecomponent.
Code splitting and loading
• Code splitting: reduces the size of the code bundles that are sent to the
browser, which can dramatically improve the user experience.
• Provides a huge efficiency gain.
• Done by react.Lazy() function; prefetching the components,
• *Code splitting and the user experience of waiting for pieces of the
application to load are integral parts of the application.
• *By combining react.Lazy() and the suspense component, fine-grained
control over the app is split up is achieved.
Hooks
• Hooks are functions that extend the behavior of functional React
components.
• Instead of relying on classes to build components, you can use the React
Hooks API.
• *Hooks are used to "hook into" the React component machinery from your
React components.
• *React Hooks API: pass functions to build components that have state or
that rely on executing side effects when the component is mounted.
What is React Native?
Chapter 13
What is React Native?
• React Native is a JavaScript framework for writing real, natively rendering mobile applications for
iOS and Android. It’s based on React
• In React Native, instead of targeting the browser, it targets mobile platforms.
• React Native is like React, but it uses native components instead of web components as building
blocks.
• React Native uses a technique that makes asynchronous calls to the underlying mobile OS,
which calls the native widget APIs (TextView, ScrollView…etc).
• *There's a JavaScript engine, and the React API is mostly the same as React for the web.
• *The difference is with the target; instead of a DOM, there are asynchronous API calls.
• The concept is visualized here:
• *React Native ships with components
implemented for mobile platforms, instead of
components that are HTML elements.
• The same React library that's used on the web is
used by React Native and runs in JavaScriptCore.
• Messages that are sent to native platform APIs
are asynchronous and batched for performance
purposes.
React and JSX are familiar
React and JSX are familiar
• React and JSX are good at declaring UI components
• What attracts React developers to be React Native developers?
1. Huge demand for mobile apps *mobile web browser is not that convenient as
the native app experience.
2. JSX is a fantastic tool for building UIs.
• Rather than having to learn new technology, it's much easier to use what you know.
3. React is valuable from a development-resource perspective.
• Instead of having a team that does web UIs, a team that does iOS, a team that does
Android, and so on, there's just the UI team that understands React.
The mobile browser experience
• What makes developing UIs for mobile browsers difficult using react?
• Mobile browsers lack many capabilities of mobile applications *since browsers cannot
replicate the same native platform widgets as HTML elements.
• Native widget requires less maintenance.
• Using widgets that are native to the platform  *consistent with the rest of the platform.
• *For example: A date picker in an application looks different from all the date pickers the user
interacts with on their phone.
• Familiarity is key. using native platform widgets makes familiarity possible.
• User interactions on mobile devices are fundamentally different from the interactions on
the web application;
• i.e. web applications assume presence of mouse.
• React native is a much better candidate for handling gestures than react for the web.
• React native use actual components from the platform. *components of the app remain
updated when the mobile platform is updated.
• *Consistency and familiarity are key factors for good user experience.
Android and iOS – different yet the same
Android and iOS – different yet the same
• There are several areas that overlap between iOS and Android where the differences are trivial.
• The two widgets aim to accomplish the same thing for the user, in roughly the same way.
• React Native will handle the difference and provide a unified component.
• *React Native is not cross platform solution that will run a single React application natively on
any device.
• React Native enables web developers to create robust mobile applications using their existing
JavaScript knowledge.
• *iOS and Android are different on many fundamental levels. Even their user experience
philosophies are different, so trying to write a single app that runs on both platforms is
categorically misguided.
• Goal of React Native:
 Enables the app to take advantage of an iOS specific widget or an Android-specific widget.
 Provide a better user experience for that particular platform.
 *Trump ‫ قابلية‬the portability of a component library.
*The case for mobile web apps
• Not everyone will be willing to install an app  Due to download count
and rating.
• The barrier to entry is much lower with web applications—the user only
needs a browser.
• *Cannot replicate everything that native platform UIs can offer.
• A good web UI is the first step toward getting download counts and
ratings up for the mobile app.
• Goal of a good mobile app:
• Standard web (laptop/desktop browsers)
• Mobile web (phone/tablet browsers)
• Mobile apps (phone-/tablet-native platform)
• High demand for your mobile app compared to the web versions.
Thank
You