Frontend Infrastructure: Techniques and Strategies

Photo by Hassan Pasha

When thinking about developing the frontend infrastructure for product teams, there are a lot of different possibilities and actions we can do. This is a collection of techniques and strategies to help modeling the roadmap for frontend infrastructure teams.

• 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

Twitter · Github