Download to read offline
More Related Content
Similar to PUG Challenge 2016 - The nativescript pug app challenge
PUG Challenge 2016 - The nativescript pug app challenge
- 1. The Nativescript PUG appChallenge Transformation to single technology EMEA PUG Challenge, 20-11-2014 Bronco Oostermeyer
- 2. Who are we? BroncoOostermeyer OpenEdge since 1996, everything around Progress and more Progress, UNIT4, WALVIS
- 3. Who are we? RoelLakenvelt 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 -Examplesfrom 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? • Nativeapps • 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.
- 10.
- 11. JavaScript runtime (JavaScriptCore) AndroidOS 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, onemore var http = require(“http”); http.getJSON(“http://echo.jsontest.com/hello/world”).then( result => { console.log(JSON.stringify(result)); } );
- 17. Modules / Plugins varfirebase = require(“nativescript-plugin-firebase”); firebase.init ({ persist: false }).then( … ); • Modules abstract platform specifics:
- 18. What do youneed? • node.js • npm 3.x on windows (solves path problems) • TypeScript (recommended) • Emulator • IDE (notepad won’t do) • Maybe a framework (Angular2)
- 19.
- 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 - VisualStudio Code • Sublime like text editor • Plugins • TypeScript, NativeScript • Debugger (attachable) • Windows, MacOS & Linux • Electron based • Free! https://code.visualstudio.com/
- 22. Choices – developmentenvironment • 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 withsticky headers • ListView (core) • RadListView (nativescript-telerik-ui) • nativescript-sectioned-list-view • Create own/change existing module • Fake headers and sections
- 27.
- 28. Push Notifications APNS GCM WNS 1. Registration 2.DeviceID Ownserver A. Message B. Notification 3. DeviceID General Push Notification Server UI
- 29. Push Notifications • HomebrewnApache 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.
- 32. Local storage • SQLitefor text • nativescript-sqlite • Images as static files • knownFolders.currentApp(); • knownFolders.documents(); • Tools • Android device monitor • Terminal on macOS
- 33. iOS 10 • Releasedon 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 wayto 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.
- 36.
- 37. Links • {N} runtimeexplained: http://developer.telerik.com/featured/nativescript-works/
- 38.