TechTalk - 2o22 - State of React Native for mobile development

Many different kinds of people use React Native: from advanced Android/iOS developers to React beginners, to people getting started programming for the first time in their career. This lecture is for all learners, no matter their experience level or background.

Transcript

1. State of React Native for mobile development
2. 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
3. React Native v0.70
4. React Native is a React-based cross-platform mobile app development framework that allows you to build native Android and iOS applications.
5. One of the top mobile app development frameworks, designed and developed by Facebook for its internal development Made an open-source project in 2015
6. React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces
7. 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
8. This caused many problems in performance, speed, and app store crack-down
9. The Current Architecture
10. React Native, allows JavaScript code to talk to native code using a bridge, making apps faster and more performant
11. 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.
12. Creating three threads that interpret your JavaScript code at different levels
14. 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
15. For applications with several animations where many frames stack up on the UI per second, performance can be an issue
16. 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
17. 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.
18. The New Architecture v0.68
19. Dropped the concept of The Bridge in favor of another communication mechanism: the JavaScript Interface (JSI).
20. The JSI is an interface that allows a JavaScript object to hold a reference to a C++ and viceversa
21. This idea allowed to unlock several benefits: • Synchronous execution • Concurrency • Lower overhead • Code sharing • Type safety
22. Fabric is React Native's new rendering system, a conceptual evolution of the legacy render system.
23. 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.
26. Layout Calculation, Tree Promotion (New Tree → Next Tree)
27. Tree Diffing, Tree Promotion (Next Tree → Rendered Tree), View Mounting
28. React State Updates
29. The phases of the render pipeline may occur on different threads!
30. React Native is NOT sufficient if your aim is to develop a scalable and maintainable production app
31. React-native base framework
32. 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.
33. 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
34. Language (Static typing)
35. JavaScript ✅ Huge community and widely used ✅ Fast 🔴 Dynamically types 🔴 Difficult to maintain on large scale
36. 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
37. Network Layer
38. fetch ✅ A ECMA default client 🔴 Too verbose 🔴 API not so nice for writing
39. Axios ✅ A well tested and classic way of doing it ✅ Familiar and readable API 🔴 You might need a separate library for consuming GraphQL APIs
40. Graphql Apollo ✅ One client for REST APIs and Graphql APIs. ✅ Out of the box helps in caching the data. 🔴 Not yet very common
41. State management
42. 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.
43. 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
44. Navigation
45. 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
46. Forms
47. 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
48. Internationalization (i18n)
49. 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.
50. 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.
51. Reusable UI components
52. • React Native Paper • Material Kit React Native • React Native Elements • React Native UI Kitten
53. Tools/Libs
54. https://reactnative.directory
55. Tell me how to choose from all shown?
56. Q & A As everything good in life, knowledge is great only when shared https://discord.gg/94uhCAkFKf
57. As everything good in life, knowledge is great only when shared hypetech.io/education
58. contact@reactweek.dev