PUG Challenge 2016 - The nativescript pug app challenge
- 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
- 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
- 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?
- 37. Links • {N} runtime explained: http://developer.telerik.com/featured/nativescript-works/
- 38. follow us on: