Advanced Web Platform

Breaking out of the browser

Although Javascript and web technologies started off being for web pages, you can take your skills outside of the computer to explore ubicomp/IoT, wearables, tangible interaction and wearables.

Inspiration

• Unnumbered Sparks
• JavaScript, MIDI & Tiny Computers - George Mandis
• Holographic Audio Visualizer - Combining a Raspberry Pi and web technologies
• Book: Making Things Smart: Easy Embedded JavaScript Programming for Making Everyday Objects into Intelligent Machines by Gordon F. Williams (creator of Espruino)

In-built APIs

The following APIs are useful for interacting with hardware. Support outside of Chrome (desktop/Android) tends to be limited, however.

• Web Serial API - Send/receive serial data. Useful for communicating with microcontrollers.
• Web USB API - Send/receive raw USB data
• Gamepad API - Make use of gaming controllers in JS
• Sensor API - Unified API for accessing sensors like device orientation, motion, gravity, ambient light and magnetometer. Support varies by device and platform.
• Web NFC - Interact with NFC tags
• Web Bluetooth API - Interact with devices over Bluetooth
• [Device Motion and Orientation]
  • Tutorial: Utilising sensors in mobile devices

Hardware

The following toolkits can be used to talk to a wide variety of microprocessor platforms (such as Arduino), robots, inputs, actuators and IoT devices:

• Johnny-Five - Interact with a variety of Arduino and similar boards, including specialist robot controllers
  • Getting Started guide from Arduino.cc
• Phidgets - Variety of USB-connected inputs and outputs programmable from from JS
• Pololu - Variety of USB-connected motor controllers controllable from JS

The following platforms allow you to program them directly in Javascript:

• Espruino
• Phidgets
• Micro:bit
• Raspberry PI

Making apps

• Progressive Web Apps
• Nativefier - Wrap web content in an app-like frame.
• Electron - The framework used by VS Code, Slack and many others for cross-platform apps made with web technologies.

Android/iOS

• Framer - Prototype for screen, with rich interactivity in CoffeeScript (a Javascript variant)
• Noodl - Extend prototypes outside of the screen using a visual programming approach. Can be extended with Javascript as well
• React Native - Native mobile apps
• Expo.io - Environment around React Native for cross-platform mobile apps in JS
• NativeScript - Native mobile apps with web technologies
• Ionic Framework - Mobile apps, albeit still rendered within a web view

Mac/PC

• Controlling Windows, Mac or Linux with RobotJS
• jxa - Automate OS X

• Ubersicht - Desktop widgets for Mac with JS
• Windows 10 progressive web apps