The Situation

Say you are a mobile developer working on a React Native application, and you've been tasked with improving its startup time. You've been using the old approach, but you're aware that Hermes is a more efficient JavaScript engine that can help reduce startup time. However, you're hesitant to migrate to Hermes because you're concerned about the potential impact on your application's stability and the need for a freeze window. You've tried to migrate before, but the process was complex, and you ended up introducing bugs that took weeks to fix. As a result, you're looking for a safe and incremental migration path that won't disrupt your development workflow or affect your users.

Why it Happens

The old approach to JavaScript execution in React Native can lead to slower startup times due to the overhead of the JavaScript engine. Hermes, on the other hand, is a lightweight JavaScript engine that is optimized for mobile devices. It provides a number of benefits, including faster startup times, lower memory usage, and improved performance. However, migrating to Hermes can be challenging, especially for large and complex applications. The migration process requires careful planning, testing, and validation to ensure that the application remains stable and functional.

The Fix, Step by Step

To migrate to Hermes safely and incrementally, follow these steps:

  1. Enable Hermes in a new branch: Create a new branch in your version control system and enable Hermes in your React Native application by setting hermes_enabled to true in your android/app/build.gradle file. This will allow you to test and validate the migration without affecting your main development branch.
  2. Test and validate: Run your application's tests and validate that it is working as expected. Pay particular attention to any issues related to JavaScript execution, such as syntax errors or runtime exceptions.
  3. Identify and fix issues: Identify any issues that arise during testing and validation, and fix them incrementally. This may involve updating your code to be compatible with Hermes, or configuring Hermes to work with your application's specific requirements.
  4. Merge and deploy: Once you've validated that your application is working correctly with Hermes, merge the changes into your main development branch and deploy the updated application to your users.
  5. Monitor and optimize: Monitor your application's performance and startup time after deploying Hermes, and optimize as needed. This may involve tweaking Hermes configuration settings, or optimizing your application's code to take advantage of Hermes' features.

What it Costs, and When Not to Do It

Migrating to Hermes can have a number of benefits, including faster startup times and improved performance. However, it also requires careful planning, testing, and validation, which can be time-consuming and resource-intensive. Additionally, Hermes may not be suitable for all applications, particularly those that rely on specific features or plugins that are not compatible with Hermes. In general, the cost of migrating to Hermes will depend on the complexity of your application and the resources required to test and validate the migration. If your application is relatively simple and you have a small team, the cost may be relatively low. However, if your application is complex and you have a large team, the cost may be higher.

At Your Level

  • Starting out: If you're new to React Native and Hermes, start by learning about the benefits and trade-offs of using Hermes, and how to enable it in your application. Begin with small, simple applications and gradually move to more complex ones.
  • Working engineer: If you're an experienced React Native developer, focus on testing and validating the migration to Hermes, and identifying and fixing any issues that arise. Consider using tools like the React Native debugger to help identify and diagnose issues.
  • Senior or staff: If you're a senior or staff engineer, consider the broader implications of migrating to Hermes, including the potential impact on your application's architecture and performance. Think about how to optimize your application's code to take advantage of Hermes' features, and how to monitor and optimize performance after deployment.
  • Lead or director: If you're a lead or director, consider the resource implications of migrating to Hermes, including the time and effort required to test and validate the migration. Think about how to prioritize and resource the migration effort, and how to measure the benefits and return on investment.

In the Interview

When interviewing a candidate for a React Native developer position, you may ask questions like: "What are the benefits and trade-offs of using Hermes in a React Native application?" or "How would you approach migrating a complex React Native application to Hermes?" A weak answer might focus on the general benefits of Hermes without considering the specific challenges and trade-offs of the migration. A strong answer would discuss the potential benefits of Hermes, such as faster startup times and improved performance, as well as the potential challenges and trade-offs, such as the need for careful planning, testing, and validation. The candidate should also be able to describe a safe and incremental migration path, such as the one outlined above. As the candidate's seniority increases, you may expect them to discuss more advanced topics, such as optimizing application code for Hermes, monitoring and optimizing performance, and prioritizing and resourcing the migration effort. A follow-up question might be: "Can you describe a situation where you had to migrate a complex application to Hermes, and how you approached the migration?" This would help to separate candidates who have actually done the migration from those who have only read about it.

Amit Chakraborty is a founding engineer and senior architect — React Native, AI/RAG systems and production architecture. Portfolio: www.amitchakraborty.dev · LinkedIn · GitHub. Open to senior and founding engineering roles, remote worldwide.