In this article we take a look at a few dumb react components, and the real-world problems they solve.
Granularity is key.
Components with a single purpose are the key to composing complicated web applications in 2016 and beyond. — Gustav T’pircs Avaj
Solving real-world problems with dumb components
Webkit’s “CAT / DOG” debacle
Unless you’ve been living under a rock for the past six months, you’ve probably heard of webkit issue number 101625. Inside any html element, where the text “dog” was declared ( <div>dog</div> ), the word “cat” would be rendered to the screen, and vice-versa.
The issue went unresolved for almost 6 months before a patch was introduced in webkit. This forced popular websites to come up with their own solution in the meantime.
(We were) pretty much hosed. Dumb React Components really saved us during that time. — Not a Cat Channel Developer
To address this issue, many developers turned to dumb components like the Character component ( github.com/js-bs/Character ). It renders a single character to the screen. It uses character codes instead of string parameters, which makes it a more reliable choice and allowed Cat Channel and others to circumvent the webkit issue.
// Application that prints the word `Hello`.class Application extends React.Component {
render() {
return (
<div>
<Character letter={104} isCapital={true}/>
<Character letter={101} isCapital={false}/>
<Character letter={108} isCapital={false}/>
<Character letter={108} isCapital={false}/>
<Character letter={111} isCapital={false}/>
</div>
);
}
}
We also run DogChannel.com. As a stop-gap measure before the React fix was ready, we swapped the CDN asset paths of DogChannel and CatChannel so users would see a picture of a dog next to the word “dog”. People got a little confused, but most of the articles still made sense. — Not a Cat Channel Developer
Most people can agree the Character component is dumb. But is it truly dumb? A truly dumb component should be atomic and have a single purpose. Upon closer inspection, a character can be broken down further into its fundamental building block, the pixel.
A Single Pixel Component to rule them all. Facebook recently announced plans to migrate all of its components to use the Single Pixel ( github.com/js-bs/SinglePixel ). It’s a fairly simple and truly dumb component which takes position, opacity, and color as arguments and it renders a single pixel to the screen. This is a huge win for separation of concerns and modularity.
// Render a red pixel at position 0,0 with full opacity.<SinglePixel x={0} y={0} color=’#ff0000' opacity={1.0} />
Click here to view a running example of Single Pixel on Codepen.
We did refactor the Like Button to use a more granular approach, composed from <Like /> <Butt /> and <On /> components. But it just wasn’t dumb enough, that’s how <SinglePixel /> was born. — Not a Facebook Developer
The jury is in. Dumb components are the clear winner when it comes to application robustness, reasoning about things, and general reliability.
Thanks for reading, be sure to unfollow us on twitter : https://twitter.com/js___bs .
