by Firsta Royan Daliska front end engineering at Freight-hub

In the dynamic realm of web development, the architecture underpinning front-end applications plays a crucial role in dictating their maintainability and performance. As businesses endeavor to satisfy increasingly complex user demands amidst rapid technological advancements, a recurring challenge surfaces: the quest to design scalable, manageable, and responsive applications within this intricate landscape.

A robust frontend architecture is fundamental to maintaining a codebase that remains comprehensible and maintainable over time. It is the cornerstone that eases the integration of new features, refines existing components, and mitigates unexpected bugs. Ideally, our architectural vision advocates for a structure composed of modules characterized by low coupling and high cohesion.

Here, I’d like to write about the architecture of our frontend codebase, which embodies the modular approach.

Classical Approach

Before we dissect the modular approach, let’s revisit the challenges encountered on the traditional path.

Our initial project structure was a monolithic classic—a sprawling expanse where similar components like pages, UI elements, and routes, instead of being encapsulated within a common module, were disjointed. This led to multiple instances of near-identical modules being managed separately, a practice far from optimal.

Navigating such a codebase proved to be a formidable task. Developers often found themselves in a maze, seeking out components and discerning their roles. As the project expanded, the monolithic structure became a battleground where maintaining coherence was as challenging as it was critical. The interconnectedness meant that a single module’s alteration could cascade into unpredicted errors across the application, due to the convoluted coupling and the scattered distribution of UI and business logic.

This complexity was also a nightmare for new joiners, who faced a steep learning curve, necessitating a deep dive into the project’s depths before they could effectively contribute. This onboarding process was not just time-intensive—it was a resource-intensive endeavor.

In response to these challenges, extensive research and deliberation led us to adopt a modular approach—an architecture that promises clarity, decoupling, and navigability.

Modular Approach

The above illustration showcases an ecosystem where our applications like ‘Shipper’, ‘Internal’, and ‘Transporter’, etc interface with a suite of clearly delineated modules such as’mod-auth’,’mod-chat’, ‘mod-shipper’, and ‘mod-admin, etc’. This approach not only encapsulates the essential elements like Page, UI, and Route Service that an app requires but does so within a business domain context, enhancing relevance and efficiency.

The above illustration showcases an ecosystem where our applications like ‘Shipper’, ‘Internal’, and ‘Transporter’, etc interface with a suite of clearly delineated modules such as’mod-auth’,’mod-chat’, ‘mod-shipper’, and ‘mod-admin, etc’. This approach not only encapsulates the essential elements like Page, UI, and Route Service that an app requires but does so within a business domain context, enhancing relevance and efficiency.

Each module stands as an entity that is purpose-driven and independent, culminating in a codebase that is both robust and agile. The structure lays out a transparent pathway for ongoing and future development, streamlining the application enhancement process.

By separating modules with explicit boundaries and distinct responsibilities, we’ve fostered an environment where low coupling and high cohesion are not just ideals—they are the norm. The orchestration of updates across modules, managed by Nx within our monorepo framework, epitomizes this philosophy.

The clarity and developer-centric design afforded by Nx have vastly improved the development experience. It also has empowered teams to operate concurrently on different parts of the application, avoiding the risk of stepping on each other’s toe.

This modular transformation is not only a victory for our developers but for our users as well. It has translated into a development process that is more direct, accelerating the journey of features from ideation to deployment. The result is a faster delivery of value to users, meeting their needs with greater alacrity and precision.

AI’s impact extends to route optimization, where algorithms consider factors like traffic and weather to create efficient transportation routes. Autonomous vehicles, such as self-driving trucks and drones, are becoming a reality, promising safer, more efficient, and cost-effective transportation solutions. Warehouses are witnessing an automation revolution with AI-driven robots and drones handling tasks like picking and packing. Furthermore, real-time supply chain visibility provided by AI is enhancing transparency, reducing disruptions, and improving overall supply chain efficiency.

While the benefits of AI in logistics are evident, challenges like data security and the need for skilled AI professionals should not be underestimated. Nevertheless, as businesses continue to embrace AI-driven solutions, the future of logistics promises even greater efficiency, reduced costs, and improved customer experiences. In this rapidly changing industry, AI is not just an option—it’s a necessity for staying competitive.