30/05/16 bySeverin Kistner
This is an evaluation on how the React toolset works as part of a modern web development project and why it is particularly suitable for scalability.
React is currently unique because it originated, and is used successfully, at the biggest website in the world, Facebook. Nothing comes close in terms of size and complexity, back in 2012 they had 700 developers
and a huge number working on their frontend.
Everybody uses these very dynamic and wells designed webpages. This way users and designers expect this level of sophistication today and developers have to keep up.
One alternative is to only use code and skip templating by operating directly on the DOM, but it is verbose and feels unnatural because in the end we create HTML without any abstraction in place.
To improve this, approaches like Angular and Web Components provide API’s for custom tags to
encapsulate behaviour in a single component.
But those just hide a lower level of templating and are also often unnecessary complex.
Wouldn’t it be nice to compose components like functions while retaining the expressiveness of HTML?
Now to protect you from the real terrifying DOM, React has it’s own virtual one in memory and every delta is checked first and then applied to the parsed HTML via direct DOM references. This is an extremely efficient way to apply changes and also adds a layer that can be virtualized on the server for testing and HTML rendering.
We got rid of the DOM and can further look how the the React library supports scalable development.
Let’s look at an example with a simple component that has one property:
React rendering of CombinedComponents:
Hello Imported Hello Class loop: i=1 i=2 i=3 Hello Function Hello Variable
This is a very basic example that displays the different kinds of components: Class, function and one just being imported.Please note that JSX elements are just a part of regular code, so all the existing helper methods like map can be reused. They also can have descriptive variable names and organised for readability.
By being a tree-like structure, it’s easy to find issues by going one component deeper.
The attributes provide an descriptive api and as long as those don’t change there is no regression if the component is changed.
This perfectly encapsulates the underlying functionality, so this way you can have easily a big number of developers working “behind” one component without being affected.