04.10.2016Yusuf Koraman - Software Architecture

NATIVESCRIPT

• Web / Hybrid / Native• What’s Nativescript ? • IOS & Android Versions• Nativescript Runtime• IDE• Popular CLI Commands• Nativescript loves Angular2…• Components & Layouts• CSS Support• Demo• Debugging• Showcases• Question

Content

Native / Hybrid / Web

A runtime for building and running native iOS, Android, and (soon) Windows Phone apps with a single, JavaScript code base

What’s Nativescript ?

Use existing JS and CSS ,xml / html skils ES 6 & Typescript Restricted Css Support. First public beta Released @ 5 March 2015 Release v1.0 @May 2015 Created &

Supported by Telerik.

What’s Nativescript ?

Learning Curve is Low. Two way binding. Angular2 Support. Fully open source

What’s Nativescript ?

https://github.com/NativeScript

What’s Nativescript ?-Git-

What’s Nativescript ?-Modules-

0 days support for new features ! Is actually native No Mac required to

build for iOS

What’s Nativescript ?

Min IOS VersioniOS 7 or greater and xcode version greater than 6

Min Android VersionApi 17(Version 4.2)

IOS & Android Versions

Nativescript Runtime

Nativescript Runtime

Visual Studio Code (recommended) Has Nativescript & Angular2 Plugins.

Visual Studio Has telerik plugins & Project templates

Any Text Editor. Because of CLI & Javascript & html/xml

IDE

IDE

IDE

npm i -g nativescript tns create my-app-name –ng tns platform add ios/android tns run ios/android –emulator tns livesync ios/android --emulator –watch tns livesync android/ios –watch Tns run ios/android (Deploy code to connected

device)

Popular CLI Commands

=

Nativescript loves Angular2…

Nativescript loves Angular2…

Nativescript loves Angular2…

Absolute Dock Grid Stack Wrap

Components & Layouts

Application wide CSS Ex: nativeScriptBootstrap(ListTest, null, {"cssFile": "style.css"});

Component base CSS Ex:@Component({ selector: 'list-test', styleUrls: ['style.css'], template: ...

Inline CSS <Button text="inline style" style="background-color: green;"></Button>

CSS Support

Type selector : button { background-color: gray }

Id Selector : #login-button { background-color: blue }

Hierachical selector(CSS Combinators) StackLayout Button { background-color: blue; }

Css on Native components. StackLayout { orientation: horizontal; }

Import External CSS @import { url('http://some-domain.com/your-style.css') }

CSS Support

CSS Support

With CLI; tns debug android tns debug ios

Debugging

Debugging With Visual Studio Code

Debugging

Debugging

https://www.nativescript.org/showcases

Showcases

Google Trends

Google Trends

Questions