Mobile App Development: Confronting and Conquering Challenges

In October 2022, I joined DaVinci Salute, an Italian startup focused on innovate the national healthcare market by leveraging the power of technology.

I started as a full-stack developer for the web app, but soon after, an opportunity presented itself when the developer who had created the mobile app left for a new position at one of the FAANG companies.

When DaVinci offered me the chance to spearhead the continued development of a mobile app, I saw it not just as a task, but as a call to action. This was an opportunity to take part in shaping the future of technology and user experiences. Accepting the challenge meant stepping out of my comfort zone and embracing new responsibilities, but it also meant contributing to a project that had the potential to impact thousands of users. Drawing from my previous experiences in developing mobile apps using React Native, I find myself well-equipped to seamlessly take up the reins.

Throughout this article, I will share valuable insights and advice on how to navigate a challenge similar to the one I undertook.

1. Understanding the Project Architecture

Getting up to speed with an existing project’s architecture is a pivotal challenge.

• Layout of components
• Navigation
• State management
• Network Integration
• Libraries
• Security measures
• UI/UX
• Design system
• Information Flows

Start by meticulously studying the codebase, analyzing the folders structure, and identifying key modules. Reach out to your team for guidance and documentation that could help you comprehend the project’s architecture better.

2. Knowledge of Libraries and Dependencies

React Native projects often rely on numerous third-party libraries and dependencies. Familiarize yourself with these libraries’ functionalities, usage, and potential pitfalls is essential. Ensure you have access to documentation and be prepared to invest time in experimentation to understand how these components integrate into the project.

Comparing different libraries within a React Native project can be an essential step in gaining a better understanding of its architecture and implementation. Here’s how this process can help:

• Informed library choices: Within a React Native project, you might face decisions regarding various libraries for similar tasks, such as state management or network integration. Comparing available options will help you select the library that best suits the project’s needs based on compatibility, features, and performance.
• Understanding existing solutions: Examining different libraries will give you a clearer idea of the solutions the team has chosen previously. This could lead you to discover innovative approaches and best practices that you could apply in other parts of the project.
• Hands-on experience: Designing and developing small experiments using different libraries will allow you to gain practical insight into their capabilities and limitations. This hands-on experience can guide you in making informed decisions when implementing complex features within the project.

3. Syncing with the Team Workflow

When I moved into app development. The workflow team wasn’t complete yet.

So adapting to the team’s workflow, version control practices, and communication channels became a daunting task.

Like other companies, we use tools like:

• Git to manage code changes effectively, and receive a review each time we introduce a new feature or a fix.
• CI/CD pipelines to release new versions of the app in AppStore and Google Play
• Shortcut to take track, plan and organize new features and bugs to solve

But also we use some special handcraft tools like:

• Functional Review pipeline, based on eas update that helps the design team to review a task completed by the developer without accessing the codebase
• Slack notification channels to avoid using real push notifications, email, and sms in the staging environment
• Slack bots for real-time monitoring of app incidents in production
• Custom design system based on tailwind and deeply integrated with Figma

Gaining knowledge of these tools led me to communicate out of the box with the design team and other non-tech people at DaVinci.

4. Grasping UI/UX Guidelines

The app has already been under development for two years, we have a large set of existing UI components and existing guidelines in place.

Our app does use a proprietary design system. We use these approaches to follow the web app style, trying to emulate Tailwind.

The entire design system stays on Figma boards where developers can understand and adhere to these guidelines provided by the design team to maintain a consistent user experience.

Studying any existing design documentation and discussing with designers to clarify any ambiguities is crucial.

In DaVinci, we believe in strong collaboration among teams. Often developers and designers collaborate to make decisions on how we implement new sections in our apps.

Normally, our process that brings an idea to life starts from the design team that ideate the app template on Figma for a new section of the app and choosing the best:

• Colors
• Spacings
• Typography
• Components
• Screen
• App Information Flow
• Behavior

The new sections are overseen by tech leads, who make decisions on task creation and work distribution among the development team to bring Figma boards to life.

During iterations, when a developer’s task successfully passes the code review, the design team conducts a functional review to ensure adherence to the guidelines presented on the Figma boards.

This harmonious partnership transforms concepts into tangible, user-centric experiences, elevating the DaVinci app to a level of excellence that seamlessly blends innovation and aesthetics.

5. Adhering to Best Practices

Ensuring that the app code aligns with industry best practices is crucial for maintainability and scalability. However, learning these best practices while jumping into an ongoing project can be challenging.

I dedicate time to research and understanding React Native coding standards, component scaffolding, state management best practices, networking layer, navigation, and the custom UI library.

After that, I started to write a list of the pros and cons of all design choices for the app.

Extract from it all the things that need refactoring following the TDD practices to avoid breaking the application.

In particular, we focus on:

1. Navigation Hierarchy Testing: Develop a comprehensive test suite that covers the navigation flow in the app. As you refactor the navigation to support a deeper hierarchy (if necessary), these tests will serve as a safety net, ensuring that navigation remains functional and intuitive.
2. Enhance Caching with Testing: Introduce robust tests for caching mechanisms to handle varying data sizes and scenarios. As you refactor to improve caching, these tests will ensure data integrity and cache performance while avoiding regressions.

6. Communication with the previous developer

The previous developer, a talented individual, demonstrated remarkable skills in independently developing a React Native app from scratch. His expertise allowed us to define the entire app lifecycle, from the initial concept to deployment. His control over core React Native concepts, such as component-based architecture and JSX, allowed them to create well-structured and efficient code.

An open line of communication with the developer to discuss design decisions and architectural choices.

Discuss with them the hidden intricacies within the code base to dispel any doubts.

Their insights can provide a wealth of information that aids your participation in the project.

With a strong grasp of the state management library, the developer ensured the app’s data flow was seamless and predictable. They showcased a keen ability to implement complex UI designs, making the app visually appealing while maintaining responsiveness across different devices.

My previous experiences in developing a mobile app in react native make it possible for me to pick up the reins without needing to delve deep into the implementation specifics.

7. Balancing Speed and Quality

The urge to catch up and swiftly contribute could potentially compromise code quality. Establishing equilibrium between timely delivery and upholding code excellence stands as a critical objective. We readily extend the timeline when necessary to ensure your contributions exhibit both efficiency and robustness.

To strike an optimal balance between quality and velocity, we’ve embraced a pre commit phase where code undergoes rigorous checks:

• Prettier: Ensuring adherence to app-wide formatting guidelines.
• ESLint: Upholding rule compliance.
• TypeScript Compiler (TSC): Requiring error-free, warning-free builds.
• Unit Tests: Safeguarding components integrity to prevent any compromise.

At every step, our emphasis remains on delivering at pace without compromising the integrity of our codebase.

Finally, the code review and functional review processes culminate in a comprehensive assessment of the development efforts, ensuring both the technical aspects and user-centric functionalities align seamlessly with the project’s goals.

Conclusion

Joining a React Native project that’s already in progress can be a challenge, but it’s also an opportunity for growth and skill development. By tackling the challenges of understanding architecture, libraries, team workflows, UI/UX guidelines, debugging, best practices, and communication effectively, you can smoothly transition into your new role and contribute meaningfully to the project’s success. Remember that learning from your colleagues, seeking guidance, and staying calm and patient will be key factors in your journey to becoming a valuable asset to the team.