Usecase On How Twitter Uses JavaScript.

4 min readJun 25, 2021

First let us understand what is Javascript?

JavaScript is a text-based programming language which is used on the client-side and as well as on server-side that allows you to make web pages interactive. Where HTML and CSS are languages that give structure and style to web pages, where as JavaScript provides those web pages interactive elements that engage a user. Common examples of JavaScript that you might use every day include the search box on Amazon, a news recap video embedded on The New York Times, or refreshing your Twitter feed.

Incorporating JavaScript improves the user experience of the web page by converting it from a static page into an interactive one. To recap, JavaScript adds behavior to web pages.

What is JavaScript used for?

JavaScript is mainly used for web-based applications and web browsers. But JavaScript is also used beyond the Web in software, servers and embedded hardware controls. Here are some basic things JavaScript is used for:

Adding interactive behavior to web pages

2. Game development

3. Building web servers and developing server applications

4. Creating web and mobile apps : Popular JavaScript front-end frameworks include React, React Native, Angular, and Vue. Many companies use Node.js, a JavaScript runtime environment built on Google Chrome’s JavaScript V8 engine. A few famous examples include Paypal, LinkedIn, Netflix, and Uber!

Twitter UseCase?

Ever tried Twitter live Search and wondered how it works? On the surface, you search for a #hashtag or a keyword and Twitter shows you a live feed of results, with new tweets appearing continuously after the initial search results were rendered completely!

Now let’s see what’s going in Tweet component.

We collect the Tweet or image URL in the state
On press of the tweet button function, we use the database object to access the required collection from user and save the data to the database.

It’s basically impossible to use Twitter without JavaScript enabled. If you try, you’re redirected to the legacy mobile version which is awful both functionally and aesthetically. For privacy-minded folks, preventing JavaScript analytics and potential IP-based tracking is important, but apart from using the legacy mobile version and a VPN, it’s impossible. This is is especially relevant now that Twitter removed the ability (read here) for users to control whether their data gets sent to advertisers.

In a casual Twitter post, Twitter engineer Nicolas Gallagher said that the move was done:

The new browser-based UI is built atop React with Node.js and Express handling the server side. The app is built as a Progressive Web App which uses Service Workers to enable immediate page loading, offline capabilities, and push notifications. The app does not yet support all of those features, but another Twitter engineer, Paul Armstrong, indicated that would be coming soon.

Dissecting Twitter’s Redux Store

If you don’t already know Twitter’s mobile website is on a new web stack which includes React and Redux 🎉.

After hearing the news I thought it would be fun to dig into their Redux store, and see how in the hell they organize all them tweets in their state tree.

To get a look at the Redux store you will need React Developer Tools (RDT) installed for Chrome. Then from the RDT tab select the root element of the application and type the following in your console.

NOTE:

// $r is a shortcut that references the selected element in RDT
$r.store.getState();

Redux state tree logged to the console look like this…

I recommend taking the time to poke around all the different state slices, but I’m going to be digging into entities/tweets and homeTimeline. These two slices appear to contain the majority of the tweet related data.

All the detailed tweet data is stored under entities/tweets/entities in a normalized data table (read here)where each tweet is an object with id as the key and all the tweet data as the value. I have expanded the first tweet in the list so you can get a look at the guts of the tweet.