React renderer for your Smart Home

Presented at React Kyiv May Meetup 2018 (https://www.meetup.com/Kyiv-ReactJS-Meetup/events/249699223/)

Nowadays React.js can be used to render UIs in different environments (e.g. DOM, mobile and terminal). Recent experiments revealed a possibility to control an Arduino board with React. In my talk, I will expand the device area and show an approach to control a few wirelessly connected IoT devices using a custom React renderer.

Transcript

1. React renderer for your Smart home 1
2. About me Alexey Zaslavsky Software Engineer at 2
3. React Fiber • React core algorithm reimplementation (v16) • Priorities and scheduling • Error boundaries • Asynchronous rendering • API for custom renderers 3
4. Official renderers from Facebook: 1. React DOM 2. React Native 3. React 360 4
5. React Blessed 5
6. React Blessed 6
7. User interfaces? 7
8. React Hardware 8
9. React Hardware 9
10. Idea of a renderer: 1. Render user interfaces in different environments using the same tools 2. Declarative component-based UI 3. Learn once – use anywhere 10
11. Common lifecycle of UIs and devices: Phase DOM Device Initial render createElement, appendChild, addEventListener connect, add listeners Work loop set "element.textContent" set power state, brightness Unmount removeChild, removeEventListener disconnect, remove listeners 11
12. What can be rendered with React? 12
13. React workflow for a device 1. setState/forceUpdate 2. update props of "device" component 3. calculate changed props 4. send an update signal to the host environment 13
14. Smart Home Appliances 14
16. Is your device smart? 1. Turn on/off 1. WiFi/Bluetooth connectivity 2. Can be controlled remotely 3. Brightness/color can be adjusted 16
17. Xiaomi Yeelight Light bulb 17
18. Xiaomi MiHome 18
19. What protocols are used to control? 1. Communication with Xiaomi Cloud (proprietary, no spec) 2. Local network – MiIO (proprietary, reverse engineered) 19
20. Lamp demo 20
21. Xiaomi ZigBee Gateway 21
22. Xiaomi MiHome 22
23. Xiaomi MiHome 23
24. Xiaomi MiHome 24
25. Xiaomi MiHome 25
26. Xiaomi MiHome 26
27. Xiaomi MiHome 27
28. Smart Home + React = ? 28
29. react-dom 29
30. react-smart-dom 30
31. github.com/pterolex/react-smart-dom 31
32. npmjs.org/react-smart-dom 32
33. Demo with sensors 33
34. References • Tiny React Renderer • Awesome list of React Renderer • MiHome protocol documentation 34
35. Thanks! 35