Introducing NativeScript
[Pavel Kolev
Software Developer @ Telerik: a Progress company]
What is NativeScript?
•
A runtime for building and running native iOS,
Android, and (soon) Windows Phone apps with a
single, JavaScript code base
What is NativeScript?
•
Framework for building truly native apps
• Develop iOS, Android and Windows Phone Apps
with a single code base
• Use existing JS and CSS skills
• Latest ES and TS support
About NativeScript
•
Started 2 years ago
• v1.0 in May (current version 1.2)
• Fully open source
But Cordova(Phonegap)
•
•
•
•
•
No browser
Direct access to
native platform APIs
Native UX not simulated
0 days support for new features
Is actually native
But Xamarin
•
No Mac required to build for iOS
• LiveSync support
• Full framework is open source and not
just parts of it
• JavaScript & CSS vs .NET
!=
•
!=
No DOM
•
!=
•
Direct access to
native APIs in JS
No cross compilation
Why NativeScript?
•
Skills reuse
•
•
Code reuse
•
•
npm modules, 3rd-party iOS and Android libraries
Easily use native APIs
•
•
•
Standards-based JavaScript, CSS, optionally TypeScript
No wrappers to access native APIs
Use native UI elements
Open source!
Contribute!
(nativescript.org/contribute)
NativeScript Android example
Output:
NativeScript iOS example
•
Runs on V8
•
Runs on JavaScriptCore
NativeScript modules
•
NativeScript-provided modules that provide crossplatform functionality.
• There are dozens of them and they’re easy to write
yourself.
• NativeScript modules follow Node module’s
conventions (CommonJS).
NativeScript file module
HTTP module example
Community modules
https://www.npmjs.com/search?q=nativescript
What about the UI
•
Use JS or XML
• Simple data-binding
• Use shared or specific UI
• Style with CSS
<Image source="{{ imageSource }}" width="72" height="72"/>
<Label text="{{ itemTitle }}" textWrap="true" cssClass="title" />
<Button text="{{ authoredBy }}“ width="150“ cssClass="author"/>
Shared UI
Android
iOS
Specific UI
Android
WP
Reuse everything
•
Reuse all available JS libraries (that does not require
browser support or other platform)
• Reuse all available native libraries
• Reuse all native UI libraries
• 0 days support for new platforms –
use the latest native platform
changes in the same day they
are released
But how do I turn this into an app?
Two ways to use NativeScript
1)
2)
http://telerik.com/platform
•
Backend-as-a-service
• Push
notifications, cloud data, file storage, etc
•
Analytics
• AppBuilder
• Cloud
builds (build iOS apps on Windows, Windows Phone apps
on a Mac)
• NativeScript debugging and tooling
•
Screen Builder (app scaffolding)
• And more!
Telerik AppBuilder IDE Options
•
In-Browser Client
• Visual Studio Extension
• Sublime Text Package
• Command-Line Interface
NativeScript CLI
•
Free and open source
• https://github.com/nativescript/nativescript-cli
• Use CLI with your preferred IDEs (have to install all
platform specific SDKs)
NativeScript CLI requirements
•
https://github.com/nativescript/nativescriptcli#system-requirements
• JDK, Apache Ant, Android SDK
• Xcode, Xcode CLI tools, iOS SDK
Starting a new project
Running on iOS
Running on Android
app.js
Pages
•
XML markup structure
• Elements (e.g. <Page>, <Label>) are
NativeScript modules
Custom XML Components
http://docs.nativescript.org/ui-with-xml#custom-components
Data binding
Data binding improved
CSS
Follow NativeScript
•
nativescript.org
• @nativescript
• nativescript.org/blog
• @PavelKolev7