Skip to main content

NativeScript Hello World

NativeScript is an open-source framework that allows you to build native mobile applications using JavaScript, TypeScript, or Angular. It provides a way to write platform-specific code using a single codebase, which means you can create apps for both iOS and Android using the same set of code.

With NativeScript, you can access native platform APIs, UI components, and device features directly from your JavaScript code. This gives you the ability to create high-performance, feature-rich mobile apps that look and feel like native applications.

History​

NativeScript was first introduced by Telerik, a software development company, in 2014. It was later acquired by Progress Software in 2014. Since then, NativeScript has gained popularity among developers due to its ability to create truly native mobile apps using familiar web technologies.

Features​

Some of the key features are:

  1. Native UI: NativeScript allows you to create native user interfaces for iOS and Android using a single codebase. You can use platform-specific UI components and access native APIs directly from your JavaScript code.

  2. Cross-platform: With NativeScript, you can build apps for both iOS and Android using the same codebase. This saves you time and effort compared to developing separate apps for each platform.

  3. Performance: NativeScript apps are known for their high performance. Since the UI components are native, the apps have a native look and feel and respond quickly to user interactions.

  4. Access to Native APIs: NativeScript provides direct access to native APIs, allowing you to leverage all the features and capabilities of the underlying platforms.

  5. Open-source: NativeScript is an open-source framework, which means it has a large and active community of developers contributing to its development. You can find a wealth of resources, libraries, and plugins created by the community to enhance your NativeScript apps.

Hello World Example​

To get started with NativeScript, let's create a simple "Hello World" app. Follow these steps:

Step 1: Installation​

First, make sure you have Node.js installed on your machine. Then, open your command prompt or terminal and run the following command to install the NativeScript CLI:

npm install -g nativescript

Step 2: Create a New Project​

Next, create a new NativeScript project by running the following command:

tns create HelloWorld

This will create a new folder named "HelloWorld" with the basic project structure.

Step 3: Navigate to the Project Directory​

Navigate to the project directory by running the following command:

cd HelloWorld

Step 4: Add Platforms​

Add the platforms you want to target (iOS and/or Android) by running the following commands:

tns platform add ios
tns platform add android

Step 5: Create the User Interface​

Open the "app" folder and locate the "main-page.xml" file. Replace its content with the following code:

<Page>
    <Label text="Hello World!" class="title" />
</Page>

This code creates a simple page with a label displaying the text "Hello World!".

Step 6: Style the User Interface​

Open the "app" folder and locate the "app.css" file. Replace its content with the following code:

.title {
    font-size: 24;
    color: blue;
    text-align: center;
    margin-top: 50;
}

This code styles the label with a font size of 24, blue color, centered alignment, and a top margin of 50 pixels.

Step 7: Run the App​

Finally, run the app on either the iOS or Android emulator by running the following command:

tns run ios   // for iOS
tns run android   // for Android

You should now see the "Hello World!" label displayed in the emulator.

Congratulations! You have successfully created your first NativeScript app.

Comparison with Alternatives​

NativeScript offers several advantages over other cross-platform frameworks like React Native and Flutter. Here are a few points of comparison:

  • Performance: NativeScript apps have native UI components, resulting in better performance compared to hybrid frameworks that use web views.

  • Access to Native APIs: NativeScript provides direct access to native APIs, allowing you to leverage platform-specific features. React Native also provides access to native APIs, but Flutter uses its own set of widgets.

  • Code Sharing: NativeScript allows you to share a significant amount of code between iOS and Android apps, making it easier to maintain and update your codebase. React Native and Flutter also offer code sharing capabilities.

  • Community and Ecosystem: NativeScript has a growing community of developers and a wide range of plugins and libraries available. React Native has a larger community, while Flutter is gaining popularity quickly.

  • Learning Curve: NativeScript uses JavaScript, TypeScript, or Angular, which are widely known languages. React Native uses JavaScript and React, while Flutter uses Dart, which may have a steeper learning curve for some developers.

For more information and official documentation, you can visit the NativeScript website.