In this article, we will sweep away misconceptions about hybrid application development by illustrating the fact that hybrid technologies like React Native and Flutter have significantly closed the performance gap with native apps, offering developers and businesses new possibilities.

We'll explore various aspects critical to app development, such as performance, security, accessibility, stability, and the ability to create engaging animations. Our goal is to provide insights that challenge conventional wisdom, emphasizing that the effectiveness of an app depends more on thoughtful implementation than on the development framework alone.

By the end of this piece, you'll see that whether hybrid or native is the better choice depends on your project's unique requirements and the experiences you aim to deliver to your users.

Popular Belief 1: Native apps are more performant than Hybrid Apps

For applications which primarily involve CRUD (Create, Read, Update, Delete) operations, which constitute 90% of the app market, the performance difference between native and hybrid apps is negligible. Hybrid frameworks like React Native have made significant strides in narrowing the performance gap through improvements such as the JavaScript Interface (JSI) and incremental rendering. JSI enables direct communication between JavaScript and native code, reducing overhead and latency, while incremental rendering enhances user experience by prioritizing content rendering. These advancements mean that for many applications, the performance of hybrid apps can approach that of native apps, particularly where the demands on the device's hardware are not as intensive.

However, For certain types of applications, particularly those that demand intensive use of the CPU, GPU, or multithreading capabilities, native apps do indeed hold a performance edge. This advantage lies in native development's direct access to device hardware and platform-specific optimization, such as hardware acceleration features and multithreading support provided by Android and iOS. These technologies enable native apps to deliver high performance in graphics-intensive applications, augmented reality (AR), video processing, and applications leveraging AI and machine learning, where leveraging the device's full hardware capabilities is crucial.

It's crucial to recognize that although hybrid applications have the capability to utilize native APIs, the success of such integration heavily relies on the hybrid developers' proficiency in native programming. Consequently, for more sophisticated applications, a hybrid app's performance might be constrained by the developers' expertise in native development. In these scenarios, the optimal approach may involve a collaborative effort that combines the strengths of both hybrid and native developers to achieve the best possible outcomes.

Popular Belief 2: The security of my users is paramount; therefore, I need a native app

Native apps have direct access to platform-specific security features and APIs, potentially offering more robust security capabilities out of the box. This direct access allows developers to implement detailed security measures tailored to the specific nuances of each platform.

However, React Native and Flutter both provide mechanisms (such as React Native's direct native modules access and Flutter's platform channels) to integrate native code and leverage native security features. An example of that is our react-native-app-security open source module. This means that with proper implementation, React Native and Flutter apps can achieve a level of security that matches native apps. The key factor is the developers' knowledge and their ability to effectively utilize the capabilities of these frameworks to implement security best practices. Tools like the OWASP MASVS are of immense help. More on this can be found in our Tech Radar.

In the context of medical or financial apps, addressing Software of Unknown Provenance (SOUP) is crucial. Especially for medical applications governed by standards like the FDA in the U.S. or the MDR in the EU, there is a stringent need for comprehensive documentation and evaluation of all software components used, including third-party dependencies. Cross-platform frameworks often rely heavily on external libraries, introducing challenges in managing and documenting SOUP. Each dependency, along with its transitive dependencies, must undergo a thorough review for reliability, security, and adherence to medical software regulations.

The use of cross-platform frameworks can complicate matters with their third-party dependencies and the bridging between native and non-native code, potentially enlarging the attack surface if not properly handled. However, tools such as Socket.dev and Snyk offer powerful solutions to secure dependencies against supply chain attacks, thus enhancing the security framework of apps developed with React Native or Flutter.

This challenge is not insurmountable. We collaborate with entities in the banking (Milleis / Moniwan) and healthcare sectors (Biogen - Konectom), and our hybrid applications meet the security levels required by our clients.

Popular Belief 3: For better accessibility, I need a native app

Accessibility in mobile applications is not just a matter of social responsibility but is also mandated by various legal frameworks globally. As outlined in our article on mobile applications and accessibility obligations, the law requires digital services, including mobile apps, to be accessible to everyone. This legal requirement underscores the importance of creating apps that are usable by people with a wide range of disabilities, ensuring full participation in the digital world.

Contrary to the common belief that native SDKs for Android and iOS are indispensable for creating accessible apps, modern cross-platform frameworks like React Native and Flutter offer considerable support for accessibility features. In our beginner's guide, we illustrate how React Native's Accessibility API supports the creation of apps compatible with assistive technologies by utilizing properties like accessible, accessibilityLabel, accessibilityHint, among others. These properties play a crucial role in making UI elements navigable and understandable for users relying on screen readers and other assistive technologies, underscoring React Native's capability to foster inclusive app experiences without native SDKs. Similarly, Flutter's emphasis on semantics through its Semantics widget enhances app accessibility, providing detailed descriptions for screen readers and ensuring the UI is comprehensible for users with visual impairments.

However, the journey to creating highly accessible applications via hybrid frameworks like React Native involves unique challenges and considerations. This is partly because native environments, such as Kotlin, inherently enforce accessibility features like mandatory alt-text for images, which directly promotes accessibility. In contrast, hybrid platforms might not enforce such standards as strictly, requiring developers to be more proactive in implementing accessibility features.

A notable challenge in React Native is the platform's decision not to support the nesting of accessible elements, such as placing a link within a paragraph where both elements are individually accessible. This design decision, aimed at maintaining a simple API, can complicate the development of complex accessible UIs where nested interactive elements are required. Such limitations underscore the need for creative solutions and potentially adapting UI designs to circumvent these constraints without compromising on accessibility.

In conclusion, by prioritizing accessibility from the start, all users are ensured access, even with hybrid apps.

Popular Belief 4: A hybrid app crashes more often than a native one

While it's commonly believed that native apps, developed with platform-specific SDKs like Swift for iOS and Kotlin/Java for Android, offer superior stability due to their direct access to system APIs and optimized performance, this doesn't tell the whole story.

Hybrid apps have often achieved crash-free rates as high as 99.99%. The stability of these apps tends to depends more on factors such as the developers' commitment to the app's stability and the application's domain (e.g., streaming apps may experience more crashes than CRUD apps) rather than the technology stack itself.

Despite potential challenges related to the additional abstraction layer and integration with operating systems that hybrid apps face, these issues are not insurmountable. It's essential to acknowledge the substantial contribution of the open source community in this context. Both React Native and Flutter benefit from vibrant, active open source communities that continually develop robust, well-tested libraries. These contributions greatly enhance the capabilities and stability of hybrid applications, offering solutions and workarounds for common challenges faced during development.

It's also worth highligthing that native app development, despite its potential for greater stability, can be more complex and bug-prone due to the intricacies of working directly with platform-specific technologies. This complexity can increase the risk of bugs if not managed properly.

Ultimately, the stability of an app, whether native or hybrid, is largely dependent on the quality of the development process, including rigorous testing, optimization, and a proactive approach to maintaining compatibility with operating system updates.

Popular Belief 5: If I develop an application with a hybrid framework, it will not be accepted by the app stores.

The misconception that multi-platform apps developed with frameworks like React Native or Flutter are not accepted by app stores is unfounded. Both the Apple App Store and Google Play Store accept apps developed with these technologies, provided they meet the respective platform's guidelines and quality standards. These frameworks allow developers to write a single codebase that can run on both iOS and Android, which can significantly reduce development time and costs.

However, be careful not to confuse hybrid apps with Progressive Web Apps (PWAs). PWAs are web applications designed to work on any platform that uses a standards-compliant browser, including both mobile and desktop devices. PWAs are intended to provide a more app-like user experience compared to traditional web pages, offering capabilities such as working offline, receiving push notifications, and accessing hardware features. However, this technology is distinct from hybrid apps developed with React Native or Flutter. Hybrid apps are embedded in a native app shell and distributed via app stores, allowing them to utilize device-specific hardware and software features more deeply than PWAs.

Regarding Progressive Web Apps (PWAs) and the recent developments with Apple and the Digital Market Act (DMA), there was initially some confusion and concern that Apple would remove support for Home Screen web apps (PWAs) in iOS 17.4 for users in the European Union due to requirements under the DMA. However, Apple has clarified that it will continue to offer the existing Home Screen web apps capability in the EU.

Popular Belief 6: I will be limited in terms of features with an hybrid framework

The notion that cross-platform frameworks cannot rival the capabilities of native development is significantly overstated. This misconception overlooks the powerful features of Flutter and React Native, which enable developers to build bridges to native APIs. Moreover, the extensive contributions from their vibrant communities have resulted in a wealth of these bridges, further enhancing the capacity of these frameworks to deliver performances and functionalities that closely parallel native development.

As examples are worth a thousand words, here’s some great examples of what the communities had build based on native API:

• Discord is a dynamic communication platform that excels in delivering high-quality audio and video calling features, alongside live streaming capabilities. ‎Discord - Discute & Partage

• You can integrate Unity-based applications within React Native apps, offering a bridge that combines the immersive 3D gaming or interactive experiences developed in Unity with the flexible, cross-platform capabilities of React Native.

• App Clips in iOS provide a streamlined, lightweight component of an app, delivering specific functionalities without the need for full app download. Leveraging React Native, developers can craft these concise, feature-focused experiences with cross-platform efficiency.
  ‍
• Tesla's mobile app embodies cutting-edge technology, offering users remote control over their vehicles, real-time monitoring, and software updates

• The banking app Boursorama also exemplifies Flutter's capacity to deliver robust and reliable financial services through cross-platform development

Popular Belief 7: I will not be able to do great animations

Although some kind of platform’s specific animations can be easily done with Swift and Kotlin, hybrid frameworks are very powerful in terms of possibilities.

In Flutter, you can leverage Custom Painters to craft custom drawing and animation sequences that are not just visually appealing but also optimized for performance : it provides indeed a widget called CustomPaint that gives you the canvas to draw anything from shapes, text, and paths to complex graphical scenes directly in your Flutter app. By overriding the paint method, you can control every pixel on the screen, allowing for intricate and highly customized animations. This method gives developers the freedom to implement detailed animations that would be difficult to achieve with standard widgets.

In React Native, Reanimated is a React Native library designed specifically to build smooth and complex animations that run on the UI thread. Reanimated provides a more extensive set of primitives for creating animations compared to what's available out of the box with React Native, allowing for a greater degree of control and performance optimization.

For both platforms, developers have the ability to use Rive which is is a powerful design and animation tool. It allows them to work closely with designers and create intricate animations and interactive designs that can be easily integrated into React Native or Flutter apps. With Rive, animations are not only vector-based, ensuring sharpness at any size, but they can also be manipulated in real-time based on user interactions or data changes within the app. This makes it possible to create dynamic, complex animations that can respond to the user, making the app feel more interactive and engaging. RiveBear Login: Animated Polar Bear Flutter & Rive Widget

Conclusion
‍

This article makes it clear that the growing capabilities of hybrid frameworks such as React Native and Flutter, which now offer engaging animations, real-time updates, and wide accessibility features, are reshaping how we choose to develop apps. It's not just about picking a technology; it's about strategically deploying these frameworks to best serve your project's aims. Importantly, opting for a hybrid approach doesn't exclude the benefits of native development skills. In fact, for applications that demand the utmost in performance, such as those utilizing machine learning, or for specific use cases like Apple Watch apps, combining hybrid flexibility with native development expertise can offer the best of both worlds. This nuanced approach allows developers to leverage hybrid technologies for broad application development while also applying native solutions where they are most needed, ensuring both efficiency and high performance.

‍