The document summarizes a presentation about transforming apps to use NativeScript (N). It discusses: - NativeScript, a framework for building cross-platform native apps using JavaScript and allowing access to native APIs. - Choices in using NativeScript including TypeScript for stronger typing, Visual Studio Code as an IDE, and emulators for testing. - Examples created with NativeScript including a ListView, push notifications, a floorplan viewer, and local storage. - Considerations in using NativeScript like searching for modules, eventually needing iOS/Android knowledge, investing time in open source, and testing on devices.

1. The Nativescript PUG
app Challenge
Transformation to single technology
EMEA PUG Challenge, 20-11-2014
Bronco Oostermeyer

2. Who are we?
Bronco Oostermeyer
OpenEdge since 1996, everything around Progress and more
Progress, UNIT4, WALVIS

3. Who are we?
Roel Lakenvelt
OpenEdge since 1989, version 5
VCD Software, Ceasar, Progress, Yonder and Flusso
Native iOS, Angular and many other

4. Who are we?
Flusso
• One of biggest OpenEdge consultancy firms in NL
• Progress technologies,
• Open Source (Java & ServiceMix, etc),
• Web Apps (Angular2, various app platforms)
• OutSystems

5. Agenda
-What is {N}
-Choices
-Examples from the field

6. What is NativeScript?
• Framework for building cross-platform native apps
• iOS & Android (Windows coming soon, for a while now)
• 1 code base for both platforms
• No DOM
• JavaScript
• No Objective C, Swift & Java
• No Cross Compiler (like Xamarin)
• Open source

7. What is NativeScript? {N}
• Maintained by Telerik
• 1.0 released may 2015
• A year in UI development seems a light year nowadays
• Current version 2.3
• Projected 100k+ npm downloads in 2016
• iOS 8+, Android API level 17, android 4.2
• Set of node.js CLI tools for various tasks

8. Why NativeScript?
• Native apps
• Javascript
• Consolidation of technology stack
• Direct access native API’s(*)
• No waiting for version X.Y for access newest API
• XML style markup, CSS-like styling
• Markup sort of XAML,
• No real CSS because no DOM

9. Declaring the UI

10. UI to Code
page.xml
page.js

11. JavaScript runtime (JavaScriptCore)
Android OS API (iOS API)
Architectural Overview
var time = new android.text.format.Time();

12. JavaScript runtime
var time = new android.text.format.Time();
Android OS API

13. JavaScript runtime
var time = new android.text.format.Time();
Android OS API
android
Android OS API
metadata
C++

14. JavaScript runtime
var time = new android.text.format.Time();
Android OS API
C++
TimeJNI
Proxy
time

15. Modules / Plugins
• Modules abstract platform specifics:

16. Modules
• OK, one more
var http = require(“http”);
http.getJSON(“http://echo.jsontest.com/hello/world”).then(
result => { console.log(JSON.stringify(result)); }
);

17. Modules / Plugins
var firebase = require(“nativescript-plugin-firebase”);
firebase.init ({
persist: false
}).then( …
);
• Modules abstract platform specifics:

18. What do you need?
• node.js
• npm 3.x on windows (solves path problems)
• TypeScript (recommended)
• Emulator
• IDE (notepad won’t do)
• Maybe a framework (Angular2)

19. Why TypeScript?

20. Choices - TypeScript
• JavaScript (ES6) superset, Strongly typed
• Removes rough edges from JS
• Anders Hejlsberg (Turbo Pascal, Delphi, C#...)
• “JavaScript done right” from Microsoft
• Transpiler (emits JS)
• Build with tooling in mind
http://www.typescriptlang.org/

21. Choices - Visual Studio Code
• Sublime like text editor
• Plugins
• TypeScript, NativeScript
• Debugger (attachable)
• Windows, MacOS & Linux
• Electron based
• Free!
https://code.visualstudio.com/

22. Choices – development environment
• We chose the CLI tools & emulators
• npm install –g nativescript
• MacOS needed
• Alternative is Telerik Platform
• We did it the Open Source way
• TP gives “companion app” possibilities

23. Choices - Emulator
• Genymotion (android)
• Seems to be one of the fastest
• Visual Studio emulator Android
• iOS emulator for XCode

24. Experience
• Demo
• Agenda
• ListView
• Push Notifications
• Floorplan
• Local storage
• IOS 10

25. Agenda view
ScrollView (days)
ScrollView (timeslots)
ScrollView
(rooms)
ScrollView horizontal
ScrollView vertical
AbsoluteLayout
GridLayout

26. ListView
Sectioned ListView with sticky headers
• ListView (core)
• RadListView (nativescript-telerik-ui)
• nativescript-sectioned-list-view
• Create own/change existing module
• Fake headers and sections

27. ListView
Sponsortype
Sponsor
Header

28. Push Notifications
APNS
GCM
WNS
1. Registration
2.DeviceID
Own server
A. Message
B. Notification
3. DeviceID
General
Push
Notification
Server
UI

29. Push Notifications
• Homebrewn Apache ServiceMix based solution
• Telerik’s Everlive  no Typescript typings at that time
• Firebase
• Successor to Google Cloud Messaging (GCM)
• nativescript-plugin-firebase from Eddy Verbruggen
• Issues
• firebase.init() before application.start under iOS
• Install Google Play Services on Genymotion
• Push notifications will not work in the iOS emulator

30. Floorplan
• Pinch
• Pan
• Surprisingly easy

31. Floorplan

32. Local storage
• SQLite for text
• nativescript-sqlite
• Images as static files
• knownFolders.currentApp();
• knownFolders.documents();
• Tools
• Android device monitor
• Terminal on macOS

33. iOS 10
• Released on 13 September
• New Xcode version and new SDK’s
NSFileManager.defaultManager is not a function
• Many class methods changed into class properties
var fileManager = NSFileManager.defaultManager();
var fileManager = NSFileManager.defaultManager;
• Nativescript 2.3 on 20 September (core modules)
• nativescript-telerik-ui on 20 september
• nativescript-plugin-firebase on 21 September
• nativescript-sqlite this week

34. Conclusions
• Great way to build native(!) apps
• Search for modules
• https://plugins.telerik.com/nativescript
• http://nativescript.rocks/all.php
• Sooner or later iOS or Android knowledge needed
• Open Source: be prepared to invest time
• Read the manuals
• Always test on all (physical) devices
• One more thing, still waiting for Windows support

35. Questions?

36. This presentation @

37. Links
• {N} runtime explained: http://developer.telerik.com/featured/nativescript-works/

38. follow us on: