Creating a Frontend Platform in 2024
Streamlining Development and Enhancing Collaboration with Bit
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.
Run this command in your terminal:
bit new platform my-project --env bitdev.node/node-env --default-scope my-org.my-projectReplace
my-org.my-projectwith your actualbit-cloud-username.scope-nameif 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.
Run the following to bring the entire stack to life for local testing and development:
bit run platforms-blog-post-platform
This command spins up several services: a user service, a discussions server, an API gateway, and the frontend server.
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.
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.
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 runto view your changes within the context of the full platform, ensuring everything integrates smoothly. You can also runbit testto 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-updatebit snap -m “my change”andbit 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.
Wrapping Up
Bit tackles the intricate aspects of modern front-end development head-on, streamlining integration, testing, versioning, deployment, and collaboration. Whether you’re building on a grand scale or keeping it compact, Bit equips you with the necessary tools and workflows to enhance your development process.
You should try Bit, dive into the docs, and start playing around with it in your projects. Join the Bit community to keep up with the latest updates and connect with fellow developers. And don’t forget to share your creations with us — we love seeing what you build with Bit. :)
