Native script overview

Agenda
• Overview of Native Script
• Pre-Requisites for Native Script
• Native Script App Folders
• Basic Commands of Native Script
• Native Script Controls
• Demo LiveSync and HMR
• Demo using Native Script –Play Ground
• Demo using Visual Studio Code

My Intro
• Baskar Rao
• Senior .Net Consultant with Compunnel Software Group.
• @baskarmib
• https://www.linkedin.com/in/baskarrao-dandlamudi
• baskarrao.dandlamudi@outlook.com
• www.compunnel.com
• https://github.com/baskar3078/NativeScriptSamples

Native Script - Overview
• Native Script is free open source framework
for building native IOS and Android Apps.
• Build Cross Platform mobile apps using single
code base.
• Develop Mobile Apps using JavaScript ,
Angular , Typescript and Vue

Why Native Script
• Web Developers with knowledge of HTML,
CSS and JavaScript can use the same to
develop rich native mobile applications.
• Easily develop apps using existing plugins
from npm [Node], Gradle [Android] and IOS
Plugins.
• Easy to learn and develop apps using pre-
defined templates.

Pre-Requisites of Native Script
• Prior Knowledge of HTML, CSS and any one
of scripting language JavaScript , Angular,
Typescript or Vue
• Node.js Server, Command Line Terminal and
Preferred Text IDE Editor
• Android Studio, Android SDK and Android
Emulator, Java SDK

Native Script – App Structure

Native Script App Structure
• Any Native Script app contains the below
folders
• Root – Project Name
• App Folder
• Node_Modules
• Package.Json
• Platforms

App Structure
• App Folder
This folder contains all the development resources like forms, js files
• Node_Modules
This folder contains application npm module dependencies. The tns-core modules folder contains Native
Script related javascript modules which can be used to develop features in the application like http calls,
access files etc.
• Package.Json
Details of application and the version of native script used and other npm modules used in the application.
• Platforms
This folder contains platform-specific code which Native Script needs to build IOS or Android Apps.
This is mostly generated code by Native Script CLI.

App Structure - Contd
• App_Resources
This folder contains platform specific resources.
• Shared
This folder contains files that needs to be shared across views
In app.
• Views
This folder contains the code to build apps views. Each view is made
Up of XML File, a Javascript file and optional css file.
• App.css
File contains global styles used in the app.
• App.Js
This file sets up applications starting module and initializes the app.

Native Script CLI Basic Commands
• tns create appname --template template name
• This creates an app based on the provided template name.
• Hello world template is used when no template flag is provided
• tns platform add android
• This creates the android specific platform folder.
• tns platform add ios
• This creates the IOS specific platform folder.

• tns build android
• This command converts code from app folder to android platform.
• tns build ios
• This command converts code from app folder to ios platform
• tns run android --emulator
• This command builds and runs the app in android emulator
• tns run ios
• This command builds and runs the app in IOS device or emulator
IOS specific commands cannot be executed in Windows OS.

• tns plugin add “pluginname or path to pluginname”
• This command is used to add nativescript plugin to application.
• tns prepare android
• This command is used to update android platform folder with changes from app folder.
• tns prepare ios
• This command is used to update IOS platform folder with changes from app folder
• tns doctor
• This command is used to verify if all required components are setup in development machine.

• tns test init
• This command is used to initialize testing folder.
• tns test platform
• This command is used to run tests against the selected platform.
• tns debug platform
• This command is used to debug Nativescript apps using chrome dev
tools

What makes a Native Script View
• Native Script View is comprised of three files.
-- ViewName.xml
-- ViewName.css
-- ViewName.js
• Xml file is used to design the screen layout and screen controls.
• Css file is used to mention css class specific to the view.
• Js file acts as the code behind file similar to aspx.cs for an aspx page.

Native Script View Models
• Native Script View Models are used to enable two way data flow between model and view
• Native Script uses the observable module to facilitate the binding between view and model
var observableModule = require("data/observable");
• The properties defined in view model can be accessed in view using the “{{ propertyname }}” syntax
<TextField id="email" text="{{ email }}" keyboardType="email" autocorrect="false" autocapitalizationType="none" />

Native Script Basic Controls
HTML Control Native Script Control
<div> LayOut – Stack Layout, Grid LayOut, Wrap
LayOut, FlexBox Layout, Dock Layout
<input type="button" value=“Sign In"
onclick=“signIn()">
<Button text=“Sign In" tap="signIn"/>
<label>Click me </label> <Label text="{{ name }}" />
<img src="mdn-logo-sm.png" alt="MDN"> <Image src="res://logo" ></Image>
<input id="email" type="email"> <TextField id="email" text="{{ email }}"
keyboardType="email" autocorrect="false“
autocapitalizationType="none" />

Image

<Image src="res://logo_white_bg" stretch="none" class="img-rounded p-l-15 p-r-15 p-t-
15"></Image>

<Image src="~/images/logo.png" stretch="none" class="img-rounded p-l-15 p-r-15 p-t-
15"></Image>

<Image src="https://docs.nativescript.org/img/NativeScript_logo.png" stretch="none"
class="img-rounded p-l-15 p-r-15 p-t-15"></Image>

Stack Layout
<StackLayout class="layoutBackgroundImageFromFolder">
<Button text="About" tap="loadAbout" />
<Button text="Schedule" tap="loadSchedule"/>
</StackLayout>
Stack Layout can be used to stack the controls vertical or horizontal similar to <div>.

You guys are Awesome!!!
https://speakerdeck.com/reverentgeek

Native Script Vue Basics
• Installation Requirements
• Node Js.
• Vue CLI
• NativeScript Vue CLI
• Vue Dev Tools
• Vuex for State Management
• No Support for Vue Router
• No Support for Vue Testing – Can use Appium to test.

Native Script Vue Basics
• Single Page Components
• Native Script supports Single Page Components of Vue.
• Component Structure
• template.
• script section
• style section

Dev Tools
• Visual Studio Code
Install NativeScript PlugIn
Create a native script app using tns create app command.
Navigate to the app folder.
Enter code . Command .
• Chrome Developer Tools
Chrome Developer Tools can also be used to
debug NativeScript Applications.

Dev Tools
• Native Script Play Ground
Native Script Play Ground is a browser based platform to develop and preview mobile applications

Dev Tools
• Native Script Side Kick
Can be used to develop applications with pre-defined starter templates
Perform cloud or local builds and deploy to test devices
Helps to develop IOS Applications on Windows O/S

Walkthrough
• Demo of an existing app using Play Ground
• Demo live sync feature
• Demo HMR using Visual Studio Code

• Check out the session by Lee Brandt at 2 PM in Main Auditorium.
• https://twitter.com/leebrandt
•A Developers Guide to Docker
Interested to Explore Docker

Further Resources
• Native Script - Documentation
• Native Script eBook is free book by @brosteins available for download
• Native Script Blog
• Native Script Code Snippets
• Native Script Playground - Browser based development tool
• Native Script Sidekick – Useful for developing IOS apps on Windows Machine
• Native Script Vue Documentation

Questions
https://www.linkedin.com/in/baskarrao-dandlamudi
baskarrao.dandlamudi@outlook.com
https://baskarrao.wordpress.com/
Thanks to Columbus Code Camp Team for opportunity. Please share your feedback at
https://docs.google.com/forms/d/11fwzfz7nqFnBm1LFZpYlZmMq0dO6HXDl3yzhU0egIDU

Native script overview

More Related Content

What's hot (20)

Similar to Native script overview (20)

More from Baskar rao Dsn (8)

Recently uploaded (20)

Native script overview