Slidenotes of internal Nativescript training by SMG

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 a single, JavaScript code base
What’s Nativescript ?

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

6.  Learning Curve is Low.
 Two way binding.
 Angular2 Support.
 Fully open source
What’s Nativescript ?

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

8. What’s Nativescript ?
-Modules-

9.  0 days support for new features !
 Is actually 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.  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

17. =
Nativescript loves Angular2…

18. Nativescript loves Angular2…

19. Nativescript loves Angular2…

20. Absolute Dock Grid Stack Wrap
Components & Layouts

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

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