shirakaba

[Draft] Deep-dive: How NativeScript's JS->native bindings work

What is NativeScript?

NativeScript is a JavaScript runtime that allows you to write an iOS or Android app entirely in TypeScript or JavaScript with no compromises. That is to say, it provides you with the same level of native access that writing the app in Obj-C/Swift (for iOS) or Java/Kotlin (for Android) does. Not just JSON-serialisable data types like NSString, but all data types are supported. To illustrate what it's all about, here's how you would get the battery level using NativeScript (the below snippet is entirely JS code!):

import { isIOS, isAndroid, Application } from "@nativescript/core";

/**

rifler

import * as nodePath from 'path';
import paths from 'tsconfig-paths';
import * as tsconfig from 'tsconfig-extends';
import Project from 'ts-simple-ast';

// use `tsconfig-extends` module cause it can recursively apply "extends" field
const compilerOptions = tsconfig.load_file_sync('./tsconfig.json');
const absoluteBaseUrl = nodePath.join(process.cwd(), compilerOptions.baseUrl);
const matchPathFunc = paths.createMatchPath(absoluteBaseUrl, compilerOptions.paths || {});
const project = new Project({ compilerOptions });

EddyVerbruggen

// In case of Angular, this is the component that contains a view with a <RadSideDrawer>

export class MenuComponent implements AfterViewInit {

  @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
  private _drawer: SideDrawerType;

  ngAfterViewInit(): void {
    this._drawer = this.drawerComponent.sideDrawer;
    this._changeDetectionRef.detectChanges();

NathanWalker

// angular
import {Component} from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app',
  template: `
  <StackLayout>
    <page-router-outlet></page-router-outlet>
  </StackLayout>

jkuri

var pkg     = require('./package.json');
var path    = require('path');
var Builder = require('systemjs-builder');
var name    = pkg.name;

var builder = new Builder();
var config = {
  baseURL: '.',
  transpiler: 'typescript',
  typescriptOptions: {

thoop

# Change YOUR_TOKEN to your prerender token
# Change http://example.com (at the end of the last RewriteRule) to your website url

<IfModule mod_headers.c>
    RequestHeader set X-Prerender-Token "YOUR_TOKEN"
</IfModule>

<IfModule mod_rewrite.c>
    RewriteEngine On