Starting up with NativeScript - newbi questions


#1

Hi All,
I’m new to NativeScript and this community. I’ve gone though the Hello World and Groceries tutorials and I have a number of questions regarding NativeScript development before I start my new app with it. I originally develop apps in Titanium, and I find that while the concept is somehow similar, NativeScript is very very different.

So I guess I’ll start…

  1. My most important question: Angular vs. Non-Angular - So I’ve noticed that I can develop an app using Angular with TypeScript, app without angular and TypeScript or app without angular and without TypeScript (plain javascript).
    My question is about performance. When loading the app it probably needs to load the Angular framework, which probably takes time. And angular framework itself (with all it’s advantages) probably has some hit on performance.
    So what is the best approach here? How bad (if at all) is using Angular affects the performance of the app?

  2. Another performance question: In Titanium there was a “classic” project and a (newer) Alloy project where the UI can be defined in XML. But on compile, the XML is translated to JS code - to the “classic” version of it.
    On NativeScript (and especially with Angular) my understanding is that XML is parsed on run-time and then evaluated in JS? doesn’t it make it slower?

  3. In Titanium, upon compilation, all JS files are minified - is the process the same in NativeScript?

  4. In the tutorial it’s teaching about the naming conventions “To give a specific example, the CLI moves platform.ios.css into platforms/ios and renames it to platform.css; similarly, the CLI moves platform.android.css into platforms/android, and again renames it to platform.css”.
    What if there’s also a platform.css file with shared design for iOS and android - will it merge the 2 files?

  5. When I was doing “Exercise: Using the ternary operator in templates” when I test it the text changes with a fadeout/fadein effect - what sets this effect? what if I just want to change text without the effect?

  6. Once I initialized a new NativeScript project and there is a new release, how do I upgrade my project to use new features? In Titanium I just had to change the SDK version in a configuration file.

  7. If I have logic that I need to run specifically for iOS or Angroid, how do I do it in the same codebase, without separating logic files specifically for iOS/Android ?

  8. Imports at the router level actually causes angular to load all the files in advanced - wouldn’t that make the app load slower if there are a lot of pages?

  9. In Titanium I could expand Titanium abilities by writing a native module (either in java or objective-c) and use it in my app (for example I wrote my own notifications handler in Android that has my own logic upon notification) - can I write such modules in NativeScript?

I guess that’s it for starters. Would appreciate the help in understanding the platform better.

Thanks
Ophir


#2

My 2 cents :slight_smile:

  1. Yes angular adds to startup time, but can be eliminated with webpack I believe… but that adds complexity to your build. I would say there’s no noticeable performance hit when running on angular (none I’ve seen anyway)

  2. It’s so fast, like SO fast… but yes this is how it works, xml gets translated through the builder. You could just manually code it all in JS, but the XML is so convenient and way easier to read. With the new 3.1 chrome inspector tools :+1: :+1::+1:

  3. Nope, up to you… but can be done, uglified whatever. There’s no real noticable app size difference for minifying your JS though.

  4. You would do platform.ios.css and inside that you would import the common css @import url(‘common.css’) So they’d all merge together on the proper platform.

    • Not sure, havent done it -
  5. Follow the upgrade instructions http://docs.nativescript.org/releases/upgrade-instructions . There’s a couple things… the RUNTIMES, and the core MODULES. You can run different versions of each, the modules is the cross platform node_module package…

  6. VERY easily :slight_smile: If you have the application module loaded you can just do like

if(app.ios){
  //Run for iOS
}else{
 //Run for Android
}

Or in the XML

<ios>
  <Label text="I love apple" />
</ios>
<android>
  <Label text="pfft apple fanboys" />
</android>
    • No knowledge -
  1. Sure you could, there’s many plugins which you can look at that use native components (most leverage native ones really). But you also have direct platform access to just do in in JS if you want.

Also: https://www.nativescript.org/blog/nativescript-for-the-appcelerator-titanium-developer


#3

Hi,

Thanks for the answer. I know it’s a long one to answer :slight_smile:
In Titanium the if(app.ios) (or android) is removed from the js code on compilation for the non-relevant os - is the same process happening here? if not than the js engine will have more code logic to parse at runtime (which is a light performance hit).

Thanks


#4

Hey @developer82,
Happy to hear that you are considering developing with NativeScript.

In regards to the if (app.ios) note you made - AST parsing or evaluating the scripts pre-run to just remove code blocks would be inefficient. If the size of the file, or the time it would take the JS virtual machine (V8 / JavaScript Core for android and ios respectively) to evaluate a conditional is a concern for you (though that probably takes no more than a dozen nanoseconds) - you could always split your code into two separate files.

  1. As @sitefinitysteve mentioned - you have complete access to the underlying platform API through JS, so most of the time, unless it’s something very custom, you won’t have to leave JavaScript to write a plugin. Here’s an article that can get you started - https://docs.nativescript.org/plugins/building-plugins#step-1-start-your-plugin

#5

@Pete.K
Thanks for the answer and the welcoming.
I’ve been doing some reading and further testing to evaluate NativeScript. As I mentioned, I’ve been developing Titanium for a long time - so this is my comparison base - I’ve been working with Titanium since it’s performance were very bad, and saw how they improve little by little (partly thanks to tweaks such as the one I mentioned I think).

So I’ve been reading about NativeScript and saw people are having some issues with boot time, navigation speed and app size. And mainly apps built with Angular - so this kinda worries me, since one of the things I liked most about NS is Angular - but not at the price of performance.
Also, I noticed that the apps executable, once compiled takes is a pretty big file size. For a HelloWorld vanilla app android is about 13mb while iOS is 63mb. If you add 30mb Angular to the mix it gets a lot bigger - and that’s just Hello World.

One last current worry is the evaluation of XML on runtime - as mentioned above, in Titanium all XML and CSS are converted to javascript that the runtime just executes the command to generate the native control. In NS I understand that the XML is parsed on runtime and the CSS that needs to be applied to it and then the runtime generates the command in js to create the native control - this seems to me like something that the compiler should take care of and a potential performance hit.
BTW - there is another young platform called Fuse that took this a step further - the Fuse compiler compiles the XML UI elements to c++ code for the performance gain. So that’s why I think this is a big issue.

Would love to understand the architecture better, and if there are benchmarks for those things would love to see them as well :slight_smile:


#6

hi, just to chime in on boot time. Keep an eye out for an article upcoming on our blog by Panayot Cankov, who just fixed up my PracticeBuddy app for iOS and Android. With his changes, while it formerly booted in 9 secs, it’s now down to under 1 sec. Huge improvements, as long as you follow best practices. This article will come next week, but you can observe his PRs on my repo: github.com/jlooper/practicebuddy


#7

Hi Jen, Thanks. Just watched your NativeScript 3 introduction a couple of days ago :slight_smile:

What about other Angular issues like slow navigation? Was there ever a benchmark made comparing vanilla apps with Angular apps?


#8

I’m going to cc @pana for help here :slight_smile: I think there are benchmarks but not quite sure how public.


#9

Webpack runs the Angular AoT and uglify minimises the code. You will probably see gradual improvements with {N} the same way you did with Titanium. CSS and XML compilation is something we have considered internally but the gains are not as big as one would expect, Angular AoT already compiles HTML to JavaScript anyway, we have tested scenarios with vanilla {N} and TSX (This is somewhat React-ish but is not React, JSX is like the XML in JS to be primitive type such as JSON, TSX is is like JSX in TypeScript, compiled to pure JS by TypeScript) https://github.com/PanayotCankov/nativescript-tsx/blob/master/app-tsx-example/app/main-page.tsx#L21 but performance is complex matter and there are a lot of factors involved. I would excel rather than compete, {N} + Angular is now our focus and we are working to bring the best out of it. We are about to publish this: https://panayotcankov.github.io/nativescript-3.1.0-timeline/ in https://www.nativescript.org/blog the MarkReachableObjects (GC) mentioned triggered in the SDK during navigation. Sometimes clicking a button takes like 800ms to navigate from these 200ms is actually making the new page UI and the rest is our code that is triggered on GC.

One thing is for sure - use webpack, webpack integrates the Angular compile time tooling in {N} and without it the results are mediocre.