Performance: Nativescript Angular v Nativescript Vanilla


#1

Hi There,

I am brand new to nativescript. I have a background in node web development, and recently have spent a while coding up an app for production in ionic for both ios and android. I have had some concerns about ionic’s performance for that app–I noticed some buttons acting finicky and navigation being slow sometimes.

Because performance is important to me on this app, I looked around, and nativescript seems like a very promising option. (I considered coding in React Native and also Swift, but I don’t enjoy using those technologies as much as javascript, angular, etc.)

Here’s my question: for someone who cares about things like a smooth experience for the end-user, fast navigation, and reliable performance, should I use nativescript-Angular or nativescript-Vanilla Javascript for this production app? I have a slight preference for coding in angular, because that is what I got used to while using ionic, but vanilla javascript is ok too.

In reviewing the forums, I have seen people say that before nativescript Angular was slower, especially on Android, but that maybe with nativescript 3 things have evened out a bit?

This is important to me especially because I am switching from other frameworks to nativescript mainly for performance improvements.

Thanks!


#2

Hi, valid concerns. I think the best way to verify the performance is by downloading a few apps from the stores. Here’s a selection of apps built with and without Angular: https://www.nativescript.org/app-samples-with-code

Note that fi. that plugins showcase app is mine, and includes 30 external plugins, so it’s a bit slower to load than your average app. But that would also be the case if it wouldn’t have been created with Angular. I have Angular apps in the NL store that load within 2 seconds on Android and subsecond on iOS.


#3

Thank you, I appreciate the info. I will do some experimenting, but I am hoping for some general info from the get-go as I plan some things out: It seems fairly clear from internet searching that Nativescript angular used to be less optimal in terms of size of app, startup time, and in-app speed than vanilla.

Do you think this has been addressed in nativescript3?

If not–if angular performance is indeed worse, is there any reason to use nativescript with angular other than a preference for the development process. Is there maybe some idea out there that angular is where nativescript will focus in the future?

Thanks.


#4

At the end of the day, the size of your JS bundle has an impact on the startup time of the app. Without Angular being included, your bundle is smaller.

Things have become much better over time though: in the old days, Webpack wasn’t used by most projects. Also, AoT/lazy loading wasn’t a ‘thing’ at a certain point in time. Furthermore, uglification and snapshotting (for Android) came to the table later on. All of these things combined result in perfectly fine performing apps IMO.

But I’m just one user, so perhaps others can share their opinions as well - still, I would download a few apps to get a better feel for yourself… although not all of those may have been optimized up to modern standards.


#5

Thanks. That is helpful.


#6

In case anyone out there has opinions, I am still curious what the reason is to use angular instead of vanilla, aside from the enjoyment of the development process. In my case, I would say I have a slight preference for using angular during the development, but vanilla javascript would be just fine.

Perhaps more people use angular, so there is more info in the community for that? Or maybe the nativescript core team wants to emphasize angular for the future?

If vanilla javascript right away is going to give a performance boost–not just in terms of startup time, but especially loading time of individual pages–then why not just use that?


#7

As Eddy mentioned, Webpack and Snapshots have drastically improved the startup time in Android. Take a look at this video for more information on this topic.

Opinion form my personal experience is, the performance difference is not noticeable between Angular and NativeScript Core (TypeScript / JavaScript) and I would choose Angular only over NativeScript Core to enjoy it’s core features

  • More modular code
  • Router / Guards
  • NgRx (Can’t imagine how to maintain app state just by passing context between every page :joy:)
  • Useful Directives / Pipes / Interceptors etc., (for instance ngFor handles updates much better than Repeater in core)
    and much more you might aware of…

#8

Great stuff to hear. Thanks. I’ll take a look at the video too.


#9

Just because this is basically #1 google result:

A framework will obviously always be worse than pure vanilla code.
That is also the case e.g. for a nodejs server. Pure node always significantly outperforms any node framework/abstraction.
But does a few ms and 1-1.5mb justify WAY slower development time, worse structure, worse maintanability?
I would also never go the nativescript suggested route and set up webpack by yourself.
You can simply use the angular cli and pack the app perfectly, including aot, with a single command.

That being said: a real world benchmark comparing nativescript implementations and webapps would probably significantly help finding more developers (or way less :)) as this is the main selling point after all.

I get a start up time with a simple ionic 2 app correctly optimized, 3 years old, of 1-1.3 seconds.
Honestly, nativescript can’t really compete with that.
These days going native does not significantly raise the subjective performance.
It might use 5% less cpu, but that’s about it. After building one app with nativescript I will very likely go back to webapps for most of my projects. The development speed is simply significantly faster. I had never any complain about performance from any of my customers, so don’t blindly buy to the hype just because companies like facebook (with their 4 figure development teams) say otherwise.


#10

Angular v Vanilla:

After my original question, I indeed have been developing using nativescript with Angular, and I am glad I made the choice.

For me, Angular development is faster and more organized. If I were to go Vanilla JS, I would have to put in extra effort to stay organized with the structure of my code–and I would also probably have to spend extra time learning how to do things (mostly UI-related) in pure JS that Angular does automatically. When using Javascript, I tended to use jQuery to handle dynamic events, but I don’t think jQuery would work well with Nativescript.

I have also used webpack–and it seems to work well with just the simple command (for ios):
$ tns run ios --bundle --env.uglify --env.aot

With this command, testing the app on my phone, it became very small and performance was very strong. Hopefully this stays the same for production.

ionic v nativescript:

Regarding ionic v nativescript, from my experience both can work well. Ionic’s community was great and the documentation was easy to follow, so development was smooth. Nativescript’s community is not as extensive as of now and its documentation a little less friendly, but the documentation is improving and I have been helped a ton by people on this forum.

The thing that took me the longest in nativescript was understanding the UI. it turns out to be pretty simple to use, actually, but I struggled to find straightforward example code early on in my development. I feel like I have the hang of it now. You can see some very simple UI code examples in some of my answers, like here (2 level list) and here (list with items above and below) .

For ionic, the biggest concern I had was what would performance actually be like in production. Online, people here and there say it is not as strong, but it was hard to gauge. When I was developing in ionic, however, I continually had issues with how my simple apps would perform when I put them on my device. I would regularly have issues where you would tap a button and nothing would happen, or there would be a noticeable pause before it registered the tap. Same issue with transitions between view screens–the transition would take a noticeable amount of time, and then not be smooth.

Maybe there was a solution to this that I never discovered? If not, this was a big deal for me–a UI experience that the average user would clearly notice as being inferior.

For nativescript, in testing on my phone, I have not had any of these issues. Button tapping works great, and screen transition is perfectly smooth. (Hopefully it stays that way.)

There is a lot of talk about startup time–and this is important. But most important for me is the experience while using the app itself. I have on my phone one the top apps in the Apple app store (not ionic or nativescript I believe), and it takes five seconds to start up, but performance is good once it is opened.

So I want the startup time to be fast, but I most of all want the performance of the app to be smooth when interacting with the user. I was not able to get ionic to be sufficient on that. Maybe there is a way, but at the time the only guidance I found on improving things like button responsiveness and screen transition was fairly complex, and the results after going through the complexity seemed unclear.

My current bottom line:

So I have started recommending nativescript to people. One benefit of ionic I noticed was that it seems to offer “hot” updates, where you can push through code changes to a live app onto people’s phones without going through full app store process. As far as I know, nativescript does not offer this. Hopefully it could at some point.

But even with that, I have enjoyed nativescript and plan to keep using it.