Twitter Like News Feed UI System Design

Here we are going to HLS for Twitter like News Feed System.

1. Requirement

It should loaded from top-bottom
Infinity number of Stories I can scroll
Support Image / Video per story
User can add Comments under the Story

Non- Functional Requirement

…


This content originally appeared on DEV Community and was authored by Ashutosh Sarangi

Here we are going to HLS for Twitter like News Feed System.

1. Requirement

  • It should loaded from top-bottom
  • Infinity number of Stories I can scroll
  • Support Image / Video per story
  • User can add Comments under the Story

Non- Functional Requirement

  • Should be responsive
  • Optimization over all + image
  • Offline Support

2. Mock Up UI

Mock Up UI for the news

  • As we need to achieve infinity scrolle
  • we can use virtualization technique
  • we will have 2 observers (Top and Bottom)
  • and based on the intersection we will call API for the data.
  • We need to maintain Position absolute and calculate height for arranging the stories
  • We need to adjust the scroll position

NOTE:- We can also use alternate approach like
react-window and react-virtualized
https://www.npmjs.com/package/react-virtualized

3. Schema / State


Stories: {
id: {
id: string;
message: string;
articleLink: string;
imageLinks: Array<string>
}
}

comments: {
id: {
comment: string
likes: number;
likeType: string
}
}

4. API

  1. getStories payload:
    • pageno
    • limit

getComments:
payload: [ids]

5. Real Time / Fetching Data

  • Pooling (long / short)
    • while using pooling, we can use requestAnimationFrame to optimize when user is not in active tab.
    • We can use Exponential error fallback retry when error happen
  • Http2/Push
  • Socket.io/ web sockets
  • server sent Events
  • lets say user scroll and reach to the bottom Observer then we will call API to get the data.

6. Search For Story

  • We need to use debounce/ thruttleing for optimized search calls.
  • we can use filters to narrow down the search.
  • we can use ; for searching multiple information

Optimization

7. Networking

  • We can migrate to http/2, there we can send multiple requests in same time.
  • then use can use bundle splitting (name.module.css)
  • dynamic imports would have split into a bundle
  • we can use defer the not immediately needed scripts
  • we can use preload/prefetch attributes in CSS loading
  • assets from CDN
  • image lazy loading
  • Compress image

8. Rendering

  • Is always better to have a constant no of nodes
  • No Height and width change dynamically, if we do so then the layout will shift then it is a CPU-intensive job.
  • Animation use transform (GPU) calculation
  • Checking lighting tools for web vitals and based on the result we can optimize further
  • Flattern CSS selector, rather than deep nested CSS selectors better to give it a class name and then use it.
  • Initial loading placeholder

9. Javascript

  • For heavy / CPU intensive works we can add webworks to do the job
  • we can use dynamic loading + lazy + suspense
  • We can use Async Storage like index DB
  • We will have service worker enabled with index DB we can achieve Offline support.
  • We can add a Background sync mechanism.


This content originally appeared on DEV Community and was authored by Ashutosh Sarangi


Print Share Comment Cite Upload Translate Updates
APA

Ashutosh Sarangi | Sciencx (2024-09-13T17:59:18+00:00) Twitter Like News Feed UI System Design. Retrieved from https://www.scien.cx/2024/09/13/twitter-like-news-feed-ui-system-design/

MLA
" » Twitter Like News Feed UI System Design." Ashutosh Sarangi | Sciencx - Friday September 13, 2024, https://www.scien.cx/2024/09/13/twitter-like-news-feed-ui-system-design/
HARVARD
Ashutosh Sarangi | Sciencx Friday September 13, 2024 » Twitter Like News Feed UI System Design., viewed ,<https://www.scien.cx/2024/09/13/twitter-like-news-feed-ui-system-design/>
VANCOUVER
Ashutosh Sarangi | Sciencx - » Twitter Like News Feed UI System Design. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/13/twitter-like-news-feed-ui-system-design/
CHICAGO
" » Twitter Like News Feed UI System Design." Ashutosh Sarangi | Sciencx - Accessed . https://www.scien.cx/2024/09/13/twitter-like-news-feed-ui-system-design/
IEEE
" » Twitter Like News Feed UI System Design." Ashutosh Sarangi | Sciencx [Online]. Available: https://www.scien.cx/2024/09/13/twitter-like-news-feed-ui-system-design/. [Accessed: ]
rf:citation
» Twitter Like News Feed UI System Design | Ashutosh Sarangi | Sciencx | https://www.scien.cx/2024/09/13/twitter-like-news-feed-ui-system-design/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts