Case Study: Instagram

Пример

**Оптимизации для быстрого UX:** ```typescript // 1. Client-side preprocessing // Resize before upload: 12MB → 500KB // Show preview immediately from local file // 2. BlurHash placeholder // 20-30 bytes string → instant gradient preview const blurHash = 'LEHV6nWB2yk8pyo0adR*.7kCMdnj'; // Decode to 4x4 pixel gradient, scale up with CSS blur // 3. Progressive JPEG // Shows low-quality image immediately, refines progressively // 4. Responsive images <img srcset=" ${url}?w=150 150w, ${url}?w=320 320w, ${url}?w=640 640w" sizes="(max-width: 640px) 100vw, 640px" /> ```

Что вы узнали о Media Upload Pipeline?

Пример

**Расчёт для реального масштаба:** ``` Instagram stats: - 2B+ monthly active users - 500M+ daily active users - Average user follows: 200 accounts - Average user posts: 1 post/week - Celebrity: Cristiano Ronaldo = 500M followers Fan-out on Write для Ronaldo: - 1 пост = 500M записей - 500M * 100 bytes = 50GB data - Latency: минуты Гибридный подход: - Regular users: instant fan-out (< 10K writes) - Celebrities: pull on read (one query per celebrity) - Feed generation: ~50ms (cache + 10-20 celebrity queries) ```

Что вы узнали о Feed Generation: Fan-out Strategies?

Пример

**Сигналы relationship strength:** ```typescript // Most predictive signals for close friends: // 1. DM frequency (strongest signal) // 2. Tagged in photos together // 3. Comment on each other's posts // 4. Profile visits // 5. Story views and reactions function computeRelationshipScore(viewer: User, author: User): number { return ( 0.30 * normalize(dmCount(viewer, author)) + 0.25 * normalize(mutualTags(viewer, author)) + 0.20 * normalize(commentInteractions(viewer, author)) + 0.15 * normalize(profileVisits(viewer, author)) + 0.10 * normalize(storyEngagement(viewer, author)) ); } // Result: posts from close friends rank higher // even if they have lower global engagement ```

Что вы узнали о Feed Ranking?

Пример

**Stories tray ranking:** ```typescript // Factors for tray order: // 1. Unwatched stories first (binary) // 2. Relationship strength (close friends higher) // 3. Recency of latest story // 4. Interaction history (reply frequency) function rankTray(userId: string, tray: StoryTray[]): StoryTray[] { return tray.sort((a, b) => { // Unwatched first if (a.hasUnwatched !== b.hasUnwatched) { return a.hasUnwatched ? -1 : 1; } // Then by score const scoreA = computeTrayScore(userId, a); const scoreB = computeTrayScore(userId, b); return scoreB - scoreA; }); } // Close Friends feature: // Users can mark others as "close friends" // Only close friends see certain stories // Close friends' stories appear first in tray ```

Что вы узнали о Stories Architecture?

Пример

**Typing indicators:** ```typescript class TypingIndicatorService { // Debounced typing state async setTyping(userId: string, threadId: string): Promise<void> { // Set with 3 second TTL await this.redis.setex( `typing:${threadId}:${userId}`, 3, '1' ); // Broadcast to thread const participants = await this.getParticipants(threadId); for (const participantId of participants) { if (participantId === userId) continue; await this.mqtt.publish(`/user/${participantId}/typing`, { threadId, userId, isTyping: true }); } } // Client calls this on each keystroke (debounced) // TTL handles "stopped typing" automatically } ```

Что вы узнали о Instagram Direct (DM)?