Web Developer Experience

Context

Web Application developers working on XM Cloud projects face unique challenges when collaborating across team roles as introduced in the Preparing for an XM Cloud project recipe. They need specific support from their team members and well-defined practices to work efficiently in collaborative environments. Understanding these workflow requirements is essential for establishing effective quality standards.

Execution

Projects can face multiple challenges but it’s often common that issues start to arise when there are:

• Inconsistent Coding Standards - without standardized practices, each developer may follow different conventions, making codebases difficult to navigate and understand.
• Integration Friction - when multiple developers contribute to the same codebase using different styles and approaches, integration becomes time-consuming and error-prone.
• Scalability Challenges - as web projects grow in complexity, poorly structured code becomes increasingly difficult to extend and maintain.
• Growing Technical Debt- without quality standards, technical debt accumulates rapidly, leading to slower development cycles and increased refactoring costs.
• Dealing with these challenges can take different approaches - your project might require specific needs, but the following are a starting recommendation on how to setup for success.

Dealing with these challenges can take different approaches - your project might require specific needs, but the following are a starting recommendation on how to setup for success.

Establishing a Consistent Web Application Developer Workflow

A standardized workflow is essential for front-end developers to collaborate effectively.

Manage Node.js/npm Version Compatibility

• Use version management tools like nvm (Node Version Manager) to switch between Node.js versions required by different JSS versions
• Document required Node.js/npm versions in the project README
• Consider using Docker containers with pre-configured environments to ensure consistency across development setups
• Add .nvmrc files to projects to automatically prompt developers to use the correct Node.js version:

Configure Shared Editor Settings

Use .editorconfig to maintain consistency regardless of IDE choice

Standardize the Build Process

Implement consistent build steps that every team member follows. Use standardized scripts in package.json for common tasks:

Define Clear Collaboration Boundaries

Establish naming conventions for files and folders. Use a logical directory structure which makes navigation intuitive, for example:

Package Management Practices

• Establish guidelines for adding new dependencies (approval process, size considerations)
• Set up dependency scanning for security vulnerabilities
• Consider using package lockfiles (package-lock.json, yarn.lock) and commit them to the repository
• Define a process for regular dependency updates and maintenance

Example package policy for README:

Local Development Tooling

• Configure browser development tools and extensions that enhance productivity
• Set up consistent local mocks for APIs and services
• Implement hot reloading and fast refresh configurations

Automated Code Formatting and Linting

Consistent code style enhances readability and reduces cognitive load when switching between files:

ESLint Configuration

Implement team-wide ESLint rules:

Prettier Configuration

Enforce consistent formatting with Prettier:

TypeScript Configuration

Use TypeScript for type safety:

Husky Pre-commit Hooks

Enforce standards before commits:

Insights

For Web Application developers to work effectively in an XM Cloud project, they require specific inputs and support from other team roles. Enforcing cross-functional collaboration is key for a successfull project. The following guidance converce most common requirements expected from each role, but these should be tailored based on your setup.

Project Managers, Project Owner

Content Teams etc

UX/UI Designers

CMS Developers

System Administrator/DevOps Engineers

Related Recipes