Identifying Strengths and Struggles

M³ Web App

The M³ Web App (AKA Middle Mile Management) project showcased several notable strengths, including accessibility features like keyboard navigation and screen reader support to accommodate users with musculoskeletal conditions and visual impairments.

The team prioritized type safety, performance improvements and automated end-to-end testing. Capturing issues and ensuring the system behaved according to business expectations.

Known Limitations

Despite its strengths, the project faced significant challenges that were impacting not only that project but several other projects in the whole team:

• • Bundle Size: By adopting large heavy libraries such as MUI, Excel.js and Sheet.js, the resulting bundle size turned to be significantly larger than the recommended.

• • Circular Dependencies: As consequence of introducing reusability without clear boundaries.

• • Outdated dependencies: Caused by Monkey patching and extending old and large libraries, leading to system instability and frozen dependencies.

• • No Unit Tests: The absence of unit tests made it challenging to ensure code quality and impeded confident refactoring.

• • No reusability: Since all products belong to it's own repository, there was no chance of reuse code in other apps that implemented the same components and business rules.

Aside of anecdotical insights from other team members, I have used several tools to measure the impact of these problems within the organization.

Tools

Skott

Skott is a minimalist developer tool that can be used to efficiently generate directed graphs from your JavaScript/TypeScript/Node.js project. It can automatically collect metadata such as file size, third-party or builtin dependencies, detect circular dependencies, finding unused npm dependencies, help you building tools relying on graph data structures thanks to the exposed primitives.

Webpack Bundle Analizer

Webpack Bundle Analizer is a package that uses FoamTree to generate Voronoi diagrams for Webpack bundles to visualize the cost of packages within the whole bundled code.

React Profiler

A ReactJS Profiler is a tool for profiling the react components, It measures how many times the react Application is rendered and how much time the components take to be rendered. It helps to identify the parts of the application that are slow so that the developer can optimize it for better performance

Team expectations

Gathering feedback and ideas from team members, exposed their expectations for this project to thrive. Everybody had their own opinion and concerns that shaped the milestones of this project:

• • Enhance modularity and component isolation.

• • Support independent versioning of components.

• • Improve collaboration among developers.

• • Provide auto-generated documentation and visual tools.

• • Integrate seamlessly with existing projects, workflows and CI/CD pipelines.

Analysis outcomes

Monorepos to the rescue

The monorepo approach to software development has gained significant traction, offering a range of benefits from simplified dependency management to independent versioning. However, managing monorepos can be complex, necessitating the use of specialized tools. I have evaluated 3 major options:

Bit.dev overview

Scopes

A scope is an organizational space that aligns technical components and services with specific business domains and objectives. It enables teams to deliver full-stack, composable digital services tailored to their needs, enhancing efficiency and business alignment. Scopes promote domain-based ownership, facilitate cross-domain collaboration, and provide a transparent structure for defining roles and permissions. By blurring technical complexities, scopes allow teams to focus on business goals while easily identifying, accessing, and integrating digital services across the organization.

Components

Components are modular, reusable units of software that can be developed independently and integrated seamlessly into various projects. They encapsulate specific functionality, making it easier to build, share, and maintain code across different applications.

Collaborative server

The most important feature of Bit is its ability to enable seamless collaboration and sharing of reusable components across teams and projects. This transforms how teams work together by allowing them to develop, version, and share components in an isolated, reusable way, all through a centralized platform.

• • Tests Overview: An outline of testing functionalities that improve code reliability and quality assurance.

• • Automatically Generated Dependency Graphs: Tools that visualize dependencies between components, aiding in understanding and managing complex systems.

• • Live Auto-Generated Documentation: Real-time documentation that updates automatically, ensuring information is current and reducing manual effort.

• • Live Preview with Individual Component Versioning: Enables developers to preview components live while tracking and managing different versions.

• • Code Inspection: Features that allow for thorough examination of code to detect errors, enforce standards, and optimize performance.

• • Visual Updates and Side-by-Side Revisions: Visual tools that facilitate comparing different code revisions, making it easier to track changes and updates.

• • Automatic Changelog: Automatically generated logs that record changes over time, enhancing transparency and accountability.

• • Releases and Version Management: Systems for managing software releases and versions efficiently, ensuring smooth deployment cycles.

• • CI/CD Tools and Major Cloud Support: Integration with Continuous Integration/Continuous Deployment tools and compatibility with all major cloud platforms, streamlining deployment and scalability.

Implementation