PUG Challenge 2016 - The nativescript pug app challenge

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

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

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

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

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

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

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

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

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

JavaScript runtime
Android OS API

JavaScript runtime
Android OS API
android
Android OS API
metadata
C++

JavaScript runtime
Android OS API
C++
TimeJNI
Proxy
time

Modules / Plugins
• Modules abstract platform specifics:

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

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

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)

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/

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

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

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

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

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

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

ListView
Sponsortype
Sponsor
Header

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

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

Floorplan
• Pinch
• Pan
• Surprisingly easy

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

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

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

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

PUG Challenge 2016 - The nativescript pug app challenge

Recommended

More Related Content

What's hot (20)

Viewers also liked (10)

Similar to PUG Challenge 2016 - The nativescript pug app challenge (20)

Recently uploaded (20)

PUG Challenge 2016 - The nativescript pug app challenge