Making your NativeScript development easier, one snippet at a time

Recently, I have started to use Visual Studio Code as an editor that works particularly well for TypeScript and NativeScript development, especially when learning the Angular 2 stack. It all seems to work together smoothly, and I am appreciating the tooling around these languages and development stacks. Anything that involves tooling that will help me get more productive and build a NativeScript app more quickly sounds great to me. Of particular help is a library of XML snippets that I recently discovered that, as it turns out, is completely community-built.  Digging into these snippets, I found that they exist for both Sublime Text and Visual Studio Code. They are really easy to install. 

 

In Visual Studio Code, just go to View>Command Pallette and type ‘install’. Once the snippets are installed, you can type ‘ns’ and will have access to many quick code snippets to build your XML views. I particularly like the ActionBar, simply because I can never remember the bits and pieces that go into it:

 

In Sublime Text, use the Package Manager to install the NativeScript Snippets:

 

  

 

The XML helper snippets were created by Tsvetan Ganev, a third-year computer science student in the University of Ruse “Angel Kanchev”. According to Tsvetan, the first time he heard about NativeScript was last summer. Having read an article about it by TJ Van Toll and then having watched his introductory videos on YouTube, he was intrigued. The fact that Telerik, a company founded in Bulgaria, was behind NativeScript also got him interested as a Bulgarian student, since he watched a lot of Telerik Academy’s online courses and was familiar with their software products.

 

Tsvetan had no experience in mobile development, so for him the opportunity to use his existing web development skills was a great selling point. Everything seemed so easy to set up and to get started building, that he decided to give it a try. He set himself the goal to build a sample application which will access a remote API, pass data between pages and use the basic UI controls provided by the framework.

 

While building his first mobile app, Tsvetan noticed that he had a browser with the NativeScript documentation page opened all the time, because he was not familiar with the XML syntax and often forgot the options of the different controls. Since NativeScript was quite a young technology at the time, there was no support for either Visual Studio Code and Sublime Text. He was used to getting autocomplete/intellisense while working on web projects, so he decided to make his life easier while working on NativeScript apps too. He decided that writing down the most frequently used pieces of code as snippets would reduce the time spent on looking up the correct syntax in the online documentation. After he finished adding all available controls as snippets, he realized that he could publish them and help other developers using NativeScript. He posted the Visual Studio Code snippets on the NativeScript community page in Google+ and had some positive responses, so the next day ported the snippets to Sublime Text as well. Since then he received a couple of pull requests and tips for improvement. Now the snippets are available on both Sublime Text’s package control system and Visual Studio Code’s marketplace.

 

Thanks, Tsvetan, for creating these snippets. I’d encourage the community to collaborate with him and each other to help maintain them. Keep an eye out for a new Visual Studio Code extension by Telerik for NativeScript which will help speed up your development even more.