Posts

MicroFrontends

Image
In this article, we will read about how to make a  pineapple curry… ahh…   sounds different, you are here for micro-frontend but reading about pineapple curry, what the hell is this? Don’t worry, this is just a mind trick to make your brain more active before reading about micro-frontends :) Ok let’s jump into our main topic, micro-frontends. The demo can be seen here:  https://microfrontend.netlify.com  and a single micro-app here:  https://microfrontend-team-movies.netlify.com/ What is a micro-frontend? “In this approach, the web application is  broken down  into its  features , and each feature is  owned , frontend to backend, by a different team. This ensures that every feature is  developed ,  tested  and  deployed   independently   from   other   features” —  ThoughtWorks Technology Radar micro-frontends team view Why we are calling it a ‘curry’? “ Curry ” is a variety of dishes that use a combination of spices or herbs to make a dish yummy, similarly. Our  m

Front-end State Containers: Effective Selection

Image
In today’s frontend ecosystem, there is an overflowing ocean of state containers and every developer is sailing with one or the other state container. State container is like an abstraction which helps in managing application state. If you are not aware of what a State container and State is then stop here, and read this blog before continuing. In this tutorial, I’m going to show you how to create a simple “ ToDo” app in React using some of the popular state container choices like, Hooks , Redux , Mobx , and setState . Let’s get started. Quickly, see what we are going to build, I divided the ToDO application in three-part 1.     Add Item – this will add a new item in the to-do list 2.     Item List – this will compose a list of Items and display ToDo and Completed List 3.     Item – leaf level component which has a.     Checkbox b.     Item text c.      Delete 4.     Filter component – take user input and filter out the list accordingly, we would be reus