Structuring Large-Scale, Multi-Platform Projects

I wholeheartedly believe that the structure of a software project is one of the key factors in deciding success or failure. This includes the application architecture, as well as the development process and the whole project organization.

The bigger the project is, the more developers that work on the project, and the longer a project runs, the more important it is to have a good project structure. But small projects can also fail because of a bad structure. So, most of this chapter is also applicable to smaller projects.

The project structure is especially important when using React Native to develop an application for multiple platforms, not only for iOS and Android. Different platforms have different needs and bring different user expectations. The best example to showcase this is the difference between iOS and Android and the web.

As already mentioned in Chapter 4, Styling, Storage, and Navigation in React Native, the concept...

Technical requirements

To be able to run the code in this chapter, you have to set up the following things:

• A working React Native environment (bit.ly/prn-setup-rn – React Native CLI Quickstart).
• You can find the example project in this repository: https://bit.ly/prn-videoexample.
• While most of this chapter should also work on Windows, I would recommend working on a Mac.
• This chapter contains some native code. You should have basic knowledge of Java or Kotlin and Objective-C or Swift for that.

Setting up an app architecture that works for large-scale enterprise projects

When we are talking about large-scale projects and how to set up a suitable app architecture, it makes sense to look at what’s different in these large-scale projects compared to small-team or even single-developer projects.

The following points are the most important ones:

• The project team is very big: In large-scale projects, you usually have a big team with lots of developers. Often, these developers are scattered all over the world, which means they work in different time zones, have different first languages, and have completely different cultural backgrounds. That said, it is important to have a clear structure and clear responsibilities. Otherwise, your project will fail.
• Multiple developers will work on the same part of the application: At the latest stage when a deadline is approaching and a feature has to be finished, multiple developers will work on the same feature and the...

Using React Native to deploy to different platforms

In this section, you’ll learn how to set up your React Native project to be able to support multiple platforms. Since it is the most common use case, we’ll focus a lot on the web here, but the tips and approaches of these sections are also applicable to other platforms such as desktops and TVs.

When creating an application for multiple platforms, there are always two goals. First, you want to support as many platform-specific features as possible and want to give users the look and feel they are used to on this platform. Second, you try to have as much shared code as possible because this makes it easier to maintain and develop your application.

At first sight, these goals seem to be concurrent but there are intelligent ways to get the best of both worlds. Let’s start with the simplest approach.

Using react-native-web to create a clone for web

When creating your application with React Native, you can...

Reusing code with your own libraries

There are many good reasons to create your own library. Sharing code between different projects for different platforms is definitely one of them. But with your own library, you can also achieve the following things:

• Ensure consistent design in all your applications: When you are working in a company that provides multiple applications, it’s a good idea to create a UI library that provides UI components for all these applications. This ensures a consistent design system.
• Simplify backend connection: You can extract your services to a library, which can then be used in all your projects. This ensures a unified backend connection layer.
• Define responsibilities: Every library can be maintained by its own maintainer or team. With this library approach, you can define clear responsibilities.
• Provide additional functionality: You can also write your own library to provide native functionality that isn’t available in the...

Summary

In this chapter, you learned how to structure large-scale or multi-platform products. You are now able to create a project structure that works for large-scale and long-running projects.

You also created a clone of your example React Native mobile app on the web and understood why this isn’t always the best idea. You then learned how to create multi-platform applications that meet user expectations while keeping a high percentage of shared code.

In the last section of this chapter, you learned how to create, release, and maintain your own libraries, what the difference between JavaScript-only libraries and libraries with native code is, and how to only publish these libraries to selected people.

After focusing on creating a good structure for the code base itself, in the next chapter, we’ll focus on how to implement well-working processes and how to support these processes with Continuous Integration (CI) tools.