Introduction to NativeScript - BuildTruly Native Apps using JavaScript
-
Upload
lohith-gn -
Category
Technology
-
view
725 -
download
2
Transcript of Introduction to NativeScript - BuildTruly Native Apps using JavaScript
![Page 1: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/1.jpg)
Introducing NativeScriptLohith G N
![Page 2: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/2.jpg)
About Me
• Lohith G N
• Tech Evangelist
• Microsoft MVP
• @kashyapa
• www.Telerik.com
• www.telerikhelper.net
• www.kashyapas.com
![Page 3: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/3.jpg)
You are a hybrid app developer
and
want to create truly native apps?
![Page 4: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/4.jpg)
You are a native app developer
But
Want to expand scope to Platforms
![Page 5: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/5.jpg)
You are a Web Developer
and
Want to use your existing skills for Mobile Development
![Page 6: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/6.jpg)
![Page 7: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/7.jpg)
What is NativeScript?
A runtime for building and running native iOS,
Android, and Windows Phone apps with a single,
JavaScript code base
![Page 8: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/8.jpg)
• Bridge
![Page 9: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/9.jpg)
• No DOM
• No cross compilation
!=
!=
![Page 10: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/10.jpg)
Why NativeScript ?
• Its Open Source• Free of Charge
• Available to anyone on GitHub (https://github.com/NativeScript/)
• Easy• Code with JavaScript, Style with CSS
• Create True Native Experience
• Powerful• X-Platform UI Abstractions
• Shared Busines Logic & Data Models
• Third Party Native Libraries
![Page 11: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/11.jpg)
100 % Access to Native Platform API
![Page 12: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/12.jpg)
Standards Based – ECMAScript5 + JS + CSS
![Page 13: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/13.jpg)
100% Shared Code
![Page 14: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/14.jpg)
![Page 15: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/15.jpg)
How does it Work ?
![Page 16: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/16.jpg)
![Page 17: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/17.jpg)
TNS file module
![Page 18: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/18.jpg)
HTTP module example
![Page 19: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/19.jpg)
How to Get Started ?
![Page 20: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/20.jpg)
Two ways to use NativeScript
1)
2)
![Page 21: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/21.jpg)
• Backend-as-a-service• Push notifications, cloud data, file storage, and more
• Analytics
• AppBuilder• Cloud builds (build iOS apps on Windows, Windows Phone apps on a Mac)
• NativeScript debugging and tooling
• Automated app testing
• And more!
http://telerik.com/platform
![Page 22: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/22.jpg)
NativeScript CLI
• Free and open source
• https://github.com/nativescript/nativescript-cli
![Page 23: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/23.jpg)
NativeScript CLI requirements
• https://github.com/nativescript/nativescript-
cli#system-requirements
• Xcode, Xcode CLI tools, iOS SDK
• ios-sim npm package
• JDK, Apache Ant, Android SDK
![Page 24: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/24.jpg)
Starting a new project
![Page 25: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/25.jpg)
Running on iOS
![Page 26: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/26.jpg)
Running on Android
![Page 27: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/27.jpg)
![Page 28: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/28.jpg)
app.js
![Page 29: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/29.jpg)
Pages
• XML markup structure
• Elements (e.g. <Page>, <Label>) are TNS modules
![Page 30: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/30.jpg)
Data binding
![Page 31: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/31.jpg)
Data binding improved
![Page 32: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/32.jpg)
CSS
![Page 33: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/33.jpg)
Demo time!
![Page 34: Introduction to NativeScript - BuildTruly Native Apps using JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022051400/55a940221a28ab804e8b45f0/html5/thumbnails/34.jpg)
Questions?