The list below aims to address the following question:
What are all the organisational responsibilities addressed by front-end engineering roles?
i.e. What could an organisation be addressing in some way? This can be through individual or team contributions. And the responsibilities are not necessarily taken on by identified 'front-end developers'.
You might use the list answer questions like:
- Q: How are we doing [X]?
- Q: Do we need to be thinking about [X]?
- Q: Who should be accountable for [X]? Who should be responsible for it?
- Q: What do front-end developers do at [ACME Inc]?
- This is a laundry list, not a ready made job description or list of individual responsibilities. No one person can do all of this well. Use it as a prompt, not a template.
- This is largely my own work, so is subject to my particular view of the world, along with its inevitable biases.
Contributions in the form of pull requests and issues are most welcome. Please read the contribution guide.
- Browser support
- Develop, document and maintain an agreed browser support policy
- Develop, document and maintain an agreed browser and device testing policy
- HTML development
- Write semantic, accessible and standards-compliant HTML
- Adopt an appropriate templating system
- CSS development
- Write valid, maintainable, cross-browser CSS code
- Agree and adopt appropriate CSS authoring conventions and code style
- Adopt and integrate CSS linting tools
- Adopt an appropriate CSS reset library
- Adopt an appropriate CSS framework
- Adopt an appropriate CSS pre-/post-processor
- Adopt an appropriate CSS-in-JS approach
- JavaScript application development
- Agree and adopt a consistent JavaScript coding style
- Integrate automated code linting and style checking tools
- Write clean, maintainable, tested JavaScript code
- Choose appropriate JavaScript libraries and application frameworks
- Write and maintain JavaScript unit test suites
- Monitor and maintain JavaScript code coverage tools
- Standards and practices
- Maintain knowledge of HTML, CSS and JavaScript specifications and standards
- Understand common industry practices and adopt where appropriate (e.g. progressive enhancement, mobile-first development, offline-first development)
- Application architecture
- Understand and adopt appropriate web application architecture patterns
- Adopt appropriate rendering strategies and architectures
- Adopt appropriate client-server communication strategies
- Adopt appropriate offline strategies
- Performance
- Set site or application performance targets
- Analyse, monitor and improve network access performance
- Analyse, monitor and improve rendering performance
- Analyse, monitor and improve JavaScript application performance
- User experience and user interface design
- Implement usable, consistent and performant user interfaces according to a design vision
- Support user research and experimentation
- Implement animation that enhances the user experience
- Ensure that custom web fonts do not have a negative impact on user experience
- Design systems
- Develop, document, test and maintain a shared UI component library or style guide
- Implement user interfaces according to standards, guidelines and tools provided by the design system
- Accessibility
- Design user interfaces for accessibility
- Implement and maintain accessible user interfaces
- Audit, test and monitor accessibility
- Multi-device strategy
- Adopt and implement a mobile-first responsive web design strategy
- Adopt and implement Progressive Web Apps (PWA)
- Adopt and implement hybrid app development and tooling
- Content strategy and management
- Develop content management systems and templates according to content strategy guidelines
- Choose appropriate content management systems
- API usage and design
- Make appropriate use of internal and third party data APIs
- Create and maintain API client libraries
- Understand and implement appropriate REST API design principles
- Design and adopt a consistent and usable API URL scheme
- Design and adopt appropriate domain data modelling schema
- Understand and adopt appropriate alternatives to REST (e.g. GraphQL, Falcor)
- Marketing automation and support
- Understand and implement search engine optimisation (SEO) best practices
- Integrate and support internal or third party marketing automation tools
- Analytics
- Integrate and support internal or third party analytics and metrics tools
- Analyse usage metrics to inform design and development
- Monitoring
- Choose, integrate and configure availability monitoring tools
- Choose, integrate and configure front-end error and exception monitoring tools
- Maintain appropriate alerting services and settings for monitoring systems
- Product support
- Manage on-call rotas
- Provide on-call technical support
- Provide technical support to customers
- Author and maintain technical product documentation
- Testing
- Author and maintain automated functional / user acceptance tests
- Test user interfaces manually across browsers and devices
- Author and maintain automated visual regression tests
- Maintain a device lab
- Select and use a browser testing service
- Version control
- Choose an appropriate version control system and service
- Agree and adopt an appropriate version control workflow
- Task automation
- Choose an appropriate build and task automation tool
- Write and maintain application test, build and deployment scripts
- Write and maintain continuous integration services, systems and tasks
- Security
- Understand potential security risks and develop secure applications
- Audit, test and monitor client-side application security
- Internationalization and localization
- Design and develop applications appropriate to the target audience
- Provide appropriate language controls
- Open source software
- Use open source software with licenses appropriate to your use case
- Contribute to open source projects according to the project contribution guidelines
- Consider sponsoring open source projects that you use