Angular2 & Native Script GDG DevFest 2016
•
0 likes•532 views
Slides from our workshop @GDGDevFest Roma 2016
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (16)
Similar to Angular2 & Native Script GDG DevFest 2016
Similar to Angular2 & Native Script GDG DevFest 2016 (20)
Recently uploaded
Recently uploaded (20)
Angular2 & Native Script GDG DevFest 2016
- 2. Code Once Run Everywhere Antonino Orlando Luciano Murruni e il Team del GDG Roma L-Ab
- 3. Roma DevFest 2016 Antonino Orlando Luciano Murruni 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
- 15. Roma DevFest 2016Component Lifecycle Component content has been Initialized The component was Created Component content has been Destroyed
- 16. TypeScript
- 17. Roma DevFest 2016TypeScript ● Superset of JavaScript ● Annotations ● Types ● Interfaces ● Productivity booster ● Compiles ES3/ES5
- 18. Roma DevFest 2016How I can 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 class ApplePen 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>' })
- 25. Roma DevFest 2016Get Started $ npm install -g angular-cli $ ng serve $ ng new MY_PROJECT_NAME $ cd MY_PROJECT_NAME
- 27. Roma DevFest 2016File Structure Test file Dependencies App source Configuration
- 28. Roma DevFest 2016File Structure in 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 and test $ ng build //development release $ ng test $ ng e2e $ ng build --prod //production release
- 31. Roma DevFest 2016More about performance 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. {Let’s Code!}
- 35. {Resources}
- 40. Roma DevFest 2016Angular Material Design https://material.angularjs.org/latest/
- 45. YAHF “you need to know 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 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
- 47. What is NativeScript? An open source framework for building and running native iOS, Android, and Windows Phone apps with a single, JavaScript, XML, CSS code base Roma DevFest 2016
- 50. Javascript framework free choice 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? Everything starts 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 reflection to 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’s C++ 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 JavaScript on 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 • Android 4.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 create my-app-name --ng tns platform add ios tns platform add android tns run android --emulator tns livesync android --emulator --watch Roma DevFest 2016
- 59. UI = XML + CSS Roma DevFest 2016
- 61. resources http://nsimage.brosteins.com/Home/UploadIcon http -> allow insecure request on iOS 9! docs.nativescript.org developer.telerik.com Roma DevFest 2016
- 64. Thank You Antonino Orlando Luciano Murruni 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