Takeaways from Half Stack London 17/11/17

Introduction to virtual reality and the web

Ada Rose Cannon, Samsung

Examples of VR using google cardboard:

  • fast-sync.glitch.me
  • ada-a-frame.glitch.me

Libraries used of VR

  • WebGl — low level, quite complex to program in
  • three.js — mid level, JS lib which uses web.gl
  • aframe.io — high level, easy to get started with, uses HTML, (live demo)

Empowering Web Applications with Speech Recognition

Mihai Cîrlănaru

Originally developed for mozilla os (mobile), speech recognition in the browser in JS.

Demo showing how you can say numbers and it add them together, (possibly used to input data into text inputs).

Google speech API, (seems to be market leader), available in 32 languages:

Practical browser automation for fun and profit

Forbes Lindesay, Changepage

Testing triangle: unit, integration, e2e

Similar setup to current projects:

  • e2e — (selenium)
  • js test — (mocha)
  • static analysis — (flow) — (prettier)

There are modules available for retrying test failures, but should we be doing this?

Many cloud providers which have multiple environments to run tests against, (browserstack).

For local testing we can use JSDOM, runs in node, not a true headless browser like Phanton, browser nav not supported.

Demo ordering pizza with own libraries:

  • taxi-rank — webdriver built on JSDOM
  • cabbie — Sync and async api, (interact with webdriver), provides type definitions, (maybe just typescript, not sure about flow)

Advises test class names for selectors, (blog post Should ‘qa’ classes be applied to JS components for automation test purposes?), possibly use babel to strip out test class names in post build script.

Make your animations perform well

Anna Migas

FLIP technique (used before); First, Last, Invert and Play

Using requestAnimationFrame — 16ms for 60fps

For testing animation performance, record in chrome dev tool. New to chrome dev tools: layer element and animations tab.

The Exciting World of 3D

Sean McGee, Esri UK

Interesting talk showing how to create data driven maps. Demo showing if taller buildings in New York meant more terrific around that area.

ArcGIS is a private 3D library(api) for building 3D data maps: https://developers.arcgis.com/javascript/

Demo using three.js and cannon.js (physics engine)

OSM, (OpenStreetMap API), for free heights/elevation data of buildings

Arc, have data sets (e.g. traffic — live, building heights…)

Google map api for live traffic data

Data Visualisations and GraphQL

Sandeep Singh

Into to graphQL, have schemas (models), graphiQL for querying.

Subscriptions are new feature, which allow realtime based data updates, uses web sockets.

Schema driven development > front and backend teams decide on schema together.

reactVR uses a serverless graphQL backend.

Demo showing data being pulled from a twitter graphQL api.

Like what you read? Give dbillinghamuk a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.