How mobile frameworks fare? What are the differences? Which one you should pick? How’s performance for each of these options? Let’s do certain comparisons.
All these technologies allow you to build real native mobile apps for both iOS and Android. Here you’ll use JavaScript (for React Native, NativeScript and Ionic) and Dart (for Flutter). Hence you’re able to create native apps for both platforms with one language.
Let’s discuss how these technologies differ.
React Native is a framework developed by Facebook.
It uses JavaScript and the React library to allow you to build beautiful mobile apps using React components.
Note: React apps built for the browser is different than used for mobile development. React apps target browsers but in mobile apps we use a set of pre-defined components which is used to compile the code natively in mobiles.
Ionic follows a different approach than other frameworks.
With Ionic, we create a real native app but we do this by creating a web app using basic components say HTML, JS and CSS. This will be wrapped by a real native app that hosts a webview. Webview is nothing but a subset of browser or you can say hidden browser.
Since, this follows the basic web components, hence its pretty popular and easy to build .
With Ionic 4, it brings huge set of reusable components you can use to build beautiful apps. It also provides lots of tooling to make the development easier. Also ionic team started investing in Capacitor project, which is cross platform and offers tons of Javascript packages.
NativeScript also uses JavaScript to build native mobile apps. It comes in different varieties like – JavaScript/ TypeScript, using Angular and using Vue.
It gives you the option of working with different frameworks. Therefore, its easy for developers to pick the most suitable framework for building apps and use the native experience. All options are actively getting updated. Hence, its good to dive into the docs and get started. This also comes with pre-built components which basically translates the code into native code. It also means it doesn’t work with HTML, but with its own components.
Flutter is the newest addition in this family by google. Flutter is both a SDK and framework for Dart – a programming language developed by Google.
Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.
Some bullet point features are like:-
- Fast Development
- Expressive and Flexible UI
- Native Performance
Progressive Web App is another alternative for mobile apps. But, here is a difference.
PWA is a web app, not a mobile app. This is really important. You can’t distribute it to app stores. But it looks and feels like a native app, where you also have access to some native device features. Also, its built in such a way that it allows you to run in older browsers too. This option is really getting popular in terms of development team or product team where they can’t invest in completely native stack, but with minimal effort native kind of experience can be achieved.
Now, let’s compare the same against few attributes:-
Coding Investment aka write once use everywhere
- NativeScript: Native script is also one of the popular choices for building mobile framework. Its also similar to flutter but the best part is it doesn’t enforce any built in design system. However, code can be reused across cross platform with ease.
- React Native: This also compiles to native by default. However, here you need to style most components on your own. Hence more work is required though. Here libraries like redux can be used easily.
- Ionic: Awesome framework which offers complete re-usability. Point is its almost web app which is wrapped around library so that it can be compiled to native code and same can be distributed to app store as well. This also ensures that you can easily re-use your code. As said previously, there are many new features are getting added on this.
- Flutter: This one also started getting traction these days. Its really great to re-use. Comparison to ionic bit more work is required here. Here you can use material design as well to style your apps. I just started doing some POC around this. Yet to dig deeper to understand the complete view. Best part is, its backed by google, hence things will move fast.
Performance
- React Native, Flutter and NativeScript: These three framework offers pure native apps. They also provide very good performance compared to ionic. all offer you real native apps (compiled from your code) and therefore, they provide a better performance than Ionic does. I mean at this point, it just depends on developer on which framework they are comfortable with. However, out of these Ionic is not upto mark as it just wraps web components inside packagable content.
Popularity
- Github stars is one of the key criteria for understanding popularity.
- ReactNative:- 66K stars
- Ionic:- 35K stars
- Flutter:- 30K stars
- NativeScript:- 14K stars
- Therefore, if we compare the overall adaptability of mobile framework, ReactNative is the outsmarts every other framework.
Disclaimer:- This is entirely my opinion.
Thanks,
Rahul
Happy Coding
Also published on Medium.
