Importance of a Front-End Platform Team

Here’s how we established a front-end platform team in CSIT to enhance our developers’ efficiency to deliver front-end features faster.

Photo by Ferenc Almasi on Unsplash

In this article, we share our experiences setting up a front-end platform team in CSIT, the challenges the team faced, the strategies employed, and the lessons learned in this transformative journey.

Background

Like many companies, we have multiple product teams responsible for building products with dedicated front-end web applications. Generally, this isn’t an issue as each application is distinct and decoupled. In recent years, there has been a growing need for cross-application integration to allow our users to access, collaborate on, and analyze their data across multiple web applications.

The differing front-end engineering practices and technologies used across product teams created challenges for collaboration and quality assurance, resulting in errors and bugs, negatively affecting our users’ experience. Hence, we established a front-end platform team in CSIT to address these integration issues to support our key product teams.

Our Front-End Platform Team

Photo by Pixabay on Pexels

The primary objective of our front-end platform team is to enhance the developers’ experience while optimizing efficiency and effectiveness in delivering user-centric applications. To achieve this, we re-evaluated how each participating product team develops their front-end applications, focusing on key areas that facilitate effective collaboration such as:

1. Front-End Tech Stack: Standardizing the libraries, frameworks, tools and platforms used across teams, building expertise and community support.
2. Components Design: Ensuring consistent user experience across applications and improved code reuse.
3. Knowledge Sharing and Discussion: Creating platforms to share as well as discuss best practices, libraries selection and feature design.

Additionally, we also focused on streamlined development processes:

1. User Validation Methods: Aligning strategies for validating features with users to ensure reliable and effective feedback loops.
2. Code Quality Management: Enforcing practices to maintain high code quality both within and across teams.
3. Web Observability: Implementing advanced web observability techniques for better monitoring and troubleshooting.
4. Deployment Process: Optimizing and standardizing the deployment process to reduce downtime.

None of these efforts involve actual front-end web feature development. Instead, we focus on establishing common standards, practices and governance to enable product teams to collaborate and work together effectively and produce quality front-end applications.

Challenges

Photo by Google DeepMind on Pexels

There were multiple challenges that we faced while trying to meet our objectives. Here are some of the challenges that we would like to highlight.

Challenge #1 — Diversity in React Ecosystem Libraries

Image By Author

Most of our web applications are developed using React. However, there were variations in the libraries used and practices in the web applications. This diversity manifested in several critical areas such as:

1. Different build tools — Some React applications were created using Create React App, others were manually configured with Webpack and Babel, leading to inconsistent project structures and sub-optimal build practices.
2. Diversity of Component libraries — The majority of teams expressed distinct preferences for their chosen component libraries. This diversity in library selection can lead to visual and functional inconsistencies throughout the application. As a result, maintaining a unified and coherent user experience became more challenging.
3. Multiple styling solutions — Teams employed a wide range of styling solutions, including CSS-in-JS, SASS, and Bootstrap. Managing different styling methodologies increases the overall complexity of the codebase, making it more challenging for developers to understand and maintain.
4. Different approaches to State Management — There was a stark difference between how teams handled asynchronous data and global state. Some relied on global store solutions for comprehensive global state management, while others utilized React’s built-in hooks, creating a disparity in code organization and data flow patterns.

These variations in libraries and practices also had other consequences. Teams developed disparate skills and knowledge bases, creating silos of expertise. This fragmentation hindered developer mobility between projects and impeded cross-team support. Moreover, the lack of standardization made it challenging to maintain code quality and consistency across our React applications.

Challenge #2 — Quality Assurance

With the introduction of cross-product features integration, we encountered a new set of challenges. To give you a rough idea of the types of integration, here are a few examples:

1. Building a web UI that consumes another’s product team’s API
2. Passing data from a table view created by one team to a graph view developed by another team
3. Synchronizing user sessions and authentication across multiple web applications
4. Implementing shared state management to ensure data consistency across different applications
5. Building features on the same web application by multiple teams
6. Enhancing observability to monitor user interactions and application performance across multiple applications

Given the complexity of the integration effort, a strong testing workflow is needed to ensure code quality assurance before shipping the feature to our users.

Challenge #3 — Developer Experience

Another challenge from the product teams was the Developer Experience. Several key areas came to our attention as we engaged with our front-end engineers:

1. Integrations with Backend APIs (or API Proxies) — Managing web applications developed by multiple teams or integrating with other teams’ applications/APIs can be frustrating. Issues arise when changes or failures in other teams’ APIs disrupt the front-end application development process.
2. Offline Mode — Front-end engineers often face challenges when developing locally (at times from home) due to dependencies on integrations with other teams’ applications/APIs that may not be available offline.
3. Hot Swapping User Permissions for Functional Testing — The number of user personas with different permissions for the different products is non-trivial. This has made the testing of features that dynamically change based on user permissions challenging; since there was no straightforward method to switch user contexts for testing purposes.

Establishing Foundations

To address the challenges mentioned, our platform team focused on two critical elements: i) creating user-friendly solutions such as a bootstrapping framework for seamless application team onboarding, and ii) conducting research to promote best practices and develop efficient, intuitive code APIs.

These foundations are designed to empower teams for more effective feature delivery. Recognizing the importance of a solid foundation, we prioritize enhancing developer experience, knowing it directly accelerates our business delivery capabilities.

Foundation #1 — Implementing standard React dependencies

Image by Author

We did an internal review to identify the most common tools and libraries among our developers. This assessment provided valuable insights into the current trends and skill sets within our organization. These were some of the libraries the platform team chose to standardize.

1. Vite (build tool) — From the performance benchmarks we concluded, Vite was selected due to its superior performance and out-of-the-box support for TypeScript, JSX, CSS (including preprocessors), overall reducing their configuration complexities.
2. Mantine (component library) — Of the leading component libraries evaluated, Mantine was chosen for its robust TypeScript integration, ensuring type safety and code reliability for large-scale applications. Mantine’s developer-friendly APIs reduce the learning curve, boosting onboarding and productivity. Its hooks library also effectively addresses challenges in state management and side-effect handling.
3. CSS Modules (styling solution) — The teams voted for CSS Modules as the preferred styling solution. CSS Modules offer an elegant solution for managing styles in React projects, with clear advantages over global CSS or CSS-in-JS. Their modularity and scoping capabilities create a clean, maintainable, and scalable styling architecture for our applications.
4. TanStack Query (asynchronous state management) — TanStack Query is our top choice for managing asynchronous state in React, thanks to its unmatched features, performance optimizations, and developer-friendly API. It also intelligently caches data for rapid retrieval and automatically refetches outdated data, keeping the application current without manual intervention and reducing boilerplate code.

Adopting new standards is a significant investment for the product teams. As the platform team, we initiated early consultations with the product teams, conducted extensive research and testing, and provided thorough documentation to persuade them. We basically take the lead and guide the teams though their changes.

Foundation #2 — Quality Assurance Workflow

Front-end developers typically work with end-users for feature requirements, UI/UX designers for design consistency and user experience, and QA teams for ensuring quality and performance. Hence, we recognizes the need for a good review workflow for developers to quickly validate their implementations.

We incorporated review apps to quickly showcase new features to our stakeholders in a realistic environment, enabling swift validation and rapid iterations. Additionally, feature flags are used to control the release of features, ensuring that they are thoroughly tested and meet user expectations before a full rollout. Here’s how we did it.

Image by Author

The feature review workflow consists of several checkpoints to ensure the quality of code and features. These checkpoints include:

1. Review Apps, which are based on GitLab’s Review Apps, that are automatically generated for the product team (e.g. UI/UX designer or product owners) to validate the developer’s implementation.
2. Merge Request and Code Review for code quality
3. Staging environment for pre-production checks
4. Feature flags to control feature release as well as for QA to thoroughly test the feature
5. Each build & deploy pipeline consist of unit & E2E testing

This feature review workflow allows the product teams to rapidly validate their implementations while ensuring quality is consistently maintained. As the front-end platform team, our role is to assist teams to quickly set up this review workflow through templates and guides.

Foundation #3 — Front-End Testing

Image by Author

As a front-end platform team, we strongly advocate for robust Front-end Testing using Playwright to enhance reliability and identify potential issues before production deployment. We encourage our developers to prioritize End-to-End (E2E) testing for two primary reasons:

1. Holistic system validation: E2E tests provide a comprehensive coverage of our entire application, ensuring that the various integration points are properly checked which otherwise might go unnoticed. E2E tests also verify the cohesiveness of functionality and identifies potential bottlenecks between these services.
2. User-centric testing approach: By leveraging carefully designed user workflows from our designers, developers can create E2E tests that accurately simulate real-world user interactions. This allows early detection of usability issues, functional discrepancies and rapid identification of regressions.

We also integrated unit testing using Vitest into our testing strategy to complement our E2E testing. Unit testing excels at examining isolated and individual components such as common react components or utility functions. It allows for focused testing where developers can concentrate on specific logic within a react component or function.

Foundation #4 — Web Observability

Photo by Stephen Dawson on Unsplash

Front-end developers rely on robust observability to ensure optimal application performance and user experience. We adopted Matomo, a self-hosted web analytics platform to monitor user interactions across applications. Matomo enables the teams to track user sessions, monitor the page views, and analyze web component interactions. Its real-time analytics and customizable dashboards also help facilitate swift responses to emerging trends.

In addition to Matomo, we advocate for OpenTelemetry as a standardized framework for collecting and correlating telemetry data. Leveraging Real User Monitoring (RUM) with Elastic Observability, we provide the teams with comprehensive observability across backend services. This integration allows for effective troubleshooting and identification of performance bottlenecks.

These solutions have equipped our front-end developers with proactive management tools, enabling continuous improvement of web applications and enhancing end-user experiences.

Foundation #5 — Documentation

As a front-end platform team, having a strong documentation is our key factor in helping us drive the foundation changes. Our documentation includes the following:

• Best Practices — Standardizing frameworks and libraries with detailed guides and code references.
• Design Considerations — Providing historical context and guiding developers, especially new joiners on the design decisions.
• Setup Guide — Simplifying onboarding with clear environment setup instructions.
• Blog Updates — Facilitating open contribution through regular posts on platform updates.

Image of Docusaurus Webpage

We established a robust documentation infrastructure using Docusaurus, centralizing developer resources. This hub integrates development blogs, guides, and onboarding materials, enhancing discoverability, accessibility and usability. This initiative has also empowered our developers across teams to share knowledge and collaborate more efficiently and effectively.

Key Learnings

Working in a platform team entails navigating various challenges while ensuring alignment with broader business objectives. Here are some key insights drawn from our experience that we believe are criteria for our team’s success:

Photo by Karolina Kaboompics on Pexels

Getting buy-in from management

As a front-end platform team, we collaborate with engineering, design, and product management to ensure our focus aligns with business objectives. While we keep packages up to date, it can divert resources and affect timelines, and hence strong management support is crucial to swiftly resolve impediments. This allows us to navigate challenges effectively while advocating for best practices and addressing stakeholder concerns.

Managing transition

Our front-end platform team functions as an extension of our DevOps practices to facilitate the product teams in their feature delivery and operations. When managing transition of the teams onto our platforms, especially those with time-bound deliverables, requires careful coordination. Our approach involves collaborating closely with them to understand their timelines, providing detailed documentation on the work involved, and identifying task dependencies to facilitate smooth progress and successful completion.

Developer Empathy

Our front-end platform team, like any product team, must also develop empathy towards our users (developers) to define our value proposition clearly. Engaging engineering teams, we must focus our pain points on high-impact solutions, avoiding resource waste. For example, we found engineers independently implementing WebSocket connections for client-server communication, leading to performance and scalability issues. We assessed each solution and collaborated to co-design a unified, high-performance alternative for all teams to adopt.

Moving Forward

While our front-end platform team has made strides with our foundational work, there is more to be achieved. We will continue focusing on elevating product teams and supporting their migration to established standards. Planned initiatives include implementing common front-end services, collaborating with the designers to establish a unified design system, and optimizing various front-end aspects. Additionally, we are always looking ahead at emerging standards, assessing their impacts, and preparing product teams for the next bound.

Our journey towards better large-scale development of front-end applications is a continuous journey of improvement. Given the good outcomes, we remain committed to the concept of a front-end platform team approach. This endeavor has unified our approach to front-end development, improved the developer experience and fostered stronger collaboration across front-end teams.

PS: If you are passionate about software engineering like we are, CSIT is hiring! Find out more about our positions for hire.

Key contributors of this article -

• Bryan Koh
• Tan Zhi Jie
• Chan Weiming
• Alvin Chin
• Huang Sunjing