pug challenge 2016 - the nativescript pug app challenge
TRANSCRIPT
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
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
var time = new android.text.format.Time();
Android OS API
android
Android OS API
metadataC++
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 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
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
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
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
Links• {N} runtime explained: http://developer.telerik.com/featured/nativescript-works/