Twitter’s div Soup and Uglyfied CSS, Explained

Twitter web is a complex application built with React Native for Web – an implementation of the React Native components and APIs for the browser.

React Native for Web provides cross platform primitives that normalize inconsistencies and allow to build web applications that are, among other things, touch friendly.

To the eyes of somebody who’s not familiar with the framework, the HTML produced by React Native for Web might look utterly ugly and full of bad practices.

In this blog post we will see how to make sense of this source code and why the authors made some unconventional and controversial choices.

Primitives

React Native provides a small number of cross platform primitives that are the building blocks for your application. The most important ones are:

View
Text
Image
Touchable
Button – implemented with Touchable
To ensure reliable interactions like touch or gestures and to provide a higher degree of compatibility, React Native for Web reimplements some web primitives making sure that semantics and accessibility are preserved if not enhanced.

Because of this some of the primitives compile to div, hence the div soup 🍜 that is visible when inspecting twitter.com

Let’s look at an example of React Native for Web code with three instances of Text and a Button



This is a heading


This is a paragraph


This is a link

Share your love

Leave a Reply