Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Making Simple Things
Search
Ben Foxall
March 09, 2017
Programming
2
240
Making Simple Things
Ben Foxall
March 09, 2017
Tweet
Share
More Decks by Ben Foxall
See All by Ben Foxall
Web Sites & Fairy Lights
benfoxall
0
120
Simpler Things
benfoxall
0
1.7k
Collaborative JS
benfoxall
1
160
Using Browsers to Visualise Data
benfoxall
0
79
Serving Data From Browsers
benfoxall
0
62
Building multi-device interfaces with the web
benfoxall
1
170
Other Decks in Programming
See All in Programming
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
Discover Metal 4
rei315
2
130
XP, Testing and ninja testing
m_seki
3
240
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
Team operations that are not burdened by SRE
kazatohiei
1
310
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.8k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
9
5.2k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.3k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
Is Xcode slowly dying out in 2025?
uetyo
1
270
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Writing Fast Ruby
sferik
628
62k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
For a Future-Friendly Web
brad_frost
179
9.8k
Typedesign – Prime Four
hannesfritz
42
2.7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Rails Girls Zürich Keynote
gr2m
95
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Transcript
Hello
I'm Ben
None
Frontend Web Developer
Frontend Web Developer + Backend + Hardware + Other stuff
Oxford
Oxford, UK
None
None
None
Evening meet-ups Hack days
Last month with Oxford Python, OxRUG, Codebar, DotNetOxford, DevOpsOxford, Drupal
& WPOx
The Oxford Mega Super Meetup Meetup
None
HTTP
HTTP kind of sucks
HTTP kind of sucks (sometimes)
Problem 1. HTTP was designed with wires in mind wireless/flaky
networks can be challenging
Problem 2. HTTP resources need to be constantly online can
be a issue for low-power devices
Problem 3. HTTP responses need a request getting content to
a client can be tricky
The problems: 1. Wireless 2. Low energy devices 3. P2P
data flow
this sounds a bit like the Internet of Things
1. Many small (movable) devices - wires become an issue
2. Batteries - constrains compute resource 3. Things need to be able to talk to each other
Part 1. A deep dive into IoT networking, and it
can fit with WordPress
An example network of Things
None
1. a thing you can press down
None
2. some things that light up
target outcome: When I press this thing, these things should
turn red (wherever they are)
Sending a post request to our LED strip? POST /led-strip
HTTP/1.1 Host: benjaminbenben.com User-Agent: curl/7.51.0 content-type: application/json Accept: */* Cache-Control: no-cache Content-Length: 15 {"color":"red"}
Handling HTTP —Opening ports —Responding to requests —Parsing request &
headers —Understanding http codes & header fields —Chunked encoding —Persistent connections —IP address changes
(JSON is pretty challenging too)
Small devices —variable network —sketchy network —low processing power —power
consumption requirements
MQTT
MQTT Message Queue*
MQTT Telemetry Transport
None
Broker Client
publish subscribe topics messages
MQTT Broker —Could be a satellite —Could be a hub
in a home —Could be a box sitting in a field
MQTT Connection —Satellite radio —mesh network —bluetooth LE
MQTT Connection —Stateful —Message based —Binary
Message structure +----------------------+ | fixed header | |----------------------| | variable
header | |----------------------| | payload | +----------------------+
Message Types CONNECT, CONNACK, PUBLISH, PUBACK, PUBREC, PUBREL, PUBCOMP, SUBSCRIBE,
SUBACK, UNSUBSCRIBE, UNSUBACK, PINGREQ, PINGRESP & DISCONNECT
Connecting to a broker ie. making initial contact CONNECT &
CONNACK
Client Broker ------- CONNECT -------> <------ CONNACK --------
CONNECT fixed header 7 6 5 4 3 2 1
0 f i x e d h e a d e r MESSAGE TYPE 1 2 REMAINING LENGTH DUP RET QOS
CONNECT variable header —protocol number —whether username & password are
supplied
CONNECT payload —the actual username & password (if required)
'fourteen bytes' to connect —2 bytes - fixed header —12
bytes - variable header —0-n bytes - flag values
Publishing Messages eg. on button press PUBLISH
PUBLISH fixed header 7 6 5 4 3 2 1
0 f i x e d h e a d e r MESSAGE TYPE 1 2 REMAINING LENGTH DUP RET QOS
PUBLISH variable header 7 6 5 4 3 2 1
0 TOPIC LENGTH / T O P I C 3 4 5 . . . . T
PUBLISH payload —the content of your message (optional) publish /button/push
'count: 5'
⨽⨽⨽⨽/button/push
⨽⨽⨽⨽/button/push vs POST /button HTTP/1.1 Host: benjaminbenben.com User-Agent: curl/7.51.0 content-type:
application/json Accept: */* Cache-Control: no-cache Content-Length: 15 {"action":"push"}
16 bytes
16 bytes POST /btn HTT
Receiving Messages eg. some lights SUBSCRIBE
SUBSCRIBE fixed header 7 6 5 4 3 2 1
0 f i x e d h e a d e r MESSAGE TYPE 1 2 REMAINING LENGTH DUP RET QOS
SUBSCRIBE variable header —Message identifier
SUBSCRIBE payload —a list of topic names
Receiving messages
Receiving messages (we already know this!) Client Broker <------ PUBLISH
--------
Job Done We can publish & subscribe to a network
of things
$socket = fsockopen('mqtt-host.com', 1883); $connect = constructConnectMessage(); fwrite($socket, $connect, strlen($connect));
$publish = constructPublishMessage('/hello', 'world!'); fwrite($socket, $publish, strlen($connect));
One other thing: QoS For when you're not sure if
your satellite is even there
7 6 5 4 3 2 1 0 f i
x e d h e a d e r MESSAGE TYPE 1 2 REMAINING LENGTH DUP RET QOS
QoS 0 Fire and Forget Client Broker Client ---- PUBLISH
----> [delete] ---- PUBLISH ---->
QoS 1 At least once delivery Client Broker Client ----
PUBLISH ----> [store] ---- PUBLISH ----> [delete] <------ PUBACK --- [delete]
QoS 2 "Exactly once" Client Broker Client ----- PUBLISH ---->
[store] ---- PUBLISH ----> <------ PUBACK ---- ------- PUBREL ---> [delete] <------ PUBCOMP --- [delete]
Embraces flakey networks
MQTT …that's about it (security/encryption, client IDs, last will, persistence,
ping/pong)
Demo Let's hook these lights together
/Demo
Bringing WordPress onto the network
1/ Subscribe to MQTT topics 2/ Publish messages to MQTT
1/ Subscribe to MQTT topics Create an mqtt-wp bridge (A
script that forwards on messages) github/benfoxall/mqtt-wp
const WPAPI = require('wpapi') const wp = new WPAPI(config.wp) const
update = (slug, content) => wp.pages().slug(slug) .update({content}) // update('my-thing', 'Sensor value: 4')
const mqtt = require('mqtt') const client = mqtt.connect(config.mqtt_host) client.subscribe('my/sensor') client.on('message',
(topic, buffer) => { const content = escape(buffer.toString()) update('my-sensor', content) })
Publishing messages
Option 1: Via WP-MQTT ➡ Nice and easy Option 2:
Via Webhooks ➡ Better fit for a wp-bridge model
WP-MQTT settings
MQTT Broker WordPress wp-mqtt plugin mqtt-wp bridge
Demo Let's bring WordPress on to the network
~
More useful things with this —Displaying sensor content —weather sensors
—door opening counters —whatever you can build
More useful things with this —A device registry —Smart home
—Sensors in the field
~
Doing this at home MQTT brokers
None
None
None
None
Doing this at home Electronics
None
Espruino
ESP8266
Pi Zero W
~
Part 2. How can we take inspiration from the way
we build Things.
A Thing
A Thing Is more than the stuff it's made from
A wooden table A table
We build applications from source code print '<b>hello <i>world</B></i>';
Working out what you're trying to build
None
None
Try and work out what your thing does
A Thing
A Thing Is a point of interaction
Someone needs to understand
None
None
None
None
None
None
When you build something Make sure it's a thing
A Thing
A Thing Doesn't have to be simple (but it can
be)
None
None
None
None
None
The SR-71 is still just a thing
A thing that flies very fast & very high up
None
None
None
Keep is Simple Stupid
Keep is Simple, Stupid
Have a clear idea of what your thing is Build
that thing as simply as you can
For way more about this, see Skunk Works by Nickolas
Means
None
Part 3. How we can make our phones into things
MQTT over WebSockets Our device becomes another thing on the
network const mqt = new MQT('test.mosquitto.org:8080') mqt.subscribe('/sensor/value' (value) => document.querySelector('#sensor').textContent = value ) mqt.publish('/phone/visit', document.location.pathname)
bit.ly/ADORB
Browsers can do more than displaying documents
Power navigator.getBattery() .then(({value, charging}) => {})
Location navigator.geolocation.getCurrentPosition( ({coords}) => {} )
Orientation & movement document.addEventListener('deviceorientation', ({alpha, beta, gamma}) => {} )
document.addEventListener('devicemotion', ({acceleration}) => {} )
Ambient Light window.addEventListener('devicelight', ({value}) => {} )
Proximity window.addEventListener('userproximity', ({near}) => {} )
Audio/Video feed navigator.mediaDevices.getUserMedia({ audio: true, video: true }) .then(stream =>
{})
Movement navigator.vibrate(100)
Sounds var ctx = new AudioContext() var osc = ctx.createOscillator()
osc.connect(ctx.destination) osc.frequency.value = 300 osc.start()
Other features
Service workers navigator.serviceWorker.register('/sw-test/sw.js')
Web Bluetooth navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'], }] }).then(device =>
device.gatt.connect())
Our web pages are becoming Things
None
Part 4. How to build things that make a difference
We're building things
The usefulness of a thing can be assessed
None
None
None
When you're building something
make a difference for someone
Thank you for listening @benjaminbenben
—github.com/benfoxall/mqtt-wp —github.com/benfoxall/ador-puck-demo —github.com/benfoxall/puck-mqtt