Choosing the Right Cross-Platform Tool for Your Next Project
There’s no shortage of cross-platform developer tools out there. From Ionic to Flutter to React Native, each platform comes with its benefits and limitations. What’s interesting; however, is that people often have polarizing views about which platform is best, mostly skewed to their preference. However, we’d argue that the project really should dictate the platform, and that you may want to rethink which tool is “best.”
Mike Hartington covers all of this and more in our recent webinar, but here are some highlights to consider as you embark on your next project.
React Native
React Native is an open-source UI framework from Meta. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities.
It has a declarative API for native controls, JSX for authoring, and abstracts iOS and Android API’s. With React Native, the idea is to “learn once, write anywhere.”
When it comes to routing, there are some options available depending on if you picked Expo. It integrates with native screens, which requires native libraries. It has similarities to React Router, but with some quirks.
Regarding 3rd party libraries, React Native does have a collection of packages you can utilize. If you have a set of familiar libraries that you are used to using, those libraries are most likely not going to be usable in React Native. Because React Native does not use DOM, you’re going to have to depend on native libraries that are platform specific. Expo also influences what libraries you can use when it comes to native API access, while utilizing some core features from the React Native runtime. If something custom is needed, developers can write a native module with Objective-C/Java.
Got bugs? React Native has familiar debugging tools with the browser DevTools. It’s integrated with React DevTools for component inspection, and it has on-device debugging for element inspection. When it’s time to deploy to the web, Expo again dictates which options are available. The generated DOM is not ideal for most users, and accessibility support can be problematic.
Keen readers probably noted that Expo has been mentioned quite a bit here. That’s because Expo adds a lot of utilities on top of the core React Native experience. You can use React Native without Expo, but there will be a lot more manual work behind the scenes. Depending on project needs and requirements, working with Expo might not be possible and would require more developer knowledge to fill the gaps that Expo handles.
Flutter
Flutter is Google’s cross-platform development framework that utilizes the Dart runtime. Flutter works by rendering the UI via a OpenGL graphics layer and creating all the widget on the fly based on what the developers build in Dart. Because everything in Flutter is expressed as a widget, the runtime can provide features like Navigation out of the box by simply creating a new app instance. This means once you create a new app and a few components, you can navigate to any of them by accessing the global navigation API.
For additional functionality, 3rd party libraries exist on the pub.dev registry. Since Flutter itself is only focused on the UI portion of an app, most developers will be pulling in several packages from there. Many of these packages come from the Flutter team, with more coming from the open source community. When it comes to native API access, that is provided by the Dart runtime. Accessing features like the Filesystem or Geolocation requires installing yet another package from pub.dev. If developers want to add features that have not been built by the community already, developers can add this functionality with C/C++
When it’s time to debug, Flutter has a custom debugging tool that mimics browser DevTools, complete with widget inspector, network, memory management, etc. Flutter/Dart compiler is able to provide deep context if an error occurs. For deployment, a web project is generated with a –web flag. The generated DOM is canvas, with a lot of JavaScript. Accessibility is a major issue, and larger sized web apps are not ideal for use on mobile devices.
Ionic
Ionic is a cross platform UI and Native runtime built with HTML, CSS, and JavaScript that seamlessly integrates with Angular, React, and Vue. For routing, Ionic hooks into the framework’s router library, and builds on top to provide more native-style navigation stacks. In addition to all of this, there are built-in Animations and gesture support for features like swipe-to-go-back on iOS and dismissing Modals by swiping down.
For 3rd party libraries, because Ionic is based on web technologies, developers have access to the rich ecosystem of packages on npm. Be this packages that are framework specific, or generic libraries that are built on plain JavaScript. Some libraries may not be ideal for mobile, which is a consideration when building out a project. Native API access is provided by the Capacitor runtime and is accessible via JavaScript, where platform implementations are swapped out on the fly. If something custom is needed, just write a native module with Swift/Java.
When it comes to debugging, the browser debugging tools are your best friend. It integrates with framework specific development tools and remote debugging on devices helps speed up development. Deploying to the web is simple since Ionic is all web from the outset of the project, so nothing extra is needed. With Capacitor, native APIs can be shimmed or gracefully degraded.
What should you choose?
When it comes time to build your next project, there are lots of options at your disposal. It’s critical to understand the key features and drawbacks of each platform when weighing your choices to ensure a smooth development, debugging, and deployment process. To learn more about these frameworks and help decide which makes sense for your next project, check out Mike Hartington’s “Ionic vs. the Rest” webinar, which dives into even more detail.
