Understanding how 'Hubs by Mozilla' works

This talk was presented at the Mozilla Techspeakers annual meetup in September 2019, Amsterdam, The Netherlands.

Transcript

1. Understanding how
   works
   Srushtika Neelakantam | Mozilla TSP meetup
   Amsterdam, September 2019
   

   View Slide

2. Mozilla Hubs
   Spin up an instant (social) VR chat room out of the box
   Srushtika Neelakantam | Mozilla TSP meetup | Amsterdam, September 2019
   

   View Slide

3. Srushtika Neelakantam | Mozilla TSP meetup | Amsterdam, September 2019
   Hubs by Mozilla
   ● Built in React JS
   ● Built with A-Frame
   ● Extensively uses the NAF
   (Networked A-Frame)
   component
   

   View Slide

4. Networked A-Frame (NAF)
   Developed by Hayden Lee
   Srushtika Neelakantam | Mozilla TSP meetup | Amsterdam, September 2019
   https://www.npmjs.com/package/networked-aframe
   

   View Slide

5. Data sharing on the web
   Srushtika Neelakantam | Mozilla TSP meetup | Amsterdam, September 2019
   HTTP
   REST requests
   Long Polling
   REST requests
   WebSockets
   Realtime subscriptions
   

   View Slide

6. Publish/Subscribe messaging pattern
   Source: Ably Realtime: https://www.ably.io
   Srushtika Neelakantam | Mozilla TSP meetup | Amsterdam, September 2019
   Realtime
   messaging
   infrastructure
   

   View Slide

7. Inside a networked component of the Mozilla Hubs project
   Srushtika Neelakantam | Mozilla TSP meetup | Amsterdam, September 2019
   https://github.com/mozilla/hubs/blob/master/src/components/tools/networked-drawing.js
   

   View Slide

8. Spinning up your own WebSockets server
   Some open-source options
   Srushtika Neelakantam | Mozilla TSP meetup | Amsterdam, September 2019
   ws
   faye-
   websocket
   Socket
   Cluster
   Socket.io SockJS Websocketd
   

   View Slide

9. NAF primarily implements Socket.io and EasyRTC
   Srushtika Neelakantam | Mozilla TSP meetup | Amsterdam, September 2019
   https://github.com/networked-aframe/networked-aframe/blob/master/server/easyrtc-server.js
   

   View Slide

10. Thankyou!
    If not Telegram, we can catch up on Twitter @Srushtika :)
    

    View Slide