Thoughts about "React JS Architecture" that You Need to know as Junior Developer.
Normally, when we use the term "software architecture" we refer to the high level components design that compose a system, traditionally considering some characteristics or traits like:
And others more, where depending of the product or desirable system, some characteristics will be more important than others.
**But it refers as independent of the technology.**
What does this means?
That when we think in software architecture for the UI side, we don't think in terms of "React JS", "Angular", etc, because those are just implementation details.
We think in terms of "FrontEnd" and that's it.
Does makes sense to think on "React JS Architecture"?
Well, I don't think so because as I said before, React JS is just a detail, and even the programming language or technology is almost the last things we define, thinking on architecture terms.
So How should we refer to the high level abstraction in particularly React JS?
The answers is: Software Design Principles.
The software design principles are ways to create software using well tested and understandable patterns with good practices and are independent of the technology as well.
Recommended by LinkedIn
Some of them are:
This is related to software architecture because is one way to apply the desirable characteristics (Testability, Security, etc) of a particular part of the whole system.
For FrontEnd side, we could think in terms of a well abstracted app where even the UI and logic are well decoupled, letting us to use whatever UI solution, from JS vanilla to your favorite UI utility.
Using React JS or any other library/framework, you are couple your app with that dependency.
In some cases, you want to make that dependency easy to replace or change.
For example: You are building a long term system where the performance is top priority, therefore, you want to use the best technology available in the ecosystem, and you know that even using the performance techniques, every Frontend library/framework, have their own limit in terms of performance.
One example when that really doesn't matter: You are building a MVP or just a quick demo that will be recycled later with another serious version.
Some people include this to the "Software Architecture" concept as well, because is closely related.
I believe that is the reason that "React JS Architecture" is used, to describe how to apply software design principles in React JS.
Or is probably the "How to" create a FrontEnd app, using particularly React JS.
Do you agree? What are your thoughts?
I like the premise about avoid implementation details but consider SOLID, DRY, etc only development principles to write better code with high cohesion and low coupling but not architecture related. I believe rendering techiniques like SSR, CSR, hydration etc are things which are tech agonistic that we should understand and think about before going deeply in any library or framework when designing a FE architecture.