You (probably) don't need Micro-Frontends
This is the "Distributed and Decoupled Spectrum"
Make sure that you explore all the other options before trying to implement a fully distributed system
Today is a sad day:
Apparently, my favourite HTML element, <marquee />
Has been deprecated ⚠️
My first ever website used it everywhere.
Thanks for all the great memories. We will miss ya.
“Semicolons in JS…”
*scroll*
“Center a div…”
*scroll*
“Framework X sucks here is why…”
*scroll*
“Tell me you are a.. without telling me…”
*scroll*
“HTML is not a programming… “
*scr…. SMASHES PHONE AGAINST WALL*
Not sure who needs to hear this, but…
CORS errors must be fixed by the backend API you are calling, not the frontend. ❌
If you are trying to fix it in the fronted, either by using extensions or workarounds you are going in the wrong direction. 🛑
Open source maintainers:
Do you get offended when someone raises a PR to fix a typo / grammar on one of your repos?
Or do you consider that as a valid contribution?
.
@vercel
just published an article on how to do Micro-Frontends with Next.js
I don't want to discuss whether they are Micro-Frontends or not, but I would like to point out the disadvantages of using that approach and why it hurts UX and organizational scaling more than you think
The React Router Defer API is Revolutionary!
Most of us haven't realised how powerful it is yet...
It can give you total control over your applications' data loading and transform your User Experiences.
Here is an example:
Drop whatever you are doing and check this out!
@AnfibiaCreativa
has produced the most comprehensive documentation on distributed frontend architecture I have ever seen.
This is what the community was missing; fantastic work, Natalia! 👏
Today I received the keys to my dream family house.
This concludes my move to level 3 on the wealth scale after having escaped the extreme poverty of level 1 where I was born.
Here is my story...
A mistake I have seen very often:
Confusing “Separation of concerns.”
with
“Separation of implementation”
Code that changes together should stay together.
I had a ton of fun writing this post! 😁
The new
@remix_run
and React Router defer is awesome!
Here is what I found on parallel fetching, slow data and levers:
I think
@remix_run
is an outstanding and well designed framework!
But its killer feature is definitely the fact that is decoupled from Node.js and it can be deployed to the edge (Cloudfare Workers) 🎯
The edge computing era is here my friends 😁
@kaseyklimes
I don’t want a scenic route!
I just don’t want to die while driving through one way country side lanes avoiding sheep, tractors and ditches just to save 2 mins
Unlike Microservices, you can’t slice your browser into multiple pieces.
The benefit of Micro-Frontends are mostly organisational, don’t expect any performance or horizontal scaling improvements…
Quite the opposite 🤔
If you are not careful you could make the performance of
Separating business logic from your UI, data fetching, and utility functions is really hard for one reason:
Nobody knows what business logic actually means 🤔
“So Vue is better than angular, but React is better than Vue, but none of that matters if you don’t know HTML CSS and vanilla JavaScript, that’s why I prefer to avoid frameworks and code at low level machine code so I can focus on learning AI and no-code”
If you search for “Who invented React”
It comes up with “Jordan Walke” but with a picture of
@dan_abramov
, therefore perpetuating the misconception 🤦♂️
I am so thrilled to announce that I am becoming a "Postmanaut 🚀"
I am joining
@getpostman
as a Staff Engineer to build... (you guessed it...) Micro-Frontends! 😁
So excited for this new chapter in my career!
NODE_ENV was a mistake 💥
However, here’s how you can improve things:
NODE_ENV=development should be only set on local machines
NODE_ENV=production everywhere else
The closer to production on your higher environments the better.
No nasty surprises 🤞
My blog is still on Next.js 10
Can't deploy it anymore because of a "prerender error" that only happens on Vercel, not locally.
Options:
- Debug the error.
- Update to Next.js 13
- Migrate to
@remix_run
You probably know what I will choose 😂
Couldn't find a lot of documentation on this amazing feature of Module Federation...
2 hours later I finished writing an article about it 😁
If you want to avoid dependency duplication, Check it out to learn how to use it and when it might come in handy
If you were offered a senior engineer role that ticks all the boxes including salary benefits and responsibilities but you are not given the “senior” job title…
Would you take it?
As an engineer what’s the pet peeve that kills your motivation?
I’ll start:
“Tech debt that is never prioritised and results in painful daily developer experience”.
How do you create modals using React Router 6 and
@remix_run
?
Here are two options:
- Using Nested Routes
- Using URL Search Params
Which one is better?
You know me... The answer is, "It depends."
Recruiters are anxiously waiting for May 29th 2023 📆
On that day they can continue asking candidates for 10 years of React ⚛️ experience without being mocked.
Underrated skill at large companies:
“Digital archaeologist” 🦕
Finding out why decisions were made and documenting them provides a lot of value to existing and future projects.
Another problem with zones that is not mentioned:
Silos and an inconsistent UX
The Design System should help here but what happens, in reality, is that you end up with 20 copies of the header that make you deploy all the separate apps whenever there is a change.
In the article they discuss how using "zones" is a "good UX compromise"
If performance and a full page refresh are not an issue, then you can use this approach, which limits the use cases.
So forget about using zones for e-Commerce.
After listening to
@RyanCarniato
on the
@PodRocketpod
, something in my head just "clicked" 🤯
We have entered the third generation of web applications, and I think I now understand what that means exactly 😁
Haven’t been blogging for a little while, but there are certain topics that are just so exciting I need to take them out of my head.
Time and time and again I find a lot of confusion about what Micro-Frontends really are… here’s my take:
I’ve been suffering from tech FOMO lately…
There is so much cool stuff coming out like:
-
@stackblitz
- Aegis / Module Federation
-
@bitdev_
Harmony
- Esbuild / Vite
- Remotion
- Vue / Nuxt
- Rust / WASM / go
- vanilla-extract
-
@blitz_js
Have you played with any of these?
Their conclusion is to "Build your whole app and run the entire CI/CD pipeline" every time there is a change.
That's the opposite of team autonomy and independent deployments. If you are able to decouple the app, that will soon reach a limit no matter how fast your CI CD is.