Frontend Infrastructure: Resources
• 3 min read
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
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