Nativescript is a framework that allows building native iOS and Android apps using JavaScript and CSS. It uses a single JavaScript code base and allows reusing existing JS and CSS skills. The runtime allows running the apps natively on each platform. Popular IDEs include Visual Studio Code and Visual Studio. Angular support is available. CSS support includes component-level, application-wide, and inline styles. Debugging can be done via the CLI or in Visual Studio Code.

1. 04.10.2016
Yusuf Koraman - Software Architecture
NATIVESCRIPT

2. • 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

3. Native / Hybrid / Web

4. . A runtime for building and running native iOS,
Android, and (soon) Windows Phone apps
with asingle, JavaScript code base
What’s Nativescript ?

5. . Use existing JS and CSS ,xml / html skils
. ES6 &Typescript
.
Restricted Css Support.
. First public beta Released @ 5 March 2015
.
Release v1.0 @May 2015
.
Created &
Supported by Telerik.
What’s Nativescript?

6. .
Learning Curve is Low.
.Two way binding.
.
Angular2 Support.
. Fullyopensource
What’s Nativescript?

7. What’s Nativescript?
-Git-
https://github.com/NativeScript

8. What’s Nativescript?
-Modules-

9. . 0 days support for new features !
.I
sactually native
. No Mac required to
build for iOS
What’s Nativescript ?

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

11. Nativescript Runtime

12. Nativescript Runtime

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

14. IDE

15. IDE

16. .
npmi -g nativescript
. tns create my-app-name –ng
.
tnsplatform addios/android
. tns run ios/android –emulator
.
tnslivesync ios/android --emulator –watch
.
tnslivesync android/ios –watch
. Tns run ios/android (Deploy code to connected
device)
Popular CLI Commands

17. Nativescript loves Angular2…
=

18. Nativescript loves Angular2…

19. Nativescript loves Angular2…

20. Components & Layouts
Absolute Dock Grid Stack Wrap

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

22. .
Typeselector :
. 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

23. CSS Support

25. .
With CLI;
. tns debug android
. tns debug ios
Debugging

26. .
Debugging With Visual Studio Code
Debugging

27. Debugging

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

29. Google Trends

30. Google Trends

31. Questions