lxcdcl_afa6b8e54cb40005db3ea3563806c26d7d457100

The topic of micro frontends (MF from now on). Is one I have dealt with before, in my [module federation article](https://georgeiliadis.com/blog/Pseudo-Micro-Front-Ends). It's something that really interests me since it allows you to frankenstein websites from little parts of other websites. Now module federation is awesome, but it requires a bundler, plugins and setup, albeit a pretty easy one. 

There are however other options out there:

-  [SingleSPA](https://single-spa.js.org/), which is a JS router for micro services.
-  iframes. Yes you read that correctly. iframes are micro frontends, they allow you to import other sites inside another one, and display content hosted somewhere else.


  Today’s challenger is none of the above. It actually requires no setup at all. Is supported in all of the browsers and it is dead simple. Yes I am aware as of the time that I am writing this one, Safari is not supported per the MDN docs, but it will be on version
[16.4](https://webkit.org/blog/13966/webkit-features-in-safari-16-4/), per their release notes. So based on the above they are also browser native!
  
The feature is importmap. What is an importmap precious? you might ask. Well an importmap is a type for the script tag. It allows you to alias name, to some url that contains a script, in a json format. Allowing you to use:


```import X from aliasName```

Inside your JS. So how do you actually use that to make MFs? Well since you can treat your imports as a named module, that allows you to do, just the above. And thanks to web-components and lit, You can import some pretty cool and amazing stuff, including components with independent routing. 
	Imagine this, you have a root application, inside it you put and importmap tag, pointing to external urls. Were each url, server some web-components, and those web-components behave independently and each one of the has its own routing rules. Allowing for maximum flexibility. Sounds good? 

Well, here it is: [repository](https://github.com/georgeiliadis91/import-map-mfe-poc)  you will find guidelines on how to run and built it.

Brief Explanation:

We have 3 projects.
 
- **root**
- **lit-project-one**
- **lit-project-two**


Each lit project has 2 routes, 
- ‘/’  - has a simple message saying this is mfe-X
- ‘/special’  -has a webcomponent that fetches some data from the public pokemon api. 

![Screenshot 2023-04-03 at 10.29.02 PM](https://admin.georgeiliadis.com/uploads/Screenshot_2023-04-03_at_10.29.02_PM_3cd4b3fe0f.png)

‘one’ fetches the first 10 items,
‘two’ fetches items 11-20. 

Each project has its own **init()** func that mounts the web-components to a **div tag with id of “app”**. 

Both projects are very similar. I just make sure we export the bundles with a stable name when they are built. So we can predict them. The only setup that was *needed* was making sure when serving the preview build, it was on a particular port of my local machine. Otherwise if you run this on a server, there is no need for something like that. 

In this case I will be serving those components under **ports 8080 and 8081 under their names.**

Now on my root project, all that is needed is to define the importmap as below. Import the init methods from my named imports and run them.

The importmap:

![Screenshot 2023-04-03 at 10.32.27 PM](https://admin.georgeiliadis.com/uploads/Screenshot_2023-04-03_at_10.32.27_PM_f4beebc062.png)

The initialization: 

![Screenshot 2023-04-03 at 10.33.33 PM](https://admin.georgeiliadis.com/uploads/Screenshot_2023-04-03_at_10.33.33_PM_fd77ac06c1.png)

That’s all. 

As you can see on the network, we get our web-components code over the network. And we can navigate to different routes and each will behave independently. 

The **'/'** route: 

![Screenshot 2023-04-03 at 10.34.49 PM](https://admin.georgeiliadis.com/uploads/Screenshot_2023-04-03_at_10.34.49_PM_8f4f5abdca.png)

The **'/special'**  route:

![Screenshot 2023-04-03 at 10.35.01 PM](https://admin.georgeiliadis.com/uploads/Screenshot_2023-04-03_at_10.35.01_PM_f0192cfb7f.png)


Cheers!
Thanks for reading! 


Browser native, zero-config, micro frontends

git-bisect-1817884952

One of the best tools available for a developer is git. Git is awesome it allows you to track work changes. Walk forwards and backwards in a commit timeline, branch out and build features indipendently and collaborate with others. 

Today we will take a look at one feature of git, I rarely see people use. And its definitely not because its a niche, since most of the time people go the long and hard way around instead of using it. That feature is **BISECT**.  

Lets start with a scenario. Say you are building website, you start with an empty page and initialize a repository. And you add you only core feature.

 A simple RED <h1>, tag as seen below: 

![Screenshot 2023-03-09 at 6.28.43 PM](https://admin.georgeiliadis.com/uploads/Screenshot_2023-03-09_at_6.28.43_PM_713f2897c1.png)

Thenm you add your first actual feature. A <p> tag with some text, as below. 

![Screenshot 2023-03-09 at 6.33.41 PM](https://admin.georgeiliadis.com/uploads/Screenshot_2023-03-09_at_6.33.41_PM_d277a3c29c.png)

Pretty simple stuff. Now lets fast forward a bit.. Overtime, a lot of features get added from various developers. And some time later our application looks like this: 

![Screenshot 2023-03-09 at 6.34.06 PM](https://admin.georgeiliadis.com/uploads/Screenshot_2023-03-09_at_6.34.06_PM_e679340cfc.png)

But wait... we have a bug! our RED header in now GREEN. 
Disclaimer:

Now in our very simple scenario, iti s just a css style rule that needs to be corrected. We can just go ahead and fix it easily. But what about more complex scenarios? What if it is a weird change that occured as a side effect? So do not take the example at face value. 

You will say, we have git! We can travel back in commit history, until we find the commit that introduced the bug. Then we can see what changed were done and look around for exactly the thing that went wrong. ....and that is correct.

So we can do a git log/reflog get the commit hashes, and start checking them out one by one, going backwards until we find the issue....

That will work... Buuuut, what if the commit history is long? What if you have 25-30-40 commits and a bug went unoticed for more than it should? Are you willing to go back 40 commits manually? 

Here we have 8.. and still its a bit too much.

![Screenshot 2023-03-09 at 6.15.27 PM](https://admin.georgeiliadis.com/uploads/Screenshot_2023-03-09_at_6.15.27_PM_4eacf87f40.png)

### GIT BISECT

No worries!! [git bisect](https://git-scm.com/docs/git-bisect) to the rescue! What **git bisect** does is that it receives range of commits, marked by:

- A good one, which is the START, meaning that our application worked fine there.
- A bad one, which is the END, meaning that the bug is present in that commit. 

**Warning** a bad commit means simply that the bug is **present**, its not the one that necessarily introduced it!

We can start a bisect with: **git bisect start**

After that, we will see that a good and bad commit are required as our START and END.
We can enter those with: 

START: **git bisect good HASH**

END: **git bisect bad HASH** 

As seen below:

![Screenshot 2023-03-09 at 8.03.11 PM](https://admin.georgeiliadis.com/uploads/Screenshot_2023-03-09_at_8.03.11_PM_11a3010ee5.png)

In our case we selected as a good commit the one where the h1 tag was first added, since we know that the feature worked as intented there, and as a bad on the current one - HEAD. Since we can see the bug here.


### The fun part part. 

After that, in a Divine & Conquer fashion, git will checkout the middle commit between those two.  

As seen below, with green is our START, red our END and pink the CURRENT checked out hash we are bisectig. 

![Screenshot 2023-03-09 at 6.15.27 PM 3](https://admin.georgeiliadis.com/uploads/Screenshot_2023-03-09_at_6.15.27_PM_3_f251e85cf8.png)

At that state, we can check our app and see if the bug is present. Depending if it is or not, we can mark the commit as bad or good. 
We do this by entering:

**git bisect good** OR **git bisect bad**

If the commit is bad, that means that it was introduced earlier in history including the one we are in. That means it will checkout the middle commit between CURRENT and our START, and it will turn that commit into the END.

![Screenshot 2023-03-09 at 6.16.24 PM](https://admin.georgeiliadis.com/uploads/Screenshot_2023-03-09_at_6.16.24_PM_e8a2bbfdda.png)

If it is a good commit it will checkout out the middle commit of the later history whilst turning CURRENT into the START. In our example, the bug was not present, so we marked the commit as good.

![Screenshot 2023-03-09 at 7.35.20 PM](https://admin.georgeiliadis.com/uploads/Screenshot_2023-03-09_at_7.35.20_PM_42f1127277.png)

This process will repeat itself, until we zero down on the commit that introduced the bug. 
Next step: 

![Screenshot 2023-03-09 at 6.15.27 PM 4 2](https://admin.georgeiliadis.com/uploads/Screenshot_2023-03-09_at_6.15.27_PM_4_2_ebb60ec046.png)

![Screenshot 2023-03-09 at 6.16.49 PM](https://admin.georgeiliadis.com/uploads/Screenshot_2023-03-09_at_6.16.49_PM_512615473b.png)

In our case, since the bug is present we mark the commit as bad with **git bisect bad**

![Screenshot 2023-03-09 at 6.15.27 PM 4 3](https://admin.georgeiliadis.com/uploads/Screenshot_2023-03-09_at_6.15.27_PM_4_3_f2d2cadce1.png)

![Screenshot 2023-03-09 at 6.17.15 PM](https://admin.georgeiliadis.com/uploads/Screenshot_2023-03-09_at_6.17.15_PM_8eeef75532.png)

Now that is a good commit! so **git bisect good**

When finished wit the process and there are no more commits to bisect. We will get a message with the commit hash, the author and the change history. So we can start narrowing down the bug inside the code. 

![Screenshot 2023-03-09 at 6.17.42 PM](https://admin.georgeiliadis.com/uploads/Screenshot_2023-03-09_at_6.17.42_PM_23b62dfe2b.png)


...and that is how bisect works! 


Thanks for reading! 

Tips and Tools: git bisect

CoverageTab

Recently I had the opportunity to be a guest speaker at the [React 2 React Athens](https://www.meetup.com/react-to-react-athens-meetup/events/291463746/) event.
It was my first ever talk infront of an educated audience of fellow engineers and we talked about JavaScript and budgeting for it.
You can find my presentation slides -> [here](https://drive.google.com/file/d/1QPoEels0B472GVWFGbWEKUFblPGMa7gg/view?usp=sharing) <- 

At some point towards the end of my presentation I mentioned my favorite "hidden" feature on the chromium browsers. 
The "**Coverage Tab**" .

In a few words: The Coverage tab is a browser tab that you can access on your browser, by opening your dev tools and searching for "Coverage", using Ctrl+Shirt+P or Cmd+Shift+P if you are on a mac. What it allows you to do is this:
I**t let's you run and recond a user journey** (very similar to a performance tab record). Say "Putting something on a cart", "Clicking a button", "Submitting a dynamic form" etc. And it shows you files that were required for that user journey. And inside each file, it marks the used code for that particular journey in color. 

Allowing you to recognise code is not needed to be put inside a bundle and allows you to further optimise the way you serve your code. 

Sounds good?  Let us see a simple practical example. 

We will start with just 2 files. An** index.html **and an** index.js.** 

Its a simple html file with 2 buttons that each call its own function from the index.js file, that prints a little message on the console. 

![Screenshot 2023-02-18 at 12.23.03 AM](https://admin.georgeiliadis.com/uploads/Screenshot_2023-02-18_at_12.23.03_AM_be1ad27d47.png)

Pretty simple stuff so far. But lets see how the Coverage tab actually works. 

After we open our site in the browser, we will open the coverage tab and press record. 

Then we will press the "Click btn A" and stop the recording. 

Once stopped, on the coverage tab 2 files will show with some usage stats next to them. It's our .html and .js files. 
But that's not all... When opening those files we can see that the their source tab opens right above them.
There, we can now see color coded, with **Blue** the code that was used for our little user journey of clicking the button
and with **Red** the code that was not used.

![Screen Recording 2023-02-18 at 11.07.18 AM](https://admin.georgeiliadis.com/uploads/Screen_Recording_2023-02-18_at_11.07.18_AM_866ce12e0b.gif)

Obviously the index.html file was already processed and used earlier, which is expected and it is not really interesting. The interesting part is the index.js.

There we can see that the **btnA()** function marked as blue, and the **btnB()** as red. 

![Screenshot 2023-02-18 at 11.23.09 AM](https://admin.georgeiliadis.com/uploads/Screenshot_2023-02-18_at_11.23.09_AM_97ac37b19b.png)

As we can see this is extremely useful in identifying code that is not needed inside of chunks. Allowing us to further optimise our bundling and create a better serving strategy for our users. 

Say, if you have 1 user journey that is super important that your users go to and uses just a few kbs, It might be worth to load that that little code upfront in order to serve your users better, whilst you dynamically load the rest of your JS.

Thanks for reading!




Tips and Tools: Coverage Tab

imag

The concept of micro front ends is one where you encapsulate separate web apps, possibly even using different technologies in the same website. Where they act as independent components, some of them might listen to different services or communicate to entirely different ones. 

In this article we will build Pseudo Micro Front Ends. A term that *I came up with*, since what we will be building wont be exactly a traditional micro front end architecture, (some people actually consider them purely a deployment method). We will be using React and its Component based logic as building blocks, to create reusable components that can be consumed on a another applciation. To achieve that, we will be using webpack and its module federation plugin. And yes, the application is going to support a global Redux store, ,so our various independent modules can communicate with each other.

### Here is what we will be making:

A base ReactJs  application with independent components that communicate through a store, that can be used in any sort of arrangement, like small widgets able to be imported and used on a consumer project. We will also be serving the Redux store for the consumer use in order to keep all the cross Component functionality intact. 

### How we will be making it: 

The base project is a container where all of our components will be defined, along with their functionality and store. We will be serving those components using webpacks module federation as a JS file bundle called  **remoteEntry.js** .

![Screenshot from 2021-10-03 15-11-51](https://admin.georgeiliadis.com/uploads/Screenshot_from_2021-10-03_15-11-51_e9d5173f64.png)

On our consumer project we will be looking at the base project and fetch a component bundle to use wherever and how we please, as if they were defined locally on that same codebase. Here we can see that we are telling our webpack to look for a **remoteEntry.js** file at  port 3000 of our localhost.

![Screenshot from 2021-10-03 15-11-22](https://admin.georgeiliadis.com/uploads/Screenshot_from_2021-10-03_15-11-22_3ff38e933d.png)

### Our Base App

![Screenshot from 2021-10-03 15-10-57](https://admin.georgeiliadis.com/uploads/Screenshot_from_2021-10-03_15-10-57_576edbaa71.png)

It is a dummy shop web app with 4 components and a redux store, those components are: 

- Header, which is a dummy Header.
- TopSellers - a dummy component that is supposed to list the top selling products.
- Products - a component that lists our products, that we can add to our cart.
- Cart - a cart component that uses redux to see what components we added/removed on the Products component.   
- The redux store that handles the Cart addition between the Product and Cart.

Taking a closer look at our appplication inside the browser, we can actualy find the **remoteEntry.js** file that we mentioned earlier. This is the bundle that contains all the code for the Components we are federating for consumber applications to use.

![Screenshot from 2021-10-03 15-21-47](https://admin.georgeiliadis.com/uploads/Screenshot_from_2021-10-03_15-21-47_7c72358484.png)

### Our Consumer App

![Screenshot from 2021-10-03 15-10-07](https://admin.georgeiliadis.com/uploads/Screenshot_from_2021-10-03_15-10-07_2fd1dd35c5.png)

It is a web app that uses a simple css grid, to render all of the components defined on the base project, in a re-arranged manner. As you can see here we are using **base_project/name_of_component** to import the *non existent in the current directory* component from our base project. 

![Screenshot from 2021-10-03 15-12-25](https://admin.georgeiliadis.com/uploads/Screenshot_from_2021-10-03_15-12-25_d8a7856292.png)

What we have achieved is share those Components from Base to Consumer and have them be completely independent and re-usable as we please on a second consumer app. In a scenario where you dont have to copy or use the same repository containing the same components, in case you want to have parts of the same application shared between others. 

### Next Steps and Improvements

As this is something fairly new to myself and i have not experimented enough i believe there are improvements that can be made to the execution Those are: 

- Find a better way to structure css files, possibly using webpack to exclude them and have some sort of override method. 
- Write a size detection hook to keep track of the dimensions of the component container node to deal with responsiveness.
- Make the store extendable, a good way would be to share the differect components and reducer files as smaller bundles instead of the allReducer and construct that to the consumer.
 
  
### Issues.

As great of a feature this is, my issue with this method is the dependency you have on you consumer project on your base one. Currently if you build your consumer app for production, your Components bundle will NOT include the ones you need from the base app to work. So if your idea is to keep a Component/Widget store on your development enviroment and feed those your components to various projects, you either have to host those components somewhere, or forget about this methodology and do it as you would using a big mono repo with shared repositories.

You can find a link to the repository and how to run the application yourselves [here](https://github.com/georgeiliadis91/micro-front-end-demo)

Thanks for sticking till the end. 





Pseudo Micro Front Ends

wallpaper

### The issue

When developing applications one of the most common things that you will at some point come to develop, is some sort of elements that get triggered on events. Usually, they will display some sort of alert or notification to users. The form varies, maybe its a dialog, a popup,a notification or some chat avatar or alert banner. In this article we will use the alert which are the simpler ones of the bunch, but the idea is applicable to the rest. 

Now what actually are alerts and what triggers them? Whether it is a user action that you need to show a confirmation message for, some warning for consequenses of maybe removing some data, an update that happened on the website or even most commonly some error (hopefully on the user side). Now looking back at when I was beginning with react, the go-to pattern that I kept coming across tutoria after tutorial was this one: 

You had a state to hold some error, and an element that if the error occurded you would render to DOM. Just like the pictures below.

![trycatch](https://admin.georgeiliadis.com/uploads/trycatch_72206cc912.png)

and you would conditionally render it 

![element error display](https://admin.georgeiliadis.com/uploads/element_error_display_178b6ad0cb.png) 

in fact this pattern is so common that you will find it across the documentation of many popular libraries. Like react-hook-forms, look for example [here](https://react-hook-form.com/get-started)

Now that is fine and it work for tutorial level and small applications. But in reality, you would most likely have an alert component that you would place there. But even then, if you were to use an actual Alert component instead of a <p> tag. Still that would be a lot dummy code that repeats itself and you would have to write over and over. Leading to clutter, repetition and an angry [Uncle Bob](https://www.amazon.com/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882). ( the guy who wrote the Clean Code)

### The approach

So lets  write a piece of code that is elegant, simple, reusable and most importantly easily maintainable and tweakable. Whilst requiring as little as an initialization and a call to make it work in the majority of scenarios. 

#### Tools

We will be using React (obviously with TS), Redux, you can use the React Context or any other state management library and i ll be using ChakraUI, you can opt for any library or self made components with plain css. 

Disclaimers: 
1. I 'll put a github repo link at the end.
2. I wont be going into detail about how redux actually works

Here is our file structure. 

![Screenshot from 2021-01-15 00-00-58](https://admin.georgeiliadis.com/uploads/Screenshot_from_2021-01-15_00-00-58_230d74117d.png)

We have a redux folder that uses the allReducer method (not redux toolkit, although you could and most likely should use it), we have our actions, our reducer and a file called hooks. 

![actions](https://admin.georgeiliadis.com/uploads/actions_cd30f0bc76.png)

![reducer](https://admin.georgeiliadis.com/uploads/reducer_0da78cffdb.png)

Now there is nothing super special here, its some simple boilerplate code I use for my redux.
But now let us go take a look at that hooks.tsx file..

![hooks](https://admin.georgeiliadis.com/uploads/hooks_d1b2527f19.png)

It is filled with those custom React hooks, that dispatch actions. Now, I will admin that for this use case, it is probably an overkill and you only save yourself from a dispatch import and use, but it is a great pattern when you need to trigger multiple actions together in combination that I picked up from a senior dev. 

Lets jump on our Alert component file.

![alertcomp](https://admin.georgeiliadis.com/uploads/alertcomp_2151a71d21.png)

Here we are tracking 3 things from the redux state. 

open => So we the status of the alert.
type  => So we can know our alert type.
message => The message we should render isnide the alert. 

The only additional thing is the useTriggerClose hook which cleans the message and sets open to false, so we can close the alert after it is triggered. 

Now all we have to do is place this component somewhere on App.tsx and trigger it from anywhere on the app with our redux hooks. That would update our redux state, and then we would display the appropriate alert on the screen. As we can see below dont with those fuctions on the Button Clicks. 

![app](https://admin.georgeiliadis.com/uploads/app_aa59e629ef.png)

Here are all the above in action

![actual](https://admin.georgeiliadis.com/uploads/actual_3392ccc30e.gif)

You can find the repo with all the code [here](https://github.com/georgeiliadis91/alert-trigger-hooks) where you can also follow me, you can also come in contact with me at my [linkedin](https://www.linkedin.com/in/geoili/)

Thanks for sticking around, hopefully you picked a thing or two. 


React Tricks, An elegant approach to alerts

redux-vs-context

**Disclaimer**: this is not a post intented to teach you Redux or Context.

Recently whilst browsing the reactjs subreddit I came across a thread of someone having trouble understanding Redux. A user commented below, that once hooks came around he ditched redux. And to my surprise he got downvoted and the most upvoted comment on his thread was, and i'm paraphrasing "What do hooks have in common with Redux, they solve complete different problems." Well, the reality is that redux can be replaced by a combination of useContext and useReducer. And especially given the current state of React and its upcomming features. Since redux won't seem to be compatible with the concurrent-mode that is coming. But that is a different topic.. back to the argument of replacing redux with hooks. My position is that 100% you can completely replace Redux, with a combination of useContext and useReducer. And in fact I made such a code example that we will get to look at and compare.

But first lets see what Context and Redux do and their approach to things.


### REDUX 

React-Redux per its website description is a predictable, encapsulated and optimised global state management library. It works by creating a global store, where you save data that you might want to access to multiple levels of your component tree with out passing them down from parent component to child component all the way. It helps keep your code base clean andn top of all of it, it works with reducer functions and actions. To simplify the idea behind their use, instead of having a huge object with data that you pass down a tree, you can trigger "actions" with essentially return the bare minimum data required. Helping with performance. 

Redux is great, it is awesome and it works.


### CONTEXT & HOOKS

Before i get to the hooks part, lets begin with Context API, context came to the React library to do what Redux does as a now native feature of React itself. You see, prior to that, if you wanted global state management you absolutely HAD to use Redux or another library. React came with no such feature, up until the Context API rolled live. And it was good, it provided a global state so you could save your data and have it accessible in whatever depth of your component tree you wanted.

Then hooks rolled over, and things like useContext and useReducer came about. The useContext hook gave us the same functionality as above with with a lot of cleaner code. And if used in combination with the useReducer hook you could have access exactly the little piece of state you wanted with an added layer of security of having the state behave predictably due to the reducers being pure functions.

A little note about pure functions, without going into great detail, pure functions are functions that always given the same input will always return the same output.  

A good example, a function that gets a and b and returns the sum of them, if given the values 1, 5 will always return 6 that is a pure function.

A bad example, a function that gets a and returns the current time + a hours is not pure. Because the current time will never be same, and depending on when you run it, it will return a different output each time.

On top of that reducers add the extra security layer of not allowing you to mutate state dirrectly. 

Such an example is this

stateObj = {
    user: "John",
    isLogged: false
}

under no circumstance you are allowed to do this inside a pure function.

stateObj.isLogged = true;


### LETS SEE SOME CODE

Ok now that we got the theory out of the way lets get into a practical example. I bootstraped a repo with create-react-app that is a simple cart. 
You have 2 directories. '/' (Home.js) and '/cart' (Cart.js). 

On Home you get to add products to your cart, each click adds the product to your cart and updates it, if does not exist it adds it, if it does it will update the amount by increamenting it by 1.

Then you can go on your cart, look at what you have inside of it, and remove items from it. It is a very simplistic approach on a very common use case.
### REPOSITORY 

Link to the repository:  [ -> REPO <- ](https://github.com/georgeiliadis91/redux-vs-contextHooks)

On the repo we have 3 branches.

master: This branch solves the issue without using Redux or Context & Hooks, you have your cart state in you App component, you pass down a method to update it on the Home component and you pass the value of the cart down to your Cart component with a method to remove items from it. 

redux-version: This branch is the redux methodology applied, I am using the latest redux version with its own hooks and a combine reducer method. 


hooks-version: This branch is the implementation of a global state with useContext and useReducer. 


### REDUX VERSION

Here we have a global store, that holds the cart state. 

![REDUX 1- global store](https://admin.georgeiliadis.com/uploads/REDUX_1-_global_store_f29b558739.png)

Inside the allReducer (combine Reducer) we have a productReducer that is the reducer for our cart.

![REDUX 2-combine reducer](https://admin.georgeiliadis.com/uploads/REDUX_2-combine_reducer_575dfd3f74.png)

That reducer has 2 actions, ADD_PRODUCT and REMOVE_PRODUCT.

![REDUX 3- reducer](https://admin.georgeiliadis.com/uploads/REDUX_3-_reducer_eb15577d4e.png)

We have our action functions that get our payload.

![REDUX 4-actions](https://admin.georgeiliadis.com/uploads/REDUX_4-actions_db661211b0.png)

And to component we need to make use of that global state we dispatch actions with the useDispatch redux hook. 

![REDUX 5-dispatching actions](https://admin.georgeiliadis.com/uploads/REDUX_5-dispatching_actions_c8d8eb2c40.png)

### HOOKS VERSION

Now lets see how we would go about the same exact thing as above with the use of Hooks.

We have our Globalstate, which we use to wrap our CartContext around our Component tree. 

![HOOKS 1 global state](https://admin.georgeiliadis.com/uploads/HOOKS_1_global_state_8b968f3d88.png)

Inside there we declare our state with useReducer.

![HOOKS 2 global state component and state](https://admin.georgeiliadis.com/uploads/HOOKS_2_global_state_component_and_state_0ef58a12f0.png)

Now useReducer is declared as such. 

You need your state object, which in our case is cart,
A dispatch method, you can call it whatever, I for simplicity called it dispatch.
Your reducer method, which is the cartReducer.
An initial state which is the empty array.

![HOOKS 3 dispatch](https://admin.georgeiliadis.com/uploads/HOOKS_3_dispatch_4560241ce8.png)

Then we need our actions, which we declard as methods inside our action folder.

![HOOKS 4 actions](https://admin.georgeiliadis.com/uploads/HOOKS_4_actions_c2def9acfd.png)

And then we declare our reducer on its own file which is essentially the same exact reducer as before.

![HOOKS 5 reducer](https://admin.georgeiliadis.com/uploads/HOOKS_5_reducer_82afb9ca66.png)

And we pass them down as values on our Provider. 

Then in the component needed, we load and consume the Context we want (we can have more than one context), destructure and get only the methods and data we want, and trigger them.

![HOOKS 6 consume context](https://admin.georgeiliadis.com/uploads/HOOKS_6_consume_context_6cf28a5b90.png)

And thats it, same exact functionality, with a different approach having all the benefits or predictability and effectiveness of Redux.

### CONCLUSION

Now, i am not gonna say if one method is better than the other. I was just trying to answer weather or not Redux can be replaced by Hooks. Weather or not more people will transition to using hooks remains to be seen especially given the newest updates with lazy loading and concurrent mode that are coming. 

Thanks for the read! If you want to contact me and get a discussion going, feel free to do on my LinkedIn or Github. 




React State, Redux or Hooks?

headlesscms

 
## CMS

Content management systems have always been an easy entry to website creation and there is a reason they are behind almost 50% of the current web. They are relatively easy to set up, in fact many website hosting providers have an option to install a CMS and get going with 1 click. You log in , you create a Content Type. You then create data for that Content type and press publish and.....voilà! You have yourself a website, with actual content you made and published. Links and routing are handled by themselfs. And the way the website looks is just one free theme and a few clicks away from looking really good. That's all, that simple.
In fact the very first couple of websites I myself made where with CMSs. A couple of IPS forums geared to gaming and amateur computer hacking, a Wordpress Blog and profile website. It was easy and it worked and it required 0 code on my part. Anyone somewhat computer literate can get a site and get going with it.

## Plugins...so many off them

Another thing you might wanna do, is add some cool features to your site, a caldendar, a contact form with verification and captsa. ANd all this with an added bonus of having a chatroom fool of people discussing and debugging possible issues you might have during the installation or use of it. So many things out there that someone else has made, some of the plugins are so big and offer so many changes that they might completely transform the website on it self. An example of might be something like WooCommerce, it takes the default Wordpress blog site and it turn it into an e-shop. bundled with all the functionalitites you might need.

## BUT..

Someone once said that no matter what you have said, it holds zero values if a "BUT" following it. Here is the deal, I myself having worked with a CMS extensively in the past (*Drupal*, hence all the references that are about to followI do not like working with them. As easy as they are to get going for something simple they become extremely difficult to work with when dealing with complex sites. They are slow out of the gate, they make hundreds of useless calls to the database that take time from the page rendering, They are very opinionated in the way you write your code. Anyone who tried to add a simple Javascript snippet or run jQuery in Drupal knows what I am talking about. "**The Drupal way**" is a phrase that strikes terror in my heart till this day. Having to re-write chunks of code to a specific standard just to work, only to realise that you JS will cause you site to fail on a different browser. Thousands of plugins that you do not know who wrote or what does they code bring with them. Security issues and thousands vulnrabilities that get created. Code that is written terribly and might work only in some scenarios and plugins that people have simply stopped supporting. Frequent updates that fix x but break y,z,q,e,r,t,w.

## Decline

Also the past decade has been a notable focus on performace, having super lightweight highly responsive websites served with minimal cost that are SEO are the new standard of the industry. Again another thing CMSs have failed to follow.
And its only logical right? CMSs have been an even bigger part of the web in the past, but the decline in use over those modern ,frameworks has reduced the talentpool of developers for them compared always to the market size. Some of the most popular Drupal plugins are s beta or even alpha to this day!! Just because people made something that was demanded and then they moved on. Hell people are still using Drupal 7 because they want to use specific plugins. Doing custom themeing is also a mess, different directories and file extensions you need to learn and absurd rules you need to follow, manually refreshing the cache even in development mode. "Hey! , but there is a plugin for that!!!"

**STOP!! just stop!**

Thats the problem, you can not have a core part of your code that is as opinionated as a complex CMS and add more partitioned code that depends on it. Then add the fact that you are going to make updates to the main body of the code.....things are eventually goinfg to break. People might point out that is because in the majority of them, PHP is the language that everything is build with... and I disagree. PHP is old, but its solid and robust. The problem is, that there is a lot of shitty PHP code outthere that a lot of people copy paste from the internet and leave inside a plugin that might work for the time, but will cause an issue down the line. Another issue is that most of those CMSs are build on top of frameworks Symphony, Zend etc. Again those are SOLID, the problem arises when the underlying frameworks get updates either for security or quality of life, something that the higher abstruction level CMS does not get the benefit of because it uses an older version. Requiring rewritting in parts so it can work.

## Keeping the good, an alternative.

Taking a step back, the majority of the stuff I mentioned above are in regards to the front end. As easy it is for a developer to create an API that serves data, still the content creation part is lacking. And that is what in my opinion CMS excel at.After all it's in their name, Content Management. In fact, all of the popular ones have plugins that turn them into data serving API's. That is what you call a Headless CMS. Basically you get all the benefits of being able to create/edit/delete data. With none of the troubles of having to deal with serving it alongside a UI. Leaving you free to choose your preferred front-end technology. In fact, this website is made with one of them... Strapi, I have never used it before. It was super easy to setup and get going, literally took me 15 from installation to creating end points, with the availiability of doing custom things always being there. After that I used NextJS for serving my front and i was ready to go.

Coming to an end.

Here is were I stand on the matter, I do not think that any CMS is going to replace custom build enterprise platforms. Those need to be optimised every little step of the way. On top of that they are not for pockets of everyone, as they require a lot of developers and time to be created, both of which cost money. But simple websites, that maybe require 1-2 custom features, I am believe is were they find theirs place in tthe current web ecosystem.




A case for Headless CMS

linux

As a chronic windows user, a couple of months ago i made the decision to switch to Linux for my personal computers. Since i got into web development I have always used Linux servers but my own computers have always run Windows. I had messed around in the past with installing Linux dual boot, VM's, WSL and live removable drives. But something always felt a little bit off.


So this is a detail of my little journey so far and what my experience has been with Linux on my own computers.


## Why ?


First of all, behind every move there needs to be a reasoning. Mine was that although i could handle my day to day work flow on a server. I always wanted to understand the OS of the computer on a deeper level and gain more even more experience with Linux and improve on my skill set. The drawbacks for me personally where not that many, i dont game anymore ( I just get addicted and my productivity goes to 0 ) so there's that one big argument that most people have against it. 


## Choices, so many of them..


Arch, Manjaro, Mint, Kali, Pop Os, Centos, Debian and so many more... 
I decided that i needed to go and use something that was really stable and i was famiuliar with.. I always worked with CentOS and Debian servers, so something on the Debian  branch seemed like the option. Since I didnt want to move to a different package manager... YET. Although a lot of people say pacman is superior to apt.... and that something i have no opinion on. My main thing against Arch was that i do not want to dive head into to something that needs a ton of customizations on set up before i get to use it. 


So Debian was a little too dry for me, as far as bundle software goes (seriously i dont want to have to download software for my printscreen button) . The other choices were Ubuntu and Pop OS. Ubuntu is made by Cannonical and comes with a shit ton bundled software, which this time around is on the complete other end of the spectrum and is quite a lot. So Pop OS it was...but was it? 


Here is the deal right, the GNOME desktop experience......is something that is not my cup of tea. GNOME is quite heavy (on the context of Linux) and i just didnt want it. So a did a bit of research and found KDE. which was another desktop enviroment, i could swap GNOME out and use KDE, but i decided to go witth Kubuntu. 


Kubuntu for me was the sweet spot. I get a Debian based distro, that comes with a decent amount of bundled software, which is not bloated and i have a quite customisable yet close to what i am used to enviroment with KDE. 


## The experience so far.


It took me a couple of weeks to get used to the new set up. Learn those desktop shortcuts, set up my virtual desktops and dock. I all honesty i feel 100% like home and comfortable using my computers as they are. I miss nothing. All my tools are there, and since i know exactly what i want, a package manager is quite the time saver for me. To add a cherry on top, when learning a new technology, I actually get to practise the setup on my local machine before i go out and try to implement it on server. 


That being said, it does not mean that i do not have some criticisms for Linux. After all i am in a very small percentage of computer users out there that use the computer as a tool. 


What are those criticisms? Well, that will be a topic for another article.

Thanks for reading!,
George

Contact Me