background

Problems of development the legacy mobile project

image

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.

Look for more interesting
articles

Recent publications


Ultimate Guide to Top Search Engines 2021

Among a vast array of search engines, Google remains the indisputable world leader in web search. Because the majority of people and organizations use Google as their primary desktop and mobile search engine, ranking high on Google is a number one goal for most businesses and private firms.

Tags: Seo

App Stack: What Is App Stack for Android

The birth of a great web app relies on a carefully orchestrated combination of factors that unfold as your project progresses. The Agile approach provides us with great insight into the minds of our clients, and defines our technological solutions for every specific project.

Tags: Development

9 Best NodeJS Frameworks for Backend Development in 2020

Node.js is a progressive backend development technology that was first released in 2009. It continues to grow in popularity among software developers for creating both the frontend and backend of apps, using a single programming language, JavaScript. Its straightforwardness and ease of use make it a good choice for beginners who want to launch full-fledged apps without having to learn multiple complex technologies. It saves time for programmers, who can create code that other engineers will easily understand.

Tags: Development

When and Why to Use Node.js for Backend Development

Node.js is a technology built on Chrome's V8 JavaScript engine that was first released in 2009 and continues to grow in popularity. nt, read our Node JS vs Django comparison analysis. Walmart, LinkedIn, Uber, NASA and some other giant entities have used this open-source, straightforward and easy-to-customize environment for their web applications. 

Tags: Development

Everything You Need to Know About rel=”noopener noreferrer” Tags: Purpose, Benefits and SEO Impact

WordPress included the rel="noopener noreferrer” clause in the list of its default features starting from version 4.7.4. As with every update, the new tags made SEOs concerned that they would threaten their projects’ positions in search rankings. Many feared the update would be a variation of the nofollow clause, preventing search robots from transitioning to linked pages when crawling websites. 

Tags: Seo

WebDesignRankings Lists Clever Solution Among the Best SEO Companies

WebDesignRankings is an analytic platform that conducts ongoing research in the global market for online marketing services. It provides its readers with the latest evidence-based ratings, helping consumers choose the most reliable, authoritative and cost-effective partners for web promotion. 

Tags: Seo

Request a free quote

    Type of Project *
    Budget Range *
    Have you ever performed seo before? *
    Do you already have Google AdWords account? *
    Do you agree to give access to the Google Adwords account in viewing mode? *
    Do you already have Amazon account? *
    Do you agree to give access to the seller account in viewing mode?
    Is your brand registered?
    Budget Range *

    Contact Us