ݺߣ

ݺߣShare a Scribd company logo
JAVASCRIPTIN
ÄÄRIRAJOILLA
Heikki Salo
Vincit 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 websocket
id: 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Ä?

More Related Content

Vincit Teatime 2015 - Heikki Salo: Case ZenRobotics: JavaScriptin äärirajoilla

  • 2. • Demo • Työkalut • Kehitys • Ongelmat 2 SISÄLTÖ
  • 3. 3
  • 4. 4
  • 6. • Node.js, npm ja Grunt • TypeScript • WebGL • Websockets • Webworkers 6 TYÖKALUT
  • 7. • 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
  • 8. • 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
  • 9. interface RobotState { //From websocket id: 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
  • 10. • Suorituskykyistä 3D-grafiikkaa • Matalan tason rajapinta • Typed Arrays ja viewit • Selaintuki vaihteleva (rauta vs softa) • Valmiit kirjastot: three.js, Babylon.js etc. 10 WEBGL
  • 11. • Reaaliaikainen ja tehokas datansiirto molempiin suuntiin • Visualisaatiossa keskiarvo noin 1 Mt/s (purskeittainen) • Äärirajoilla herkkä verkkoympäriston vaihteluille 11 WEBSOCKETS
  • 12. • 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
  • 13. • Isot datamäärät herkkiä verkkoympäriston laadulle • WebGL-toteutusten eroavaisuudet (http:// caniuse.com/#feat=webgl) • JavaScriptin suorituskyky • Testaus 13 ONGELMAT
  • 14. 14
  • 15. • Nykyaikaiset selainympärisöt mahdollistavat vaativienkien sovellusten teon… • …olettaen, että on valmis rajoittamaan tuettuja selaimia ja laitteita 15 YHTEENVETO