Areas of frontend
Overview
front-of-the-front-end and back-of-the-front-end web development by Brad Frost.
- Front of frontend: Building products, features, UI components, accessibility, micro-interactions, etc.
- Data of frontend: Building and managing client data stores, state management, data transformation, interacting with APIs, etc.
- Backbone of frontend: Setting up tools for building and deploying frontend applications. Includes configuring build setup for different environments, testing framework, code linting, and formatting setup, Typescript support, CI/CD pipelines, PR checks, etc.
Backbone of frontend (core team)
A frontend core team lay the foundations for building frontend applications so that the developers can focus on shipping things faster without compromising on quality.
See razorpay case study.
Tooling and core infra
A swiss knife of tools, utilities and configurations governed by clear standards. They can be either used separatedly or be composed together to build or scale to any number of products through a common CLI.
- Common CLI.
- UI components library.
- Design system (e.g., reusable patterns, designer-developer workflow).
- CI/CD workflows (e.g., Github Actions, Spinnaker pipelines).
- Automated setup for Docker builds, K8s.
- PR checks (e.g., DangerJS).
- Automated versioning (e.g., changeset).
- SSR setup (e.g., code splitting, routing).
- Monitoring (e.g., SpeedCurve, Sentry).
- Linting (e.g., ESLint, Prettier, Stylelint).
- TypeScript setup.
- A/B testing SDK.
- Analytics SDK.
- Security mechanisms (e.g., secretlint).
- Common utilities (e.g., lodash, date functions, etc).
Principles
- Small and autonomous team with an ownership mindset.
- Opinionated toolchain flexible enough to mold it as per product needs.
- Lower barrier to entry by providing pluggable modules.
- Platform as a product and developers as customers. Collect feedback often and iterate.
- Research thoroughly and get early feedback from engineers across teams before building big capabilities.
- Evangelize as much as possible. Spread awareness and conduct sessions for demoing the capabilities. Along with building tools, create guidelines to spread awareness.
- Educate and empower teams. Share learnings to get opinions, encourage contributions, write documentation with examples, FAQs, troublesohoting guides, etc.
- Interact with other teams to understand their problems by collecting feedback, conducting internal sessions, open discussions, and consulting as part of office hours.
- Identify early adopters. Capture feedback from them and iterate upon the offerings.
- Recognize and reward as much as possible. Celebrate adoption wins, contributors from teams outside the core, bring recognition and encourage more adopters and external contributors.