ஜாவாஸ்கிரிப்ட் ஃபிரேம்வொர்க் செயல்திறன் ஒப்பீடு: நவீன பயன்பாடுகளுக்கான நிஜ உலக அளவுகோல்கள்

வலை மேம்பாட்டின் மாறும் உலகில், எந்த ஜாவாஸ்கிரிப்ட் ஃபிரேம்வொர்க் "சிறந்தது" என்பது பற்றிய விவாதம் ஒரு நிலையான ஒன்றாகும். டெவலப்பர்கள் பெரும்பாலும் தங்களுக்குப் பிடித்தமானவற்றை, டெவலப்பர் அனுபவம், சூழலமைப்பு அளவு, அல்லது கற்றல் வளைவு ஆகியவற்றைக் காரணம் காட்டி ஆதரிக்கின்றனர். இருப்பினும், இறுதிப் பயனர்கள் மற்றும் வணிகங்களுக்கு, ஒரு அளவீடு மற்ற அனைத்தையும் விட மேலோங்கி நிற்கிறது: செயல்திறன். ஒரு வேகமான, பதிலளிக்கக்கூடிய பயன்பாடு, ஒரு மாற்றுக்கும் ஒரு பவுன்ஸுக்கும், பயனர் மகிழ்ச்சிக்கும் பயனர் விரக்திக்கும் உள்ள வித்தியாசமாக இருக்கலாம்.

TodoMVC போன்ற செயற்கை அளவுகோல்கள் அவற்றின் இடத்தைக் கொண்டிருந்தாலும், அவை பெரும்பாலும் ஒரு நவீன வலை பயன்பாட்டின் சிக்கல்களைப் பிடிக்கத் தவறிவிடுகின்றன. அவை தனிமைப்படுத்தப்பட்ட அம்சங்களை ஒரு வெற்றிடத்தில் சோதிக்கின்றன, இது தயாரிப்பில் அரிதாகவே எதிர்கொள்ளப்படும் ஒரு சூழ்நிலை. இந்தக் கட்டுரை ஒரு ভিন্ন அணுகுமுறையை எடுக்கிறது. நாங்கள் ஒரு நிஜ உலக பயன்பாட்டு அளவுகோலில் ஆழமாக மூழ்கி, முன்-இறுதி உலகின் ஜாம்பவான்களான ரியாக்ட், வ்யூ மற்றும் ஆங்குலர் ஆகியவற்றை, புதிய தலைமுறை சவாலர்களான ஸ்வெல்ட் மற்றும் சாலிட்ஜேஎஸ் உடன் ஒப்பிடுகிறோம். எங்களின் குறிக்கோள் கோட்பாட்டு வாதங்களுக்கு அப்பால் சென்று, உங்கள் அடுத்த திட்டத்திற்கு ஒரு தகவலறிந்த முடிவை எடுக்க உதவும் உறுதியான தரவை வழங்குவதாகும்.

நிஜ உலக அளவுகோல்கள் ஏன் முக்கியமானவை

தரவை வழங்குவதற்கு முன், செயற்கை மற்றும் நிஜ உலக அளவுகோல்களுக்கு இடையிலான வேறுபாட்டைப் புரிந்துகொள்வது முக்கியம். செயற்கை சோதனைகள் பெரும்பாலும் ஒரு ஒற்றை, மீண்டும் மீண்டும் செய்யும் பணியில் கவனம் செலுத்துகின்றன, அதாவது 1,000 செய்ய வேண்டிய பட்டியல் உருப்படிகளை உருவாக்குதல் மற்றும் அழித்தல் போன்றவை. இது ஒரு ஃபிரேம்வொர்க்கின் ரெண்டரிங் இயந்திரத்தை அழுத்தம்-சோதனை செய்வதற்கு சிறந்தது, ஆனால் இது பின்வருவனவற்றைப் பற்றி சிறிதளவே கூறுகிறது:

• ஆரம்பகட்ட ஏற்றுதல் செயல்திறன்: ஒரு மொபைல் நெட்வொர்க்கில் முதல் முறை வருகையாளருக்கு பயன்பாடு எவ்வளவு விரைவாகப் பயன்படுத்தக்கூடியதாகிறது? இது பண்டில் அளவு, பாகுபடுத்தும் நேரம் மற்றும் ஹைட்ரேஷன் உத்தி ஆகியவற்றை உள்ளடக்கியது.
• சிக்கலான நிலை மேலாண்மை: ஒரு பொதுவான நிலையைப் பகிரும் பல, தொடர்பில்லாத கூறுகளுக்கு இடையேயான தொடர்புகளை ஃபிரேம்வொர்க் எவ்வாறு கையாளுகிறது?
• ஏபிஐ தாமத ஒருங்கிணைப்பு: தரவைப் பெற்று, ஏற்றுதல் நிலைகளைக் காட்டி, பின்னர் முடிவுகளை வழங்கும் போது பயன்பாடு எப்படி உணர்கிறது?
• வழித்தட செயல்திறன்: ஒரு ஒற்றைப் பக்க பயன்பாட்டில் (SPA) ஒரு பயனர் வெவ்வேறு பக்கங்கள் அல்லது காட்சிகளுக்கு இடையில் எவ்வளவு விரைவாகவும் சீராகவும் செல்ல முடியும்?

ஒரு நிஜ உலக அளவுகோல் இந்தச் சூழ்நிலைகளைப் பின்பற்ற முயற்சிக்கிறது. ஒவ்வொரு ஃபிரேம்வொர்க்கிலும் ஒரே மாதிரியான, மிதமான சிக்கலான பயன்பாட்டைக் உருவாக்குவதன் மூலம், பயனர் அனுபவத்தையும், அதன் விளைவாக, வணிக இலக்குகளையும் நேரடியாகப் பாதிக்கும் செயல்திறன் அளவீடுகளை நாம் அளவிட முடியும். இந்த அளவீடுகள் கூகிளின் கோர் வெப் வைட்டல்ஸ் (CWV) உடன் நெருக்கமாகப் பிணைக்கப்பட்டுள்ளன, இது இப்போது அதன் தேடல் தரவரிசை அல்காரிதத்தின் ஒரு பகுதியாக இருக்கும் காரணிகளின் தொகுப்பாகும். சுருக்கமாக, செயல்திறன் ஒரு தொழில்நுட்ப அக்கறை மட்டுமல்ல; இது ஒரு எஸ்சிஓ மற்றும் வணிகத் தேவையாகும்.

போட்டியாளர்கள்: ஒரு சுருக்கமான கண்ணோட்டம்

நாங்கள் இன்று சூழலமைப்பில் உள்ள ஐந்து மிக முக்கியமான மற்றும் சுவாரஸ்யமான ஃபிரேம்வொர்க்குகளைத் தேர்ந்தெடுத்துள்ளோம். ஒவ்வொன்றும் ஒரு ভিন্ন தத்துவம் மற்றும் கட்டமைப்பைக் கொண்டுள்ளது, இது அதன் செயல்திறன் பண்புகளை நேரடியாக பாதிக்கிறது.

ரியாக்ட் (v18)

மெட்டாவால் உருவாக்கப்பட்டு பராமரிக்கப்படும் ரியாக்ட், சந்தையில் மறுக்கமுடியாத தலைவர். இது கூறு-அடிப்படையிலான கட்டமைப்பு மற்றும் மெய்நிகர் DOM (VDOM) ஐ பிரபலப்படுத்தியது. VDOM உண்மையான DOM-ன் நினைவகத்தில் உள்ள பிரதிநிதித்துவமாக செயல்படுகிறது, இது ரியாக்ட்டை திறமையாக புதுப்பிப்புகளை தொகுக்க அனுமதிக்கிறது. அதன் மிகப்பெரிய சூழலமைப்பு மற்றும் திறமை வாய்ந்த பணியாளர்களின் எண்ணிக்கை உலகெங்கிலும் உள்ள பல நிறுவனங்களுக்கு இதை ஒரு இயல்புநிலை தேர்வாக ஆக்குகிறது.

வ்யூ (v3)

வ்யூ பெரும்பாலும் ஒரு முற்போக்கான ஃபிரேம்வொர்க் என்று விவரிக்கப்படுகிறது. இது அதன் அணுகக்கூடிய கற்றல் வளைவு, சிறந்த ஆவணப்படுத்தல் மற்றும் நெகிழ்வுத்தன்மைக்கு பெயர் பெற்றது. வ்யூ 3 ஜாவாஸ்கிரிப்ட் ப்ராக்ஸிகளை அடிப்படையாகக் கொண்ட ஒரு புதிய வினைத்திறன் அமைப்பு மற்றும் டெம்ப்ளேட்களை உயர்வாக உகந்ததாக்கக்கூடிய ஒரு கம்பைலர் மூலம் குறிப்பிடத்தக்க செயல்திறன் மேம்பாடுகளைக் கொண்டு வந்தது. இது ரியாக்ட்டைப் போலவே ஒரு மெய்நிகர் DOM ஐயும் பயன்படுத்துகிறது.

ஆங்குலர் (v16)

கூகிளின் ஆங்குலர் ஒரு நூலகத்தை விட ஒரு தளம் போன்றது. இது ஒரு விரிவான, கருத்துடைய ஃபிரேம்வொர்க் ஆகும், இது வழித்தடம் முதல் நிலை மேலாண்மை வரை அனைத்திற்கும் ஆயத்த தீர்வுகளை வழங்குகிறது. வரலாற்று ரீதியாக பெரிய பண்டில் அளவுகளுக்கு பெயர் பெற்றது, சமீபத்திய பதிப்புகளில் Ivy கம்பைலர், tree-shaking, மற்றும் சிக்னல்கள் மற்றும் தனித்தியங்கும் கூறுகளின் அறிமுகம் ஆகியவை செயல்திறன் முன்னணியில் அதை மிகவும் போட்டியிடக்கூடியதாக ஆக்கியுள்ளன.

ஸ்வெல்ட் (v4)

ஸ்வெல்ட் ஒரு தீவிரமான அணுகுமுறையை எடுக்கிறது. இது ஒரு கம்பைலர் ஆகும், இது பில்ட் நேரத்தில் இயங்கி, உங்கள் ஸ்வெல்ட் கூறுகளை உயர்வாக உகந்ததாக்கப்பட்ட, கட்டாய ஜாவாஸ்கிரிப்ட் குறியீடாக மாற்றுகிறது, இது நேரடியாக DOM-ஐ கையாளுகிறது. இதன் பொருள் என்னவென்றால், உங்கள் தயாரிப்பு பண்டில் மெய்நிகர் DOM மற்றும் கிட்டத்தட்ட எந்த ஃபிரேம்வொர்க்-சார்ந்த இயக்கநேரக் குறியீடும் இல்லை. வேலையை உலாவியில் இருந்து பில்ட் படிக்கு மாற்றுவதே இதன் தத்துவம்.

சாலிட்ஜேஎஸ் (v1.7)

சாலிட்ஜேஎஸ் பெரும்பாலும் செயல்திறன் அட்டவணையில் முதலிடம் வகிக்கிறது மற்றும் குறிப்பிடத்தக்க ஈர்ப்பைப் பெற்று வருகிறது. இது JSX ஐப் பயன்படுத்துகிறது, எனவே இது ரியாக்ட் டெவலப்பர்களுக்கு பழக்கமானதாக உணர்கிறது, ஆனால் இது ஒரு மெய்நிகர் DOM ஐப் பயன்படுத்துவதில்லை. அதற்கு பதிலாக, இது ஒரு நுண்ணிய வினைத்திறன் அமைப்பைப் பயன்படுத்துகிறது, இது ஒரு விரிதாள் போன்றது. ஒரு தரவு துண்டு மாறும்போது, அதைப் பொறுத்து இருக்கும் DOM-ன் சரியான பகுதிகள் மட்டுமே புதுப்பிக்கப்படுகின்றன, முழு கூறு செயல்பாடுகளையும் மீண்டும் இயக்காமல். இது அறுவை சிகிச்சை துல்லியம் மற்றும் நம்பமுடியாத வேகத்தை விளைவிக்கிறது.

அளவுகோல் பயன்பாடு: "குளோபல் இன்சைட் டாஷ்போர்டு"

இந்த ஃபிரேம்வொர்க்குகளைச் சோதிக்க, நாங்கள் "குளோபல் இன்சைட் டாஷ்போர்டு" என்ற மாதிரி பயன்பாட்டை உருவாக்கினோம். இந்தப் பயன்பாடு பல தரவு சார்ந்த வணிகக் கருவிகளின் பிரதிநிதியாக வடிவமைக்கப்பட்டுள்ளது. இது பின்வரும் அம்சங்களை உள்ளடக்கியது:

• அங்கீகாரம்: ஒரு போலி உள்நுழைவு/வெளியேறுதல் ஓட்டம்.
• டாஷ்போர்டு முகப்புப்பக்கம்: ஒரு போலி ஏபிஐ-யிலிருந்து பெறப்பட்ட தரவுகளுடன் பல சுருக்க அட்டைகள் மற்றும் விளக்கப்படங்களைக் காட்டுகிறது.
• பெரிய தரவு அட்டவணை பக்கம்: 1,000 வரிசைகள் மற்றும் 10 நெடுவரிசைகள் கொண்ட தரவுகளைப் பெற்று வழங்கும் ஒரு பக்கம்.
• ஊடாடும் அட்டவணை அம்சங்கள்: கிளையன்ட் பக்க வரிசையாக்கம், வடிகட்டுதல் மற்றும் வரிசை தேர்வு.
• விவரப் பார்வை: அட்டவணையில் தேர்ந்தெடுக்கப்பட்ட வரிசைக்கான ஒரு விவரப் பக்கத்திற்கு கிளையன்ட் பக்க வழித்தடம்.
• உலகளாவிய நிலை: அங்கீகரிக்கப்பட்ட பயனர் மற்றும் ஒரு UI தீம் (ஒளி/இருண்ட முறை) க்கான பகிரப்பட்ட நிலை.

இந்த அமைப்பு ஆரம்பகட்ட ஏற்றுதல் மற்றும் ஏபிஐ தரவு ரெண்டரிங் முதல் ஒரு பெரிய தரவுத்தொகுப்பில் சிக்கலான UI தொடர்புகளின் பதிலளிப்பு வரை அனைத்தையும் அளவிட அனுமதிக்கிறது.

வழிமுறை: நாங்கள் செயல்திறனை எவ்வாறு அளவிட்டோம்

ஒரு நியாயமான ஒப்பீட்டிற்கு வெளிப்படைத்தன்மை மற்றும் நிலைத்தன்மை மிக முக்கியம். இதோ எங்கள் சோதனை அமைப்பு:

• கருவிகள்: கூகிள் லைட்ஹவுஸ் (மறைநிலை சாளரத்தில் இயக்கப்பட்டது) மற்றும் குரோம் டெவ்டூல்ஸ் செயல்திறன் சுயவிவரமி.
• சூழல்: அனைத்து பயன்பாடுகளும் தயாரிப்புக்காக உருவாக்கப்பட்டு உள்நாட்டில் வழங்கப்பட்டன.
• சோதனை நிலைமைகள்: ஒரு நிஜ உலக மொபைல் பயனரைப் பிரதிபலிக்க, அனைத்து சோதனைகளும் 4x CPU வேகக்குறைப்பு மற்றும் ஒரு Fast 3G நெட்வொர்க் த்ராட்டிலுடன் இயக்கப்பட்டது. இது உயர்நிலை டெவலப்பர் வன்பொருளால் முடிவுகள் சிதைக்கப்படுவதைத் தடுக்கிறது.
• அளவிடப்பட்ட முக்கிய அளவீடுகள்:
  • ஆரம்ப JS பண்டில் அளவு (gzipped): ஆரம்ப வருகையின் போது உலாவி பதிவிறக்கம் செய்ய, பாகுபடுத்த மற்றும் இயக்க வேண்டிய ஜாவாஸ்கிரிப்ட்டின் அளவு.
  • முதல் உள்ளடக்க வண்ணம் (FCP): DOM உள்ளடக்கத்தின் முதல் பகுதி ரெண்டர் செய்யப்படும் நேரத்தைக் குறிக்கிறது.
  • மிகப்பெரிய உள்ளடக்க வண்ணம் (LCP): காட்சிப்பரப்பில் உள்ள மிகப்பெரிய தெரியும் உள்ளடக்க உறுப்பு எப்போது ரெண்டர் செய்யப்படுகிறது என்பதை அளவிடுகிறது. ஒரு முக்கிய கோர் வெப் வைட்டல்.
  • ஊடாடலுக்கான நேரம் (TTI): பக்கம் முழுமையாக ஊடாடக்கூடியதாக மாறுவதற்கு எடுக்கும் நேரம்.
  • மொத்த தடுப்பு நேரம் (TBT): பிரதான த்ரெட் தடுக்கப்பட்ட மொத்த நேரத்தை அளவிடுகிறது, இது பயனர் உள்ளீட்டைத் தடுக்கிறது. புதிய INP (Interaction to Next Paint) கோர் வெப் வைட்டலுடன் நேரடியாக தொடர்புடையது.
  • நினைவகப் பயன்பாடு: ஆரம்பகட்ட ஏற்றலுக்குப் பிறகும் மற்றும் பல தொடர்புகளுக்குப் பிறகும் அளவிடப்பட்ட குவியல் அளவு.

முடிவுகள்: ஒரு நேருக்கு நேர் ஒப்பீடு

பொறுப்புத்துறப்பு: இந்த முடிவுகள் எங்கள் குறிப்பிட்ட அளவுகோல் பயன்பாட்டை அடிப்படையாகக் கொண்டவை. எண்கள் ஒவ்வொரு ஃபிரேம்வொர்க்கின் செயல்திறன் பண்புகளை விளக்குகின்றன, ஆனால் உங்கள் சொந்த பயன்பாட்டின் கட்டமைப்பு ভিন্ন முடிவுகளைத் தரக்கூடும்.

சுற்று 1: ஆரம்பகட்ட ஏற்றுதல் மற்றும் பண்டில் அளவு

ஒரு புதிய பயனருக்கு, முதல் அபிப்ராயம் எல்லாம். இந்தச் சுற்று பயன்பாட்டை எவ்வளவு விரைவாக பதிவிறக்கம் செய்து பயன்படுத்தக்கூடிய நிலைக்கு ரெண்டர் செய்ய முடியும் என்பதில் கவனம் செலுத்துகிறது.

• ஸ்வெல்ட்: வெற்றியாளர். வெறும் ~9 KB ஜிப் செய்யப்பட்ட JS பண்டில் உடன், ஸ்வெல்ட் தெளிவான முன்னணியில் இருந்தது. அதன் FCP மற்றும் LCP மதிப்பெண்கள் மிகச்சிறந்ததாக இருந்தன, ஏனெனில் உலாவிக்கு செயலாக்க மிகக் குறைந்த ஃபிரேம்வொர்க் குறியீடு இருந்தது. டாஷ்போர்டு கிட்டத்தட்ட உடனடியாகத் தோன்றியது.
• சாலிட்ஜேஎஸ்: நெருங்கிய இரண்டாம் இடம். பண்டில் அளவு சற்று பெரியதாக ~12 KB இருந்தது. செயல்திறன் கிட்டத்தட்ட ஸ்வெல்ட்டைப் போலவே இருந்தது, மிக வேகமான ஆரம்ப ஏற்றுதல் அனுபவத்தை வழங்கியது.
• வ்யூ: வலுவான செயல்திறன். வ்யூவின் பண்டில் ஒரு மரியாதைக்குரிய ~35 KB அளவில் வந்தது. அதன் கம்பைலர் உகந்ததாக்கல்கள் பிரகாசித்தன, ஒரு வேகமான LCP மற்றும் TTI ஐ வழங்கியது, இது மிகவும் போட்டியிடக்கூடியதாக இருந்தது.
• ரியாக்ட்: நடுவில். `react` மற்றும் `react-dom` ஆகியவற்றின் கலவை ~48 KB பண்டில் விளைவித்தது. எந்த வகையிலும் மெதுவாக இல்லை என்றாலும், VDOM ஐ உருவாக்குவதற்கும் பயன்பாட்டை ஹைட்ரேட் செய்வதற்கும் ஆகும் வேலை காரணமாக TTI தலைவர்களை விட குறிப்பிடத்தக்க அளவு நீளமாக இருந்தது.
• ஆங்குலர்: மேம்பட்டது, ஆனால் இன்னும் பெரியது. ஆங்குலரின் பண்டில் ~65 KB அளவில் மிகப்பெரியதாக இருந்தது. இது பழைய பதிப்புகளை விட ஒரு பெரிய முன்னேற்றம் என்றாலும், ஆரம்ப பாகுபடுத்தல் மற்றும் பூட்ஸ்ட்ராப்பிங் செலவு இன்னும் அதிகமாகவே இருந்தது, இது இந்த சோதனையில் மெதுவான FCP மற்றும் LCP க்கு வழிவகுத்தது.

உள்ளுணர்வு: ஆரம்ப ஏற்றுதல் நேரம் முற்றிலும் முக்கியமான திட்டங்களுக்கு (எ.கா., இ-காமர்ஸ் இறங்கும் பக்கங்கள், சந்தைப்படுத்தல் தளங்கள்), ஸ்வெல்ட் மற்றும் சாலிட் போன்ற கம்பைலர்-அடிப்படையிலான ஃபிரேம்வொர்க்குகள் அவற்றின் குறைந்தபட்ச இயக்கநேர தடம் காரணமாக ஒரு தனித்துவமான, அளவிடக்கூடிய நன்மையைக் கொண்டுள்ளன.

சுற்று 2: இயக்கநேரம் மற்றும் ஊடாடும் செயல்திறன்

பயன்பாடு ஏற்றப்பட்டவுடன், அதைப் பயன்படுத்த எப்படி உணர்கிறது? எங்கள் 1,000-வரிசை தரவு அட்டவணையில் தீவிரமான செயல்பாடுகளைச் செய்வதன் மூலம் இதைச் சோதித்தோம்: ஒரு நெடுவரிசைப்படி வரிசைப்படுத்துதல் மற்றும் அனைத்து செல்களையும் தேடும் ஒரு உரை வடிப்பானைப் பயன்படுத்துதல்.

• சாலிட்ஜேஎஸ்: வெற்றியாளர். இங்கு சாலிடின் செயல்திறன் அபாரமானது. வரிசைப்படுத்துதல் மற்றும் வடிகட்டுதல் உடனடியாக உணர்ந்தது. அதன் நுண்ணிய வினைத்திறன் என்பது மாற்றப்பட வேண்டிய DOM கணுக்கள் மட்டுமே தொடப்பட்டன. TBT நம்பமுடியாத அளவிற்கு குறைவாக இருந்தது, இது கனமான கணக்கீட்டின் போதும் ஒரு தடுக்காத UI ஐக் குறிக்கிறது.
• ஸ்வெல்ட்: சிறந்த செயல்திறன். ஸ்வெல்ட் சாலிடின் பின்னால் இருந்தது. அதன் தொகுக்கப்பட்ட, நேரடி DOM கையாளுதல்கள் மிகவும் திறமையானவை என்பதை நிரூபித்தன. பயனர் அனுபவம் திரவமாகவும் பதிலளிக்கக்கூடியதாகவும் இருந்தது, மிகக் குறைந்த TBT உடன்.
• வ்யூ: மிக நல்ல செயல்திறன். வ்யூவின் வினைத்திறன் அமைப்பு புதுப்பிப்புகளைத் திறமையாகக் கையாண்டது. சாலிட் மற்றும் ஸ்வெல்ட்டுடன் ஒப்பிடும்போது வடிகட்டலில் மிகச் சிறிய, கிட்டத்தட்ட உணர முடியாத தாமதம் இருந்தது, ஆனால் ஒட்டுமொத்த அனுபவம் மிகச் சிறந்ததாக இருந்தது மற்றும் பெரும்பாலான பயன்பாட்டு நிகழ்வுகளை திருப்திப்படுத்தும்.
• ரியாக்ட்: நல்லது, ஆனால் உகந்ததாக்குதல் தேவை. பெட்டிக்கு வெளியே, பெரிய அட்டவணையை வடிகட்டும்போது ரியாக்ட் செயல்படுத்தல் ஒரு குறிப்பிடத்தக்க தாமதத்தைக் காட்டியது. 1,000-வரிசை கூறுகளை மீண்டும் ரெண்டர் செய்வது விலை உயர்ந்ததாக இருந்ததால், பிரதான த்ரெட் ஒரு குறுகிய காலத்திற்கு தடுக்கப்பட்டது. இது வரிசை கூறுகளுக்கு `React.memo` மற்றும் வடிகட்டுதல் தர்க்கத்திற்கு `useMemo` போன்ற உகந்ததாக்கல்களை கைமுறையாகப் பயன்படுத்துவதன் மூலம் தீர்க்கக்கூடியதாக இருந்தது. உகந்ததாக்குதலுடன், செயல்திறன் நன்றாக ஆனது, ஆனால் அதற்கு கூடுதல் டெவலப்பர் முயற்சி தேவைப்பட்டது.
• ஆங்குலர்: நல்லது, நுணுக்கங்களுடன். ஆங்குலரின் இயல்புநிலை மாற்றத்தைக் கண்டறியும் பொறிமுறையும் ரியாக்ட்டைப் போலவே வடிகட்டுதல் பணியில் சற்று சிரமப்பட்டது. இருப்பினும், அட்டவணை கூறுகளை `OnPush` மாற்றத்தைக் கண்டறியும் உத்தியைப் பயன்படுத்த நகர்த்துவது செயல்திறனை கணிசமாக மேம்படுத்தியது, அதை மிகவும் பதிலளிக்கக்கூடியதாக மாற்றியது. ஆங்குலரில் உள்ள புதிய சிக்னல்கள் அம்சம் அதை தலைவர்களுடன் சமமாக கொண்டு வரும்.

உள்ளுணர்வு: அதிக ஊடாடும், தரவு-தீவிரமான பயன்பாடுகளுக்கு, சாலிடின் மற்றும் ஸ்வெல்டின் கட்டமைப்புகள் பெட்டிக்கு வெளியே சிறந்த-வகுப்பு செயல்திறனை வழங்குகின்றன. ரியாக்ட் மற்றும் வ்யூ போன்ற VDOM-அடிப்படையிலான நூலகங்கள் முற்றிலும் திறன் வாய்ந்தவை, ஆனால் சிக்கலான தன்மை வளரும்போது டெவலப்பர்கள் செயல்திறன் உகந்ததாக்குதல் நுட்பங்களைப் பற்றி அதிக விழிப்புடன் இருக்க வேண்டும்.

சுற்று 3: நினைவகப் பயன்பாடு

நவீன டெஸ்க்டாப்களில் இது ஒரு குறைவான கவலையாக இருந்தாலும், குறைந்த-நிலை மொபைல் சாதனங்கள் மற்றும் நீண்ட காலமாக இயங்கும் பயன்பாடுகளுக்கு மந்தநிலை மற்றும் செயலிழப்புகளைத் தவிர்க்க நினைவகப் பயன்பாடு இன்னும் முக்கியமானது.

• ஸ்வெல்ட் & சாலிட்ஜேஎஸ்: மிகக் குறைந்த நினைவகத் தடத்துடன் முன்னணியில் இணைந்தன. நினைவகத்தில் VDOM இல்லாமல் மற்றும் ஒரு குறைந்தபட்ச இயக்கநேரத்துடன், அவை மெலிதாகவும் திறமையாகவும் இருந்தன.
• வ்யூ: அதன் VDOM மற்றும் வினைத்திறன் அமைப்பு காரணமாக தலைவர்களை விட சற்று ఎక్కువ நினைவகத்தைப் பயன்படுத்தியது, ஆனால் மிகவும் திறமையாக இருந்தது.
• ரியாக்ட்: VDOM மற்றும் ஃபைபர் கட்டமைப்பு மேல்நிலை காரணமாக அதிக நினைவகத் தடத்தைக் கொண்டிருந்தது.
• ஆங்குலர்: அதன் விரிவான ஃபிரேம்வொர்க் கட்டமைப்பு மற்றும் மாற்றத்தைக் கண்டறிவதற்கான Zone.js-ன் விளைவாக மிக உயர்ந்த நினைவகப் பயன்பாட்டைப் பதிவு செய்தது.

உள்ளுணர்வு: வளம்-கட்டுப்படுத்தப்பட்ட சாதனங்களை இலக்காகக் கொண்ட அல்லது மிக நீண்ட அமர்வுகளுக்குத் திறந்திருக்க ಉದ್ದೇಶிக்கப்பட்ட பயன்பாடுகளுக்கு, ஸ்வெல்ட் மற்றும் சாலிடின் குறைந்த நினைவக மேல்நிலை ஒரு குறிப்பிடத்தக்க நன்மையாக இருக்கலாம்.

எண்களுக்கு அப்பால்: பண்புசார் காரணிகள்

செயல்திறன் அளவுகோல்கள் கதையின் ஒரு முக்கியமான பகுதியைக் கூறுகின்றன, ஆனால் முழு கதையையும் அல்ல. ஒரு ஃபிரேம்வொர்க் தேர்வானது உங்கள் குழு, உங்கள் திட்டத்தின் நோக்கம் மற்றும் உங்கள் நீண்டகால இலக்குகளைப் பொறுத்தது.

டெவலப்பர் அனுபவம் (DX) மற்றும் கற்றல் வளைவு

• வ்யூ மற்றும் ஸ்வெல்ட் பெரும்பாலும் மிகவும் இனிமையான DX மற்றும் மென்மையான கற்றல் வளைவுகளைக் கொண்டிருப்பதாகப் பாராட்டப்படுகின்றன. அவற்றின் தொடரியல் உள்ளுணர்வு மற்றும் ஆவணப்படுத்தல் உயர் தரமானது.
• ரியாக்ட்டின் JSX மற்றும் ஹூக்-அடிப்படையிலான மாதிரி சக்தி வாய்ந்தது, ஆனால் குறிப்பாக மெமோயிசேஷன் மற்றும் விளைவு சார்புநிலைகள் போன்ற கருத்துக்களைச் சுற்றி ஒரு செங்குத்தான கற்றல் வளைவைக் கொண்டிருக்கலாம்.
• சாலிட்ஜேஎஸ் ரியாக்ட் டெவலப்பர்களுக்கு தொடரியல் ரீதியாக எடுத்துக்கொள்வது எளிது, ஆனால் அதன் நுண்ணிய வினைத்திறனைப் புரிந்துகொள்ள ஒரு மன மாதிரி மாற்றம் தேவை.
• ஆங்குலரின் கருத்துடைய தன்மை மற்றும் டைப்ஸ்கிரிப்ட் மற்றும் சார்புநிலை ஊசி போன்ற கருத்துக்களின் மீதான நம்பிக்கை செங்குத்தான கற்றல் வளைவை அளிக்கிறது, ஆனால் இந்த அமைப்பு பெரிய குழுக்களில் நிலைத்தன்மையைச் செயல்படுத்த முடியும்.

சூழலமைப்பு மற்றும் சமூக ஆதரவு

• ரியாக்ட் இங்கு நிகரற்ற தலைவர். நீங்கள் சந்திக்கக்கூடிய எந்தவொரு பிரச்சனைக்கும் ஒரு நூலகம், கருவி அல்லது பயிற்சியைக் காணலாம். இந்த மிகப்பெரிய உலகளாவிய சமூகம் ஒரு நம்பமுடியாத பாதுகாப்பு வலையை வழங்குகிறது.
• வ்யூ மற்றும் ஆங்குலர் வலுவான கார்ப்பரேட் ஆதரவு மற்றும் நூலகங்கள் மற்றும் சமூக வளங்களின் செல்வத்துடன் மிகவும் பெரிய, முதிர்ந்த சூழலமைப்புகளைக் கொண்டுள்ளன.
• ஸ்வெல்ட் மற்றும் சாலிட்ஜேஎஸ் சிறிய ஆனால் வேகமாக வளர்ந்து வரும் சூழலமைப்புகளைக் கொண்டுள்ளன. ஒவ்வொரு முக்கிய பயன்பாட்டு வழக்கிற்கும் நீங்கள் முன்பே கட்டமைக்கப்பட்ட ஒரு கூறுகளைக் காணாவிட்டாலும், அவற்றின் சமூகங்கள் உணர்ச்சிவசப்பட்டவை மற்றும் மிகவும் சுறுசுறுப்பானவை.

முடிவுரை: உங்களுக்கு எந்த ஃபிரேம்வொர்க் சரியானது?

தரவை பகுப்பாய்வு செய்து பண்புசார் காரணிகளைக் கருத்தில் கொண்ட பிறகு, ஒற்றை "சிறந்த" ஃபிரேம்வொர்க் இல்லை என்பது தெளிவாகிறது. உகந்த தேர்வு முற்றிலும் உங்கள் திட்டத்தின் முன்னுரிமைகளைப் பொறுத்தது.

வெவ்வேறு சூழ்நிலைகளின் அடிப்படையில் எங்கள் இறுதிப் பரிந்துரை இதோ:

• முழுமையான உச்ச செயல்திறன் மற்றும் மெலிதான பில்ட்களுக்கு: ஸ்வெல்ட் அல்லது சாலிட்ஜேஎஸ்-ஐத் தேர்ந்தெடுக்கவும். உங்கள் முதன்மை நோக்கம் சாத்தியமான வேகமான ஏற்றுதல் நேரங்கள், மிகவும் பதிலளிக்கக்கூடிய UI மற்றும் மிகச்சிறிய பண்டில் அளவு (எ.கா., இ-காமர்ஸ் தளங்கள், மொபைல்-முதல் வலைப் பயன்பாடுகள், ஊடாடும் காட்சிப்படுத்தல்கள்) என்றால், இந்த ஃபிரேம்வொர்க்குகள் தங்களுக்குள் ஒரு வகுப்பில் உள்ளன. சிக்கலான, வினைத்திறன் மிக்க தரவுக் கையாளுதலுக்கு சாலிட்ஜேஎஸ் முன்னிலை பெறுகிறது, அதே நேரத்தில் ஸ்வெல்ட் சற்று எளிமையான, மேலும் மாயாஜாலமான டெவலப்பர் அனுபவத்தை வழங்குகிறது.
• ஒரு பெரிய சூழலமைப்பு மற்றும் பணியமர்த்தல் குளத்திற்கு: ரியாக்ட்-ஐத் தேர்ந்தெடுக்கவும். உங்கள் திட்டத்திற்கு பரந்த அளவிலான நூலகங்கள், கருவிகள் மற்றும் டெவலப்பர்களுக்கான அணுகல் தேவைப்பட்டால், ரியாக்ட் பாதுகாப்பான மற்றும் மிகவும் நடைமுறைக்குரிய தேர்வாகும். அதன் செயல்திறன் மிகவும் நல்லது, மற்றும் வேலை சந்தையில் அதன் ஆதிக்கம் உலகில் எங்கும் உங்கள் மேம்பாட்டுக் குழுவை அளவிடுவதை எளிதாக்குகிறது.
• செயல்திறன் மற்றும் அணுகல் திறனின் சமநிலைக்கு: வ்யூ-ஐத் தேர்ந்தெடுக்கவும். வ்யூ ஒரு இனிமையான இடத்தைப் பிடிக்கிறது. இது ரியாக்ட்டுடன் போட்டியிடக்கூடிய சிறந்த செயல்திறனை வழங்குகிறது, ஆனால் பலர் மிகவும் உள்ளுணர்வு மற்றும் கற்றுக்கொள்வதற்கு எளிதானதாகக் கருதும் ஒரு டெவலப்பர் அனுபவத்துடன். இது சிறியது முதல் பெரிய அளவிலான பயன்பாடுகளுக்கு ஒரு அற்புதமான ஆல்-ரவுண்டர் ஆகும்.
• பெரிய அளவிலான, நிறுவன பயன்பாடுகளுக்கு: ஆங்குலர்-ஐத் தேர்ந்தெடுக்கவும். நீங்கள் ஒரு பெரிய டெவலப்பர்கள் குழுவுடன் ஒரு சிக்கலான, நீண்ட காலம் நீடிக்கும் பயன்பாட்டை உருவாக்குகிறீர்கள் என்றால், ஆங்குலரின் கட்டமைக்கப்பட்ட மற்றும் கருத்துடைய தன்மை ஒரு பெரிய சொத்தாக இருக்கலாம். இது நிலைத்தன்மையைச் செயல்படுத்துகிறது மற்றும் நிறுவன அளவிலான சிக்கலைக் கையாளக்கூடிய ஒரு வலுவான, அனைத்தையும் உள்ளடக்கிய தளத்தை வழங்குகிறது, மேலும் அதன் செயல்திறன் தொடர்ந்து மேம்பட்டு வருகிறது.

ஜாவாஸ்கிரிப்ட் ஃபிரேம்வொர்க்குகளின் உலகம் முன்னெப்போதையும் விட வேகமாக உருவாகி வருகிறது. ஸ்வெல்ட் மற்றும் சாலிட்ஜேஎஸ் போன்ற சவாலர்களால் கம்பைலர்களின் எழுச்சி மற்றும் மெய்நிகர் DOM-லிருந்து விலகிச் செல்வது முழு சூழலமைப்பையும் முன்னோக்கித் தள்ளுகிறது. இறுதியில், "ஃபிரேம்வொர்க் போர்கள்" ஒரு நல்ல விஷயம் - அவை கண்டுபிடிப்பு, சிறந்த செயல்திறன் மற்றும் அடுத்த தலைமுறை வலை அனுபவங்களை உருவாக்க டெவலப்பர்களுக்கு அதிக சக்திவாய்ந்த கருவிகளுக்கு வழிவகுக்கின்றன. உங்கள் திட்டத்தின் தனித்துவமான கட்டுப்பாடுகள் மற்றும் இலக்குகளுக்கு மிகவும் பொருத்தமான கருவியைத் தேர்ந்தெடுங்கள், நீங்கள் வெற்றிப் பாதையில் நன்றாக இருப்பீர்கள்.