Problems of development the legacy mobile project

Overview

This material is devoted to mobile development in the field of rental housing.

I want to share my experience with readers and shed light on the difficulties that may arise when working with an inherited project on React – Native. You will learn how to detect bottlenecks in a project, what problems are characteristic of the working process and how to search for solutions. You will also learn when you need to refactor the code, and when it is enough to just make small changes according to the task.

This article also provides a detailed description of the subject area and project objectives, some facts regarding cross-platform mobile development, and possible ways to create integrated solutions in the real estate area.

We will consider the main issues and problems of the mobile legacy project, and travel step by step from task setting to identifying bottlenecks, finding solutions to existing complications, getting the desired results, and “lessons learned.”

The Industry

The main goal of a realtor or a broker is to meet the buyer’s needs, and to find and show properties according to parameters set by the client.

The main goal of a buyer or client is to purchase a dream home corresponding to specific criteria.

There are several approaches to real estate evaluation. When looking for housing, the market price of the premises is a primary consideration. A buyer should take into account many factors affecting price formation, including:

• general economic trends and real estate prices;
• the district’s prestige level;
• infrastructure level;
• public transport accessibility;
• compliance of rooms with modern codes and standards;
• living area and layout;
• quality characteristics;
• usage restrictions;
• availability of a garage and utility rooms;
• permission to keep pets, etc.

A company made a request to develop an app that would comply with industry parameters and provide the ability to:

1. Sort user roles.
2. Search for housing corresponding to clients’ needs using various filters. 
3. Establish contact with agents / owners / buyers.
4. Send instant meeting requests to owners.
5. Communicate in an application messenger.
6. Create open houses, and set appointments for meetings and inspections.
7. Create photo posts about housing.
8. Develop a system for ranking and evaluating agents and homeowners.

The project combines a social platform and a real estate list, making it possible for agents and brokers to interact with users searching for housing. A well thought out and completely free application would be created to help real estate agents easily promote listings and open houses, and to connect with their communities. 

Buyers or tenants would be able to use the app to search for necessary information in the usual news feed format, and have access to functions such as instant meeting requests, communication within the app messenger, instant status checks (to find out if a property is still available), and much more.

The Company

Real estate agents are concerned about promoting their businesses, communicating with clients, and understanding buyers’ needs and requirements. There are many different solutions to these concerns, including:

1. Placing ads on online platforms that unite people who are buying, selling, or exchanging goods and services. 
2. Creating a unique website, and promoting and integrating it with various third-party services, to increase traffic and index in search engines. Agents should also consider developing a mobile version of the site that displays flawlessly on modern smartphones.
3. Creating an integrated solution, including a website, a mobile application, an admin panel for managing and entering various information, data import/export, and integration with third-party services. Companies who use mobile applications are able to help their customers easily find suitable properties. These applications have many features, simplifying searches via mobile devices.

Background

Every problem has some background. The current situation in the mobile frameworks market is characterized by an impressive variety of options: Flutter, React Native, PhoneGap, Xamarin, NativeScript, Kivy, and others. Such a wide range of products can make even an experienced developer wonder which is most suitable for a specific task. We chose React – Native for our project for the following reasons:

1. Native applications at the output. It was possible to work without WebView, based only on JS API.
2. Up to 90% of the code base could be reused for both platforms.
3. JS-engine provides high performance comparable to the native application.
4. We were able to reuse the qualifications of web developers.
5. Extensive community support and library availability.

After a challenging framework selection process, we were faced with the equally challenging task of choosing a stack of technologies for this framework.

There are many options for tailoring a technology stack when developing a mobile application on RN.

Here is a short list of questions to be answered by the application architect:

1. Will typification (Typescript, Flow, PropTypes) be used in the project?
2. Will you use a functional or object-oriented approach?
3. Which navigation will be used: one prescribed in the official documentation, or one supported by the developer community ?
4. Will your project work offline?
5. Which library will you use for storing states?
6. Which helper library will you apply to use side effects?
7. How will you use styles, themes, and constants? Where within the project structure will you store them?
8. Also, there may be issues specific to each project, for example:

          What services will you use for push-notifications?

          In what way will you provide registration through social networks?

For various reasons, the following technology stack was formed for our project: 

1. JS,  ES6 / ES7, PropTypes
2. React, React Native
3. Mobx, Mobx react, mobx persist
4. React-navigation

and others.

The Challenge

Initially, from both a managerial and a technical perspective, the project was in a deplorable state. 

Managerial blunders:

1. A huge number of changes was hampering project development.
2. The managerial staff had no opportunity to plan the work.
3. Some features did not comply with available documentation.
4. There were obvious problems with the app’s stability that resulted in an abundance of crashes.
5. The application required restructuring portions of the functionality and deep refactoring.

The project had the following technical problems:

1. The architecture of user roles was built by simply copying and splitting into subfolders, meaning the folders of containers, components, and styles were simply duplicated, while the functionality did not vеry much for different user roles.
2. Problems with navigation. The recommended library was used for navigation. To implement the navigation through tabs, the application used a handwritten “navigator” based on the modal window instead of using library features.
3. Many components were written in haste and required refactoring or restructuring.
4. Problems with application UI. Visually, the application was very different from the layouts and clickable mockup.

Our Solutions

1. Large-scale refactoring was performed to sync functional, screen, and user components. Information output based on user roles was implemented. The problem of code duplication was solved by combining the component base.
2. Navigation problems were solved by combining the navigation stack and using the correct TabBar configuration.
3. The general component base was refactored and the component structure was changed.
4. Problems with application UI were solved by carefully analyzing the available materials related to visual design. By using tools such as avocode and invisionapp, we were able to examine all the screens in detail and utilize design materials that were hidden in the project’s PSD files.

An extended description of our progress along this path and a profound analysis of points 2 and 4 are presented in separate articles.

Results/Achievements

As a result of our laborious work, we were able to fix most of the problems described above. After several development iterations, the application was successfully deployed to the App Store and Play Market, and provided to consumers.

Value Delivered

Thanks to refactoring and correcting architectural flaws, we were able to support and further develop the product.

Also, thanks to revising management processes and setting correct tasks, it was possible to focus the development team’s efforts on delivering value with each iteration and complying with the business needs of the project.

Lessons Learned

We cannot understate the importance of the developer’s proficiency in the subject area and the stack of technologies used in product development. It was necessary to carefully process available information and make a number of monumental decisions. Over the course of long-term development, our developers were able to prevent several problems related to scaling up the project and bringing it to market.

Conclusion

To sum things up, I would like to emphasize the importance of in-depth familiarization with the subject area, as well as critical decision-making at the start of the project, namely:

1. Choosing the appropriate technology for mobile development.
2. Selecting the best technology for server-side development.
3. Selecting appropriate libraries for narrow tasks within the chosen framework.
4. Following the best-established practices when working with a specific framework.
5. Using a cross-platform approach in mobile development while taking into account the peculiarities of native platforms.