4

Creating a Frontend Platform in 2024

 1 month ago
source link: https://blog.bitsrc.io/creating-a-frontend-platform-in-2024-d4e45e19c0f5
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Creating a Frontend Platform in 2024

Creating a Frontend Platform in 2024

Streamlining Development and Enhancing Collaboration with Bit

Published in
6 min readFeb 12, 2024
1*g26eoUUoeKlYadRvWeDMag.jpeg

Front-end development has significantly evolved in recent years, increasingly relying on micro frontends, APIs, and headless services.

This modular approach introduces flexibility but poses several challenges in integrating, testing, and maintaining a cohesive and robust platform.

In this blog post, I’ll delve into how Bit, the build system for composable software, effectively addresses these challenges, enhancing both development and collaboration.

To get started quickly with a hands-on example, we’ll use the Platforms starter. This will help us quickly set up a new Bit workspace with example components.

1*oxRQarh3l-UWaVag8ov8sw.png
The components connected to the platform in this demo

Run this command in your terminal:

bit new platform my-project --env bitdev.node/node-env --default-scope my-org.my-project

Replace my-org.my-project with your actual bit-cloud-username.scope-name if you’ve already set up a scope on bit.cloud.

Visualizing our project’s structure is crucial, so after setting up, run the workspace UI (bit start) to view the dependency graph. This graph isn’t just informative — it’s the roadmap to understanding how our components interconnect and depend on each other.

0*yg_oM0sPQZiqpd6X
A glimpse into the dependency graph of our platform

Run the following to bring the entire stack to life for local testing and development:

bit run platforms-blog-post-platform
1*m1tns4ZUlB44Gtxa1asYBA.png
The app running locally

This command spins up several services: a user service, a discussions server, an API gateway, and the frontend server.

0*00QVB42cgyhq605l
Running the platform locally is a breeze.

Better dev experience

The platform component enables running services or micro frontends in their broader context, both locally and remotely, offering a developer experience similar to working on a monolithic project but within a distributed, modular architecture.

This allows a single service to function across different platforms, like Android and web applications, allowing developers to focus on functionality and user experience without being limited by the application’s environment.

1*lJNgHf2kCAAB67pW23s6ug.png
The user service is composed across three platforms, provided by one team as a microservice. Each platform can compose this service into its development and production workflows, treating it as a native part of its own architecture.

This setup changes the development process by allowing the local execution and testing of the entire platform as a unified application, speeding up development cycles.

Debugging is simplified, with issues being isolated and resolved in their specific context, akin to the process in monolithic architectures. This method provides centralized control over the platform’s components, promoting consistency and efficiency throughout the development lifecycle.

The platform component streamlines the shift from monolithic to component-based architectures, enhancing the development experience by combining traditional simplicity with modern flexibility.

Independent Versioning and Deployment

A standout feature of Bit is the ability for each microservice to be independently versioned and deployed. For instance, if changes are made to the discussions service, only this service will be updated and deployed. This approach minimizes deployment risks, allowing for more stable releases and faster iterations.

1*PsbSMeRcWg4HVHNRgQ8OVA.png

Enhancing Collaboration Across Teams

Bit streamlines collaboration by allowing the import of services maintained by other teams into your workspace. This functionality lets you modify these services and directly observe their effects on the entire platform. Such a feature proves crucial for implementing adjustments or fixes, testing changes within the platform’s complete context, and deploying them to a staging environment through Bit lanes, similar to git branches.

Real-World Scenario: Addressing UI/UX Inconsistency

Consider a scenario where two teams work on separate micro frontends, forming parts of the same user journey.

Initially, slight differences in button styles and form layouts lead to a disjointed user experience. By utilizing Bit components, both teams can reference a shared UI component (from the design scope, for instance), ensuring consistency across the user journey.

When the design system updates a button component, both micro frontends receive the update upon their next build, maintaining visual consistency without extra coordination.

Tutorial Section: Step-by-Step Guide to Modifying a Service

1. Import the service component (to your workspace) : Start by importing a microservice that requires modification. For instance, if improving the discussions service, run bit import bitdev.node/examples/user-server.

2. Make changes: Implement the required changes in your local environment. Bit’s isolation ensures that your modifications don’t impact other components unexpectedly.

3. Test locally: Use bit run to view your changes within the context of the full platform, ensuring everything integrates smoothly. You can also run bit test to run the tests.

4. Deploy to stage (with the inteded context): Once satisfied, deploy your changes to a staging environment using this can be done using standard CI systems or using a Bit lane: bit lane create my-feature-update bit snap -m “my change” and bit export.

5. Release a new version: Once your service has been tested in its staging environment, it can be released with a new version. This can be with or without the ‘platform’ component (i.e, this can be an isolated release or a release the propagates to its host platform).

Tackling Common Challenges

Transitioning from the chaotic world of unorganized monoliths to the structured universe of component-based software engineering with Bit is like moving from playing an intense, improvisational jazz solo to conducting a well-rehearsed symphony orchestra.

Initially, you might miss the freewheeling thrill of jamming code where “quick fixes” and “just make it work” strategies reign supreme. But as you start to grasp Bit’s CLI and the elegant harmony of components and workspaces, you’ll realize that every note, or code block, has its place. Sure, learning to conduct this new orchestra comes with its challenges, akin to a musician mastering a new instrument, but the Bit community and comprehensive documentation are your patient tutors, ready to help you fine-tune your skills until your software sings.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK