Awesome NativeScript

Sometimes I REALLY love NativeScript.

So I have a really hard time tracking my time. Tested multiple time tracking apps over the years and still have many issues with all of them. Always been a real pita for me. So about a year ago I wrote a very simple NS time tracking app which works pretty well for me when I remembered to use it. Meh, problem is I really hate time tracking…

My son, being the smart one and not as picky, found a fairly nifty time tracking app on Android that he liked and he showed me that when you unlocked the phone it would popup immediately. I'm like that is a awesome feature, makes it easy to make sure you don't forget to switch tasks; unlock and click on the new task.

So a couple searches later I added the ability to my own NS timer app. So now, unlocking my phone, the app immediately goes into the foreground and lets me switch the timer task if need be…

Of course I could stop their, but NOOOOO, not me…. I'm out to make this be very functional, so I will actually use it with much better consistency…

So, another thing I kept thinking about over the last year was the ability to control it with voice commands. However, I have always been very privacy focused and REALLY REALLY hated using remote servers for almost anything. Let alone sending Google (or Apple) any voice recognition data. So it has been a non-starter for a while for me…

A couple searches later this last weekend, and I found a awesome open source offline voice recognition system. Works on both Android & iOS (I only integrated the Android side, as that is all I need for my time tracking).

So now I can unlock my device (which of course immediately triggers my app to the foreground) and SAY: "Timer X". The app then searches all the timers for anything that matches, if it matches; it switches to that timer and then uses (also offline) Text to Speech to say: "Starting timer X", so I have a confirmation without having to look at the screen…

All in a simple NativeScript application… If I had to do this all in many other frameworks, this would have been a many day project -- NativeScript was only a couple hours to get it all working...

NativeScript, Master Technology, ProPlugins, and nStudio.

So since this question has come up multiple times; I decided to write a brief history of my involvement with NativeScript, Master Technology, ProPlugins, LLC and nStudio, LLC.

So this story begins a little over 5 years ago; I had been doing some Cordova/Phonegap development on a simple application for my wife; and its performance ended up being sub-par, ran into screen sizing issues, and a whole myriad of the common standard issues you run into with programming for a webview. Most these hybrid issues are much better now. At that point -- frustration was enough to make me decide to see if their was anything better.

I downloaded a huge number of platforms, React Native, Titanium, Fuse, Xamarin, you name it; I found a link to it I downloaded it and tried it out. After spending multiple days installing and testing things, I finally decided to using React Native -- it was the best of the bunch. A few days later I saw a article on a news site; saying checkout something called NativeScript. I figured, might as well -- I wasn't totally sold on React-Native and I hadn't started my project.

So I downloaded NativeScript v0.90 or v0.91, which was the first official "open" release in early March of 2015. I totally fell in love with it. It has a good template syntax, data binding and best of all full easy access to the entire native platform all using JavaScript. It really was the "perfect" mobile development system.


Now as to Master Technology, it was started a long long time ago, in a galaxy far far away... Almost 30 years now... So basically, in a nutshell this was the company I did all of my contracting work under. As such, when I started doing NativeScript work I continued to do all of my work under it. This is why you see a large number of plugins and NativeScript related sites with the Master Technology logo. One of the first, https://plugins.nativescript.rocks, started as a simple MD file on github...

However, that soon became unworkable when the community started adding multiple new plugins a week. So I created the first version of https://plugins.nativescript.rocks... From there images, searchcode, compatibility chart and many other community resources have been added...


After a couple years of working in the NativeScript community, I realized that as a sole contractor it was very hard to handle larger jobs by myself. In early 2017, I had the brilliant idea to start a company that would be more like a law firm, with senior and junior partners but geared for developers. I enlisted my co-owners Brad Martin, and Nathan Walker and we created a brand new company called nStudio in early 2017. From there we grew a bit, to the point we even added a new co-owner in 2019, Dave Coffin. We continued to grow adding several partners known highly in the community to our team like: Igor Randjelovic (NativeScript-Vue), Osei Fortune (author of many awesome plugins), Alex Ziskind (the tutorial master of NativeScripting.com). In addition we have developed strong ties with many other companies in the greater developer eco-system.

When any new NativeScript clients would contact me, I move them to nStudio. Any other clients (Servers, PHP, Clarion, Node, etc) stayed on Master Technology as that company is now more oriented to server side stuff, and nStudio was for all the mobile development.

One strange thing about having two companies is dealing with IP, so any IP that I had developed at Master Technology, remained with Master Technology. You will still see Master Technology on a LOT of sites and plugins in the NativeScript eco-system even though Master Technology only does a small amount of work in the NativeScript eco-system now.


In early 2019; as still one of the major open source plugin NativeScript developers; I realized that NativeScript community needed some way to fund plugin maintenance. We were seeing a great number of plugins that were not maintained and no longer working. The maintenance time on my own plugins, that were free to the community, became far too excessive for me to be able to keep them to a standard I'd be happy to have my name on, and still be able to feed my family. I got together with several other large plugin developers and we started ProPlugins, LLC. This has helped at least with a chunk of the plugins under our control; and so ProPlugins, was founded and is owned by Master Technology.


Now comes the most interesting turn of events in this entire story, one that I would NEVER have expected in a million years.

Because of NativeScript, I helped found two additional successful companies. Which just by itself is totally awesome! However, now nStudio, LLC has been able to purchase NativeScript and its assets. We now have control over not only our companies future, but the framework that was directly responsible for spawning nStudio, LLC.

As such, you should now see my name (and the other partners from nStudio, LLC) on the all the new pull request approvals and reviews for NativeScript. I do want to sincerely thank all the developers over the last 5 years who actually built NativeScript, and if any of you want to continue to work on the framework, please feel free to drop us a line at team (@) nativescript org.

(c) Adam Carter, https://www.flickr.com/photos/44811338@N05/7505286308

Optimization Gotcha's for for/i and forEach

So I mentioned something on my interview with Alex of NativeScripting.com that he did with me. And someone asked about this in the comments, so I decided to create a blog article on this specific optimization tip.

I am going to code this to a browser rather than in NativeScript because well JS in a browser is just plain easier to show the memory issues because you can plop the code in to a new browser tab and step through the code instantly. 🙂

<html>
<body><div id="stacklayout"></div></body>
<script type="application/javascript">

// Pretend Color class to be similar to NativeScript
class Color {
    constructor(val) { this._color = val; }
    toString() { return this._color; }
}

const <strong><em>colors </em></strong>= ["#ff0000", "#00ff00", "#0000ff"];
for (let i=0;i&lt;<strong><em>colors</em></strong>.length;i++) {
    const labels=["Wow","Awesome","Interview", "Alex", "Created!"];
    for (let j=0;j&lt;labels.length;j++) {
        const clr = new Color(<strong><em>colors</em></strong>[i]);
        const txt = <strong><em>document</em></strong>.createElement("div");
        txt.innerText = labels[j];
        txt.style.backgroundColor = clr.toString();
        const parent = <strong><em>document</em></strong>.getElementById("stacklayout");
        parent.appendChild(txt);
    }
}
&lt;/script>
&lt;/html>

And you should see something like this:

We are repeating the labels for each of the primary colors...

Or you might be used to doing something like this instead:

&lt;html>
&lt;body>&lt;div id="stacklayout">&lt;/div>&lt;/body>
&lt;script type="application/javascript">

class Color {
  constructor(val) { this._color = val; }
  toString() { return this._color; }
}

["#ff0000", "#00ff00", "#0000ff"].forEach((clr) => {
  ["Wow","Awesome","Interview", "Alex", "Created!"].forEach((word) => {
     const txtColor = new Color(clr);
     const txt = <strong><em>document</em></strong>.createElement("div");
     txt.innerText = word;
     txt.style.backgroundColor = txtColor.toString();
     const parent = <strong><em>document</em></strong>.getElementById("stacklayout");
     parent.appendChild(txt);
  });
});

&lt;/script>
&lt;/html>

Both have several issues, however the second one can be vastly worse than the first one depending on how many iterations. So lets walk through the issues.

So the Color class is fine, we are using it to show creating objects... So just ignore it for now.

const <strong><em>colors </em></strong>= ["#ff0000", "#00ff00", "#0000ff"];
for (let i=0;i&lt;<strong><em>colors</em></strong>.length;i++) {

These lines are fine, we allocated colors, then looped through them. So far so good. Lets proceed, what about:

const labels=["Wow","Awesome","Interview", "Alex", "Created!"];

Well here is the first issue; Fortunately for us, the v8 JS engine actually pre-allocates the 5 different string "Wow" through "Created!" when it parses the JavaScript however, each loop through it does create a brand new Labels array and then links those strings into it. So in this case it is small overhead; however in the 3 loops that still is 2 more sets of allocations and all new GC enties that have to be cleaned up after the loop is completed. If you were to put this single line of code outside the loop; your code runs the same, but no less memory usage and less processing.

 const clr = new Color(<strong><em>colors</em></strong>[i]);

What about this line, well in this case all 15 times it creates a brand new Color object. You can easily make this only be ran 3 times just by moving it outside the inner for (j) loop into the for (i) loop. In this example the Color class is very light weight. But many classes you create inside loops will be very heavy with lots of allocations going on when you allocate the class. So pay attention, 3 allocations vs 15 allocations, all by putting the line in the wrong spot...

Continuing on, most the rest of the lines has to be inside the loop; but I tossed another item into the loop, that wasn't needed... This line is very easy to accidentally end up in the loop because you needed it at that point.

     const parent = <strong><em>document</em></strong>.getElementById("stacklayout");

Yep, this has to do an expensive lookup in the dom to find this element, it never changes. It also has to allocate it to that "parent" variable 15 times. If you dropped it before/outside of both loops, you would have a single lookup and allocation...

---

Finally lets look at the last example; it suffers from the same issues. However, this one I used a Array.forEach rather than the simple for (i) loop. Why do I say it can be worse then? Well in small numbers, the difference is actually pretty tiny. The extra amount of memory it uses over a for (i) loop is also reasonable. But in larger loops (especially loops inside of loops inside of loops); the difference can end up being exponentially larger.

Your creating and calling functions, and all those functions now has added scopes and the engine has to setup all the callstacks for each and every iteration, additional error checking and just plain running a lot more code behind the scenes. So what is a simple for (i) loop in the first example, now became 15 EXTRA functions calls with all the extra overhead of cpu and memory that entails. Again in small chunks they are perfectly fine, but if you are wanting performance, every ms and gc adds up and sometimes they can add up very quickly when dealing with the Array helper functions that use callbacks...

As a better way to phrase this; imagine you have a for (i) loop that takes 5ms and a forEach loop takes 25ms to finish. Both are still dang fast, hard to even benchmark. But now you embed it in another forEach that also by itself takes 25ms. 25ms * 25ms = 625ms. More than half of a second. But, if you were to switch this to a for (i) loop each of them is 5ms. So, 5ms * 5ms = 25ms. Both are exponentially larger, but 25ms vs 625ms and the difference starts becoming much clearer. Now add a third loop; 5ms*5ms*5ms = 125ms. 25ms*25ms*25ms=15,625ms (or > 15 seconds!) In small chunks the time and memory used from a forEach is minuscule. But depending on how many times it is called; it can add up very quickly to be a major difference.

Please note this goes for all the nice Array helper functions, .map, .reduce, .filter, etc. Everyone of them that uses a callback, has somewhere between 2 times and 50 times as much overhead as a simple for (i) loop. Remember, despite this overhead; these functions are extremely fast. So don't be afraid to use them, but be more wary of using them in deeply nested code that can easily be called in loops when the datasets they are working against are also large.

As many items that you can actually move outside of your loop, the better off you are. This Includes any expensive calculations! You might be able to do 99% of the expensive calculation outside of the loop; and then finish off the last part of the calculation inside the loop...

I hope this answers the question about loops and performance. Every loop is a golden opportunity to greatly enhance your app,

Oculus and their horrible support policy, a tale of woe!

I've had a lot of bad experiences with companies over the years; but this one takes the cake (The cake is a lie!) for me, in how not to treat a customer (let alone a developer in your ecosystem).

For those who don't know who I am, I have written somewhere around a 100 plugins both open source and many for different clients. Primarily for the cross platform framework NativeScript. So I have plugins from making Unity run and communicate with NativeScript to even making ColdFusion be able to drive an NativeScript app. On the Hardware side, everything from mobile printers, credit card readers and just a week or so ago the cool SocketMobile barcode scanner. All of them work great with NativeScript. So in a nutshell, I play with lots of hardware and software and write a lot of code in a lot of industries, including optimizing business practices...

As such I have a number of phones, one of them is the Samsung Galaxy, which supports the GearVR, so as such I have been a Oculus developer for multiple years. I've been working on a couple ideas; and even created a couple concept Unreal apps on my GearVR devices.

So as many of you might not be aware of getting a Oculus Quest is a an experience in frustration, they are sold out everywhere (unless you want to be scalped and pay twice as much).

So, I thought I scored last week. I read an article that Oculus finally had some stock again. Connected to their site; found that they were already out of stock on the 64 gig version, so decided because I have no idea when they will be in stock again, I'd spring for the larger more expensive version... So placed my order, had an order number, everything seemed to be great...

Then the pain begins....

Two days later around midnight, I get this message:

I'm like what the HELL, I've been waiting forever and they just CANCELLED my order, no contact, no nothing; just lets cancel it... (Serious question, Oculus, why don't you put in this message why it was cancelled, since the person cancelling it knows.)

Make it stop...

Ugh, of course, I went immediate to their site and guess what:

Yep, all sold out again.. Shoot, well maybe they can undo the cancellation; and we can figure out why they would cancel a order and fix whatever mistake was made. Clicked the support link and of course it brings you to the generic support site (Serious question, Why doesn't the email link put you on the proper url?). Spend a few minutes finding the right form to fill out and send them a question asking the simple easy question of "Can you tell me why my order XXX was cancelled?"

Lets apply the thumb screws...

The automated system sent and email response and stated, it could be up to two business days; but they did respond in one! Very late the next day I get a message from CS saying thanks for contacting us... But man my heart dropped.

  1. do not create any new orders (Not than I can, its out of stock already!)
  2. WE ARE UNABLE TO RE-INSTATE IT.

At this point, I realize, I am screwed, I can't reorder even if I wanted to; and that they won't re-instate the order. They officially jumped from well this experience so far just sucks, wasting my time... to Oculus customer service/order system really sucks. WHY THE HELL DO YOU CANCEL A ORDER, IF YOU CAN'T RE-INSTATE IT? Seriously bad customer interaction at this point... If their is a order issue, and you can't re-instate it, then suspend/pause the order and deal with the issue, don't just CANCEL the order leaving the customer with NO recourse...

Electric shock therapy is best...

And to top it off; lets see why the cancelled it (this message came the next day)

So basically:

- If I'm in the military and serving anywhere outside of the United States and decide to buy a US model, I can't...
- If I'm a expat living anywhere else in the world; apparently we can't either.
- If I'm uncertain where I'm going to be in the near future (like was in college, now at home), and decide that I want to make sure all my mail is handled and sent to where I am currently, no matter when this ships and arrives... I can't...
- Worried about spouse abuse and sending all mail through a third party to eliminate the ability for them to track me via my mail. I can't....

Really, Oculus! You f**kin cancelled my order because I ordered a SINGLE device, am a known developer in your developer program for several years and wanted to ship it to a place that can re-ship it to where I'm actually located right now. Your going to cancel the order, leaving me no recourse...

Maybe Bleach will work...

Then state I can order it this way from any of your support partners, seriously? You say we can't do this; but you can get around us, this way. Here's a link to make it much simpler!

Honestly, management needs to make some heads roll, that has to be the stupidest policy I've ever heard of...

But for those who typically use a Reshipper/concierge for your mail; you need to use a friend (which I would have done had I known that up front, now it is too late!)...

GitLab Verified Email account issue

I use a privately hosting Gitlab's instance for a bazillion projects; and have a lot of users from around the world. Unfortunately, I have ran into a long standing bug that has never been fixed in many years. It only crops up occasionally now, but it is still a major pain for everyone involved. Many, many reports and many issues in the gitlabs issue database on this issue.

Basically, the end user never sees a "verify this email" email. And without that email; they can not login. Catch-22. In addition the "Confirm" button in the administrator account also fails to work in this situation, so neither the user nor the admin can do anything to fix it. Which then basically means I have a dead account that no one can do anything with. Until today.

These notes are so that I can easily fix it in the future.

First thing you do is go to the https://yourinstance/users/confirmation/new and create a new verification email. This way the token you will get later is now valid (as tokens expire after a number of hours).

Next thing is login to the Docker instance; if you aren't running docker; then don't worry about this step:

docker exec -it gitlab bash

Then once inside the docker bash shell; you launch the gitlab's interactive shell -- technically you can just the gitlab-rails runner "command; command; command" but the docker instance I run doesn't seem to have it present -- so we will launch the full gitlab rails console.

bundle exec rails console -e production

Once in this the rails console; we search for the user:

u = User.find_by_username('USERNAME')
(or u = User.find_by_any_email("emailaddress"))

Once we have the u variable; we can do a huge number of items on it; but what we really need to do is output the current confirmation token.

u.confirmation_token

And it will print a token that looks like this: "s2vzxVeWYhkzzDsBN8fC"

Type, exit, to exit the gitlab console. Then exit again to exit the docker instance. Go to your browser; and then use a modified version of this url:

https://yourinstance/users/confirmation?confirmation_token=<strong>s2vzxVeWYhkzzDsBN8fC</strong>

And let your browser go to it; and if you did everything correctly; you should see gitlab say it verified your email address and that you can now login.

Please note their are a lot of features/functions/data off the user "u" variable (over 3000); however, after spending over an hour trying confirmation, verification and other related features -- everything "looked" correct on the user record; but in the web admin page still showed the account was unverified. I just realized their might be some sort of user save record which then would have persisted my changes; but I didn't think about it until I was writing this blog.

However, since I could not get any of the other u.* functions to fix the record, I finally figured that the simplest way to fix this was just to have gitlab run its OWN verification code and so all I need to do is provide the token it generated myself to its verification page to make gitlab believe the end user got the email and now verified it.

VMWare - Shrinking disk size Macintosh/Linux

If you have a Macintosh or Linux based image; the tooling to shrink the hard drives is basically broken in the Gui (and/or, don't work). So to shrink these types of containers; the easiest method is to force the entire empty area to be Zero's, then defragment, and finally shrink all ..

First thing we need to do is Zero all blocks that are no longer used. Please note this will make your container grow to the maximum size your container is allowed to grow; so you might need a lot of disk space!

cat /dev/zero > zerofile; rm zerofile

Next you need to shutdown the client, so on linux it might be shutdown now -h or clicking a couple buttons to shutdown cleanly. After the VM has been shutdown you need to run the following commands from the command line.

vmware-vdiskmanager -d <diskimage.vmdk>

This command will defragment the image; moving all the data to the front of the image and all the empty blocks to the end. You obviously need to point the &lt;diskimage.vmdk> at wherever the vmdk you are working with is located, and if the vmware-vdiskmanager is not on your path; you will have to manually call it from wherever it resides. Finally you need to call

vmware-vdiskmanager -k <diskimage.vmdk>

As this will shrink the image; and if you are lucky, your 280 gig image will shrink to 80 gigs.

NativeScript Fonter revisited again (using DuoTone FontAwesome)

In a prior post I discussed using fonts in NativeScript. This morning I saw an issue in the NativeScript github repo about how to use the Font Awesome Duotone fonts.

Since I love puzzles, and I know the NativeScript font system fairly well, and I also own a subscription to the commercial Font Awesome -- I figured I could easily see if I can make it work. Immediately, I had a idea on how to solve the issue.

So I downloaded both the WebFonts and the Desktop fonts. Interestingly, enough the Desktop fonts actually have a warning that links to a post about Duotone fonts and the issues with the desktop... So after I read that post; it basically confirmed my understanding on how this font works and exactly how to make this work inside NativeScript.

So first things first, you need to update your app.css file; you want to add something like this to it:

.fad {
   font-family: fa-duotone-900, Font Awesome 5 Duotone;
   font-weight: 900;
}

.fad-op {
   opacity: .4;
}

Why TWO names for font-family?

If you recall from my prior fonter post; you want to create the rule that has the name of the actual font file without the .TTF or .OTF extension. So since the font folder looks like this:

The last file in the example fonts folder, is fa-duotone-900.ttf; straight from the web download zip file that I downloaded this morning.

So you see the rule is:

   font-family: fa-duotone-900, Font Awesome 5 Duotone;

This allows NativeScript to find the actual file name, in a lot of cases it can use just the filename to work its magic. However on iOS specifically, we want to include the actual internal font name. So double clicking on the font gives us this image under linux.

Under macintosh the title bar also shows the exact same information. So that is why I then typed "Font Awesome 5 Duotone" as the second part of the rule -- this must EXACTLY match. The two names covers all the cases we need, font file name to load it and actual internal font name to reference it later.

The second css rule we just added was fad-op, it is so that we can have some opacity for which ever section of the font we want or need opacity on.

We can do no opacity, solid/solid, and it would look like this:
Notice both parts are solid.

Now if we add opacity to section two; you can see the beak, legs on the bird are slightly transparent; and the acorn body is partially transparent.

Finally if we reverse the opacity to make section one have the opacity it looks like this:

You can also apply any opacity you want like 0.10 looks like this

And you can apply opacity to both sections and it looks like this:

All of them are using the EXACT same colors; just a difference in opacity. The sky is the limit; you are free to color and apply opacity on whatever amounts to each of the two sections.

So how do we do this magic?

Well technically the hard part is already done, that awesome css rule and dropping the font file into the app/fonts folder has 99% of the work done for us. The rest is simple stuff.

So the next thing you need to know is; which duotone icons do you want to use?

So first we need to know what is available for duotone; so we go to the font awesome icon page; and select the duotone filter. Once we have that; we can choose something; so lets look at the crow.

The crow at the top of the page lists this information:

Now at this point we can't really use "fa-crow" just because NativeScript doesn't know what that is; but the two pieces of information we do need to know to make it work is the f520 and the 10f520 these are the unicode values for the two sections of the icon we want.

So our xml needs to look like this:

 
  

This gives us the two characters in the same location on the screen. The first character is using the "fad" css rule; along with the text color blue. The second character is also using the "fad" css rule, and it adds the red text color and the "fad-op" rule for opacity.

Which gives us the duotone bird:

The key item is that you want the characters to print over each other; Gridlayout by default allows you to put multiple items in the same row and column. Since the characters are the same size; they by default will automatically line up and work.

Angular Flavor Issue

Angular's HTML parser has an issue which characters in the upper unicode -- it is great with any unicode value 65535 and below. Which of course if you have seen the first character of each of these duotone values is < 0xffff (65535). However the second character starts in the 0x100000 (1048576) range which is a lot larger than 0xffff. Unfortunately this means that in Angular even though you pass in 0x10f520 you actually get 0xf520 assigned. If you are paying really close attention, this is the same value as the very first code. So in angular you get two labels with the exact same unicode value. So how do we fix this?

Well ultimately; the underlying Angular parser should be fixed -- so if one of you wants to tackle this, track down where in the parser it breaks and push a PR; that would make a lot of people in the Angular community happy! However, since this is not something I am going to tackle and I still want you to be able to use Duotone fonts, I will present an alternate method to how to fix this on Angular.

In Angular; we can do it one of two ways; automagically; or direct assign. I prefer the automagically; so this is the HTML that we have:

<Label col="1" text="&#xf6ae;" class="larger fad "></Label>
<Label col="1" text="&#x10f6ae;" class="larger fad blue fad-op" (loaded)="fixAngularParsingIssue($event)"></Label>

As you can see it is identical to the above NS-Core XML, except I added the (loaded) event. This event fires once in the lifecycle of the Label. And runs my handy dandy "fixAngularParsingIssue" function.

fixAngularParsingIssue(args: any): void {
  let field = args.object;
  let val = field.text.codePointAt(0);

  // Check to see if this is already a valid unicode string above 0xffff.
  if (val > 65535) { return; }

  // We found a character we need to change...
  val = val | 0x100000;
  field.text = String.fromCodePoint(val);
}

The function is straight forward; we grab the current text value; verify it is actually still less than the unicode value we want as the parser could get fixed in a future version. Then we take that value and add our missing 0x100000; and then re-assign the text. Now this function could instead be written to take the actual value you want to assign rather than computing it, but I prefer simplicity as then I can just add this function to all labels that need it and just not think about it.

Angular Directive

I suggested in the issue that someone create a directive; and Pandishpan spent the time and converted my simple code into a directive for Angular making it even easier to use in angular! Thank you for your awesome work! So now, all you have to do is apply the "labelDuoTone" directive to the html, and it handles the rest of the work for you.

You can grab the code for the angular directive in the github issue here.

NativeScript Core demo application

You can download the NativeScript-Core fonter application from the github repo, https://github.com/NathanaelA/fonter

Please note the fa-duotone-900.ttf font is NOT shipped with the demo; you must download it yourself and copy it into the app/fonts folder.

Android (on left) and iOS (on right) looks like this:

Android
iOS


NativeScript 6.4 released

NativeScript 6.40 has a couple cool new things; but better yet it fixes several issues that can will affect your users if you are using 6.3.x lets look at them...

Some of the fixes include instability during android's fragment handling occurred in 6.32, which is worth while. A couple really awesome community PR's, and of course one of my favorite items is the new CSS parser by default and the v8 upgrades...

[UPDATE] The new 6.4.1 Android engine that was just released a day or so after 6.4.0 adds v8 version 8! Which add a lot of cool features (see v8 section)

Core Modules

  • NativeScript is got a new much faster CSS parser in v6.3 -- it is now default in 6.4!
  • The community (Ryan & Hamdi) and the NativeScript team worked on 3d rotation for a while now; this has now shipped! .rotate-x, .rotate-y, and .rotate-z
  • .Fixed background color reset on Tabs

We had even more awesome community PR's this month, a big thank you to the community!

CLI

The CLI team has fixed several outstanding bugs; including several webpack hmr issues. This also includes Node 13 and Android API 29 compatibility.

  • CLI now cleans up after itself in a corner case where CTRL-C'ing when first starting the build.
  • Doctor now will throw error if using Java 13 (NativeScript doesn't support it yet)
  • CLI Will now detect and let you know about the breaking issue of including multiple versions of the same plugins or multiple NativeScript core versions.
  • Native Metadata filtering, allow Application/Plugins to declare what Metadata they need; to allow smaller metadata and faster startup.

Webpack Changes

  • Snapshot bug fixes
  • Ability to set a Webpack config location so you can add custom application rules
  • Ability to allow custom platforms building (--env.platform <platform>)

V8

If you didn't read my notice on the last update; I'm creating this new v8 Section, because Android and soon iOS will both be using the same v8 engine. v8 was upgraded to v7.9 (in 6.4.0) and then the awesome v8.0 was slipped into (6.4.1) which adds:

  • IC Handlers are now cached properly; giving a ~12% for all IC calls into the C++ runtime.
  • OSR Replacement - 5% - 18% speed up.
  • Pointer Compression (Saves up to 40% of heap memory) which increased speed on large JS by a few percentage points!
  • Optional Chaining
  • Null coalescing

Android

  • Async WebAssembly issue resolved
  • Memory freed on some objects that were being retained
  • Upgraded to V8 8.0 (See v8 section)
  • Fix for Elevation usage on some API versions
  • "FlipRight/flipLeft" transition fixed

IOS

  • The CLI will warn you if you forget a module.modulemap file in your included .M files
  • Project Template is FastLane compatible
  • Fixed discarded exceptions
  • Safari Inspector now shows startup errors
  • A lot more changes to the new v8 version of the iOS runtime that is now in BETA testing to eventually replace the JSCore version... Overall now is the time to test it!

Updating NativeScript

To get updated; you first need to do:
npm i -g nativescript@latest

To update a project; you need to do the following:

Latest Runtimes:
tns platform remove android && tns platform add android@latest
tns platform remove ios && tns platform add ios@latest

Latest Core modules:
npm r tns-core-modules --save
npm i tns-core-modules@latest --save

To install Webpack support:
npm i nativescript-dev-webpack@latest --save-dev

To install latest NativeScript Angular plugin
npm i nativescript-angular@latest --save
You will then need to install the actual angular bits; which as of this post v6 is currently supported.

The addition of t additional analytics/tracking to the CLI reminded me; you can disable it permanently; if you value your privacy by doing:
tns usage-reporting disable && tns error-reporting disable

NativeScript 6.3.0 Released

NativeScript 6.30 has a couple cool new things; but better yet it fixes several issues that can will affect your users if you are using 6.2.x lets look at them...

Some of the fixes include instability during android's switching of applications and resuming it. An issue with unloading views on Android. Out of memory situation on Android, and dialog fixes for iOS. In addition to several important build fixes that appear to solve a lot of build HMR related issues. Overall this release is worth upgrading to for just the bug fixes alone.

Core Modules

NativeScript is getting a new CSS parser; unfortunately it is not enabled by default in 6.3; but based on a PR should be enabled by default in 6.4. If you would like to enable this in your app to see how much faster it can parse your css; you do so by editing the packages.json file that ships with the application and adding a new key called "cssParser" and set it to "css-tree". The valid options are "rework" (current parser) and also "nativescript" which was the original css parser.

We had a couple awesome community PR's this month the first by Eduardo Speroni adds requestAnimationFrame as a supported function. And the second by Shailesh Lolam  add dialog sizing (width & height properties) to the modal dialogs on iOS.

And finally to round up our new core module features; Modal dialogs now have all the same CSS properties applied to them to allow better styling. In addition to the normal properties, a new .ns-modal class is applied.

CLI

The CLI team has fixed several outstanding bugs; including several webpack hmr issues. This also includes Node 13 and Android API 29 compatibility.

V8

I'm going to create this new v8 Section, because Android and soon iOS will both be using the same v8 engine. v8 was upgraded to v7.8 which adds:

  • Faster object destructuringconst {x, y} = object; This is now as fast as the normal ES5 const x = object.x, y = object.y;
  • Lazy source positioning; which can save 1 - 2.5% of memory; basically instead of storing all source code lines for when errors occur; it recalculates it when it needs it.
  • Faster RegEx
  • Several Wasm improvements

Android

The Android team kept busy this month;

  • Fixed some Kotlin issues
  • Android Signal 1 & 11 are now captured
  • Fixed a worker issue
  • Upgraded to V8 7.8 (See v8 section)

IOS

  • Upgraded to WebKit 13.2
  • Several metadata fixes
  • Fixed a worker issue
  • Fixed debugger not working issue
  • Fixed discardUncaughtJsExceptions issue

    A lot of changes to the new v8 version of the iOS runtime that is still in alpha testing to eventually replace the JSCore version... It appears the iOS v8 version is shaping up to be an awesome release.

Updating NativeScript

To get updated; you first need to do:
npm i -g nativescript@latest

To update a project; you need to do the following:

Latest Runtimes:
tns platform remove android && tns platform add android@latest
tns platform remove ios && tns platform add ios@latest

Latest Core modules:
npm r tns-core-modules --save
npm i tns-core-modules@latest --save

To install Webpack support:
npm i nativescript-dev-webpack@latest --save-dev

To install latest NativeScript Angular plugin
npm i nativescript-angular@latest --save
You will then need to install the actual angular bits; which as of this post v6 is currently supported.

The addition of t additional analytics/tracking to the CLI reminded me; you can disable it permanently; if you value your privacy by doing:
tns usage-reporting disable && tns error-reporting disable

ProPlugins - end of year update

We started the ProPlugins project pretty close to the launch of NS (NativeScript) 6.0. So it has only been active for about five months now. So how is it doing???

Well, first let cover the reason why we created it. This plays in strongly into how well ProPlugins is doing.

Why ProPlugins?

For most of us plugin developers who have worked in the NativeScript eco-system for a while. We all knew that NS 6.0 had a range of breaking changes; which meant it was the fifth set of breaking changes in less than 4 years for plugins. Each one of the NS major releases, had a range of breaking changes that required certain types of plugins to make fixes. Sometimes the changes were minor, other times the changes actually requires some major rewrites and/or major time debugging why something was no longer working properly. Of course the vast majority of this work was done by the original author; with very little or no help from the rest of the community. I recommend you read all three of my prior blog posts on the plugin costs and the plugin problem. And then why we believe ProPlugins is the solution. With those posts you will have a pretty good idea that the actual costs to an author, the community involvement, and how the open source seems pretty much unsustainable.

In addition to our experience, their are lots of blog posts by many other authors, on how for the most part, the majority of projects that are open source by independent developers has a serious funding and/or burnout issues. We have seen the exact same thing in the NativeScript plugin community way too many times. in fact, the other day I responded to a issue saying that I believe a specific plugin was still maintained as this author has been around for a while -- and then several people pointed me to the issue where the author has mentioned it is no longer maintained. Sadly another excellent plugin author appears to have left the community.

Community Involvement

When we FORKED all these plugins into ProPlugins, the original version was left to see how much the community would be actually willing to maintain them. My stance has been that I didn't believe the community would change any; but I have been 100% committed to allowing the community to prove me wrong and send in any PR's and I would publish the new version fairly quickly.

Sadly, my prior blogs posts on the problem, which tells the sad tale of how many PR's per plugin is received from the community before ProPlugins was created. The communities involvement still has not changed, and as such we have still only seen less than a handful of PR's for all 40 of the plugins we forked into ProPlugins. Meaning the vast majority of all these plugins probably don't work with NativeScript 6.x. This doesn't surprise me, since I had seen this lack of involvement for the last 4 years of plugin development...

The most interesting thing, is that this experiment really could have gone a couple ways. I could have been proven wrong and the community would have finally stepped up and worked on fixing all the plugins for NS 6 support. Or even the worst possible outcome, nobody could have joined, and also nobody did anything to fix any plugins. However, it seems the community has decided that joining ProPlugins as the best option to move forward. It eliminates them from having any additional time commitments, and helps us create sustainable source code.

So how has has ProPlugins done?

We grew to have 40 fully maintained plugins, which have had around 30 PR's for issues introduced in the NS 6.0 upgrade. We have done several PR's for issues people found in the last couple months to several of the plugins. We have also added several new features to multiple plugins. Finally, recently about 10 PR's for different plugins to fix the breaking change that was accidentally introduced in NS 6.2. So adding and maintenance of existing plugins seems to be off to a very successful start.

In addition, this new year we have several new plugins that we have plans to add. Even better, we have more authors lined up for joining the ProPlugins program. So by the end on 2020; we hope we will have around a hundred fully maintained top quality plugins in the program.

Despite the lack of any recent advertising and really my total lack of my focus on it for the last couple months; ProPlugins has each month done considerably better than the prior month. So our subscription revenue has been increasing faster than I had planned.

Since 80% of all revenue goes to the authors, the remainder goes to the actual expenses like paypal fees, advertising, servers, etc. We believe, the ProPlugins experiment has successfully started the process to having sustainable source code in our community, completely from the community. So a big congrats to the community for helping fund this!

We hope you all have a merry Christmas, and a happy New Year. We look forward to even more of you becoming part of the ProPlugins project and helping us fund sustainable open source for the NativeScript community.