Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TechTalk - 2o22 - State of React Native for mob...

Marko Arsić
September 29, 2022

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.

Marko Arsić

September 29, 2022
Tweet

More Decks by Marko Arsić

Other Decks in Programming

Transcript

  1. 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
  2. React Native is a React-based cross-platform mobile app development framework

    that allows you to build native Android and iOS applications.
  3. One of the top mobile app development frameworks, designed and

    developed by Facebook for its internal development Made an open-source project in 2015
  4. React Native combines the best parts of native development with

    React, a best-in-class JavaScript library for building user interfaces
  5. 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
  6. React Native, allows JavaScript code to talk to native code

    using a bridge, making apps faster and more performant
  7. 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.
  8. 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
  9. For applications with several animations where many frames stack up

    on the UI per second, performance can be an issue
  10. 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
  11. 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.
  12. Dropped the concept of The Bridge in favor of another

    communication mechanism: the JavaScript Interface (JSI).
  13. The JSI is an interface that allows a JavaScript object

    to hold a reference to a C++ and viceversa
  14. This idea allowed to unlock several benefits: • Synchronous execution

    • Concurrency • Lower overhead • Code sharing • Type safety
  15. 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.
  16. React Native is NOT sufficient if your aim is to

    develop a scalable and maintainable production app
  17. 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.
  18. 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
  19. JavaScript ✅ Huge community and widely used ✅ Fast 🔴

    Dynamically types 🔴 Difficult to maintain on large scale
  20. 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
  21. Axios ✅ A well tested and classic way of doing

    it ✅ Familiar and readable API 🔴 You might need a separate library for consuming GraphQL APIs
  22. Graphql Apollo ✅ One client for REST APIs and Graphql

    APIs. ✅ Out of the box helps in caching the data. 🔴 Not yet very common
  23. 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.
  24. 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
  25. 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
  26. 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
  27. 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.
  28. 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.
  29. • React Native Paper • Material Kit React Native •

    React Native Elements • React Native UI Kitten
  30. Q & A As everything good in life, knowledge is

    great only when shared https://discord.gg/94uhCAkFKf