Article 1:
The tech industry grows and evolves at the speed of light. With that growth comes new ways of development and deliverability of web components.
Microfrontends are a relatively new way to decompose the front-end application into more individual applications that work loosely together. In simpler terms, it is a way to break up all the web components on the front-end into smaller and easier to manage pieces. There are several benefits to mircofrontend's that include:
- Reducing the complexity of front-end development and architecture
- Faster and more effective development
- Allows multiple teams to "divide and conquer" and work independently on the different web-components that contribute to the greater whole.
As new learning developers, the knowledge of mircofrontends will be beneficial to be successful in careers of front-end development. These next few articles will be the process of learning how to build and deliver a mircofrontend.
What We Will Be Building
We will be building a UI that allows a user to search for particular data.
Scope Of Work
Backend Work:
Building Endpoint API
The backend portion of this project will be building an endpoint to obtain the data the user will search for. We will create an API to hold an array of objects in JSON format. The objects we will be constructing will be "badges."
Properties of the Badge:
- Section ("Technology Information")
- Title ("APA Style Citation: Introductions")
- Symbol (Image to the right of the badge)
- Creator Name ("Creator Victoria Raish)
- Color (Border of the badge)
The badges need to be in a custom API JSON array of objects that we will use to retrieve the data using the fetch operation.
Frontend Work
For our mirco-frontend we will need a few frontend components.
- A search bar for user search
- A button that implements an action listener to trigger the search
- A container to load the data retrieved
Learning from Homework
GitHub Link: https://github.com/danialamo/my-card-dani
In attempt to learn how to implement the functionalities of a mircofrontend, I decided to build off a previous project and render my "players cards" on the frontend by creating an API endpoint that held the player card data in JSON format.
As a new developer learning the ropes of correct development and deployment, there were a few errors and obstacles in the learning process. Our goal is to learn from prior mistakes as we start and continue the development of our mircofrontend.
To be continued...
Top comments (0)