PUG Challenge 2016 - The nativescript pug app challenge

The Nativescript PUG app ChallengeTransformation to single technology

EMEA PUG Challenge, 20-11-2014Bronco Oostermeyer

Who are we?Bronco Oostermeyer

OpenEdge since 1996, everything around Progress and moreProgress, UNIT4, WALVIS

Who are we?Roel Lakenvelt

OpenEdge since 1989, version 5VCD 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

Declaring the UI

UI to Codepage.xml

page.js

JavaScript runtime (JavaScriptCore)

Android OS API (iOS API)

Architectural Overview

var time = new android.text.format.Time();

JavaScript runtime

var time = new android.text.format.Time();

Android OS API

JavaScript runtime

var time = new android.text.format.Time();

Android OS API

android

Android OS API

metadataC++

JavaScript runtime

var time = new android.text.format.Time();

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)

Why TypeScript?

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 mindhttp://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 viewScrollView (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

ListViewSponsortype

Sponsor

Header

Push Notifications

APNSGCMWNS

1. Registration

2.DeviceID

Own serverA. Message

B. Notification

3. DeviceID

GeneralPush

NotificationServer

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

Floorplan

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 propertiesvar 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

Questions?

This presentation @

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

follow us on: