JAVASCRIPTIN ÄÄRIRAJOILLAHeikki SaloVincit Oy

1

• Demo• Työkalut• Kehitys• Ongelmat

2

SISÄLTÖ

3

4

5

RAKENNE

Robotic Operating System

ZenRobotics

Visualisaatio Webworker

WebGL

Websocket

• Node.js, npm ja Grunt• TypeScript• WebGL• Websockets• Webworkers

6

TYÖKALUT

• Robotic Operating System (ROS)• Reaaliaikainen tai nauhoitetun datan

visualisointi• 3D-grafiikka ja kontrollit selaimessa• Kehityksen aikana muuttuvat tietorakenteet• Datan käsittelyn aikavaatimukset

7

KEHITYKSEN VAATIMUKSET

• Microsoftin “parempi” JavaScript-variantti• EcmaScript 6 yhteensopivuus (luokat yms.)• Tyyppiannotaatiot, rajapinnat yms. C#• Helpottaa suurien JavaScript-ohjelmien

kehitystä (muutokset, analyysi, kommentointi)• DefinitelyTyped tyyppikirjastot• Monipuolisempi kuin lint tai JSDoc• TypeScript vs CoffeeScript vs ClojureScript vs

Dart• “Käännetty” JavaScript paketoitu asiakkaalle

8

TYPESCRIPT

interface RobotState { //From websocketid: string;status: number;position?: Vector3<number>;

}

class PickerRobot extends VisualisationModel {private name: string;private state: RobotState;private mesh: THREE.Mesh;

constructor(name: string, visualisation: Visualisation) {super(visualisation);this.name = name;this.mesh = new RobotMesh();visualisation.addRobotStateListener(name, (state: RobotState) => {

this.state = state;});

}

public update(override: RobotState = null) : boolean {return this.mesh.setPosition(override || this.state);

}}

9

TYPESCRIPT

• Suorituskykyistä 3D-grafiikkaa• Matalan tason rajapinta• Typed Arrays ja viewit• Selaintuki vaihteleva (rauta vs softa)• Valmiit kirjastot: three.js, Babylon.js etc.

10

WEBGL

• Reaaliaikainen ja tehokas datansiirto molempiin suuntiin

• Visualisaatiossa keskiarvo noin 1 Mt/s (purskeittainen)

• Äärirajoilla herkkä verkkoympäriston vaihteluille

11

WEBSOCKETS

• JavaScriptin taustaprosessointia• Visualisaatiossa käytetään kuvankäsittelyyn• Rajoitettu ympäristö (DOM etc. ei saatavilla)• Kommunikaatio viestejä lähettämällä• Isot oliot (esim. kuvat) voi “siirtää" kopioinnin

sijaan

12

WEBWORKERS

• Isot datamäärät herkkiä verkkoympäriston laadulle

• WebGL-toteutusten eroavaisuudet (http://caniuse.com/#feat=webgl)

• JavaScriptin suorituskyky• Testaus

13

ONGELMAT

14

• Nykyaikaiset selainympärisöt mahdollistavat vaativienkien sovellusten teon…

• …olettaen, että on valmis rajoittamaan tuettuja selaimia ja laitteita

15

YHTEENVETO

16

KYSYMYKSIÄ?