Nowadays, it’s hard to have time and money to develop the same software application for different platforms. Whether it’s a desktop or mobile software, the first thing that we should consider is about code reuse and portability. For this reason, in the last years, many different frameworks have evolved, simplifying cross-platform software development. In this tutorial, we are going to analyse the NativeScript Core framework with the support of TypeScript, learning how to build a strong cross-platform mobile application quickly.
Unlike the mobile cross-platform frameworks based on the Cordova web wrapping system (like Ionic), NativeScript is able to access the target operating system directly, allowing us to exploit the native features of the deploying platform and making applications faster. Furthermore, NativeScript allows you to choose your favourite front-end programming language from the most used ones, including TypeScript, Angular, Vue, React and Svelte. Here below, it’s possible to take a look at the NativeScript framework infrastructure:
As already mentioned, we are going to use the support of TypeScript. If you are new to this language, I suggest you follow this 5 minutes tutorial to get started.
Setup
In this tutorial, we are going to use Visual Studio Code to develop our first NativeScript application, together with the NativeScript IDE extension. Also, you need to download and install Node.js LTS, including the npm packages manager. Once the setup is completed, run the following commands by using a command prompt:
npm install -g nativescript
tns create my-app-name --template typescriptApplication structure
Here we are, we have created our first NativeScript application! If you have experience with XAML, you will find the {N} markup view definition language very familiar. Like WPF (Windows Presentation Foundation), this framework is based on the MVVM (Model-View-ViewModel) pattern.
By using Visual Studio Code, open the main folder of the project and take a look at the app folder structure:
app
|-- App_Resources // Platform-specific resources
|-- app-root.xml
|-- app.css
|-- app.ts
|-- main-page.ts
|-- main-page.xml
|-- main-view-model.ts
|-- package.json // Application dependenciesThis folder contains the application entry point script, named app.ts. This file allows us to specify the main application module to execute, looking for the relative view definition file (app-root.xml):
// Run the "app-root" module
application.run({ moduleName: "app-root" });
Here, the Frame component allows loading a new page, which will be rendered inside it, through a self-contained navigation scenario:
<!-- app-root.xml -->
<Frame defaultPage="main-page">
</Frame>
In this example, the main page will be loaded by looking at the main-page.xml file for the view definition and at the main-page.ts for the code-behind. The HelloWorldModel class, defined inside the main-view-model.ts file, contains the methods and the variables bound to the view through the bindingContext:
// main-page.ts
export function navigatingTo(args: EventData) {
const page = <Page>args.object;
page.bindingContext = new HelloWorldModel();
}
The bindingContext works as a communication bridge between the view and the model. By using the “{{ }}” operator, inside the view definition file (main-page.xml), it’s possible to read and to set the value of one or more properties, or to call a particular function. On the other side, the HelloWorldModel class extends the Observable object, which allows updating the properties value on the view through the notifyPropertyChange method. Take a look at the main-page.xml and main-view-model.ts file to get more details.
Finally, the app.css file contains the global application style definitions, which will be applied to each existing view.
Run!
It’s time to see our application in action! NativeScript provides a powerful live deployment system for Android and iOS. To get it, you need to install the following applications on your smartphone from Google Play / App Store:
- NativeScript Playground
- NativeScript Preview
Now, by using the Visual Studio Code terminal, run the following command from the root folder of the project:
tns previewWith the NativeScritpt Playground application, you will be able to scan the generated QR code, which will allow you to deploy your application as a web preview directly on your phone. Furthermore, at each change of the code, the system will automatically deploy the application again.
Build requirements
To build your native application for iOS or Android, you need to prepare your environment. Here below, is the list of the requirements for Android on Microsoft Windows system:
- Download and install the latest version of Android SDK. The simplest way to do it is to install Android Studio. The first time that you will open the IDE, it will ask you to install also Android SDK.
- Download and install the latest version of Java Development Kit (JDK).
- Set the ANDROID_HOME environment variable. It must point to the Android SDK folder.
- Set the JAVA_HOME environment variable. It must point to the installed JDK folder.
Now plug your phone into the computer and, by using the Visual Studio Code terminal, run the following command from the root folder of the project:
tns build androidThe build process will produce a .apk file, which can be uploaded and installed on your phone. I suggest you take a look at the publishing tutorial for Android and iOS to get more details.
Last but not least, NativeScript Online Editor allows you to build previews of your application, directly from your browser. You can use your favourite front-end programming language from those available – very useful to test on-the-fly the main components of the framework!
That’s all for now!
In the second part of this tutorial, we are going to analyse a more complicated example by exploiting some of the most important features of this amazing framework. Don’t miss it!
Happy coding!
MY-FIRST-PROJECT 