Nativescript

04.10.2016
Yusuf 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

 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.

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

https://github.com/NativeScript
-Git-

-Modules-

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

 Min IOS Version
iOS 7 or greater and
xcode version greater than 6
 Min Android Version
Api 17(Version 4.2)
IOS & Android Versions

 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

 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…

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

 With CLI;
 tns debug android
 tns debug ios
Debugging

 Debugging With Visual Studio Code
Debugging

https://www.nativescript.org/showcases
Showcases

Nativescript

More Related Content

What's hot (18)

Viewers also liked (12)

Similar to Nativescript (20)

More from Software Infrastructure (20)

Recently uploaded (20)

Nativescript

Editor's Notes