Frontend Infrastructure
Goal
Frontend infrastructure teams empower product teams with the foundational frontend ecosystem and reliable, performant, and developer-friendly tools to efficiently build great user experiences.
How
- Move core metrics: developer experience, developer velocity, debuggability, performance, and reliability
- Enhance developer productivity by improving the tooling setup
- Linting: enforce best practices with static analysis and eslint rules
- Unit and end to end tests
- Deployment: continuous integration and continuous delivery
- Type System: consistent and less-risky applications
- Shared Configurations: create infrastructure so teams can start building new frontend applications without needing to know tricky configuration details
- Build System: bundling frontend applications
- Testing: Infrastructure and testing framework integrations enabling developers to write a comprehensive set of unit, integration, and end-to-end tests
- Observability: Client-side web logging libraries, integration with vendor error monitoring solutions, alert generators for standard web metrics as well as their usage in automated canary analysis, and testing solutions to ensure logging quality
- Shape the architecture of frontend systems
- Define patterns for UIs (design system)
- Define patterns for data fetching
- Define patterns for frontend-backend relation: graphql, BFF, rest APIs
- Make platform-wide changes and upgrade the entire codebase
- Replace old libraries with new standards
- Build a strong culture with the foundational platform knowledge
- Partnering with product teams to encourage adoption of tools and frameworks
- Share your experiences and expertise with those around you, and multiply your impact through thoughtful teaching, influencing, and setting examples.
- Improve end-user experience by building infrastructure to support UX consistency across products
- Optimize the client-side performance of web applications
- Support teams to build consistent experiences through design systems
- Monitoring systems: monitoring errors in the application
- Research and test new languages, libraries and frameworks and evaluate their potential to make sure we never stop innovating.
- Understand developer pain points and common questions in frontend development, and aim to improve or answer them.
- Enable different product teams to be more productive by identifying similar features or tasks across teams and making improvements in the frontend stack or processes
- Engagement in the JavaScript ecosystem/community: understand the ever-evolving JS landscape to proactively ensure the rest of the organization is maintaining a technically healthy product.
- Build tools and drive initiatives to ensure best practices across teams as well as maximize developer productivity and experience
- Provide teams with visibility into their test coverage and frontend performance
- Build tools and processes to increase automated testing adoption in the org
- Build tooling to provide teams with visibility into their test coverage and frontend performance
- CLIs
Studies & Research Roadmap
Module System & Bundlers
JavaScript & TypeScript
- ECMAScript
- TC39 Proposals Overview
- TC39 Experiments
- TypeScript
CI — Continuous Integration
- NPM install cache
- Build optimization
- Tests optimization
Skills
- Knowledge/Deep understanding of modern frontend tech stack: HTML, CSS, JavaScript (ECMAScript), JS frameworks, type systems, package management, module bundling, unit and integration testing, browser capabilities.
- Knowledge/Deep understanding of validation (CI) and deployment (CD) automation tools: Jenkins, AWS CodePipeline, TravisCI, CircleCI, DroneCI, etc and/or Shell/Bash script.
- Knowledge/Deep understanding of reusable UI components: implementing WCAG (Web Content Accessibility Guidelines) and consistent design principles.
- Knowledge/Deep understanding of web bundlers and its surrounding technologies (modules, plugins, compiler hooks, loaders, etc).
- Knowledge/Deep understanding of systems and scalability: their edge cases, failure modes, and lifecycles.
- Knowledge/Deep understanding of web performance: metrics, tools, optimizations, architecture.
- Knowledge/Deep understanding of developer experience: metrics, tools, strategies, mindset.
- Knowledge/Deep understanding of frontend architecture: frontend layers — presentation, application, domain, infrastructure.
Resources
Scope, Closure, and Execution Context
Modules
Bundlers and Build Tools
JavaScript Spec
JavaScript
TypeScript
Infrastructure for migrations and adoption
Platform/Infra teams
Developer Experience
Frontend Architecture
CI/CD
Tests: unit, integration, e2e
Static Analysis & Code Format
Runtimes
Tools
Bundlers
Flow -> TS codemods
Static Analysis & Code Format
Test Frameworks
Jobs
License
MIT © TK