Soko
69 posts

Soko
@SokoDev
Lead Developer @MonkeyTiltPlay Keen interest in large scale distributed systems, data intensive systems and low level programming.
Malta 参加日 Şubat 2024
32 フォロー中2.5K フォロワー

Pussymonster extending his lead on the @monkeytilt leaderboard, with a surprise entry and meteoric rise from Mattdeuce32

English

I see spike in DAUs and start high fiving the VIP team
@SokoDev sees them and writes 9 part engineering threads
We are not the same.
Soko@SokoDev
Scaling problems 101 : @monkeytilt is experiencing a large growth in DAUs, and we spent a lot of today dealing with classic issues in database scaling for our backend services Small 🧵on how we think about scaling
English
Soko がリツイート


Scaling problems 101 : @monkeytilt is experiencing a large growth in DAUs, and we spent a lot of today dealing with classic issues in database scaling for our backend services
Small 🧵on how we think about scaling
English

(9/9) Some other misc points:
- We have a LOT of images in game cards, sports logos and more. Lazy loading all images below the fold once the user started scrolling was helpful
- Server side compute : for data intensive calls such as fetching 100s of games, we keep those components on the server (NextJS has everything on server by default)
- Recurrent timers run in the background on web workers
- NextJS image optimization comes for free
English

(7/9) API calls can be optimized in a bunch of interesting ways. One thing we found success with was matching the API re-computation to the data access pattern. How often do the trending games really change? Every 24h? We just spun up server tasks that push this data onto a CDN. Client side work = close to 0
English

(6/9) Browser work depends heavily on what kind of interactivity you want to offer.
Browsers do a LOT of work from rendering DOMs, executing your JS code and more. Since JS uses a run to completion model, there's multiple thread starvation opps that come from poorly designed React Components
A hacky thing we did early on was place an upper limit on the amount of stuff each React Component could do. Small components are your friends, because the browser can most likely inject higher prio work
React Suspense is a godsend here as well, as Next streams HTML to the browser to amortize work
English

(5/9) What we did to make X as small as possible:
- Preload / prefetching comes for free with Next, but you can provide hints with tags as well. This amortizes X
- Asset optimization : webp is a modern format we use, but we also played with image sizes + resolutions
- Moved all fonts to the CDN (we use custom fonts, but this is static data)
- Lots and lots of bundle profiling. NextJS 14 really doesn't require many external deps
- Heavy use of React Suspense : our infra automatically streams these to the browser
English

(4/9) Resource Delivery is concerned with how quickly you can move X bytes from point A to point B. Intuitively, you can improve this by:
- Making X as small as possible : more on this later
- Making the distance from A to B as small as possible : choice of infrastructure provider matters a LOT here. You want one that has many points of presence for both compute and data. We use Cloudflare for both edge compute and CDN data
English

(1/9) Online casinos are "content heavy / content catalogue" apps (think Netflix, Spotify) with thousands of games, sports and lines. Users expect snappy interactivity, in spite of a high volume of data
A 🧵 on what @monkeytilt is doing to keep FE performance up
English

(2/9) Generally, FE performance is measured on three axes:
- Resource delivery : how quickly are bytes shipped from your server to my browser (metrics such as TTFB, FCP and LCP)
- Browser work : how much work does my browser have to do once bytes are shipped (metrics such as INP)
- Visual stability : is it easy on the eyes (metrics such as CLS)
English



