![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.](https://image.slidesharecdn.com/nativescriptoverview-181027171216/85/Native-script-overview-5-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Native script overview (20)
Ad
More from Baskar rao Dsn (8)
Ad
Recently uploaded (20)
Native script overview
- 2. 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
- 3. My Intro • Baskar Rao • Senior .Net Consultant with Compunnel Software Group. • @baskarmib • https://www.linkedin.com/in/baskarrao-dandlamudi • [email protected] • www.compunnel.com • https://github.com/baskar3078/NativeScriptSamples
- 4. 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
- 5. 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.
- 6. 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
- 7. Native Script – App Structure
- 8. Native Script App Structure • Any Native Script app contains the below folders • Root – Project Name • App Folder • Node_Modules • Package.Json • Platforms
- 9. 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.
- 10. 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.
- 11. 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.
- 12. Native Script CLI Basic Commands • 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.
- 13. Native Script CLI Basic Commands • 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.
- 14. Native Script CLI Basic Commands • 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
- 16. 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.
- 17. 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" />
- 18. 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" />
- 19. Native Script Basic Controls Image <!-- Load image from app/App_Resources/<platform> folders--> <Image src="res://logo_white_bg" stretch="none" class="img-rounded p-l-15 p-r-15 p-t- 15"></Image> <!-- Load image from app/images folder --> <Image src="~/images/logo.png" stretch="none" class="img-rounded p-l-15 p-r-15 p-t- 15"></Image> <!-- Load image from url --> <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>
- 20. Native Script Basic Controls 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>.
- 21. You guys are Awesome!!! https://speakerdeck.com/reverentgeek
- 22. 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.
- 23. Native Script Vue Basics • Single Page Components • Native Script supports Single Page Components of Vue. • Component Structure • template. • script section • style section
- 24. Native Script Vue Basics
- 25. Native Script Vue Basics
- 26. Native Script Vue Basics
- 27. Native Script Vue Basics
- 28. 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.
- 29. Dev Tools • Native Script Play Ground Native Script Play Ground is a browser based platform to develop and preview mobile applications
- 30. 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
- 31. Walkthrough • Demo of an existing app using Play Ground • Demo live sync feature • Demo HMR using Visual Studio Code
- 34. Interested in Exploring Vue
- 35. • 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
- 36. 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
- 37. Questions https://www.linkedin.com/in/baskarrao-dandlamudi [email protected] https://baskarrao.wordpress.com/ Thanks to Columbus Code Camp Team for opportunity. Please share your feedback at https://docs.google.com/forms/d/11fwzfz7nqFnBm1LFZpYlZmMq0dO6HXDl3yzhU0egIDU