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.
- English
- AdRoll
- Aha!
- Airbnb
- Algolia
- Artsy
- Australian Broadcasting Corporation
- Badoo
- BBC
- Bitmovin
- blogfoster
- Bloomberg
- Campaign Monitor
- Carbon Five
- Carousell
- cars.com
- Checkbot
- Clearleft
- Cloudflare
- CodeSandbox
- Condé Nast
- Conductor
- DAZN
- De Voorhoede
- Discord
- Dropbox
- eBay
- Electronic Arts
- Ele.me
- Evil Martians
- ezCater
- fastq.bio
- Figma
- Financial Times
- Flickr
- Flipkart
- Flocktory
- Futurice
- Garbarino
- GitHub
- GitLab
- GOV.UK
- grammarly
- Gusto
- HealthCare.gov
- in der Apotheke
- Insider Inc.
- Internet Archive
- Khan Academy
- Kickstarter
- Line
- Lucidchart
- Lyft
- Medium
- MemSQL
- Microsoft To-Do
- Mixmax
- Mixpanel
- Myntra
- Netflix
- npm
- OK GROW!
- Palantir
- PayPal
- Pivotal Tracker
- Product Hunt
- REA Group
- Reaktor
- Redmart
- repl.it
- Roompact
- Safety Culture
- Shopify
- Skillshare
- Slack
- Snipcart
- Soundcloud
- Spectrum
- Spotify
- Stack Overflow
- stripe
- Superhuman
- The Guardian
- The New York Times
- The Times & The Sunday Times
- The U.S. Digital Service
- The Wall Street Journal
- This Also
- ThomasNet
- Thread
- Tinder
- TinyMCE
- Uber
- Udacity
- Unity
- Unsplash
- Verve
- Walmart Labs
- Wingify
- Wix
- Yelp
- YouTube
- Zajno
- Zynga
- 18F
- 1Password
- Miscellaneous
- Russian
- License
- 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
- 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
- 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
- From TSLint to ESLint, or How I Learned to Lint GraphQL Code
- How to teach a web app to speak 100 languages: the specifics of localisation
- Hot localisations update: part 1, part 2
- The painless way to collect statistics from a web-site
- Translating interfaces into almost fifty languages: Sketch
- Translating Dust templates to JSX
- Optical alignment for frontend developers: why is it not the same as it is for designers and how can the process be automated
- From zero to Cosmos: part 1, part 2, part 3
- Covering A/B tests with UI tests: how to avoid getting tangled up in your own code
- How to manage your Design Tokens with Style Dictionary
- Generating multi-brand multi-platform icons with Sketch and a Node.js script: from the idea to the assets Sketch files and the build script and the generation of the assets
- 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
- To Play, or Not to Play – New AutoPlay Policies for Safari 11 and Chrome 64
- To Play, or Not to Play #2 – Firefox blocks audible autoplay by default!
- How Bitmovin Used React/Redux to Develop Its New Dashboard
- 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
- Fixing bugs with Outlook specific CSS
- How to test accessibility of emails
- Better video previews for email
- Cross-Domain Browser Window Messaging with HTML5 and Javascript
- Composing Synchronous and Asynchronous Functions in JavaScript
- An AJAX Auto-Save Implementation
- Building a Dynamic UI System at Carousell: part 1, part 2 and part 3
- An Experiment with JSON Schema
- How we made Carousell’s mobile web experience 3x faster
- How we built Origin CA: Web Crypto
- Going Global - a Localization Case Study at Cloudflare
- How we made our page-load optimisations even faster
- Open Sourcing CloudFlare’s UI Framework
- Real URLs for AMP Cached Content Using Cloudflare Workers
- Fast Google Fonts with Cloudflare Workers
- Handling complexity in lambda functions
- Testing MobX State Tree
- Micro-frontends, the future of Frontend architectures
- Adopting a Micro-frontends architecture
- Orchestrating micro-frontends
- Jest: Our journey into performant unit tests
- Identifying micro-frontends in our applications
- 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
- 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
- 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
- WebAssembly at eBay: A Real-World Use Case
- 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
- Faster input events with Facebook’s first browser API contribution
- Building the New facebook.com with React, GraphQL and Relay
- 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
- 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
- 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
- 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
- Designing very large (JavaScript) applications
- Building the Google Photos Web UI
- TypeScript at Google
- The Chrome Dev Summit site: case study
- Scaling Front-end Architecture
- Evolving JavaScript Part 1: Goodbye Backbone
- Evolving JavaScript Part 2: Hello React
- Evolving JavaScript Part 3: Building a React Application
- Taking off with Apollo
- How I fell out of love with HOCs
- How to style different sites with one CSS collection
- Why we got rid of all our front-end and back-end engineers
- Delightful ways to write reusable CSS using subclasses
- 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
- Ember Timer Leaks: The Bad Apples in Your Test Infrastructure
- Sleek and Fast: Speeding Up your Fat Web Client
- Bringing a Modern Javascript Build Pipeline to LinkedIn
- The Glimmer Binary Experience
- Lighter than Lightweight: How We Built the Same App Twice with Preact and Glimmer.js
- 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
- 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
- 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
- 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
- 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
- Migrating from Iron Router to FlowRouter (with Blaze)
- Where does Redux fit in Meteor?
- Real-world Unit Testing with Meteor and Jest
- Optimizing a GraphQL app using Apollo Engine
- 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
- 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 (video)
- 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
- ReactJS – Real World Examples of Higher-Order Components
- Singletons Suck (aka Flux to Redux)
- ReactJS Performance Debugging (aka The Magic of Reselect Selectors)
- My Journey in a UI Project (aka front-end is the new back-end)
- Angular The Hard Way #1 Organise and manage domain data
- RedMart's experience with PWA
- How we use Storybook for documentation and code reviews
- Building Shopify mobile with native and web technology
- How 17 lines of code improved shopify.com loading by 50%
- Designing a GraphQL API
- 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
- Front-end JavaScript bug tracking
- Building The Next SoundCloud
- Smooth image loading by upscaling
- React Native at SoundCloud
- Connect: behind the front-end experience
- A new approach to mocking GraphQL data: how we power React component tests and examples at Stripe
- 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
- GraphQL in real life
- 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
- Javascript @ Uber
- Building m.uber: Engineering a High-Performance Web App for the Global Market
- Powering UberEATS with React Native and Uber Engineering
- 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
- 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…
- Infinite Scroll’ing the right way
- 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
- 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
- Whoa! That Embedded Web View Looks Hot in Your iOS App!
- CSS in the Age of React: How We Traded the Cascade for Consistency
- 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
- Многоязычный Badoo: «трудности перевода»
- Специфика верстки мультиязычных веб-приложений
- Как собрать статистику с веб-сайта и не набить себе шишек
- Работаем с API по-взрослому
- Покрываем A/B-тесты UI-тестами. Как не запутаться в собственном коде
- Sketch + Node.js: генерируем иконки для множества платформ и брендов. Часть 1 и часть 2
- Нянчим проект на React-redux с пелёнок
- Качество кода фронтенда в HH
- Как мы пилили серверный рендеринг и что из этого вышло
- Микросервисный фронтенд — современный подход к разделению фронта
- Выбранный UI-фреймворк – вред. Архитектурные требования – профит
- Как мы разогнали мобильную Lenta.ru до скорости света
- Проектирование дизайн-системы Рамблера
- Опыт Rambler Group: как мы начали полностью контролировать формирование и поведение фронтовых React компонентов
- Apollo: 9 месяцев — полет нормальный
- Маршрутизация в большом приложении на React
- Создание Tinkoff Design System. Первые шаги
- Создание Tinkoff Design System. UI Kit, версионирование и витрина компонентов
- Как мы разрабатываем новый фронтенд Tinkoff.ru
- Чем плох JavaScript в большом проекте? С какими проблемами мы столкнулись и как их решали
- Два года с Dart: о том, как мы пишем на языке, который ежегодно «хоронят»
- Предъявите паспорт
- БЭМ + React: гибкая архитектура дизайн-системы
- Изоморфное приложение React JS + Spring Boot
- Атомарные SPA
- React со скоростью света: не совсем обычный серверный рендеринг
- Как оседлать радугу: история создания тёмной темы
- AMP, Instant Articles, Instant View, whut?
- Подкасты «Медузы»
- Как использовать кастомные шрифты в вебе и не сойти с ума
- Веб-пуш уведомления в Медузе
- За закрытой дверью фронтенда Единой фронтальной системы (ЕФС)
- Redux как сердце архитектуры фронтенда Единой фронтальной системы
- Работа с периферией из JavaScript: от теории к практике
- Как работают приложения Сбербанк Онлайн: Workflow API и фрэймворки
- Accessibility. Как мы делаем Яндекс доступным людям с ограниченными возможностями и почему считаем это важным
- Как инкрементальные обновления влияют на скорость загрузки. Опыт Яндекс.Почты
- Как создавалась карта с голосами болельщиков для Олимпиады
- Лекция Виталия Харисова «10k» про лёгкую версию поиска для медленных соединений и способы оптимизации кода, позволяющие уложиться в 10 килобайт
- Как мы делали «нарратив» – новый формат публикаций в Яндекс.Дзене
- Бэкенд для фронтенда, или как в Яндекс.Маркете создают API без костылей
- React & БЭМ – официальная коллаборация. Часть историческая
- Как создать тёмную тему и не навредить. Опыт команды Яндекс.Почты
- Прототипирование на продакшн-технологиях
- Почему Node.js в качестве основы фронтенда – это круто
- Создание NPM-модуля Яндекс.Кассы под Node.js — опыт Lodoss Team
- Фронтенд как у сына маминой подруги
- Реактивный фронтенд. История о том, как мы снова всё переписали
- Jenkins на службе фронтенд-разработки
- Дели — сокращай, или как мы делали мобильный 2ГИС Онлайн
- Этажи: 3D-навигация на WebGL в 2gis.ru
- Тестируем вёрстку правильно
- TARS, сделай уровень frontend-рутины 0%
- Справа налево. Что такое dir=rtl и как приручить арабский язык
- Справа налево. Как перевернуть интерфейс сайта под RTL
- Быстрая генерализация маркеров на WebGL-карте
