Frontend Infrastructure: Resources

Photo by Ugur Akdemir

A collection of interesting resources to keep up-to-date in the frontend ecosystem and also build a foundational knowledge of modern frontend.

Scope, Closure, and Execution Context

• MDN Scope
• Closure, Scope & Execution Context
• A Simple Explanation of Scope in JavaScript
• Understanding Variables, Scope, and Hoisting in JavaScript

Modules

• JavaScript Modules: From IIFEs to CommonJS to ES6 Modules
• JavaScript Modules Past & Present
• History of Web Development: JavaScript Modules
• Brief history of JavaScript Modules
• JavaScript Modules: A Brief History
• JavaScript modules
• V8 JavaScript modules
• State of Modules in JavaScript
• CommonJS effort sets JavaScript on path for world domination
• ES modules: A cartoon deep-dive
• CommonJS vs AMD vs RequireJS vs ES6 Modules
• From CommonJS to ES Modules: How to modernize your Node.js app
• Essential JavaScript Namespacing Patterns
• Native ES Modules
• Node Modules at War: Why CommonJS and ES Modules Can’t Get Along
• Publish ESM and CJS in a single package
• Exploring ES6: JavaScript Modules
• What the heck are CJS, AMD, UMD, and ESM in Javascript?

Bundlers and Build Tools

• Reduce JavaScript Payloads with Tree Shaking
• Improving Site Performance With Webpack Tree Shaking
• Compilers are the New Frameworks
• Vite is a next-generation frontend tool
• Module bundlers in 3 levels
• Module bundling
• Webpack — The Confusing Parts
• Webpack loaders vs plugins: what's the difference?
• How To Make Tree Shakeable Libraries
• Tree-shaking? Let’s implement it!

JavaScript Spec

• How to Read the ECMAScript Specification
• Future Javascript: Javascript Pipeline Operators
• Future Javascript: Records and Tuples

TypeScript

• A Mental Model to Think in TypeScript
• Advanced TypeScript Concepts

Infrastructure for migrations and adoption

• Migrating Large TypeScript Codebases To Project References
• ts-migrate: A Tool for Migrating to TypeScript at Scale
• Adopting Typescript at Scale
• The continual evolution of Airtable’s codebase: Migrating a million lines of code to TypeScript
• TypeScript vs Flow

Platform/Infra teams

• Frontend At Scale: Designing Infra For Big Teams
• Dealing with large-scale JavaScript application infrastructure
• The Case for Frontend Infrastructure
• What is Platform Engineering
• Modelling Developer Infrastructure Teams

Developer Experience

• What is Developer Experience? a roundup of links and goodness
• DX at Netlify
• Developer Experience, beyond a single product.
• How To Prioritize The Developer Experience And Improve Output
• Building for the 99% Developers
• The Developer Experience Gap
• Developer experience is so much more than using the product itself
• A guide to coding accessible developer tools
• Developer Experience: Concept and Definition

Frontend Architecture

• A different approach to frontend architecture
• Design, Composition and Performance
• Clean Architecture on Frontend
• System Design Architectures
• Building a Scalable and Modular Architecture for React-TS Applications
• Frontend Architecture at Scale for Large Organizations
• Contemporary Front-end Architectures

CI/CD

• Keeping Developers Happy with a Fast CI
• Spark Joy by Running Fewer Tests
• Test Budget: Time Constrained CI Feedback
• Modern Frontend CI/CD Architecture — The Missing Guide (Part. 1): The CI
• Modern Frontend CI/CD Architecture — The Missing Guide (Part. 2): The CD
• Modern Frontend CI/CD Architecture — The Missing Guide (Part. 3)

Tools

Bundlers

• vite: Next Generation Frontend Tooling
• esbuild: an extremely fast JavaScript bundler
• rollup.js: a module bundler for JavaScript
• swc: Rust-based platform for the Web
• parcel: The zero configuration build tool for the web
• snowpack: The faster frontend build tool.

Flow -> TS codemods

• babel-plugin-flow-to-typescript
• flow-to-ts
• Airtable’s TypeScript Migration Codemod
• ECMAScript 5 to ECMAScript 6 Codemod

Twitter · Github