Facebook के tech stack को फिर से बनाने की कहानी

 (engineering.fb.com)
15 पॉइंट द्वारा xguru 2020-05-09 | 2 टिप्पणियां | WhatsApp पर शेयर करें

साधारण PHP से शुरू हुआ Facebook इस नए डिज़ाइन के अनुसार React + Relay(GraphQL) में कैसे बदला, उसकी प्रक्रिया और उससे मिले सबक

CSS, JS, Data, Navigation—हर हिस्से में तेज़ app के लिए बुनियादी सिद्धांत लागू किए गए

  1. केवल ज़रूरी resources को यथासंभव सबसे तेज़ भेजना

  2. user experience के लिए engineering experience तैयार करना

CSS

  • Atomic CSS से CSS को 80% तक कम किया गया, और बेकार CSS डाउनलोड न हो ऐसा बदला गया

  • accessibility के लिए rems का उपयोग, px → rems मैन्युअल रूपांतरण के समय होने वाले bugs कम करने के लिए build tool में इसे अपने आप convert किया गया

  • Theming(dark mode) के लिए CSS variables का उपयोग

  • flicker रोकने के लिए Inline SVG का उपयोग (img में SVG file डालने के बजाय)। इससे runtime में रंग बदलना भी संभव हुआ

JS

  • 3-स्तरीय code-splitting किए गए JS को चरणों के अनुसार भेजना

Tier 1. loading के समय UI Skeleton को जल्दी दिखाने के लिए basic layout

Tier 2. स्क्रीन पर दिखने वाले सभी content को पूरी तरह render करने के लिए JS। यह पूरी तरह काम करने योग्य होना चाहिए, और Tier 2 के बाद code लोड होने पर भी screen layout नहीं बदलना चाहिए

Tier 3. स्क्रीन दिखने के बाद ज़रूरी बाकी सब कुछ। logging code, real-time updates subscription आदि.

  • 500KB के JS को 50KB Tier 1, 150KB Tier 2, 300KB Tier 3 में बाँटा गया → loading और screen display बहुत तेज़ी से पूरा होने का असर

  • इस splitting की वजह से A/B test के समय दोनों पक्षों में सिर्फ़ ज़रूरी code ही पाने की सेटिंग संभव हुई

  • data-driven React app बनाने में मदद करने वाले Relay के features का उपयोग कर, कौन-सा data लाना है उसके अनुसार केवल ज़रूरी components लोड होने के लिए बदला गया

  • हर product के लिए JS Budget(बजट) प्रणाली लागू की गई। performance targets, technical constraints और product considerations के आधार पर budget तय किया गया। समय बीतने के बाद भी code बढ़ते जाने से रोकने के लिए।

Data

  • Relay का उपयोग कर, सभी data fetching को GraphQL के माध्यम से standardize किया गया

  • Relay की वजह से page request चरण से ही पहले ज़रूरी data को parallel में डाउनलोड किया गया। इससे स्क्रीन पर तेज़ी से दिखाना संभव हुआ

  • GraphQL के internal extension @stream का उपयोग कर news feed जैसी चीज़ों के लिए कई round trips के बिना एक ही query में data को क्रम से भेजा गया

  • @defer + React Suspense से जो data तुरंत ज़रूरी नहीं है उसे बाद में लोड करने की व्यवस्था

Navigation

  • SPA navigation में नया page लोड करते समय resource loading time और round trip कम करने के लिए Route Map बनाया गया

  • ज़रूरत पड़ने पर जितनी जल्दी हो सके Route Map में Route जानकारी को विभाजित करके लोड किया गया

  • resources को जितना संभव हो उतना पहले prefetch करना (hover पर prefetch, mouse down पर code और data लाना, और click होने पर React state बदलना)

  • navigation के बीच blank screen दिखाने के बजाय, React Suspense transition का उपयोग कर नया Route लाने से पहले मौजूदा Route को दिखाते रहना

  • EntryPoints (code branching point और data query को wrap करने वाली छोटी file) का उपयोग कर code और data download को parallel किया गया

संबंधित पढ़ाई

2 टिप्पणियां

 
xguru 2020-05-10

Facebook के नए डिज़ाइन के CSS से पता चली बातें https://hi.news.hada.io/topic?id=1819

उस लेख को भी साथ में देखना अच्छा रहेगा.
 
xguru 2020-05-09

Relay - React के लिए production-ready GraphQL client https://relay.dev/