Nativescript

lionel

(@lionelthemonk)

andrei

(@talant_a)

La problématique : partager du code

Un seul langage : le javascript

Une abstraction de la plate forme

Les composants natifs directement accessibles dans le code en javascript

Le langage utilisé

#jeviensduweb



var createViewModel = require("./main-view-model").createViewModel;

function onNavigatingTo(args) {
    var page = args.object;
    page.bindingContext = createViewModel();
}
exports.onNavigatingTo = onNavigatingTo;



<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
  <StackLayout>
    <Label text="Tap the button" class="title" />
    <Button text="TAP" tap="{{ onTap }}" />
    <Label text="{{ message }}" class="message" textWrap="true" />
  </StackLayout>
</Page>



.message {
    font-size: 20;
    color: #284848;
    horizontal-align: center;
    margin: 0 20;
    text-align: center;
}

L'abstraction de la plate forme

#simplicité



<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
  <StackLayout>
    <Label text="Hello world" />
  </StackLayout>
</Page>



	var pagesModule = require("ui/page");
	var labelModule = require("ui/label");
	function createPage() {
	    var label = new labelModule.Label();
	    label.text = "Hello, world!";
	    var page = new pagesModule.Page();
	    page.content = label;
	    return page;
	}
	exports.createPage = createPage;




    <Label text="Alii nullo quaerente vultus severitate adsimulata" />

android.widget.TextView

UILabel

Les composants natifs directement accessibles en javascript

#souplesse #simplicité #jevienstoujoursduweb



	var pagesModule = require("ui/page");
	var labelModule = require("ui/label");
	function createPage() {
	    var label = new labelModule.Label();
	    label.text = "Hello, world!";
	    var page = new pagesModule.Page();
	    page.content = label;
	    return page;
	}
	exports.createPage = createPage;



	var pagesModule = require("ui/page");
	var labelModule = require("ui/label");
	var device = require("platform").device;
	function createPage() {
	    if (device.os === "iOS") {
	        var label = new UILabel();
	        label.text = "Hello, world!";
	    }
	    var page = new pagesModule.Page();
	    page.content = label;
	    return page;
	}
	exports.createPage = createPage;

Un projet Nativescript

A quoi ça ressemble ?

les commandes habituelles :

								
 > tns create mon-appli

								
 > tns platform add ios

								
 > tns platform add android

								
 > tns run ios --emulator

								
 > tns run android --emulator

.
└── sample-Groceries
    ├── app
    │   └── ...
    ├── node_modules
    │   └── tns-core-modules
    ├── package.json
    └── platforms
        ├── android
        └── ios

									
	 > tns create my-app-name --template the-template-name

Now ...