Articles like “Building a simple todo list with [framework or technology name]” won’t teach you how that framework or technology solves real-world problems and works at a large scale. This document is a curated list of technical talks and articles about real-world enterprise frontend development.
Table of contents
- English
- YouTube
- eBay
- Slack
- Airbnb
- GitHub
- GitLab
- Stack Overflow
- GOV.UK
- The Guardian
- BBC
- The New York Times
- The Times & The Sunday Times
- Financial Times
- Condé Nast
- Netflix
- Uber
- Tinder
- Shopify
- Flipkart
- Dropbox
- stripe
- Unsplash
- repl.it
- Figma
- Superhuman
- Algolia
- Yelp
- grammarly
- Ele.me
- Snipcart
- Flocktory
- Product Hunt
- Conductor
- AdRoll
- Reaktor
- Aha!
- This Also
- Roompact
- De Voorhoede
- cars.com
- Garbarino
- Myntra
- ThomasNet
- Lyft
- CodeSandbox
- npm
- Line
- Futurice
- Pivotal Tracker
- The U.S. Digital Service
- Evil Martians
- HealthCare.gov
- 18F
- Artsy
- Medium
- Mixpanel
- Mixmax
- TinyMCE
- Wix
- Walmart Labs
- Bloomberg
- Discord
- Soundcloud
- Udacity
- Microsoft To-Do
- Safety Culture
- Kickstarter
- Gusto
- Skillshare
- Internet Archive
- in der Apotheke
- Wingify
- Campaign Monitor
- Flickr
- ezCater
- Thread
- blogfoster
- Carbon Five
- The Wall Street Journal
- Electronic Arts
- Australian Broadcasting Corporation
- Zynga
- Zajno
- PayPal
- 1Password
- Checkbot
- Spotify
- Lucidchart
- Spectrum
- MemSQL
- Verve
- Khan Academy
- Miscellaneous
- Russian
- License
English
- This browser tweak saved 60% of requests to Facebook
- Building High-Quality JavaScript Tools
- Facebook has 30,000 react components. How do you manage large project directories with many components?
- React 16: A look inside an API-compatible rewrite of our frontend UI library
- Behind the Scenes: Improving the React Repository Infrastructure
- Design Systems & Tools at Facebook
- Building the F8 App with React Native
- The technology behind preview photos
- Improving CSS quality at Facebook and beyond
- Designing very large (JavaScript) applications
- Building the Google Photos Web UI
- TypeScript at Google
YouTube
- View Source: Twitter.com
- How we built Twitter Lite
- Twitter Lite and High Performance React Progressive Web Apps at Scale
- Infinite List and React
- The Twitter Lite team about their use of Node.js
- Redux modules and code-splitting
eBay
- eBay’s Font Loading Strategy
- Beyond HTTPS
- Building a UI Component in 2017 and Beyond
- The Future of Marko
- The Path to JavaScript Next
- How Our CSS Framework Helps Enforce Accessibility
- Mobile First - A Retrospective
Slack
- Rebuilding slack.com
- TypeScript at Slack
- Rebuilding Slack’s Emoji Picker in React
- Keep webpack Fast: A Field Guide for Better Build Performance
- Localizing Slack
- Reducing Slack’s memory footprint
- Ember Timer Leaks: The Bad Apples in Your Test Infrastructure
- Sleek and Fast: Speeding Up your Fat Web Client
- The Glimmer Binary Experience
- Lighter than Lightweight: How We Built the Same App Twice with Preact and Glimmer.js
Airbnb
- Rearchitecting Airbnb’s Frontend
- React Performance Fixes on Airbnb Listing Pages
- Server Rendering, Code Splitting, and Lazy Loading with React Router v4
- Migrating from Mocha to Jest
- Turbocharged JavaScript Refactoring with Codemods
- React Native at Airbnb: The Technology, Building a Cross-Platform Mobile Team, Sunsetting React Native, What’s Next for Mobile at Airbnb
- Operationalizing Node.js for Server Side Rendering
- How Airbnb is Moving 10x Faster at Scale with GraphQL and Apollo
GitHub
- GitHub's CSP journey
- GitHub's post-CSP journey
- GitHub's CSS
- Shipping system fonts to GitHub.com
- Browser Monitoring for GitHub.com
- How GitHub is using Web Components in production
- Design Systems at GitHub
- Removing jQuery from GitHub.com frontend
GitLab
- Our big Frontend plan revealed: long term plan to make GitLab as fast and performant as possible with Vue and webpack
- Why We Chose Vue.js
- How we do Vue: one year later
- How GitLab switched to Headless Chrome for testing
- How we iterated and improved our frontend team culture
Stack Overflow
GOV.UK
The Guardian
BBC
- Redefining the BBC News core experience
- HTTP/2 is easy, just turn it on…
- How BBC Interactive Content Works Across AMP, Apps, And The Web
The New York Times
- Building a Cross Platform 360-degree Video Experience at The New York Times
- Improving Article Accessibility
- The Technology Behind the NYTimes.com Redesign
- React, Relay and GraphQL: Under the Hood of The Times Website Redesign
The Times & The Sunday Times
Financial Times
- What happens when you visit ft.com?
- Speeding up without slowing down
- Can't You Just Make It More like Bootstrap?
- YES, your site too can (and should) be accessible
- Free-market software development
- Tips for in-house teams in a free market software culture
- A faster FT.com
- SVG icons are easy but the fallbacks aren't
- An outbreak of Accessibility anti-patterns
- Improving the cache performance of The Polyfill Service
- Building The New Financial Times Web App
- This one line of Javascript made FT.com 10 times slower
Condé Nast
Netflix
- HTML5 Video Playback UI
- Improving the performance of our JavaScript inheritance model
- Node.js in Flames
- Making Netflix.com Faster
- Netflix's approach to ES6 feature detection
- Shop Talk podcast #264: React with Netflix
- Localization Technologies at Netflix
- Crafting a high-performance TV user interface using React
- Pass the Remote: User Input on TV Devices
- Integrating imperative APIs into a React application
- JSON Graph: Reactive REST at Netflix
- Performance Signup in React & Transactional Apps with Redux
- Implementing Japanese Subtitles on Netflix
- Pseudo Localization @ Netflix
- Delivering Meaning with Previews on Web
- Enhancing the Netflix UI Experience with HDR
- Our learnings from adopting GraphQL
- Modernizing the Web Playback UI
Uber
- Javascript @ Uber
- Building m.uber: Engineering a High-Performance Web App for the Global Market
- Powering UberEATS with React Native and Uber Engineering
Tinder
Shopify
- Building Shopify mobile with native and web technology
- How 17 lines of code improved shopify.com loading by 50%
- Designing a GraphQL API
Flipkart
- A Pinterest Progressive Web App Performance Case Study
- Demystifying SEO with experiments
- How we made JavaScript testing 15x faster
- Making Pinterest HTTPS
- Migrating Pinterest profiles to React
- How we switched our template rendering engine to React
- Introducing Bonsai: an open source Webpack analyzer
- Supporting React Native at Pinterest
- A one year PWA retrospective
- Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study
Dropbox
- Dropbox dives into CoffeeScript
- Some love for JavaScript applications
- Content Security Policy at Dropbox: On Reporting and Filtering, Unsafe-inline and nonce deployment, The Unexpected Eval, Third Party Integrations and Privilege Separation
- Enabling HTTP/2 for Dropbox web services: experiences and observations
- Annotations on Document Previews
- Preventing cross-site attacks using same-site cookies
- Deploying Brotli for static content
- Dropbox Paper: Emojis and Exformation
- Improving Document Preview Performance
- How we’re winning the battle against flaky tests
- Migrating from Underscore to Lodash
- Dropbox new homepage
- Translating Dropbox
stripe
- Connect: behind the front-end experience
- A new approach to mocking GraphQL data: how we power React component tests and examples at Stripe
Unsplash
repl.it
Figma
Superhuman
Algolia
Yelp
- Whoa! That Embedded Web View Looks Hot in Your iOS App!
- CSS in the Age of React: How We Traded the Cascade for Consistency
grammarly
Ele.me
Snipcart
Flocktory
Product Hunt
AdRoll
- Lazy loading Backbone collections with Promises
- Rollup: Shared UI components at AdRoll
- Rollup: How we use React.js and npm to share UI code at AdRoll
- Rollup: What we have learned from sharing UI code at AdRoll
- How to Create a Style Guide: Start with a UI Framework
- gulp-react-docs: From propTypes to Markdown in 3 seconds
- How to Run a Front-End Infrastructure Team
Conductor
Reaktor
Aha!
This Also
Roompact
De Voorhoede
cars.com
Garbarino
ThomasNet
Myntra
Lyft
CodeSandbox
npm
Line
Futurice
Pivotal Tracker
The U.S. Digital Service
Evil Martians
HealthCare.gov
18F
Artsy
- Rendering on the Server and Client in Node.js
- The Tech Behind Live Auction Integration
- React Native at Artsy
- Making Artsy Editorial Accessible
- Helping the Web Towards OSS by Default
- JSON Web Tokens: Artsy's Journey
- Exploration: Front-end JavaScript at Artsy in 2017
- Modernizing Force
- React Native, 2 years later
- Keeping Artsy's dependencies up to date
- Switch from Capybara Webkit to Chrome
- GraphQL Stitching 101
- GraphQL: Union vs. Interface
Medium
- Why ContentEditable is Terrible
- Wait, Don’t Touch That! Mutual Exclusion Locks & JavaScript
- The curious case of the disappearing Polish S
- Five Goofy Things Medium Did That Break Accessibility
- The Unluckiest Paragraphs: A Tale of CSS and Why Parts of Medium Sometimes Disappear
- Simple Style Sheets, Or How to Improve Your Sleep by Dropping the Cascade
- The case of the eternal blur: a bug hunt horror novella
- 2 Fast 2 Furious: migrating Medium’s codebase without slowing down
- GraphQL Server Design @ Medium
Mixpanel
- Straightening our Backbone: A lesson in event-driven UI development
- Making Web Components Work, or: How We Learned to Stop Worrying and Love the DOM
Mixmax
- Scaling Mixmax: Front-end performance
- How we built ‘instant’ autocomplete for Mixmax
- React without Redux: how we moved from Backbone to React without rewriting
- Using CORS policies to implement CSRF protection
- Handling 3rd-party JavaScript with Rollup: how and when to leave JS out of the bundle
- Precisely observing structural page changes
- Yarn-ifying Mixmax: why and how we moved from npm to Yarn
- To Yarn and Back (to npm) Again
- Choosing (and using) Javascript static typing: how Mixmax Engineering adopted Flow
TinyMCE
Wix
- Taking CSS To Scale: A Pragmatic Approach
- The Story of Making Wix Accessible
- Improving load time for 100 million websites
- Building a React Native App for 80 Million Users
Walmart Labs
- Cutting Dev Time in Half With Invalid User Input Prevention
- Migrating Angular 1.x apps to React — The Hybrid Way!
- Migrating Large Enterprise to NodeJS
- React Native at WalmartLabs
- Primer on Front End Automation
- Lazy Loading Images with IntersectionObserver
- Midway: Walmart’s mocking journey…
Bloomberg
Discord
- Using React Native: One Year Later
- Lessons from migrating a large codebase to React 16
- Why Discord is Sticking with React Native
- How Discord Maintains Performance While Adding Features
- How Discord Handles Two and Half Million Concurrent Voice Users using WebRTC
SoundCloud
- Front-end JavaScript bug tracking
- Building The Next SoundCloud
- Smooth image loading by upscaling
- React Native at SoundCloud
Udacity
- How a Fixed-Width Button Can Get Your Company Trending on Reddit for All the Wrong Reasons: A Front-End Developer Tale
- Udacity’s Front-End Tech Stack
- React Native: A retrospective from the mobile-engineering team at Udacity
Microsoft To-Do
Safety Culture
Kickstarter
Gusto
- Scaling Front-end Architecture
- Evolving JavaScript Part 1: Goodbye Backbone
- Evolving JavaScript Part 2: Hello React
- Evolving JavaScript Part 3: Building a React Application
Skillshare
Internet Archive
in der Apotheke
Wingify
- How We Made The Animated A/B Testing Guide
- Getting 60 FPS using Chrome devtools
- Overcoming the Challenges of Performance Testing Single-page Apps
- jQuery Promises: The answer to PostMessage's asynchrony
- Testing AngularJS Apps End to End Using Protractor
- A layout trick
- Speeding Up VWO
- Migrating towards Yarn and Webpack
- Why we've removed Inheritance/Extend from SASS & you should do the same!
- Automated Heatmap Verification E2E using Selenium and Canvas
Campaign Monitor
- Fixing bugs with Outlook specific CSS
- How to test accessibility of emails
- Better video previews for email
Flickr
- Lessons Learned from the Flickr Touch Lightbox
- Creating an interface for geofences
- Raising the bar on web uploads
- Building an HTML5 Photo Editor
- Building The Flickr Web Uploadr: The Grid
- Parsing Exif client-side using JavaScript
- Adventures in Jank Busting: Parallax, performance, and the new Flickr Home Page
- Building Flickr’s new Hybrid Signed-Out Homepage
- Perceptual Image Compression at Flickr
- Introducing yakbak: Record and playback HTTP interactions in NodeJS
ezCater
Thread
blogfoster
- Jumpstart to React+Redux Development
- Centralized ESLint Configuration
- Redux For Better in-App Analytics
- Managing Complexity in Redux: Higher-Order Reducers and Async State
- How We Simplified our Tooling Setup for Node.js Projects
- How to Use the Power of Jest’s Snapshot Testing Without Using Jest
Carbon Five
- Cross-Domain Browser Window Messaging with HTML5 and Javascript
- Composing Synchronous and Asynchronous Functions in JavaScript
- An AJAX Auto-Save Implementation
The Wall Street Journal
Electronic Arts
Australian Broadcasting Corporation
Zynga
Zajno
PayPal
- Less is more: reducing thousands of PayPal buttons into a single iframe, using zoid
- Sane, scalable Angular apps are tricky, but not impossible. Lessons learned from PayPal Checkout
- Dependency injection in Angular isn’t worth it. More lessons learned from scaling PayPal Checkout
- Auto-shrink-wrapping in PayPal Checkout, and how it’s saved us more than once
- Safari’s new third party tracking rules, and enabling cross-domain data storage
- Reinventing cross-origin requests, without CORS
- Introducing PayPal’s open-source cross-domain javascript suite
- GraphQL: A success story for PayPal Checkout
- Why every new web app at PayPal starts with TypeScript
1Password
Checkbot
Spotify
Lucidchart
- IE10: How does it really stack up?
- Atomic CSS as a tool set
- The Definitive Guide to Copying and Pasting in JavaScript
- Big content in a little canvas
- Improving Angular 2 Load Times and a 29KB Hello World App
- Angular 2 and Observables: Data Sharing in a Multi-View Application
- Using Angular 2 Components In a Non-Angular App
- How to handle folder uploads in Angular 2+
- JavaScriptCore – The Holy Grail of Cross Platform
- How to Actually Improve Type Safety with the TypeScript Strict Flags
- Converting 600k lines to TypeScript in 72 hours
- ZoneTracker: Tracking JavaScript Performance with Zone.js
- JavaScriptCore—10 Months Later
Spectrum
MemSQL
Verve
Khan Academy
- tota11y - an accessibility visualization toolkit
- Babel in Khan Academy's i18n Toolchain
- Fun with slope fields, css and react
- Copy-pasting more than just text
- i18nize-templates: Internationalization After the Fact
- Schrödinger's deploys no more: how we update translations
- Forgo JS packaging? Not so fast
- Migrating to a Mobile Monorepo for React Native
- Inline CSS at Khan Academy: Aphrodite
- Creating Query Components with Apollo
Miscellaneous
- PWA Stats
- Web Performance Optimization Stats
- Production Web Apps Performance Study Q4/16 - Q1/17
- Case study: improving a popular library’s size for webpack users
- Case study: analyzing the Walmart site performance
Russian
Медуза
- AMP, Instant Articles, Instant View, whut?
- Подкасты «Медузы»
- Как использовать кастомные шрифты в вебе и не сойти с ума
- Веб-пуш уведомления в Медузе
Flocktory
Бюро Горбунова
Сбербанк
- За закрытой дверью фронтенда Единой фронтальной системы (ЕФС)
- Redux как сердце архитектуры фронтенда Единой фронтальной системы
- Работа с периферией из JavaScript: от теории к практике
- Как работают приложения Сбербанк Онлайн: Workflow API и фрэймворки
2ГИС
- Дели — сокращай, или как мы делали мобильный 2ГИС Онлайн
- Этажи: 3D-навигация на WebGL в 2gis.ru
- Тестируем вёрстку правильно
- TARS, сделай уровень frontend-рутины 0%
- Справа налево. Что такое dir=rtl и как приручить арабский язык
- Справа налево. Как перевернуть интерфейс сайта под RTL
Альфа-Банк
- Предъявите паспорт
- БЭМ + React: гибкая архитектура дизайн-системы
- Изоморфное приложение React JS + Spring Boot
- Атомарные SPA
Яндекс.Деньги
- Прототипирование на продакшн-технологиях
- Почему Node.js в качестве основы фронтенда – это круто
- Создание NPM-модуля Яндекс.Кассы под Node.js — опыт Lodoss Team
- Фронтенд как у сына маминой подруги
- Реактивный фронтенд. История о том, как мы снова всё переписали
- Jenkins на службе фронтенд-разработки
Badoo
- Многоязычный Badoo: «трудности перевода»
- Специфика верстки мультиязычных веб-приложений
- Как собрать статистику с веб-сайта и не набить себе шишек
- Работаем с API по-взрослому
- Покрываем A/B-тесты UI-тестами. Как не запутаться в собственном коде
Skyeng
Wrike
- Чем плох JavaScript в большом проекте? С какими проблемами мы столкнулись и как их решали
- Два года с Dart: о том, как мы пишем на языке, который ежегодно «хоронят»
Tinkoff
- Создание Tinkoff Design System. Первые шаги
- Создание Tinkoff Design System. UI Kit, версионирование и витрина компонентов
- Как мы разрабатываем новый фронтенд Tinkoff.ru
Avito
Яндекс
- Accessibility. Как мы делаем Яндекс доступным людям с ограниченными возможностями и почему считаем это важным
- Как инкрементальные обновления влияют на скорость загрузки. Опыт Яндекс.Почты
- Как создавалась карта с голосами болельщиков для Олимпиады
- Лекция Виталия Харисова «10k» про лёгкую версию поиска для медленных соединений и способы оптимизации кода, позволяющие уложиться в 10 килобайт
- Как мы делали «нарратив» – новый формат публикаций в Яндекс.Дзене
- Бэкенд для фронтенда, или как в Яндекс.Маркете создают API без костылей
- React & БЭМ – официальная коллаборация. Часть историческая
ВКонтакте
Setka
Mail.Ru
Microsoft To-Do
Rambler Group
- Как мы разогнали мобильную Lenta.ru до скорости света
- Проектирование дизайн-системы Рамблера
- Опыт Rambler Group: как мы начали полностью контролировать формирование и поведение фронтовых React компонентов
- Apollo: 9 месяцев — полет нормальный
- Маршрутизация в большом приложении на React
Netcracker
- Микросервисный фронтенд — современный подход к разделению фронта
- Выбранный UI-фреймворк – вред. Архитектурные требования – профит
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent