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:
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
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
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.
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
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.