Life is Easier with NativeScript Playground

The NativeScript team have released a nifty little tool that is going to change the world. Well... maybe not the whole world, but at least it will help us share {N} code examples. The tool is called Playground and as the name indicates it is all "Fun and Games".

Let me give you a quick overview first, before I jump in how you could use it to make your life easier.

What is NativeScript Playground in a sentence?

{N} Playground is a solution that allows you to write your {N} code in a web client at play.nativescript.org and deploy it to your device with the help of the NativeScript Playground app (Android, iOS) and the NativeScript Preview app (Android, iOS)

The setup

NativeScript Playground Web Client

Here comes the first surprise.

There is no setup required to start writing your code. All you need is a modern web browser and a smile on your face (the last one is optional, but unavoidable).

How to use it

Pick your template

Scan the code

Once you choose the template, you will be asked to scan the QR Code with the NativeScript Playground app.
This will open the app in NativeScript Preview app.

Make changes

Now you can make changes to the code. You can easily edit all available files (html, css and ts).
Whenever you are ready just save the files (⌘ + S or CTRL + S) and this will automatically and immediately update your app in the Preview.

In case you ask. Nope! You don't need to scan the code over and over again.

Editing the UI

You can either insert all html tags manually or better still drag them from the List of Components on the left pane. This will automatically generate the necessary code. And if you drag a button then Playground will also generate a onButtonTap function in the TypeScript file.

Printing to the console log

Almost every {N} app I've seen uses console.log() everywhere. But how do you access the terminal, if you don't use the Terminal (Mac) / Console Window (Windows)?
The answer is, you don't need to, because Playground has a Logs panel, which prints all console.log() messages from the NativeScript Preview app. I've battle tested it, and it works even if you console.log 1000+ lines in one go.

Playground in action

It is too fast to believe it is true.

Limitations

Debugging

Currently there is no way of debugging your code with Playground.
But who knows... the Playground team is full of talent and I wouldn't be surprised if one day they would add debugging with Chrome Dev Tools.

Plugins

As you probably noticed, the app refreshes really quickly whenever you make changes. This is because we are only synchronising the app code. We are not however rebuilding the full app package.
This means that there is no way for you to add NativeScript plugins to a Playground project.

Last time I've checked, Playground had the following plugins:

nativescript-accelerometer

nativescript-geolocation

nativescript-pro-ui

nativescript-theme-core

rxjs

So you still can play with some of the plugins.

What is Playground for?

This might surprise you a bit, however Playground is not designed to be a fully blow IDE or Development Studio.
Like the name implies, it is a solution that allows you to play with NativeScript. Try things quickly and see the result quickly.

Having said that this is still quite a serious tool, which can help you in many ways.

"Help me with my code"

If you have an issue and you need help. The best way to get a good answer is to share your code.

However this is where the trouble starts. Because often people will share only a small part of the code and miss out on half of the important pieces; or if you upload the project to GitHub, then whoever is willing to help you, still needs to clone your repo and build the project (but this can take quite a while).

This is where Playground comes in handy.

Just create a new project and add the changes to recreate the issue. Then press the Share button, Playground will create a snapshot of your code and you will be presented with a new URL. Anyone with that URL will be able to access your snapshot.

If they find a good solution to your problem, then they can press the Share button create a new snippet and share it with you.

And this is not how it works in theory. I've helped a bunch of people who have shared their Playground snippets with me.

Getting hands on

Playground also makes for quite a powerful tool to help anyone just dive into NativeScript.
In the past it would take an hour or so to get the whole tooling installed and configured, but with Playground anyone could dive into NativeScript in less than 5 minutes.

And if you are an advanced NativeScript developer, then you could use Playground to teach others how to build mobile apps.

Workshops, tutorials, documentation

Following on the previous point, we are going to use Playground to help us share knowledge. So expect to see a lot of Playground QR codes everywhere where we are. Be it in workshops, tutorials or documentation. This is simply the easiest and quickest way for us to share snack-bite size code examples with you.

Vue

Don't tell anyone (who am I kidding?), but you can even play with NativeScript Vue in Playground. Insane!!! Right?

Subscribe for updates

Author

Sebastian Witalec

Sebastian Witalec is a Senior Developer Advocate for Progress who specialises in Angular and NativeScript. He loves working on both serious and fun projects and one day he will use his robot army to conquer the world.

Enterprise

Stay connected with NativeScript

I agree to receive email communications from Progress Software or its Partners, containing information about Progress Software’s products. Consent may be withdrawn at any time.

We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.

Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.