Introducing Native Script Pavel Kolev Software Developer Telerik

Introducing Native. Script [Pavel Kolev Software Developer @ Telerik: a Progress company]

What is Native. Script? A runtime for building and running native i. OS, Android, and (soon) Windows Phone apps with a single, Java. Script code base •

What is Native. Script? Framework for building truly native apps • Develop i. OS, Android and Windows Phone Apps with a single code base • Use existing JS and CSS skills • Latest ES and TS support •

About Native. Script Started 2 years ago • v 1. 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 i. OS • Live. Sync support • Full framework is open source and not just parts of it • Java. Script & CSS vs. NET •

!= != No DOM • • != Direct access to native APIs in JS • No cross compilation

Why Native. Script? Skills reuse • • Standards-based Java. Script, CSS, optionally Type. Script Code reuse • • npm modules, 3 rd-party i. OS and Android libraries Easily use native APIs • No wrappers to access native APIs • Use native UI elements • • Open source!

Contribute! (nativescript. org/contribute)

Native. Script Android example Output:

Native. Script i. OS example

• Runs on V 8 • Runs on Java. Script. Core

Native. Script modules Native. Script-provided modules that provide crossplatform functionality. • There are dozens of them and they’re easy to write yourself. • Native. Script modules follow Node module’s conventions (Common. JS). •

Native. Script 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="{{ image. Source }}" width="72" height="72"/> <Label text="{{ item. Title }}" text. Wrap="true" css. Class="title" /> <Button text="{{ authored. By }}“ width="150“ css. Class="author"/>

Shared UI Android i. OS

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 Native. Script 1) 2)

http: //telerik. com/platform • Backend-as-a-service • Push notifications, cloud data, file storage, etc Analytics • App. Builder • • Cloud builds (build i. OS apps on Windows, Windows Phone apps on a Mac) • Native. Script debugging and tooling • Screen Builder (app scaffolding)

Telerik App. Builder IDE Options In-Browser Client • Visual Studio Extension • Sublime Text Package • Command-Line Interface •

Native. Script CLI Free and open source • https: //github. com/nativescript-cli • Use CLI with your preferred IDEs (have to install platform specific SDKs) •

Native. Script CLI requirements https: //github. com/nativescriptcli#system-requirements • • JDK, Apache Ant, Android SDK • Xcode, Xcode CLI tools, i. OS SDK

Starting a new project

Running on i. OS

Running on Android

app. js

Pages XML markup structure • Elements (e. g. <Page>, <Label>) are Native. Script modules •

Custom XML Components http: //docs. nativescript. org/ui-with-xml#custom-components

Data binding

Data binding improved

CSS

Follow Native. Script nativescript. org • @nativescript • nativescript. org/blog • @Pavel. Kolev 7 •