May 2020 update : Nativescript will remove support for the “Cloud Build” feature provided with SideKick (which was one of the few positive things I had encountered), with a new Circle Ci system as announced here, abandoning the previous one from 31.05.2020, in practice without pre-announcement and choice.
At this point I confirm my opinion: a bad system and without long-term support, which for a professional project – to protect the investment – must be the first thing to evaluate. In addition, just 2 weeks to do the migration/upgrade, with all the related problems, could lead to significant problems (as I read from the various comments). Personally, I still have to migrate.
I therefore do not highly recommend Nativescipt for any professional project.
I had the idea of developing a native application for smartphones, in order to allow my partner to facilitate her writing Crochet Pattern for Amigurumi, in order to then be able to print and sell them on Etsy.
This is the final result:
Among other things, the finished dolls are on sale, ready to ship, a beautiful and original gift for all ages!
But now let’s go back to our App!
Requirements
The work is very long and requires constant corrections, and attach photos to the various steps that help you understand exactly how to proceed. And it’s not a simple thing!
Now we took the notes on a sheet of paper, but then it became difficult to remember to take the photos, associate them with the passage of the pattern, and then rewrite everything on Word to generate a distributable Pdf. If even a pass is not perfect, the pattern cannot be sold.
So here is the idea of creating an App, in order to edit the Patterns directly on the mobile phone and take photos directly. Then export everything to Pdf. Et voila, the Pattern is ready.
I state that my experience of native mobile applications was almost nothing, apart from a short basic course on React Native. To participate in the course I had the need to do the setup of the emulator with Android Studio, so luckily I had a little experience on this point, and also a working emulator.
My ideal requirements were:
- free: it’s an amateur project, then if the business goes well in the future I could definitely invest in something more professional,
- TypeScript: in 2020 writing JavaScript code is not an option for me,
- Angular: so I reuse the same patterns, Rx, rxjs / redux and libraries,
- Visual Studio Code / Visual Studio: re-use of IDE knowledge,
- Windows development environment,
- fast emulator setup: from experience it can be very frustrating to have an up-and-running emulator with the possibility of debugging the code,
- Android: maybe even iOS if without effort,
- supported by solid technologies: in such a way as to guarantee to avoid rewriting everything in a couple of years,
- no API: all data must be resident on the device,
- saving data in text format file: simple to edit, so I chose Json, rather than the excellent SQLite. Each project will consist of a folder with a project json file and all the necessary photos attached,
- saving files to public folder: so that in no way it is possible to “lose” all the work done (eg by uninstalling the app) and that it was easy to add and remove projects. NB. the internal storage of the App is not accessible via USB! I suspect that an update of the App may lose its content, but I have not verified it.
- simple UX: usable simply by anyone, the target of the users are non-technical people.
Choice and setup of NativeScript
I started by choosing the development platform to use, and the options were between Ionic and NativeScript (Ionic vs NativeScript). I chose NativeScript because the integration with TypeScript and Angular seemed native, and therefore I would have reused two knowledge that I already had. The choice was simple.
NativeScript allows you to create Native UI (therefore compiled in binary code) but writing code in JavaScript + HTML, and can be used with frameworks such as Angular, Vue, and NativeScript Xml.
I then followed their guide on how to do the setup and it seemed quite simple and well done, only to find that he had ignored my previous settings and added emulators, applications, tools, in other places, creating an incredible confusion. After hours of research and attempts, I managed to have a working environment, but I am very careful to install Android Studio updates, I must say that I am still traumatized.
Coming from the Microsoft world, I am amazed by the poverty of these development environments, which seem to have been developed for a few days and as children, when in reality it has been the de-facto standard for many years. If you are used to IDEs and have Microsoft development experience, get a lot of patience.
For your convenience at the end of the article I have reported some useful links, which refer to the documentation that I found useful and the plugins that I used.
The first impression
In reality the platform is very weak, poor documentation, and a lot of work to be done to understand how to solve “problems”. Maybe it would have been the same with Ionic, but today I would advise against NativeScript and I would say to try Ionic. As it goes you will have the same (bad) experience.
Unfortunately, the Native development is still far behind on what are the basic expectations for a just decent App, and this I think depends on the support of the operating system, be it Android or iOs. Obviously the possibility of freedom is paid for with a lot of work to have something decent. And I’m not talking about special effects, but about simple buttons to navigate through the App, or layouts to distribute content.
Let’s say that if you have to make the classic App that displays photos, or that has a simple structure, then you should have no problems.
In my case, however, it was a “working” App in which I had to optimize the insertion of contents, and having to make 3000 clicks to enable a button, having to open forms, or go to other pages was absolutely not contemplated.
Integration with IDE
The integration with Visual Studio Code I must say that it is very good and allows you to debug directly in the IDE, it only requires their extension.
The emulator is launched, the native debug is launched, and after the image has been transferred to the device, the step-by-step code can be debugged. Great!
Alternative is also to use debugging with Chrome, but in my opinion it is less practical.
I haven’t found out how to debug elements (I mean “inspect”) in the UI, if anyone knows how to do it let me know!
Integration with Angular
Furthermore, the integration with Angular is not absolutely simple, just as the Angular apps are designed within NativeScript. That is, if you have an Observable in a component, forget that you can “complete” it at the exit of the page, because this doesn’t work! How do you solve the problem? Well it’s simple: in the meantime you have to realize that you have the problem (and here you wish, because it will manifest itself with out-of-memory or slowdowns) then you have to look for the problem and maybe you will find the solution that is not clear.
But I say: if you develop such a framework, it is obvious that this thing must be written on the front page of the documentation, otherwise how do you think people could be happy to use your framework?
SASS
Then we have SASS which is supported but obviously the basic template project starts without. Of course because those who develop App with Angular do not need SASS, but write CSS directly and do not need to customize the basic Template. Obviously it’s madness!
Then enabling SASS is a nightmare, I lost so much of that time behind bad and old documentation that I would never do it again.
UI elements and layouts
Then you have to start putting components on your UI, and find that the fantastic documentation for each element is actually useless, as it is a collection of obvious things. If you then want to try the various options, obviously the screenshots are missing, and according to them you should spend 90% of the time you have available to try the various options to see the one that suits you.
Then you have to put the various elements on a layout, and here you start to cry, an impossible thing to do in a short time. I strongly advise you to spend most of the time available in understanding the various types of elements for the Layout, understanding what types of problems they solve, and doing real tests. Personally, I underestimated this point and I had to rewrite many parts many times, and still today the result is very poor in terms of UI and UX, and certainly does not follow the best practices for Native UI.
One thing that works well without surprises are modal forms, such as MessageBox and InputBox to understand each other.
Icons
You breathe a sigh of relief when you want to add icons to your buttons, and the integration with FontAwesome is very simple and functional. Basically you can use the icons as plain text in the various elements. Eg
<Button (tap)="onClick()"> <FormattedString> <Span text="" class="fas"></Span> </FormattedString> </Button>
generate a button with an icon similar to this:
Android and iOs
Well if you think that developing in NativeScript you can seize both platforms is not really “free”. You will need a way to run the emulator and in the code write specific customizations for the target. To understand: if-android then … if-ios then … ah obviously it’s not included in the framework, but when you notice it, it’s too late, and you need an external plugin.
Storage
At this point I have to save the data on the device, so that they are accessible from the outside (via USB to understand each other) and find out that it is not so simple. But the question arises: what should an App do? I still don’t understand why they develop a framework like NativeScript.
I remember behind the giant Progress (perhaps better known for Telerik), which I had positively re-evaluated with the use of their Kendo components for Angular.
Well I remembered why I had strongly advised against using it, mindful of my previous experience in a large project in Italy, where we had to remove everywhere the Telerik plugins that had been used (months of work).
Photos and plugins
After losing years of life, you become a little more skilled and try to use a little more advanced features, such as the possibility of taking a photo and being able to edit it accordingly (basic function in every mobile phone).
To do this there is nothing native, but you have to use a Javascript library created a thousand years ago and which fortunately works.
If you then want to select an image from your device to link it, you need another plugin, “NativeScript mediafilepicker”. Seriously! The beauty is that it works but follows “ancient”, no promises or observable javascript-style patterns, and among other things, it is not integrated with Zone’s lifecycle, and therefore the UI was not updated because the “change detection” does not it worked.
After trying all the possible combinations to solve the problem and understanding how to integrate it, I contacted the author to ask him to approve my Pull Request on github to add the note to the documentation.
Too bad that “according to him” is an obvious thing and everyone who uses Angular knows about this thing! But I explained to him that it is not the practice and that in 4 years of use with enterprise applications, it had never happened to me. Fortunately, it is now documented!
As a rule we say that external libraries / plugins must be compatible with NativeScript, otherwise it is not possible to use them. This is because NativeScript does not – obviously – support browser elements, so calls to certain functions must be re-mapped in native code. So if a plugin requires a call that NativeScript has not mapped, it cannot work. This greatly reduces the libraries that you can unfortunately use.
Furthermore, most of the features are implemented with Promise, and that don’t integrate very well with the Angular world.
“Advanced”… capabilities?
And what about a drop-down from which it’s easy to choose an item from a list? it doesn’t exist, you have to do it. Luckily I found a post about it, by the excellent Dave Coffin, who implemented a filterable list picker.
Do you need to enable permissions for your App, such as storage or room? obviously it is a basic thing and it is already integrated … ah no, oops, you need an external plugin …
Color picker? simple: google for a couple of hours, try a couple of plugins, and it’s done (maybe) in a couple of days.
Do you want to save an image and adjust the compression? You have to use a trick that I discovered after much research, thanks to Tim Leland:
var saved = imageSource.saveToFile(path, "jpg", compressionValue);
On the other hand, if you want to generate a pdf document, it is simpler: you cannot do it and that’s it. I therefore opted to generate a document in html and css, to then print everything on the pc. I could have used an API, but I didn’t want to have that addiction.
I therefore discovered that in 2020 html and css do not yet support printing on paper / pdf. In the end, however, I did it and I am satisfied with the result, as well as having learned a lot of tricks to apply watermarks, multi-column layouts, and the very comfortable (and I must admit new ones) css-grid.
In order to print the pdf file, or to apply a post-processing of the template (as the css is customizable), it is necessary to send all the files and photos on a computer. So I thought to create a Zip (also here, with an external plugin) and send it via email, but the limit on the mail client / app (e.g. Gmail) is about 10 Mb of attachments. Fortunately, the “project” folders are stored on public storage, and therefore just connect the USB cable to be able to copy them to the PC.
Sidekick
May 2020 update: SideKick is basically no longer available!
A point in favor of NativeScript is the “Sidekick” application which greatly simplifies the compilation and distribution of the App. Just a few clicks and you get an Apk to be installed on your mobile phone with a QR-code. All with the right icons, splash screens, all set for Android to iOS. A great job.
Sidekick is free for up to 100 builds per month, I would say perfect for a small group of developers.
I leave you some useful links to resources for NativeScript and Angular:
- NativeScript introduction
- Sidekick
- NativeScript + Angular – Core concepts overview
- NativeScript + Angular components – Button
- Icon fonts
- Fontawesome free icons
- Theme in NativeScript
- NativeScript Image and icons
- Modal dialogs
- Visual Studio Code NativeScript extension
- NativeScript Camera plugin
- NativeScript Photo editor plugin
- NativeScript Permissions plugin
- NativeScript Android/iOs Platform Declarations
- NativeScript Zip
- NativeScript Color Picker
- Nativescript Mediafile picker
- NativeScript Filterable List Picker