← Frameable Tech Weblog

Frameable tech stack

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...

Want to work on collaborative video tech? We're hiring!

Check out some of our wonderful products