React Native Architecture at Product Hunt

Rate this content
Bookmark

I'm going to showcase the React Native architecture we use in our new mobile app at Product Hunt. What we learned, among the way. How we moved what we know from web to mobile. Topics will be designing reusable React components, GraphQL, routing in the app, application lifecycle, keyboard controls, toast messages, and others.

This talk has been presented at React Summit Remote Edition 2021, check out the latest edition of this React Conference.

FAQ

Radoslav Stankov is the head of engineering at Produhunt and is based in Bulgaria.

Radoslav Stankov's presentation focuses on the React Native architecture used at Produhunt, detailing how the app is structured and the technical decisions behind its development.

Produhunt chose React Native for their mobile app development because it supports both Android and iOS platforms, and their team had prior experience with React Native and Apollo for GraphQL, which had improved significantly in stability and speed since their initial use.

Key considerations included needing a solution that supported Android, utilizing Apollo with GraphQL for data transfer, and the ability to conduct extensive UI experimentation.

The main architectural goals for Produhunt's app include easy addition of new features, streamlined code organization for easier onboarding, isolation of dependencies, and ensuring extensibility and reusability of components.

Produhunt uses a utility called CreateScreen which helps define screen components, manage data fetching, and handle different screen states to streamline the development process.

In Produhunt's mobile app, GraphQL is central for data management, connecting the backend built with Rails to the frontend, and enabling type safety and component-specific data fetching through Apollo and TypeScript.

Unique features include built-in navigation routes, specialized button components that integrate with GraphQL mutations, and support for dark mode using React Native Dynamic.

Radoslav Stankov
Radoslav Stankov
18 min
14 May, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The speaker discusses their React Native architecture and how they structured their app, choosing React Native over native development due to limited resources and the need for UI experimentation. The architecture consists of support, components, and screens, with a focus on code organization and extensibility. The speaker explains the screen creation process, including the use of React Native Navigation and a state machine pattern. They also highlight the use of GraphQL for data retrieval and navigation between screens. The talk covers the structure of common components, utilities for styling, and support for dark mode. Overall, the speaker emphasizes the importance of isolating dependencies and utilizing a directory structure approach.

1. Introduction to React Native Architecture

Short description:

Hello, everybody. My name is Radoslav Stankov, and I'm coming from Bulgaria. Today I'm going to talk about our React Native architecture and how we have structured our React app. Produhunt is this website. When we decided to rebuild our mobile app, we had two choices: go native with Swift or go React Native. We had a terrible experience with React Native in the past, but we only had two developers with Swift experience and no Android experience. We also needed to do UI experimentation and support Android, so we chose React.

Hello, everybody. My name is Radoslav Stankov, and I'm coming from Bulgaria. I'm here in Bulgaria, sitting right now. And I'm head of engineering at Produhunt.

And today I'm going to talk a bit about our React Native architecture and how we have structured our React app. But before we get into the technical details, for every good architecture, you have to get the context, like where the team is coming from, what the requirements are, and how the stuff is built.

So Produhunt is this website. This is how we look on the web. And I have given previous presentations around the Produhunt architecture. I won't go into details there. But when we decided to rebuild our mobile app early this year, actually we released it this year, we started a bit later than that. We were wondering, OK, now we should do a big reboot into our mobile app. And for our cases, we have basically two choices.

One was go native with Swift, and the other was go React Native. We really had really terrible experience around more than two years ago when initially we started with React Native. It was quite a bit of a challenge. On the other side, we have only two developers who have some Swift experience, not very new ones, and we have zero developers with Android experience. And our app really needed to run on Android, as well. Also, Apollo, so we use GraphQL for all our data transferring and the best way to use it is Apollo, in my opinion. Apollo for Swift is not as good as Apollo for JavaScript. And our team already knew how to deal with React and Apollo. The other thing we needed for this app was to do a lot of UI experimentations, and again, we also needed Android.

So early in 2020, we were making mobile app experiments for YourStack. So early in 2000, we worked on two apps for a couple of our products and experimentation. One was YourStack, the other was called StackCamp. They were both not released because they were just embedded. We tested some ideas there. So, yeah, don't tell anybody. So from them, we were able to compare the ecosystems from React and Swift. And we decided to go with React just because we needed Android.

2. React Native Architecture Overview

Short description:

Our team already knew React Native and decided to use it along with GraphQL and Apollo. We prioritize making common operations easy, organizing code, isolating dependencies, and ensuring extensibility and usability. Our architecture consists of three pillars: support, components, and screens. The directory structure of our mobile app reflects this architecture. We start with the top layer, the screens, which are defined in the app GS and utilize React Native Navigation.

Our team already knew React Native, and React Native actually became a lot better than two and a half years ago. It got a lot faster, a lot more stable, and we didn't have the same issues as we had before. And the tech stack we decided to go was, okay, we go with React and React Native. We use GraphQL, we access it through Apollo. And the table steaks, TypeScript Jest and Pretier are basically not a question if we go with the JavaScript ecosystem. And everything done mobile, we are using Fastlane for tooling.

So the things around architecture is, if you don't know where to start, you can very easily get into the situation where you get stuck. So we want to move fast and have breakfast, not breaking things fast. So we want to move. So for our architecture, we have four goals. First is to make the common operations easy so the engineers can easily add new things. Then we need to put code organization so we can onboard new team members very easily into the code base. Isolate dependencies, like in the JavaScript world and in basically every modern world where we're dealing with external dependencies and they can very easily get out of sync, out of date and break a lot of things without our control. And the final thing is extensibility and usability. We want to build things that we can extend and reuse over time. But the most common thing for us is to make the common operations easy so everything a developer has to do every day should be very easy for them.

The way I'm thinking about the parts of the architecture, I'm seeing three pillars. The support, the components and the screens. And they look like that in my head. We have a big support area which helps us build the core reusable components and then we build the screens on top of that. So for somebody more usual, this is the way you can imagine it. You have the pilots, you put them in the lines and they make Voltron and make it really nice. So if you go and see our directory, this is how the directory structure of the mobile app looks. And it represents the architecture of this app. And if you see, if I color code it here, we have support, components and the screens.

So again, talk chip, show me the code. So let's start with the top layer because it actually helps us understand the layers of both if we start reverse. From the screens. So all the screens are defined in the app GS. And here, what we do is we use the react native navigation.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Building a Voice-Enabled AI Assistant With Javascript
JSNation 2023JSNation 2023
21 min
Building a Voice-Enabled AI Assistant With Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
Power Fixing React Performance Woes
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Top Content
Watch video: Power Fixing React Performance Woes
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.
A Practical Guide for Migrating to Server Components
React Advanced Conference 2023React Advanced Conference 2023
28 min
A Practical Guide for Migrating to Server Components
Top Content
Watch video: A Practical Guide for Migrating to Server Components
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Monolith to Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.

Workshops on related topic

Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.
Introducing FlashList: Let's build a performant React Native list all together
React Advanced Conference 2022React Advanced Conference 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
WorkshopFree
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
Detox 101: How to write stable end-to-end tests for your React Native application
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
How to Build an Interactive “Wheel of Fortune” Animation with React Native
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Top Content
Workshop
Oli Bates
Oli Bates
- Intro - Cleo & our mission- What we want to build, how it fits into our product & purpose, run through designs- Getting started with environment set up & “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
Deploying React Native Apps in the Cloud
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.