Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Nativescript with angular 2

Wird geladen in …3

Hier ansehen

1 von 54 Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (15)


Ähnlich wie Nativescript with angular 2 (20)

Weitere von Christoffer Noring (20)


Aktuellste (20)

Nativescript with angular 2

  1. 1. Nativescript for Angular2 Chris Noring Google Developer Expert Front end Developer at OVO Energy
  2. 2. About me chris_noring
  3. 3. What’s out there for building apps?
  4. 4. App store and market place = plan for monetizing + It also has Built in features like camera, gps, push notifications + Has access to Native swift, objective-c java - Usually needs one dev team per platform $$$
  5. 5. Web apps One team, only needs to know javascript + css + Cost less - Limited access to hardware - Browser support, increase maintenance and dev time - Monetizing? Will cost time and money to make it work well on all browsers also conti - Doesn’t feel like native, its a compromise + Great for simple scenarios like a responsive version of t geoposition
  6. 6. Hybrid frameworks - You need to learn its api rendering in web views, not truly native UI + It is possible to use an App Store - Limited access to hardware but the support is getting better and better WebRTC* WebGL WebAudio IndexedDB Web Components* Utilize Hardware Acceleratio Remote Debugging* - More and more cool features are being supported just a regular mobile optimized website, written in CSS, HTML and JavaScript, that is display Ionic Cordova Phonegap Titanium React Native
  7. 7. Progressive web apps + Caches Is this the future? - Monetizing? + Feels like an app - Not great support on Safari yet + Progressive enhancement better features with better browser and better broadband + Push notifications
  8. 8. So how does nativescript fit in?
  9. 9. It’s NOT web although javascript, so no DOM It targets actual apis Its supports hardware due to being actual native BUT you can use your javascript and css skills AND you can use your native developers because THEY KNOW THE API It’s NOT either javascript or native folks, ITS BOTH
  10. 10. Nativescript killer features You can style native ui with css You can use javascript OR angular 2 with typescript free and open source framework for building native iOS and Android apps using JavaScript and C You can access native apis with javascript it’s free It has hardware accelerated animations You can monetise cause you can use App Store and markets It’s pluggable, you can use and write your own plugins
  11. 11. How does it work?
  12. 12. Nativescript runtime uses Javascript virtual machines executed by V8. is JIT compiled and v8 JavaScriptCore Android iOS how does v8 know what android.text.format.Time() is? var time = new android.text.format.Time(); this is javascript
  13. 13. NativeScript uses it to inject APIs that let you access native code. nativescript inject android/ios object to v8 or Javascript Core There are APIs on v8 that lets you affect the global scope How to know what to inject? JavaScriptCore has a similar mechanism that makes the same te How to interpret the js code?
  14. 14. 1) NativeScript uses reflection to build the list of the APIs that are av invokes a callback that native script can intercept, in that interceptio 2) android.text.format.Time() javascript code corresponding c++ callback invokes JNI-bridge to talk to native API Android invokes native API directly iOS
  15. 15. In conclusion Nativescript investigates what to inject and injects metadat A callback is connected to each executed javascript that na C++ code on Android targets JNI ( c++ becomes java ) that C++ on iOS talks to native API directly And presto
  16. 16. Nativescript consists of modules
  17. 17. Modules camera.android.js camera.ios.js camera-common.js selects the correct one at runtime require(‘camera’) camera node_modules/ tns-core-modules module module camera … usage everything is made up of modules
  18. 18. How easy is it to get started?
  19. 19. Preparing your environment npm install nativescript -g Windows ecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https Mac ruby -e "$(curl -fsSL https://www.nativescript.org/setup/mac)" tns doctor verify your installation
  20. 20. Continued.. For android install genymotion https://www.genymotion.com/ set path to android SDK
  21. 21. First app scaffold or tns create my-app-name --ng creates angular2 app git clone https://github.com/NativeScript/sample-Groceries.git angular 2 app for nativescript Scaffolding saves a lot of time
  22. 22. What is the dev experience like?
  23. 23. We got a plugin for vs code so we can set break points We can use hot reload, so code is recompiled and rede We can write and run unit tests
  24. 24. Hot reload tns livesync platform —watch 1) compiles app 2) deploys to emulator/ device repeats 1) + 2) on changes
  25. 25. Debug tns debug platform starts platform specific debugger with option —debug-brk —debug-brk —start —stop —emulator
  26. 26. set breakpoint perform action Build and start the application Start Node Inspector Launch Chrome browser tns debug platform
  27. 27. Remote chromium debugger for Eclipse https://www.nativescript.org/nativescript-for-visual-studio-code Plugin for vs code ext install nativescript
  28. 28. How hard is it to accomplish something?
  29. 29. So we can be productive with all these components we code in angular 2 we can easily extend with plugins we can write our own plugins we got, ui components, we got layouts,http, css animations, gestures, hardware and more..
  30. 30. Controls with ng2 <Label class="lbl" [text]="title"></Label> <Button (tap)="click()" text="Save new hero"></Button> <TextField [(ngModel)]="status"></TextField> <ListView [items]="todos" (itemTap)="tapped($event)" > <template let-item="item" let-odd="odd" let-even="even"> </template> </ListView> one-way binding event binding two-way binding So angular 2 with some new components
  31. 31. File system
  32. 32. Whats possible? Create, Read, Update, Delete on files and folders import * as fs from "file-system"; var documents = fs.knownFolders.documents(); var myFile = documents.getFile("Test_Write.txt"); myFile.writeText("Something") .then(function () { }, err {}); myFile.readText() .then(function (content) { }, err {}); do something with retrieved content
  33. 33. File demo
  34. 34. Layout
  35. 35. AbsoluteLayout DockLayout GridLayout StackLayout WrapLayout Components ends up exactly where you want them x,y Arranges children to outer edges, last child takes up remaining space columns and rows Horizontally or vertically follows orientation til space is filled then wraps them into new column/row
  36. 36. Navigation
  37. 37. Navigation Navigation is angular 2 router if you know how that works then you know how to build the app
  38. 38. CSS
  39. 39. CSS Application-wide css, app.css Component-specific css @Component({ styleUrls : [‘pages/examples/list- demo.component.css'] }) @Component({ style : ‘’ }) https://docs.nativescript.org/angular/ui/styling.html Inline css <Button text="inline style" style="background-color: green;"></Button> <Button backgroundColor=“lightgray" >
  40. 40. Plugins
  41. 41. What is a native script plugin? plugin file.android.ts file.ios.ts package.json lookup iOS and java implementation of the same thing [NSDate date] new Date()).toString() and add to respective file.platform.ts write js-ified code corresponding to native api NsDate.date() (new java.util.Date()).toString() Is an npm package, published or not, that exposes a native API
  42. 42. http://developer.telerik.com/featured/creating-nativescript-plugins-in-types Great article to get started http://plugins.telerik.com/nativescript Telerik verified marketplace https://docs.nativescript.org/plugins/plugins More details tns plugin add <Plugin> tns plugin remove <Plugin> Add/Remove https://www.thepolyglotdeveloper.com/2016/07/create-native-ios-and-andr
  43. 43. Hardware
  44. 44. Camera import * as cameraModule from 'camera'; cameraModule.takePicture({ width: 300, height: 300, keepAspectRatio: true }) .then((picture) => { console.log('picture taken'); this.source = picture; }) <Image [src]="source" stretch="none" horizontalAlignment="center" > </Image> take picture import a reference Display image in control
  45. 45. Camera demo
  46. 46. A word about images file system <Image src="~/images/logo.png" stretch ="none" /> relative to the app folder url <Image src="https://www.google.com/images/errors/logo_sm_2.png" /> resource <Image src="res://logo" stretch ="none" /> App_Resources Android iOS Should be placed in resp platform
  47. 47. Geoposition
  48. 48. tns plugin add nativescript-geolocation Install the plugin Check if its enabled, then ask for permission import * as geolocation from "nativescript-geolocation"; if (!geolocation.isEnabled()) { geolocation.enableLocationRequest(); } So much for enabling, how to use?
  49. 49. geolocation.getCurrentLocation({ desiredAccuracy: 3, updateDistance: 10, maximumAge: 20000, timeout: 20000}) .then(function(loc) { if (loc) { alert("Current location is: " + loc); console.log("Current location is: " + loc); } }, function(e){ console.log("Error: " + e.message); }); get location, returns a promise And just use a plugin to show the location tns plugin add nativescript-google-sdk Use an actual device to test this one Once enabled, ask for location
  50. 50. Animation
  51. 51. ctrl.animate({ opacity: 0, backgroundColor: new Color("Blue"), translate: { x: 200, y: 0 }, scale: { x: 2, y: 2 }, rotate: 180, duration: 800, delay: 20, iterations: 1, curve: enums.AnimationCurve.easeIn }) .then(() => { console.log('animation done'); this.ypos += 20; }) We can Rotate, scale, change opacity .. What can we do? translate rotate repeat animation when done
  52. 52. Animation demo
  53. 53. Nativescript let’s you code an actual native app using the API you know using javascript Just remember this..
  54. 54. Thank you for listening