Category Archives: Uncategorized

NativeScript: Android & Crashing issues

This is more of an informational post; there are a couple issues that I am aware of that will kill your application deader than a door nail.    As a community service I want to inform you on how to deal with them.

The first issue is fairly simple to duplicate; open your app in Android 7, and then open it in split screen mode.  At this moment there is a issue in the android runtimes that causes your app to crash and burn.   Assuming you do not want to see  your customers complain about application crashes, Nick came up with a good workaround until they can fix the issue.

To fix the issue you need to open your /app/App_Resources/Android/AndroidManifest.xml file and navigate to following key to the Activity section of the file.     It should look like this:

You want to add android:resizableActivity="false" to the Activity section as shown in this image.

This will disable the ability for the application to be resized; which will eliminate the crash.   The NativeScript team is investigating how to fix it; so eventually you won't need to do this; but in the meantime, I would recommend you add this to all your apps to eliminate at least one place your app can easily crash on Android 7.

 

The second issue is one that I have been dealing with for month; my remote error logging shows this log frequently:

Error (native) com.tns.NativeScriptException: No weak reference found. Attempt to use cleared object reference id=-xxxxxx

This of course crashes the application.    Well Peter (on the NativeScript Android team) has managed to duplicate and fix at least one of the ways this can occur.    So, we will be seeing this fix in the the new 3.0.0 runtimes.   WooHoo, less customer crashing is AWSOME news...

Now I know what a lot of you are thinking, I've got a NativeScript 2.5 application; I don't want to upgrade to 3.0 yet; it will break all my plugins...  Guess what this intrepid developer has tried and confirms works properly.   You can run the 2.5 TNS core modules and the 2.5 widgets with the Android 3.0.0 android runtimes.    This is not going to be guaranteed to work for any future releases past 3.0,  but for the first couple versions, you should be very safe running the Android 3.0 runtimes with 2.5 NS Core Modules and 2.5 NS Core Widgets.    One word of warning you MUST use 2.5 core-modules with the 2.5 widgets; DO NOT try to mix these up these versions.

Now 3.0 is not yet out of RC status; so I wouldn't deploy this right this minute.  But once 3.0 is out; I plan on updating my apps to use the 3.0 engine to eliminate this nasty issue that randomly crashes my applications...

To update you just do:

tns platform remove android
and then
tns platform add android@3.0.0

Please note; you will also want to disable the snapshot feature.  It is tied to the core modules and runtime engine.  At this moment there is no version of the snapshot for v2.5 core on a 3.0 android engine.   To disable the snapshot ability; the easiest way is to do:

npm remove --save-dev nativescript-dev-android-snapshot

This will remove all the snapshot code from your project so it won't run and mess anything up...

 

 

 

NativeScript 2.5.0 - Released

Some of you might have seen the all New version 2.5.0 has been released today.  For the first time that I can recall; Telerik has actually beat me to the release news.   You can read the official blog post here.

Some of the new features

  • Better Debugging using Chrome Developer tools
  • Working Webpack 2.0
  • Flexbox layout fixes
  • Updated Android Runtime Engine (even more ES6 support)
  • More css support for ActionBar
  • Lots of bug fixes

Upgrading (Core):

First of all to upgrade is done is a couple steps:
> npm install -g nativescript@latest
> npm install tns-core-modules@latest --save

Next try the new update command
> tns update

For Android:
> tns platform remove android
> tns platform add android

For iOS
> tns platform remove ios
> tns platform add ios

Then you can type tns info and verify that everything says v2.5.x

Some Changes

  1. tns run does not work the same way anymore; it is now equal to tns livesync --watch
  2. To actually "rebuild" the app; use tns run android --clean

Common Issues:

  1. In some cases when doing a tns platfrom add android, the package.json file gets a entry in the dependencies section for "tns-android": "^2.5.0" which will cause any following builds to fail with the error code: the plugin tns-android is already installed.   Fix: Delete it out the package.json.
  2. ActionBar items -- backgroundColor do not use color names; only use Hex values.  Using color names can cause the app to crash.
  3. Android --release apps and error about can't find package "nativescript-snapshot@x.y.z" or "nativescript-angular-snapshot@x.y.z" in the registry.     A couple things can be causing this; first make sure you have updated everything.   Second, occasionally the hooks folder gets out of sync, you might have to delete your hooks & node_modules folder and do a npm i to reinstall everything.

 

Amazon Tablets - Jailbreaking / Rooting

Amazon sales some decent little tablets called the Amazon Fire 7", add one of there decent kids cases and the tablet is great for letting the kids use for a ereader, comics, games, notes, Zork, and many other tasks that a normal Android compatible touch screen devices can do. All for the grand total of $50 for the android device, and $20 for the case.   So around $70 you have unit that is perfect for kids.

Now with this unit there is a couple of small gotcha; by default it comes with a silly advertising screen saver and it is tied completely to the Amazon eco-system.   For those who aren't interested in Advertising there is two options; one you can pay Amazon $15 to eliminate the advertising, or you can remove it yourself.   Now many of you know me; So I'm sure you can guess which way I did it. 🙂

The second issue is that it only has a 3 month warranty; they DO sell a "kids" version for $99 that comes with the case, removal of the ads and a two year warranty.   So the cost difference between the two is negligible if you want a two year warranty, this is your better bet and you don't have to do anything to eliminate the ads as it comes already without ads.

This device is not a bad little tablet; and my kids fight sometimes over who gets which one of the them that we have.


Now on to why most of you are probably viewing this blog post; I prefer to have full control over any device that enters my house.   So guess what my choice was.  Yep, I eliminated the ads and "root"ed the device.   If that sounds scary; it really isn't.   You just do a couple steps; install some software and boom your done and have a fully open Android tablet.  Please note this can void your warranty and you have a chance you can mess up your device.   No warranty is provided and I don't provide free tech support.  😉 Please note this only works on Amazon Kindle fire 5.3.1 and lower, if you are running 5.3.2; you need to downgrade to 5.3.1 before doing this. There are videos to help you do this.

Please note; by doing this you might eliminate the ability for Amazon's Alexa, freeplace, prime videos, kindle free books from working.   I do have a prime account; but I don't have anything on Amazon I want the kids to have "easy" access too; so I honestly haven't tried any of the prime services on my fire's.   I'm pretty sure the Kindle e-reader app continues to work fine; but no guarantees.    I don't believe my fire's are babysitters, so no video access is given to them.  If they want to be entertained they can read a book.  😉

First things first; you need the tools.  You need to download the link on here:

http://rootjunkysdl.com/files/?dir=Amazon%20Fire%205th%20gen/SuperTool

The file is currently called AmazonFire5thGenSuperTool.zip and it is around 152MB's

After you download it and extract it to a folder; you need to install the ADB drivers; the best tutorial I've seen if you like video's is the author of this tool; "Root Junky" video tutorials which you can watch on http://www.rootjunky.com/amazon-fire-5th-gen-supertool/

If you prefer text and pictures http://www.makeuseof.com/tag/install-google-play-remove-lockscreen-ads-amazon-fire-tablet-without-root/

Now I'm not going to repeat those tutorials; The things I did to make everything work was option 1. ADB Driver Install, then 2. Install Google Play and remove ads from Lock Screen, then 7. Root your Amazon Fire fifth gen, and finally 8. Replace Amazon Fire Launcher with Nova Laucher.
1. ADB Driver Install -- This is required so that the software on your computer can talk to the Amazon Fire, so this has to be done FIRST, and must be working, for everything else to work.  This can be tricky depending on the OS; if you are using Windows 8 or 10; you have to disable driver signing; which you can see how to do in the Text and pictures link.

2. Install Google Play / Remove ads -- well I don't like ads, and I want Google play to be able to install other things, that I mention below.

7. Root your amazon fire; this is if you want to be able to control things; I happen to like putting a firewall on my devices.  This allows me to block all applications from connecting to the internet and dialing home and/or pulling down ads inside of them.    This is not needed; but I personally prefer it.  The firewall I use is called "AFWall+" and can be got for free on the Google Play store. (But you must be rooted to use it).   There are a couple other tools I use on my devices that require root; but I'm a developer so they probably won't interest you.  😉

8. Replace the Amazon Fire launcher with Nova Launcher.  Nova Launcher is a pretty good default launcher; if you like the Amazon launcher; then no need to do this.  But I don't and I find it very limiting and it is very much tied to the Amazon eco-system.  So I install Nova Launcher; then I installed another app called "Kids Place" this allows you to setup a simple to use Launcher for the kids; where I can pick the apps they can run, when they are allowed to be ran and other "kid" friendly items. This "Kids" place runs in its own sandbox and limits the kids to pretty much only the apps you allow it. It has some "holes" that my crafty kids have discovered, but the holes are pretty minor and don't cause any real issues since the firewall blocks access from any app that I've decided doesn't need internet access.

I tend to disable the internet on the tablet, pre-install a ton of books, apps, comics and other items. I have also purchased a License for Moon Reader (My favorite e-reader app), and Aldiko Premium. And so I install these along with FBReader on all my Fire's so that the kids can choose which e-reader they like.  In addition I typically install a couple learning games (for the non-readers), drawing, and even a comic book reader; as everyone loves comics.

If you want to allow your kids access to the internet from the device; I would install the Brave browser as it has built in ability to eliminate ads and tracking which is what you want for your kids. The other thing you might consider is changing the DNS to use a family/kid friendly provider. You can do it on the device; or if you have a smart router; you can tell your router to server a kid friendly dns to a specific device. OpenDNS & Norton both provide free kid friendly dns servers.

None of this is totally bulletproof and you still have to be a parent; but it does make my life a lot easier and I have no concerns about any of the kids taking any of the fires in their rooms and using them.

 

NativeScript Developer Days

20160920_190247Well, we just finished the Conference yesterday!   Thanks for everyone coming out; I enjoyed meeting a ton of you.   And I hope everyone had a great conference.    For NativeScript being released as a Beta to the world 18 months ago; they had a large turn out.   In fact the Angular Native sessions had to be split into two rooms because so many people showed up.   Good problem to have!

Great job by Brian (and I'm sure others behind the scenes at Telerik & Progress) getting everything coordinated and setup.   It was an enjoyable conference with great speakers.

T.J. and Jen did a great job on the Angular 2 training session; I even learned some things in Angular Native; check out the in-depth tutorial on Nativescript.org, great stuff.

The Opening by Burke and Todd was very entertaining and love some of the history and vision you guys presented...    In 2014 NativeScript was started.  18 Months ago was when the beta was released, and the rate of adoption for NativeScript is through the roof.

I have to say, I'm still very very sad that Sebastian wouldn't let me steal his evil and "un-named" bot -- I would have provided a good home for it, and I could have helped with your goal of world domination...  So tell me Sebastian which room are you in again?     😉

I thought Alex Ziskind's talk was awesome, I don't use Office 365; but man your Plugin ROCKS!   If I get any clients that need that type of functionality; I know which plugin I will use.   Awesome job on both the plugin and the speech!   And to answer your question, Calendar would be my bet for next integration, everyone uses a calendar...

Nathan's Walkers ShoutOutPlay is awesome, I love how you blended using your ShoutOutPlay with your slides and talk; that was genius; and really made your talk shine!    Sharing! Sharing! Sharing!   😉

Congrats for MeWatt for winning the app contest -- the app & technology is very cool; but what stood out most to me is as I talked to the owner of the company (which he was an awesome guy) -- he mentioned that the app was built in 7 weeks from NO NativeScript knowledge to fully working on Android and iOS.   Holy smokes, 7 WEEKS to Awesome APP.   Talk about NativeScript being enabling!

And Raymond had a great talk to close out the day.  I so REMEMBER the magazines and typing in the many many lines of code; COMPUTE was the magazine I always waited for; I was on the c64...

The #MobileTea meetup after the #NSDevDay was cool.  It was people from the entire mobile community; React, Cordova, Native, etc...   The funniest thing that happened was two guys did a great job of presenting how to use PouchDB (on browser) and the native CouchBase library stuff on ios for doing local data and offline data and syncing of it.    However, the presentation on iOS he was showing the code for how to setup Couchbase and syncing and it was a lot of code.   (He did do a good job)...   So I did a quick search on our plugins site NativeScript.rocks for couchbase and found the plugin and the docs and it is 8 lines TOTAL of code to do the exact same thing in NativeScript and those 8 lines enable it on both Android and iOS...   NativeScript is just so COOOOOOL...  🙂

It was awesome to meet a several of the engineering team from Sophia -- we had some great discussions, and they now get to put a face to "that" guy that posts all those weird hard bugs that really mess up the schedules...  😀    The cool thing was we actually hashed out some great ideas for how to help enable several parts of the community to flourish more and how to help the community know what bugs we can easily work on ourselves from the TNS-Core.

It was also very cool to meet Rob, Brandon, and Clark from Progress/Telerik at the speakers dinner, all of them way behind the scenes at Telerik.   Rob, if you ever get any openings in your team -- it sounds like an awesome job, I love hacking on new technology....  🙂

And of course it was very awesome to meet Valio & Todd, Dan and Brian at Telerik, I chatted with each of them several times over the last 18 months, so it was great to finally meet and put faces to the name.

So if you picked up one word.  It was AWESOME...  Thanks again for everyone I got to talk to, and If I didn't put anything in here about you; my apologize; names and my memory sucks...

Oh and I plan on putting a blog post up later on my Presentation with the slide deck, link to the source & tests and all the key parts to help anyone who is interested in NativeScript Testing.     I understand the talks were all recorded; so I'll update the post to link to them when they are released!

NativeScript - DynamicLoader

logo-dynamicI'm happy to announce my latest commercial plugin; this one is a bit different then most of my plugins.

I ran into a situation while benchmarking one of my apps where the parsing of the Declarative UI XML files and the building out of a fairly complex layout cost me a couple seconds of time when navigating to this screen.   I then found out that the majority of the time was spent building a part of the app that was completely hidden.  So, I had to find a way to mitigate this...

Enter my newest plugin, what I have built with this plugin is the ability for you to dynamically load (& unload) any chunk of Declarative UI XML (and its associated JavaScript file) into any UI element that accepts at least a single child.

I have a sample github repo using the new plugin, showing how easy it is to use the plugin, and a full demo showing different ways to use the plugin.

Everything in the Blue box is totally loaded dynamically from all the different Declarative UI XML files that are located in the /views/ folders that you can see in the github repo.

nativescript-dl0 nativescript-dl3

You can purchase this plugin at: http://nativescript.tools/product/16

NativeScript: CSS Selectors & Pseudo Selectors in 2.2.0

The NativeScript team released a feature under the cover of dark; not even listed in the change log; but Panayot; did a refactoring of the CSS selector system in NativeScript. With his changes he has not only sped up the selector code in most cases but he added some additional features like

[myAttrib="yes"] > .figure { color: red; }

And fixed several things that were broken in earlier versions like:

 .android.landscape  Button {  background-color: blue; }
.landscape.ios Button { background-color: green; }

If you understand why this is so important; this opens up CSS a LOT.   For example; I have two plugins; nativescript-orientation, and nativescript-platform-css.    Orientation automatically will put landscape as a class of the <Page> when you are in landscape mode; this allows you to have custom css for landscape mode.   It allows a lot of flexibility.   However, when I created the platform-css plugin it automatically adds ios or android to the Page classes.  Again this added a lot of flexibility as you could in a single css file do:

Button.ios { margin: 20; }
Button.android { margin: 15; }

To allow you to style the buttons so they look properly on each platform.   However the OLD CSS style system would not detect that "landscape ios" should use the rule:

.landscape.ios Button {}
or
.ios.landscape Button {}

So, originally  I had to add a HACK to my NS-orientation plugin to detect if you were using my platform-css plugin so that it could create a special css class rule to allow the second rule (.ios.landscape) to work as expected.   Now with the all new css selector system in 2.2.0; it all works properly; and ALL variations of the rules are valid and I don't have to do anything extra!

Major Kudos from me to Panayot!   This fixed a number of other weird CSS corner cases that have been in the issues list for a while.  So this was a imho one of the best new features of 2.2.0...

Now, there is another awesome new feature that Panayot did; he has pseudo selectors; at this moment the button now supports both a normal state and a highlighted state.  So you can do:

Button:highlighted {
background-color: cyan;
}nativescript-pseudo

And the button will change to a cyan background when clicked and on Android 5+ you will still even get the ripples!    Awesome job Panayot!

NativeScript: Version 2.2.0 released

ns-2.2.0For those living in a dungeon hacking out code; guess what was released by those fine wizards at Telerik today!     Yes, you got it - v2.2.0 of NativeScript is now available!   Upgrade Instructions below.

As usual; if you run into any issues I will be putting any common issues at the bottom of this post as I and others run into them....

New or Fixed Features:

  • Android now properly supports some the of the Java classes that were broken in 2.1 (Major)
  • Nested Bindables
  • Letter Spacing is now all in EM Units (CSS: letter-spacing)
  • CSS supports new properties, more selectors and even pseudo selectors (Major)
  • Android Launch Screen Support
  • Observable's are now auto-nesting (this can cause a breaking changes -- see known issues below)

A Lot of other smaller bug fixes and enhancements went into place; unfortunately the really big feature for 2.2.0 has slipped -- threads.   It was bigger than a single point release could handle; I've seen progress on both Android and iOS on this front; so I have high hopes it will make it in 2.3.0...

Upgrading:

First of all to upgrade is done is a couple steps:
> npm install -g nativescript
> npm install tns-core-modules@latest --save

For Android:
> tns platform remove android
> tns platform add android

For iOS
> tns platform remove ios
> tns platform add ios

Then you can type tns info and verify that everything says v2.2.x

 

Common Issues

Nested Observables might throw an error

(iOS) TypeError: Cannot set property 'disableNotifications' of undefined
(Android) TypeError: undefined is not an object

If you have objects like

var x = new Observable({
y: new ObservableArray([])
});

This will probably throw the above error; eliminate the nesting; and make the structure like this:

var x = new Observable({
y: []
});

Github issue: https://github.com/NativeScript/NativeScript/issues/2457

x86_64 bit Emulator on iOS might crash on code that is fine.

Error:

Service exited due to signal: Segmentation fault: 11

Solution: Switch to a 32bit emulator like the iPhone 4s.

Github Issue: https://github.com/NativeScript/ios-runtime/issues/622

 

Angular 2 cssClasses Incompatibility

ORIGINAL EXCEPTION: TypeError: _this.cssClasses(...).set is not a function

You need to upgrade your NativeScript-Angular version to the latest version; the older version which worked with v2.1.0 of NativeScript is incompatible with v2.2.0. You should be able to do a

> npm install nativescipt-angular@latest --save

 

Introducing tns-template-plugin

If you create plugins, I've created a awesome shell that will basically build out your entire plugin folder structure after asking you a couple questions.   This is standalone, you don't need anything beyond what you should already have (npm/node).   It has ability to create plugins in a variety of ways...

It will automatically create (and embed info inside them):

  • License
  • Readme
  • Source code file(s)
  • Demo
  • tsconfig (if needed)
  • package.json
  • ignore files
  • Additional support files

The plugin generator will asks you about 10 questions initially; but it is smart enough to save the common ones (like name, email, github) so that in the future it won't need to ask you again.   In addition to being able to generate complete plugins for both JavaScript and TypeScript, it can also use your own "masters" of the files to generate the plugin if you have your own basic look/feel for all those files.

To use is very simple:

git clone https://github.com/NathanaelA/tns-template-plugin nativescript-somename
cd nativescript-somename
npm start

Answer some questions, and bam you have a full plugin all designed and ready for git and npm...

My goal is to be able to eventually do a tns plugin create somename or tns create nativescript-somename --template plugin and I have a enhancement report in the CLI repo to allow this; but until that time, you can do the three steps above...

NativeScript: Declarative UI not updating?

stop-nsThis is just a heads up so that others don't waste the time I wasted; trying to figure it out...

So, I've been working all day on a really cool NS app for a client; made LOTS of graphical changes;  Gradients, shadows, borders, opacity, custom built fonts, themes, tap effects, etc -- looks and acts really sweet...

So I start the app up again and it changes several fields frequently so all of a sudden the display appears locked up; none of the values are changing while just watching it...   I click on a button and the display updates; properly.  Weird.  So I do it again, and again it freezes about 10 seconds into doing updates; interacting with certain things in the app and bam the display starts updating again; and 5 seconds later it the ui stops and is no longer updating again...   Argh...  Inconsistent issues are hard to trace..

So I run the copy of the app that I had deployed to my actual phone from this morning; and everything works great -- not as pretty; but no display glitches.

Ok, so now I'm thinking some change I did has broken the Observables some how, maybe the Obs notification is crashing, or being eaten.  So I start debugging and basically waste about a bit of time tracing things back and even add code to verify that the Observable is sending property change notices properly...   So, after doing a bit of work, everything programmatically looks correct; everything is still bound, the binding context is still valid; the Observable is sending the updates properly; everything looks correct in memory; just the labels don't update...

I start writing up an issue in the NS repo to ask for some more pointers on how to trace down why an Observable is sending notifications, the label is bound and listening; and the label actually shows the updates for a random numbers of seconds but then just randomly stops updating (but can be "kicked" by doing things in the app)..  Yes, that weird of a problem.

Well, before I finish writing up the issue I decide to try a hail-mary as my dad would say.  I killed the emulator; started it back up and....   Everything works....    Ugh, wasted a lot of time; but the good new is it wasn't my app -- my app works great...

So the point of this story -- if you start getting any unexpected random display update glitches; try rebooting the emulator...

 

NativeScript: TypeScript Speed/Memory usage

For those who may have seen some post of mine on Slack about TypeScript being not a performant as JavaScript; I have finally done the real benchmarks and spent the time totally de-typescriptifing the NativeScript 2.00 runtimes.  And here is my startling results....

everythingyouknowiswrong

(c) 2010, Jan-Willem Reusink - https://www.flickr.com/photos/jimmybenson

Oh, wait; that is not right -- I was the one wrong.  😉

The actual real numbers do not bear out what I had believed based on some TypeScript tests that I had done in Node a while back.  I am still not sure why my initial tests in Node behaved differently; but after spending a couple days building the tests, using a large JS application and a totally de-typescriptified the NativeScript runtime, I can say without a doubt in my mind that TS add little to no meaningful hit to the runtimes.  On iOS I actually didn't see a memory difference at all, the GC seems to collect the memory so quickly, that it wasn't even showing up.    On android it takes about 40-60 more megabytes of memory for everything; however after the first GC, all the memory is reclaimed.     So yes, you do end up with a small amount wasted memory and GC pressure added.  However, with it ALL being reclaimed at the first GC; 40mb temporarily wasted really is a drop in the bucket for what TS does offer you.

The other thing that I was surprised by was that the TS runtimes actually started up faster than the pure JS versions.  Now that I had to reason through why TS code was starting faster than raw JS; it makes a lot of sense -- The reason why is because most classes are lazy instantiated.  So the amount of JS code actually compiled and ran by the v8/JSC engines are a lot smaller in TS compiled code because the majority of the code is inside the function that wraps each class.   So if a class isn't needed yet during startup (but is loaded via the require statements) then the time it spends running it is minuscule compared to a runtime that actually builds all the classes while it is loading each one.  So, even though the difference was in literally milliseconds, it still was measurable.  Eventually when you do have that class instanciated; you will have more time used their; but since each class being created later is literally measured in NanoSeconds, the hit later actually "feels" faster to the user since time to first pixel ended up being faster using TypeScript code...

Actual numbers (best of):

Startup time TS: 393,675,213 (NanoSeconds)
Startup time JS:  399,058,778 (NanoSeconds)

Memory Usage TS: 7,544,460 (Bytes)
Memory Usage JS: 7,488,292 (Bytes)

Memory after GC TS: 4,979,548 (Bytes)
Memory after GC JS: 4,993,268 (Bytes)

Please note the reason why GC JS is actually bigger than GC'd TS is more (all) classes have been defined, created and are in memory as real objects vs the raw un-instanciated source code in TS if they haven't been used yet.

So, guess what I am going to be using more of....  😉