Download - Angular2 & Native Script GDG DevFest 2016
Roma DevFest 2016
Antonino Orlando
Luciano Murruni
it.linkedin.com/in/lucianomurruni
[email protected]/jimilucio
[email protected]/in/orlandoantoninoplus.google.com/+AntoninoOrlando
Roma DevFest 2016AngularJS Architecture
Module
Config
Routes
ViewDirectivesFactoriesServices
Providers
Controller
Roma DevFest 2016Component Lifecycle
Component content has been Initialized
The component was Created
Component content has been Destroyed
Roma DevFest 2016TypeScript
● Superset of JavaScript
● Annotations
● Types
● Interfaces
● Productivity booster
● Compiles ES3/ES5
Roma DevFest 2016How I can use it
$ npm install -g typescript
$ tsc --init --target es5 --sourceMap
--experimentalDecorators --emitDecoratorMetadata
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);
Roma DevFest 2016Class
class StrangeFruit{
type: string;
constructor(type: string){
this.type = type;
}
}
Roma DevFest 2016Extending Classes
class ApplePen extends StrangeFruit{
name: string;
quantity: number;
constructor(type: string, quantity: number){
super(type);
this.quantity = quantity;
}
}
Roma DevFest 2016TypeScript - Template
let template: '<h1>My First Angular App</h1>';
let template: `
<h1>My First title</h1>
<h2>My Second Title</h2>
`;
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>'
})
Roma DevFest 2016Get Started
$ npm install -g angular-cli
$ ng serve
$ ng new MY_PROJECT_NAME
$ cd MY_PROJECT_NAME
Roma DevFest 2016File Structure in depth
App ComponentsAssets stuff
Build params
Project IndexMain
Compiler configurationProject Index
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
Roma DevFest 2016Build and test
$ ng build //development release
$ ng test
$ ng e2e
$ ng build --prod //production release
Roma DevFest 2016More about performance
Development
4.0K index.html8.0K inline.js8.0K inline.map2.7M main.bundle.js2.8M main.map 12K styles.bundle.js 16K styles.map
Production
4.0K index.html4.0K inline.js896K main.xxxx.bundle.js204K main.xxxx.bundle.js.gz8.0K styles.xxxx.bundle.js
Roma DevFest 2016ANGULAR DOCS
https://angular.io/docs/
Roma DevFest 2016ANGULAR CLI
https://cli.angular.io/
Roma DevFest 2016TypeScript
https://www.typescriptlang.org/docs/
Roma DevFest 2016NG Migrate
http://ngmigrate.telerik.com/
Roma DevFest 2016Angular Material Design
https://material.angularjs.org/latest/
Roma DevFest 2016UI Bootstrap
http://valor-software.com/ng2-bootstrap
http://meetup.com/ng-rome
Roma DevFest 2016
YAHF
“you need to know at least two different programming languagesfor an independent or hobbyist developer, this could be time-consumingfor 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
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
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
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
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
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
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
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
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
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 nativescriptRoma DevFest 2016
Get started
tns create my-app-name --ng
tns platform add iostns platform add android
tns run android --emulatortns livesync android --emulator --watch
Roma DevFest 2016
resources
http://nsimage.brosteins.com/Home/UploadIcon
http -> allow insecure request on iOS 9!
docs.nativescript.org
developer.telerik.com
Roma DevFest 2016
Thank You
Antonino Orlando
Luciano Murruni
it.linkedin.com/in/lucianomurruni
twitter.com/jimilucio
it.linkedin.com/in/orlandoantoninoplus.google.com/+AntoninoOrlando
Roma DevFest 2016