Behind the scenes of WWDC Together with Khoa Pham
Every year I’m looking forward to June and to WWDC, to see the new innovations that Apple’s engineers have been working on over the past year. However, due to the current pandemic, this year’s WWDC is going to be different, with a completely remote setup — which makes it hard to organize physical WWDC watching parties, that a lot of developers tend to enjoy.
Last week I had a discussion with some colleagues at work about how to best organize a virtual meetup, and I thought “why can’t we watch WWDC like a livestream, with real time chat?”.
So I bought the domain wwdctogether.com and started building a web app for doing just that. Initially I only made it possible to watch a livestream of the upcoming WWDC20 keynote, with a chat-box on the side that anyone could join. However, I invited some fellow iOS developers to test a beta version of my web app and asked them for feedback, and based on that I have improved it with many more features — like the ability to watch sessions from previous years, a Cupertino timezone clock, and a countdown to when the WWDC20 keynote will start.
The livestream itself is Apple’s own livestream encoded in the m3u8 format, and the modern playback implementation that WWDC Together uses enables users to watch the videos with adjustable playback rates, subtitles in different languages, as well as support for both picture-in-picture and full screen mode.
I built the front end with the React framework, using hooks, where all of the logic is implemented as functions. The real time chat is based on Firebase Realtime Database with some additional logic written using Cloud Functions. Due to the very limited time that I had to finish this project, I picked React and Firebase because I’m familiar with both of those technologies, which helped me build the web app much faster.
The real time chat is public to read, but authentication is required to write comments. The app supports Twitter, GitHub, Apple and anonymous login. For anonymous accounts, there’s a slight debouncing timer on comment to avoid excessive spamming. The database is structured around nodes, so each session gets its own chatroom. This also enables users to create private chatrooms by appending the query parameter code to any session URL, which forms a subnode within the database for a private channel. The database is configured to support up to 200,000 simultaneous connections, so I hope that everyone will have a good time discussing this year’s WWDC live streams.
I’m glad that WWDC Together has been so well-received by the community, and I hope that it’ll provide a similar vibe to actually attending WWDC during these difficult times.
InstabugTired of wasting time debugging your iOS app? Cut down debugging time by up to 4x with Instabug’s SDK. Get complete device details, network logs, and reproduction steps with each bug report, and it only takes a line of code to setup! Start now and get three months off, exclusively for readers of this site.