Downloaded 13 times
![Hybrid matter
“Different platforms have different ways they expect you
to use them that alter the entire experience design”
[Martin Fowler]
The problem with most of these hybrid frameworks is that they rely
heavily on the web view of the device.
Not all web views are equal, application performing unpredictably
on the thousands of devices that exist
Roma
DevFest 2016](https://image.slidesharecdn.com/angular2nativescriptdevfest2016-161024074656/85/Angular2-Native-Script-GDG-DevFest-2016-46-320.jpg)
Uploaded byLuciano Murruni
Angular2 & Native Script GDG DevFest 2016
This document contains a presentation about NativeScript, an open source framework for building and running native iOS, Android, and Windows Phone apps with JavaScript. Some key points covered include: - NativeScript allows writing apps using JavaScript that run natively on devices by using JavaScript runtimes like V8 and JavaScriptCore. - It provides access to full native APIs through JavaScript without limitations. - The architecture works by generating metadata for native APIs and using proxies so JavaScript can access native objects. - Getting started requires Node.js, Android/Xcode setup, and the NativeScript CLI which is used to create, build, and run apps on devices/emulators. - NativeScript apps have XML-based user interfaces
More Related Content
Similar to Angular2 & Native Script GDG DevFest 2016
![[2015/2016] Apache Cordova](https://cdn.slidesharecdn.com/ss_thumbnails/05cordova-160401161537-thumbnail.jpg?width=640&height=640&fit=bounds)
Angular2 & Native Script GDG DevFest 2016
- 1.
- 2. Code Once Run Everywhere AntoninoOrlando Luciano Murruni e il Team del GDG Roma L-Ab
- 3. Roma DevFest 2016 Antonino Orlando LucianoMurruni it.linkedin.com/in/lucianomurruni luciano.murruni@gmail.com twitter.com/jimilucio orlando.antonino@gmail.com it.linkedin.com/in/orlandoantonino plus.google.com/+AntoninoOrlando
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15. Roma DevFest 2016Component Lifecycle Componentcontent has been Initialized The component was Created Component content has been Destroyed
- 16.
- 17. Roma DevFest 2016TypeScript ● Supersetof JavaScript ● Annotations ● Types ● Interfaces ● Productivity booster ● Compiles ES3/ES5
- 18. Roma DevFest 2016How Ican use it $ npm install -g typescript $ tsc --init --target es5 --sourceMap --experimentalDecorators --emitDecoratorMetadata
- 19. Roma DevFest 2016Interface interface Person{ firstName: string; lastName: string; } function greeter(person: Person) { return "Ciao, " + person.firstName + " " + person.lastName; } var user = { firstName: "Luciano", lastName: "Murruni" }; document.body.innerHTML = greeter(user);
- 20. Roma DevFest 2016Class class StrangeFruit{ type:string; constructor(type: string){ this.type = type; } }
- 21. Roma DevFest 2016Extending Classes classApplePen extends StrangeFruit{ name: string; quantity: number; constructor(type: string, quantity: number){ super(type); this.quantity = quantity; } }
- 22. Roma DevFest 2016TypeScript -Template let template: '<h1>My First Angular App</h1>'; let template: ` <h1>My First title</h1> <h2>My Second Title</h2> `;
- 23. Roma DevFest 2016Angular2 Component import{ Component, OnInit } from '@angular/core'; export class PersonComponent implements OnInit { constructor() {} ngOnInit() {} } // Annotation section @Component({ selector: 'my-app', template: '<h1>Hello {{ name }}</h1>' })
- 24.
- 25. Roma DevFest 2016Get Started $npm install -g angular-cli $ ng serve $ ng new MY_PROJECT_NAME $ cd MY_PROJECT_NAME
- 26.
- 27. Roma DevFest 2016File Structure Testfile Dependencies App source Configuration
- 28. Roma DevFest 2016File Structurein depth App Components Assets stuff Build params Project Index Main Compiler configuration Project Index
- 29. Roma DevFest 2016Available command Component$ ng g component my-new-component Directive $ ng g directive my-new-directive Pipe $ ng g pipe my-new-pipe Service $ ng g service my-new-service Class $ ng g class my-new-class Interface $ ng g interface my-new-interface Enum $ ng g enum my-new-enum Module $ ng g module my-module
- 30. Roma DevFest 2016Build andtest $ ng build //development release $ ng test $ ng e2e $ ng build --prod //production release
- 31. Roma DevFest 2016More aboutperformance Development 4.0K index.html 8.0K inline.js 8.0K inline.map 2.7M main.bundle.js 2.8M main.map 12K styles.bundle.js 16K styles.map Production 4.0K index.html 4.0K inline.js 896K main.xxxx.bundle.js 204K main.xxxx.bundle.js.gz 8.0K styles.xxxx.bundle.js
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40. Roma DevFest 2016Angular MaterialDesign https://material.angularjs.org/latest/
- 41.
- 42.
- 43.
- 45. YAHF “you need toknow at least two different programming languages for an independent or hobbyist developer, this could be time-consuming for an enterprise, hiring for the multi-platform skill sets could get expensive supporting only one mobile platform is no longer a good idea. This is where hybrid mobile applications come into play” Roma DevFest 2016
- 46. Hybrid matter “Different platformshave different ways they expect you to use them that alter the entire experience design” [Martin Fowler] The problem with most of these hybrid frameworks is that they rely heavily on the web view of the device. Not all web views are equal, application performing unpredictably on the thousands of devices that exist Roma DevFest 2016
- 47. What is NativeScript? Anopen source framework for building and running native iOS, Android, and Windows Phone apps with a single, JavaScript, XML, CSS code base Roma DevFest 2016
- 48.
- 49.
- 50. Javascript framework freechoice Write your application using plain Javascript Use TypeScript to get Object Oriented features and compile time error checking Use Angular to architect application Roma DevFest 2016
- 51. How it works? Everythingstarts with JavaScript virtual machines, as they’re what NativeScript uses to execute JavaScript commands. NativeScript uses V8 on Android and JavaScriptCore on iOS Because NativeScript uses JavaScript VMs, all native-API-accessing code you write, still needs to use JavaScript constructs and syntaxes that V8 and JavaScript Core understand. Roma DevFest 2016
- 52. Architecture Android iOS var time =new android.text.format.Time(); time.set( 1, 0, 2015 ); console.log( time.format( "%D" ) ); var alert = new UIAlertView(); alert.message = "Hello world!"; alert.addButtonWithTitle( "OK" ); alert.show(); Roma DevFest 2016
- 53. Architecture NativeScript uses reflectionto build the list of the APIs that are available on the platform they run on generating this data is non-trivial from a performance perspective, NativeScript does it ahead of time, and embeds the pre-generated metadata during the Android/iOS build step Roma DevFest 2016
- 54. Architecture The NativeScript runtime’sC++ code cannot directly access Java APIs -> JNI On iOS this extra bridge is unnecessary as C++ code can directly invoke Objective-C APIs 1) The V8 function callback runs. 2) The NativeScript runtime uses its metadata to know that Time() means it needs to instantiate an android.text.format.Time object. 3) The NativeScript runtime uses the JNI to instantiate a android.text.format.Time object and keeps a reference to it. 4) The NativeScript runtime returns a JavaScript object that proxies the Java Time object. 5) Control returns to JavaScript where the proxy object gets stored as a local time variable. Roma DevFest 2016
- 55. Architecture NativeScript run JavaScripton the UI thread provide high performance access to 100% of native platform APIs through JavaScript. Period. No trade-offs. No limits Roma DevFest 2016
- 56. Get started • Android4.2 or a later stable official release • iOS 7.0 or later stable official release • git, java 8 • android SDK, XCode • nodejs 4.5 + npm • optional: VirtualBox + Genymotion sudo npm install -g nativescript Roma DevFest 2016
- 57. Get started tns createmy-app-name --ng tns platform add ios tns platform add android tns run android --emulator tns livesync android --emulator --watch Roma DevFest 2016
- 58.
- 59. UI = XML+ CSS Roma DevFest 2016
- 60.
- 61. resources http://nsimage.brosteins.com/Home/UploadIcon http -> allowinsecure request on iOS 9! docs.nativescript.org developer.telerik.com Roma DevFest 2016
- 62.
- 63.
- 64. Thank You Antonino Orlando LucianoMurruni it.linkedin.com/in/lucianomurruni luciano.murruni@gmail.com twitter.com/jimilucio orlando.antonino@gmail.com it.linkedin.com/in/orlandoantonino plus.google.com/+AntoninoOrlando Roma DevFest 2016