hoangpq / frontend-case-studies Goto Github PK

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
  • Facebook
  • YouTube
  • Twitter
  • eBay
  • Slack
  • LinkedIn
  • 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
  • Pinterest
  • Reddit
  • Dropbox
  • stripe
  • repl.it
  • Figma
  • Superhuman
  • Algolia
  • grammarly
  • Ele.me
  • Snipkart
  • Flocktory
  • Product Hunt
  • AdRoll
  • Reaktor
  • Aha!
  • This Also
  • Roompact
  • De Voorhoede
  • cars.com
  • Garbarino
  • Miscellaneous
• Russian
  • Медуза
  • Flocktory
  • Бюро Горбунова
  • Сбербанк
  • 2ГИС
  • Альфа-Банк
  • Яндекс.Деньги
• License

English

Facebook

• 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

YouTube

• Polymer @ YouTube

Twitter

• 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

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

LinkedIn

• Ember Timer Leaks: The Bad Apples in Your Test Infrastructure
• Sleek and Fast: Speeding Up your Fat Web Client
• The Glimmer Binary Experience

Airbnb

• Rearchitecting Airbnb’s Frontend

GitHub

• GitHub's post-CSP journey
• GitHub's CSS
• Shipping system fonts to GitHub.com

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

Stack Overflow

• HTTPS on Stack Overflow: The End of a Long Road

GOV.UK

• Accessibility for developers: building a frontend that everyone can use

The Guardian

• What we learnt from our mistakes in 2016

BBC

• Redefining the BBC News core experience
• HTTP/2 is easy, just turn it on…

The New York Times

• React, Relay and GraphQL: Under the Hood of The Times Website Redesign

The Times & The Sunday Times

• Building the UI for the new The Times website

Financial Times

• What happens when you visit ft.com?

Condé Nast

• The Why and How of Google AMP at Condé Nast

Netflix

• Making Netflix.com Faster
• Netflix's approach to ES6 feature detection
• Shop Talk podcast #264: React with Netflix

Uber

• Javascript @ Uber
• Building m.uber: Engineering a High-Performance Web App for the Global Market

Tinder

• A Tinder Progressive Web App Performance Case Study

Shopify

• Building Shopify mobile with native and web technology
• How 17 lines of code improved shopify.com loading by 50%

Flipkart

• Building Flipkart Lite: A Progressive Web App

Pinterest

• A Pinterest Progressive Web App Performance Case Study

Reddit

• Why We Chose Typescript

Dropbox

• Dropbox new homepage

stripe

• Connect: behind the front-end experience

repl.it

• Modular, fast, small: how we built a server-rendered IDE
• Infinite Loops

Figma

• WebAssembly cut Figma’s load time by 3x

Superhuman

• Delightful search: more than meets the eye

Algolia

• Improving Web Performance to Mirror Engine Speed

grammarly

• Building Browser Extensions At Scale

Ele.me

• Upgrading Ele.me to Progressive Web App

Snipkart

• The Story of our Progressive Migration from Backbone to Vue.js

Flocktory

• Third party libraries

Product Hunt

• React @ProductHunt

AdRoll

• How to Run a Front-End Infrastructure Team

Reaktor

• Refactoring 30000 lines of JS with types

Aha!

• How I Convinced Our CTO to Switch From CoffeeScript to ES6

This Also

• Fixing HTML Video on Mobile

Roompact

• Elm In Production: 25,000 Lines Later

De Voorhoede

• Why our website is faster than yours

cars.com

• How Cars.com Developer Mac Heller-Ogden Convinced His Bosses to Adopt Node.js

Garbarino

• Building a PWA in Argentina

Miscellaneous

• PWA Stats
• Production Web Apps Performance Study Q4/16 - Q1/17
• Case study: improving a popular library’s size for webpack users

Russian

Медуза

• AMP, Instant Articles, Instant View, whut?
• Подкасты «Медузы»
• Как использовать кастомные шрифты в вебе и не сойти с ума
• Веб-пуш уведомления в Медузе

Flocktory

• Разработка сторонних библиотек

Бюро Горбунова

• Как в книгах Бюро тяжёлые картинки выгружаются из памяти, чтобы браузер не тормозил

Сбербанк

• За закрытой дверью фронтенда Единой фронтальной системы (ЕФС)
• Redux как сердце архитектуры фронтенда Единой фронтальной системы
• Работа с периферией из JavaScript: от теории к практике

2ГИС

• Дели — сокращай, или как мы делали мобильный 2ГИС Онлайн
• Этажи: 3D-навигация на WebGL в 2gis.ru
• Тестируем вёрстку правильно
• TARS, сделай уровень frontend-рутины 0%

Альфа-Банк

• Предъявите паспорт
• БЭМ + React: гибкая архитектура дизайн-системы
• Изоморфное приложение React JS + Spring Boot

Яндекс.Деньги

• Прототипирование на продакшн-технологиях
• Почему Node.js в качестве основы фронтенда – это круто
• Создание NPM-модуля Яндекс.Кассы под Node.js — опыт Lodoss Team

License