Frameable tech stack
Mar 29, 2022 · 3 min read
Frameable tech stack
Video and collaboration are core to all of our products. Here's our tech stack of choice...
Vue
We use Vue for our front end application framework. We keep it pretty simple and straightforward with an observable store and public methods to mutate. No vuex or elaborate ceremony.
Syncable
For synchronizing data across clients, we use a system we have developed called syncable, which we are working towards open-sourcing. It's middleware for express that lets you
have your own firebase-like database embedded in your Node.js app. We have already open sourced the underlying JSON CRDT library called pigeon, which underpins syncable.
When you want to change shared state from a client, simply this...
1 communalState.sync(state => state.participants[myId].status =
'online'
)
... will change your local state, and then broadcast the change server over WebSockets, which will broadcast the change to the other servers over Redis and all of your peers again through WebSockets, who will apply the change to their local state, which will be then reactively rendered in their interface.
Styles and CSS
We have a nuanced take on CSS frameworks. We run a purposefully small subset of Tailwind -- a handful of most-often used utility classes to specify margin
, padding
, and flex
properties -- and keep it strictly to that. With Vue providing us the ability to scope styles within components, it becomes relatively easy and comfortable to mix utility classes in with scoped semantic styles in each component.
WebRTC
Our video calls are using the WebRTC stack that is standard across browsers. This is the same stuff that Google Meet runs on. This includes video and audio encoding and decoding, streaming media over network transports, audio echo cancellation, adapting to network conditions, etc.
MediaSoup
WebRTC audio and video streams arrive at our SFU which is powered by MediaSoup, an open source C-wrapped-in-node library which implements WebRTC on the server, and relays incoming streams back out to their intended recipient peers.
Node
Backend code is in Node.js / Express. This handles marketing pages, hosts the Vue app, does WebSockets for syncing state, and a smattering of API routes.
MySQL
We keep relational data in MySQL. Works just fine as it always has!
Redis
Syncable uses Redis pub/sub to synchronize state across servers, and we also use Redis to maintain a list of active web servers for a few bookkeeping functions in the application.
AWS
Most of our infrastructure is in AWS. We try not to be too vendor locked in, and so mostly just leverage EC2 and RDS and related bits. We also have some hosting in Equinix for SFUs.
Other tech
Other libraries/frameworks that are part of our day-to-day dev effort: Webpack, SCSS, Nunjucks, ffmpeg, Playwright, Puppeteer
Thanks for reading...
We make truly awesome collaboration tools for Microsoft Teams, and we'd love to show you around.