Tweet
Tweet

Slide 1

Slide 1 text

State of React Native for mobile development

Slide 2

Slide 2 text

HypeTech Tech education and shaping ideas into hype products hypetech.io | reactweek.dev Marko Arsić Founder and CEO @ HypeTech Founder of HypeTech Education Senior Software Engineer @ adidas Lecturer @ ReactWeek.dev Independent Tech Consultant Helping companies set up teams and standardize the development process github.com/marsicdev

Slide 3

Slide 3 text

React Native v0.70

Slide 4

Slide 4 text

React Native is a React-based cross-platform mobile app development framework that allows you to build native Android and iOS applications.

Slide 5

Slide 5 text

One of the top mobile app development frameworks, designed and developed by Facebook for its internal development Made an open-source project in 2015

Slide 6

Slide 6 text

React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces

Slide 7

Slide 7 text

Before React Native, devs used hybrid mobile applications that were built with web technologies like HTML, CSS, and JavaScript You could access native APIs, the UI mostly leveraged your mobile device web views

Slide 8

Slide 8 text

This caused many problems in performance, speed, and app store crack-down

Slide 9

Slide 9 text

The Current Architecture

Slide 10

Slide 10 text

React Native, allows JavaScript code to talk to native code using a bridge, making apps faster and more performant

Slide 11

Slide 11 text

React Native creates a native bridge between the app and the target device — Android/iOS — that allows the JavaScript code to talk to the native code and vice versa.

Slide 12

Slide 12 text

Creating three threads that interpret your JavaScript code at different levels

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

How React Native works < v0.68 ● UI thread ○ runs your app and is the only thread that has access to your UI. ● Shadow thread ○ Calculates the UI layouts you created with React and sends them to the native code in the UI thread ● JavaScript thread ○ Handles your JavaScript UI layouts and sends them to the shadow thread for calculation, consequently sending them to the UI thread

Slide 15

Slide 15 text

For applications with several animations where many frames stack up on the UI per second, performance can be an issue

Slide 16

Slide 16 text

It works by serializing all the data that has to be passed from the JS layer to the native layer using a component called The Bridge

Slide 17

Slide 17 text

The Bridge had some intrinsic limitations: ● It was asynchronous: one layer submitted the data to the bridge and asynchronously "waited" for the other layer to process them ● It was single threaded: JS used to work on a single thread, therefore the computation that happened in that world had to be performed on that single thread. ● It imposed extra overheads: everytime one layer had to use the other one, it had to serialize some data. The other layer had to deserialize them.

Slide 18

Slide 18 text

The New Architecture v0.68

Slide 19

Slide 19 text

Dropped the concept of The Bridge in favor of another communication mechanism: the JavaScript Interface (JSI).

Slide 20

Slide 20 text

The JSI is an interface that allows a JavaScript object to hold a reference to a C++ and viceversa

Slide 21

Slide 21 text

This idea allowed to unlock several benefits: ● Synchronous execution ● Concurrency ● Lower overhead ● Code sharing ● Type safety

Slide 22

Slide 22 text

Fabric is React Native's new rendering system, a conceptual evolution of the legacy render system.

Slide 23

Slide 23 text

Render, Commit, and Mount The React Native renderer goes through a sequence of work to render React logic to a host platform. This sequence of work is called the render pipeline and occurs for initial renders and updates to the UI state.

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Layout Calculation, Tree Promotion (New Tree → Next Tree)

Slide 27

Slide 27 text

Tree Diffing, Tree Promotion (Next Tree → Rendered Tree), View Mounting

Slide 28

Slide 28 text

React State Updates

Slide 29

Slide 29 text

The phases of the render pipeline may occur on different threads!

Slide 30

Slide 30 text

React Native is NOT sufficient if your aim is to develop a scalable and maintainable production app

Slide 31

Slide 31 text

React-native base framework

Slide 32

Slide 32 text

Expo CLI ✅ Quick to start writing the first screen. ✅ Quick distribution and installation of the app ✅ Great for demo or POC apps 🔴 Extra 20–25 MB of the size of the app 🔴 Not recommended for long term projects 🔴 You cannot write native code. You have to eject and reset expo configs.

Slide 33

Slide 33 text

React Native CLI ✅ Easy to add android and ios native code ✅ For large scale applications 🔴 Not easy to distribute and install the app 🔴 You need a mac for iOS development

Slide 34

Slide 34 text

Language (Static typing)

Slide 35

Slide 35 text

JavaScript ✅ Huge community and widely used ✅ Fast 🔴 Dynamically types 🔴 Difficult to maintain on large scale

Slide 36

Slide 36 text

TypeScript Typescript is an open-source programming language that is a strict syntactical superset of Javascript. ✅ Huge community and widely used in the backend and front end frameworks like NodeJs, Angular 2+, VueJs, etc. ✅ Faster than flow 🔴 Lesser react support

Slide 37

Slide 37 text

Network Layer

Slide 38

Slide 38 text

fetch ✅ A ECMA default client 🔴 Too verbose 🔴 API not so nice for writing

Slide 39

Slide 39 text

Axios ✅ A well tested and classic way of doing it ✅ Familiar and readable API 🔴 You might need a separate library for consuming GraphQL APIs

Slide 40

Slide 40 text

Graphql Apollo ✅ One client for REST APIs and Graphql APIs. ✅ Out of the box helps in caching the data. 🔴 Not yet very common

Slide 41

Slide 41 text

State management

Slide 42

Slide 42 text

Redux ✅ Huge community and various pattern which is tested on the production ✅ Time travel helps a lot during development and debugging ✅ Great DevTools 🔴 Not much performant compared to state management libraries like Mobx.

Slide 43

Slide 43 text

Hooks and Context API ✅ No need to add a new library ✅ React default API 🔴 Needs planning and standard agreement among the team members 🔴 Slightly complex API 🔴 Good understanding of the re-rendering lifecycle

Slide 44

Slide 44 text

Navigation

Slide 45

Slide 45 text

react-navigation ✅ Huge community ✅ Most of the use cases covered like name-based routing, passing data from routes, Tab navigation, authentication flows, deep linking, analytics trigger, etc. ✅ You can also use pre-defined navigation react hooks

Slide 46

Slide 46 text

Forms

Slide 47

Slide 47 text

react-hook-form ✅ Better performance compared to formik ✅ React-hook-form is hook based, hence more developer-friendly and easy to use ✅ Good API 🔴 Small but growing community

Slide 48

Slide 48 text

Internationalization (i18n)

Slide 49

Slide 49 text

React Context API ✅ Uses the context APIs from the React ✅ Simple to use 🔴 To use rich features like plurals or context (e.g male/female) needs custom implementation.

Slide 50

Slide 50 text

React i18 next ✅ Huge community and widely used. ✅ It has many rich features like plurals, context (e.g male/female), etc. 🔴 As this is an external package, it increases your app size compared to using the context API.

Slide 51

Slide 51 text

Reusable UI components

Slide 52

Slide 52 text

● React Native Paper ● Material Kit React Native ● React Native Elements ● React Native UI Kitten

Slide 53

Slide 53 text

Tools/Libs

Slide 54

Slide 54 text

https://reactnative.directory

Slide 55

Slide 55 text

Tell me how to choose from all shown?

Slide 56

Slide 56 text

Q & A As everything good in life, knowledge is great only when shared https://discord.gg/94uhCAkFKf

Slide 57

Slide 57 text

As everything good in life, knowledge is great only when shared hypetech.io/education

Slide 58

Slide 58 text

[email protected]