This content originally appeared on Bits and Pieces - Medium and was authored by Eden Ella
Understanding Bit and Composability by Building a Composable GraphQL and React Vite app
A composable app built with Bit is a composition of various independent Bit components.
Bit components can be created from scratch, using a template, or by forking (cloning) an existing component that is available locally or on Bit Platform.
Bit. Composable software platform.
Our demo Blog React app is composed of the following Bit components:
To be able to follow this tutorial, make sure to install Bit and initialize a new workspace.
npx @teambit/bvm install
# replace ACCOUNT.SCOPE_NAME with your Bit Platform's account and the name of the scope you created
bit init my-blog-app --default-scope ACCOUNT.SCOPE_NAME
cd my-blog-app
You can list all templates available out-of-the-box to get started creating your own components:
bit templates
You can clone the entire scope from Bit Platform by running (inside your Bit workspace)
bit scope fork learnbit-react.blog
The screenshot above reveals the different components that make up this solution. Let’s go over each to understand the implementation better.
1. blog-metadata
See: https://bit.cloud/learnbit-react/blog/entities/blog-metadata
A shared type and schema validator. It provides data modeling and a set of operations that can be utilized by services or front-end applications that handle blog post data within your system.
Using this component, developers can independently and in parallel build and maintain processes that interact with blog data. For example, a team working on the client app presenting the blog data does not have to wait for the blog API to be ready before they can start their work.
To create an entity component run the following:
bit create entity entities/blog-metadta
To learn more about “entity” components, see:
2. blog-server
See: https://bit.cloud/learnbit-react/blog/servers/blog-server
You might be surprised to find a server as a component but Bit componetns are not limited to only being consumed as Node packages. They can also be deployed as apps and services (and consumed “over the wire”).
In our case, the server is an Apollo GraphQL server. To create a GQL server run the following:
bit create graphql-server blog-server
To run the server locally, run:
bit run blog-server
To learn more, see:
3. blog-context and use-blogs-list
See: https://bit.cloud/learnbit-react/blog/context/apollo-blog-provider
See: https://bit.cloud/learnbit-react/blog/hooks/use-blog-list
A custom Apollo client provider and a custom hook. These two make fetching blog data easy and simple. When implemented correctly, they should also provide support for testing by providing mock data.
These components can be considered SDKs for the blog service. They can be used across different products and solutions that feature a blog.
To create a custom React hook, run:
bit create react-hook use-blog-list
To learn more about GraphQL data fetching with Bit components, see:
4. blog-lobby and blog-list
See: https://bit.cloud/learnbit-react/blog/ui/blog-list
See: https://bit.cloud/learnbit-react/blog/pages/blog-lobby
React UI components: a list, and a full page. As you’ve realized by now, when building a composable app or system, every part of the solution is comprised of shareable components. This is true whether the component is “generic” or “concrete” and whether it seems probable to ever get reused.
There are several reasons for that. Here are the main ones:
- Components are iterated over and updated with time, to address new needs as they arise. A component’s interface is often extended during this process to answer those new requirements while remaining backward compatible. This process naturally makes what once was a concrete component more generic and reusable.
- A project composed solely of independent Bit components is much easier to maintain. It is much easier for developers to read and understand small, discrete pieces of software that serve a specific purpose and expose a clear interface. It is also much easier to predict how these changes will affect the rest of the system since the entire system can be read as a clear dependency graph, where relations between dependents and dependencies, are clear.
- Last but not least, the fact that Bit components can be developed and maintained independently from any project means that work can easily be distributed between teammates. The project is modified via “atomic changes” made to discrete conponents. That is key to harmonious collaboration that is free of merge conflicts and bottlenecks. Software can be developed in parellel, effortlessly.
To create a UI component, run the following:
bit create react ui/blog-list
To learn more see:
5. blog
See: https://bit.cloud/learnbit-react/blog/blog
The frontend app. As any other Bit component this components can also be integrated into projects as a standard Node package. However, since it is also defined as an app (see its .bit-app.ts file), it is deployable. In this specific case, the app is a Vite Reat app. Explore the Bit Platfrom to discover other types of frontend apps.
To create a React Vite app run:
bit create react-app blog
To run the app locally, run:
bit run blog
To learn more about React apps, see:
Building a Fullstack React Application in 5 Minutes was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Eden Ella
Eden Ella | Sciencx (2024-06-01T02:36:22+00:00) Building a Fullstack React Application in 5 Minutes. Retrieved from https://www.scien.cx/2024/06/01/building-a-fullstack-react-application-in-5-minutes/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.