Giters

imteekay / frontend-infrastructure

Research on Frontend Infrastructure

Home Page:https://iamtk.co/frontend-infrastructure

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

javascriptfrontendfrontend-infrastructuretypescriptdeveloper-toolsdeveloper-experience

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

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

About

Research on Frontend Infrastructure

https://iamtk.co/frontend-infrastructure

javascriptfrontendfrontend-infrastructuretypescriptdeveloper-toolsdeveloper-experience

License:MIT License

Languages

Language:JavaScript 93.2%Language:HTML 5.3%Language:CSS 1.5%