முன்பக்க கட்டமைப்பு: மைக்ரோ-ஃபிரண்ட்எண்ட்ஸ் மற்றும் மாட்யூல் ஃபெடரேஷன் – ஒரு விரிவான வழிகாட்டி

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

மைக்ரோ-ஃபிரண்ட்எண்ட்ஸ் என்றால் என்ன?

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

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

மைக்ரோ-ஃபிரண்ட்எண்ட்ஸின் நன்மைகள்:

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

மைக்ரோ-ஃபிரண்ட்எண்ட்ஸின் சவால்கள்:

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

மாட்யூல் ஃபெடரேஷன் என்றால் என்ன?

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

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

மாட்யூல் ஃபெடரேஷனின் முக்கிய கருத்துகள்:

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

மாட்யூல் ஃபெடரேஷனின் நன்மைகள்:

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

மாட்யூல் ஃபெடரேஷனின் சவால்கள்:

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

மைக்ரோ-ஃபிரண்ட்எண்ட் கட்டமைப்புகள்: வெவ்வேறு அணுகுமுறைகள்

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

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

மாட்யூல் ஃபெடரேஷனுடன் மைக்ரோ-ஃபிரண்ட்எண்ட்ஸிற்கான செயல்படுத்தும் உத்திகள்

மாட்யூல் ஃபெடரேஷனுடன் மைக்ரோ-ஃபிரண்ட்எண்ட்ஸை செயல்படுத்துவதற்கு கவனமான திட்டமிடல் மற்றும் செயல்படுத்தல் தேவை. கருத்தில் கொள்ள வேண்டிய சில முக்கிய உத்திகள் இங்கே:

1. தெளிவான எல்லைகளை வரையறுக்கவும்: மைக்ரோ-ஃபிரண்ட்எண்ட்களுக்கு இடையே உள்ள எல்லைகளை தெளிவாக வரையறுக்கவும். ஒவ்வொரு மைக்ரோ-ஃபிரண்ட்எண்டும் ஒரு குறிப்பிட்ட டொமைன் அல்லது அம்சத்திற்கு பொறுப்பாக இருக்க வேண்டும்.
2. பகிரப்பட்ட கூறு நூலகத்தை நிறுவவும்: அனைத்து மைக்ரோ-ஃபிரண்ட்எண்ட்களாலும் பயன்படுத்தக்கூடிய ஒரு பகிரப்பட்ட கூறு நூலகத்தை உருவாக்கவும். இது நிலைத்தன்மையை ஊக்குவிக்கிறது மற்றும் குறியீட்டுப் பிரதியைக் குறைக்கிறது. கூறு நூலகமே ஒரு கூட்டாட்சி தொகுதி ஆகலாம்.
3. மையப்படுத்தப்பட்ட ரூட்டிங் அமைப்பைச் செயல்படுத்தவும்: மைக்ரோ-ஃபிரண்ட்எண்ட்களுக்கு இடையே வழிசெலுத்தலைக் கையாளும் ஒரு மையப்படுத்தப்பட்ட ரூட்டிங் அமைப்பைச் செயல்படுத்தவும். இது ஒரு தடையற்ற பயனர் அனுபவத்தை உறுதி செய்கிறது.
4. நிலை மேலாண்மை உத்தியைத் தேர்வு செய்யவும்: உங்கள் பயன்பாட்டிற்கு நன்றாக வேலை செய்யும் ஒரு நிலை மேலாண்மை உத்தியைத் தேர்வு செய்யவும். விருப்பங்களில் பகிரப்பட்ட நூலகங்கள், நிகழ்வுப் பேருந்துகள் அல்லது ரெடக்ஸ் அல்லது வ்யூக்ஸ் போன்ற மையப்படுத்தப்பட்ட நிலை மேலாண்மை தீர்வுகள் அடங்கும்.
5. ஒரு வலுவான பில்ட் மற்றும் டெப்ளாய்மெண்ட் பைப்லைனைச் செயல்படுத்தவும்: மைக்ரோ-ஃபிரண்ட்எண்ட்ஸை உருவாக்குதல், சோதித்தல் மற்றும் பயன்படுத்துதல் செயல்முறையை தானியக்கமாக்கும் ஒரு வலுவான பில்ட் மற்றும் டெப்ளாய்மெண்ட் பைப்லைனைச் செயல்படுத்தவும்.
6. தெளிவான தகவல் தொடர்பு சேனல்களை நிறுவவும்: வெவ்வேறு மைக்ரோ-ஃபிரண்ட்எண்ட்ஸில் பணிபுரியும் குழுக்களுக்கு இடையே தெளிவான தகவல் தொடர்பு சேனல்களை நிறுவவும். இது அனைவரும் ஒரே பக்கத்தில் இருப்பதை உறுதிசெய்கிறது மற்றும் சிக்கல்கள் விரைவாக தீர்க்கப்படுகின்றன.
7. செயல்திறனைக் கண்காணித்து அளவிடவும்: உங்கள் மைக்ரோ-ஃபிரண்ட்எண்ட் கட்டமைப்பின் செயல்திறனைக் கண்காணித்து அளவிடவும். இது செயல்திறன் தடைகளைக் கண்டறிந்து தீர்க்க உங்களை அனுமதிக்கிறது.

உதாரணம்: மாட்யூல் ஃபெடரேஷனுடன் ஒரு எளிய மைக்ரோ-ஃபிரண்ட்எண்டை செயல்படுத்துதல் (ரியாக்ட்)

ரியாக்ட் மற்றும் வெப்பேக் மாட்யூல் ஃபெடரேஷனைப் பயன்படுத்தி ஒரு எளிய உதாரணத்தை விளக்குவோம். எங்களிடம் இரண்டு பயன்பாடுகள் இருக்கும்: ஒரு ஹோஸ்ட் பயன்பாடு மற்றும் ஒரு ரிமோட் பயன்பாடு.

ரிமோட் பயன்பாடு (RemoteApp) - ஒரு கூறுகளை வெளிப்படுத்துகிறது

1. சார்புகளை நிறுவவும்:

            npm install react react-dom webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

2. ஒரு எளிய கூறுகளை உருவாக்கவும் (RemoteComponent.jsx):

            import React from 'react';

const RemoteComponent = () => {
  return <div style={{ border: '2px solid blue', padding: '10px', margin: '10px' }}>
           <h2>Remote Component</h2>
           <p>This component is being served from the Remote App!</p>
         </div>;
};

export default RemoteComponent;
            

              
                Copy
              
            
          

3. index.js ஐ உருவாக்கவும்:

            import React from 'react';
import ReactDOM from 'react-dom';
import RemoteComponent from './RemoteComponent';

ReactDOM.render(<RemoteComponent />, document.getElementById('root'));
            

              
                Copy
              
            
          

4. webpack.config.js ஐ உருவாக்கவும்:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  entry: './index',
  mode: 'development',
  devServer: {
    port: 3001,
  },
  output: {
    publicPath: 'auto',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'RemoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './RemoteComponent': './RemoteComponent',
      },
      shared: {
        ...require('./package.json').dependencies,
        react: { singleton: true, eager: true, requiredVersion: require('./package.json').dependencies['react'] },
        'react-dom': { singleton: true, eager: true, requiredVersion: require('./package.json').dependencies['react-dom'] },
      },
    }),
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

5. index.html ஐ உருவாக்கவும்:

            <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Remote App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>
            

              
                Copy
              
            
          

6. பேபல் கட்டமைப்பைச் சேர்க்கவும் (.babelrc அல்லது babel.config.js):

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

7. ரிமோட் செயலியை இயக்கவும்:

            npx webpack serve
            

              
                Copy
              
            
          

ஹோஸ்ட் பயன்பாடு (HostApp) - ரிமோட் கூறுகளைப் பயன்படுத்துகிறது

1. சார்புகளை நிறுவவும்:

            npm install react react-dom webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

2. ஒரு எளிய கூறுகளை உருவாக்கவும் (Home.jsx):

            import React, { Suspense } from 'react';

const RemoteComponent = React.lazy(() => import('RemoteApp/RemoteComponent'));

const Home = () => {
  return (
    <div style={{ border: '2px solid green', padding: '10px', margin: '10px' }}>
      <h1>Host Application</h1>
      <p>This is the main application consuming a remote component.</p>
      <Suspense fallback={<div>Loading Remote Component...</div>}>
        <RemoteComponent />
      </Suspense>
    </div>
  );
};

export default Home;
            

              
                Copy
              
            
          

3. index.js ஐ உருவாக்கவும்:

            import React from 'react';
import ReactDOM from 'react-dom';
import Home from './Home';

ReactDOM.render(<Home />, document.getElementById('root'));
            

              
                Copy
              
            
          

4. webpack.config.js ஐ உருவாக்கவும்:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  entry: './index',
  mode: 'development',
  devServer: {
    port: 3000,
  },
  output: {
    publicPath: 'auto',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'HostApp',
      remotes: {
        RemoteApp: 'RemoteApp@http://localhost:3001/remoteEntry.js',
      },
      shared: {
        ...require('./package.json').dependencies,
        react: { singleton: true, eager: true, requiredVersion: require('./package.json').dependencies['react'] },
        'react-dom': { singleton: true, eager: true, requiredVersion: require('./package.json').dependencies['react-dom'] },
      },
    }),
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

5. index.html ஐ உருவாக்கவும்:

            <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Host App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>
            

              
                Copy
              
            
          

6. பேபல் கட்டமைப்பைச் சேர்க்கவும் (.babelrc அல்லது babel.config.js):

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

7. ஹோஸ்ட் செயலியை இயக்கவும்:

            npx webpack serve
            

              
                Copy
              
            
          

ஹோஸ்ட் செயலியானது இயக்க நேரத்தில் ரிமோட் செயலியிலிருந்து ரிமோட் காம்பொனன்டை எவ்வாறு பயன்படுத்தலாம் என்பதை இந்த எடுத்துக்காட்டு காட்டுகிறது. ஹோஸ்டின் வெப்பேக் கட்டமைப்பில் ரிமோட் நுழைவுப் புள்ளியை வரையறுப்பது மற்றும் ரிமோட் கூறுகளை ஒத்திசைவின்றி ஏற்றுவதற்கு React.lazy மற்றும் Suspense ஐப் பயன்படுத்துவது ஆகியவை முக்கிய அம்சங்களாகும்.

மைக்ரோ-ஃபிரண்ட்எண்ட்ஸ் மற்றும் மாட்யூல் ஃபெடரேஷனை எப்போது தேர்வு செய்வது

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

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

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

மைக்ரோ-ஃபிரண்ட்எண்ட்ஸிற்கான மாற்று அணுகுமுறைகள்

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

• ஐஃப்ரேம்கள் (Iframes): ஒரு எளிய ஆனால் பெரும்பாலும் குறைந்த செயல்திறன் கொண்ட அணுகுமுறை, வலுவான தனிமைப்படுத்தலை வழங்குகிறது, ஆனால் தகவல்தொடர்பு மற்றும் ஸ்டைலிங் ஆகியவற்றில் சவால்களுடன்.
• வலைக் கூறுகள் (Web Components): மறுபயன்பாட்டு UI கூறுகளை உருவாக்குவதற்கான தரநிலைகள் அடிப்படையிலான அணுகுமுறை. கட்டமைப்பு-அஞ்ஞான மைக்ரோ-ஃபிரண்ட்எண்ட்ஸை உருவாக்கப் பயன்படுத்தலாம்.
• சிங்கிள்-எஸ்பிஏ (Single-SPA): ஒரே பக்கத்தில் பல ஜாவாஸ்கிரிப்ட் பயன்பாடுகளை ஒருங்கிணைப்பதற்கான ஒரு கட்டமைப்பு.
• சர்வர்-சைட் இன்க்ளூட்ஸ் (SSI) / எட்ஜ்-சைட் இன்க்ளூட்ஸ் (ESI): HTML இன் துண்டுகளை உருவாக்குவதற்கான சர்வர்-சைட் நுட்பங்கள்.

மைக்ரோ-ஃபிரண்ட்எண்ட் கட்டமைப்பிற்கான சிறந்த நடைமுறைகள்

ஒரு மைக்ரோ-ஃபிரண்ட்எண்ட் கட்டமைப்பை திறம்பட செயல்படுத்துவதற்கு சிறந்த நடைமுறைகளைக் கடைப்பிடிக்க வேண்டும்:

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

முடிவுரை

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

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