Ionic vs. NativeScript: Which one should I use?

So you have an awesome Angular web app. You've completed the project, the app has been successfully released into the wild! The customer's ecstatic and you're floating on the clouds because it was the smoothest launch ever. Then you get an email…the customer is so happy and the response is so positive, they want a mobile app ASAP. Good problems to have, right? Definitely!

But where do you go from here? After the time and testing put into getting the web app completed, polished and bug-free, starting from scratch probably isn't your favorite option. While it’s fun to start a new project and play with some new, shiny tools - you'll want to work fast, something that's not usually an option when you have to set up everything as new. Plus, it would be nice to get as much re-use as possible from code you've already written. Re-using code will save you not only some time, but also effort, bugs, and probably looks better to the customer (and their wallet) as a timeline too. Depending on how tech savvy they are, you may have gotten the "Well, you've already made the website, can't you just, I don't know, throw it onto the phone?"

If only it were quite that simple.

You Have Options!

We live in some pretty cool times where there are a large variety of good options for any development task. In choosing the right tool for the job, we really want to make sure that we pick the smartest option that allows us to get a great-looking user interface, a fast and smooth experience, some measure of code re-use from our angular web app, and just in case we run into hiccups, a decent amount of resources and developer documentation. Since we're looking to re-use current code, we also want to look at options that will work with angular.

There are a number of options when talking about using existing angular code to develop a mobile app but the ones that check the most boxes for our use case are Ionic and NativeScript. Both are great options to build cross-platform mobile apps but they go about it in largely different ways.

Note: Apache Cordova would be another option for cross platform mobile development but we'll consider it an honorable mention here. It's a great framework that provides the foundation for Ionic. But because Ionic takes Cordova and greatly expands it, we're just going to focus on Ionic here.

Ionic Framework

Ionic is a front-end SDK based on Cordova, that builds on an already great framework to add more front-end customizability, mobile friendly features, and additional services. Ionic itself is built using Angular and works hand in hand with most recent versions of Angular for app development. It provides a large number of sleek, well-designed UI components that can give your app a very polished mobile feel that aligns with common mobile standards.

Ionic apps are built using HTML5, CSS, and Angular, which, for our use-case will facilitate a smoother transition from developing for the web to developing for mobile (and much less new material to learn as a developer). Unfortunately, though native iOS and Android apps don't use HTML, CSS, or Angular natively so Ionic renders the app in a WebView wrapper. Basically, this means that the app will be running in a browser window that feels like a native application.

The added layer of the WebView does slow things down a bit, it also means that Ionic can't directly interact with native components and needs to use plugins to interface with these features. In some cases this can be an inconvenience for the developer because the app must rely on a third party and it adds one more moving part to potentially go wrong.

NativeScript

NativeScript's key difference from Ionic is that the applications it generates are truly native. To state it simply, it builds the applications for iOS and Android, creating two separate apps that are actually built for each operating system instead of running the app in a Webview that could run on either platform.

Where Ionic uses HTML, CSS, and Angular and displaying in a WebView, NativeScript is developed using XML, CSS and Angular which is translated into native app code. The apps being truly native cuts out the middle-man, leaving the developer with one less moving part and the end user with a faster app.

In addition to the performance increase, the translation into native code means that the app components will look much more native. The XML written for a page that hasn't been styled with CSS will look slightly different on each environment, just like the native user interface would. For example - the buttons will look like default Android or iOS buttons, and tabs will be initially styled like Android or iOS tabs.

This can all be customized but can provide a comfortable user experience with an interface users are familiar with that does not need any added effort. NativeScript also allows the developer to utilize native features without needing to install any other packages or plugins.

Because of the added muscle NativeScript needs to do a good job of converting the app to both native operating systems, the app size is larger than Ionic and slightly larger than it would be if you designed the app natively just for iOS or Android.

Wrapping Up…

Ionic provides polished, great looking UI, and you can develop using tools and language already familiar to you from developing web applications. It may not run quite as fast, but with many apps, this won't be noticeable and will likely be worth the trade-off of being able to use more of your existing code and develop at a faster pace. The built-in components will also provide a polished, uniform feel to your mobile app that meshes well if you don't have a custom UI that you're trying to match closely to.

NativeScript provides a natural-feeling, native experience for the user. It does create a faster app but the learning curve is greater, and when moving from an existing app you will probably have to put more effort into converting your existing UI into NativeScript's components.

Neither option is a bad choice, and both have tons of great documentation and large community resources. Both options will require a fair amount of UI work when translating from a web app to achieve an optimal mobile experience. But when you're trying to take an existing app and port it to mobile, either option will be a huge time savings compared to using React-Native, Flutter, or another option requiring you to develop an entirely new mobile app from scratch. The ability to re-use the logic you've already written in your angular components can potentially provide huge time savings over starting from scratch in addition to the other benefits provided by both frameworks.

After all, why not let someone else do some of the work for you? Work smarter!