Nativescript Introduction: The Nativescript Playground

by | Dec 10, 2018

One of my favorite things about being a developer and a consultant is learning new technologies. I enjoy testing out different frameworks to see what kind of capabilities they bring to the table. It’s good to know what tools are out there when you need to tackle a new problem. That’s what makes the Nativescript Playground so cool! It allows you to get your hands dirty and test out a framework, in a short amount of time and with minimal setup. Let’s take a quick look at what the Nativescipt framework is, and how you can use the Nativescript Playground to get a feel for its capabilities.

 

So What Is Nativescript?

Nativescript is a framework to build native cross platform mobile applications. It has a full set of native API’s that allow developers to create apps for both Android and iOS that utilize truly native features. Additionally. there are native components that can be added to your project, things like time pickers for example. In Nativescript, the same code produces both of these:

Native time picker for AndroidNative time picker for iOS.

 

 

The Nativescript Playground

The Nativescript team has created an awesome set of tools that let developers dive right into the Nativescript framework. The key to the awesomeness is the Nativescript playground, a mobile application used to preview Nativescript applications. To get started, navigate to the online editor at https://play.nativescript.org/ and you will be able to create a sample project. The website has a couple tutorials and templates for you to get started with. Additionally, you will need to download two apps on an Android or iOS device. The apps are called “Nativescript Preview” and “Nativescript Playground” and can be found in the App and Play Stores. With the Playground application on your device, you scan a QR code that is generated by the web application. Then after scanning, the Preview app will automatically launch while running the application you’ve built. Multiple devices can scan the QR code and update in real time.

Not only does this work from the online editor but this is also one way you can run local builds of a Nativescript application, using your own development environments. No need to setup and configure an emulator, just scan the QR code and changes appear right at your fingertips.

 

The Online Editor

As I mentioned, the link above brings you to an online editor. The online editor has a bunch of cool features. One of them involves dragging and dropping Nativescript components into your project. It’s a great way to get a feel for all of the different components supported by Nativescript. Once you get the hang of this, it becomes an slick way to mock up new design ideas.

Additionally, if you create an account, you can create and manage multiple projects. You can also download everything that you created in the editor, allowing you to build and run the projects locally.

 

Javascript, Typescript, Angular, and Vue.js

I like to think of Nativescript as the Electron of mobile frameworks. (Although unlike Electron, there are alternative options to Nativescript, like React Native, that have the similar features). When I talk about Electron, I like to say that you get to “choose your flavor” when it comes to building an app. Nativescript has a few less flavor choices, but they are still some pretty good ones. All of Nativescripts tools for managing and creating projects have templates for Angular, Vue.js, Typescript or good ole’ Javascript. Sprinkle in CocoaPods, Gradle Tools, and NPM packages as you see fit.

 

In Conclusion

I had worked with Nativescript a few years back when it was still in its early days. When I decided to check up on it recently I discovered the Nativescript Playground, and felt I needed to share it. With the online editor and the playground application, it’s just too simple for a curious developer not to at least give it a shot. I remember the biggest headache of Nativescript, when I was working with it, was setting up emulators to run your code. The ability to scan a QR code and view your changes in real time is both helpful and entertaining at the same time. I’m still trying to figure out how they managed to pull this off, and if you have any insights on that, please leave a comment. Thanks for reading!