தமிழ்

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

மார்கோ: ஸ்ட்ரீமிங் சர்வர்-சைடு ரெண்டரிங்குடன் கூடிய டிக்ளரேடிவ் UI

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

மார்கோ என்றால் என்ன?

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

மார்கோவின் முக்கிய அம்சங்கள் மற்றும் நன்மைகள்

ஸ்ட்ரீமிங் சர்வர்-சைடு ரெண்டரிங்கில் ஒரு ஆழமான பார்வை

ஸ்ட்ரீமிங் SSR-ன் நன்மைகளை இன்னும் விரிவாக ஆராய்வோம்:

மேம்படுத்தப்பட்ட ஃபர்ஸ்ட் கன்டென்ட்ஃபுல் பெயின்ட் (FCP)

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

சிறந்த பயனர் அனுபவம்

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

SEO நன்மைகள்

தேடுபொறி பாட்கள் ஒரு வலைத்தளத்தின் கட்டமைப்பு மற்றும் உள்ளடக்கத்தைப் புரிந்து கொள்ள HTML உள்ளடக்கத்தை நம்பியுள்ளன. சர்வர்-சைடு ரெண்டரிங் உடனடியாக கிடைக்கக்கூடிய HTML-ஐ வழங்குகிறது, இது தேடுபொறிகள் உங்கள் தளத்தை கிரால் செய்து இன்டெக்ஸ் செய்வதை எளிதாக்குகிறது. இது உங்கள் தேடுபொறி தரவரிசையை மேம்படுத்துகிறது மற்றும் ஆர்கானிக் டிராஃபிக்கை அதிகரிக்கிறது. கூகிள் ஜாவாஸ்கிரிப்டை ரெண்டர் செய்வதில் சிறப்பாகிவிட்டாலும், SSR ఇప్పటికి ஒரு குறிப்பிடத்தக்க நன்மையை வழங்குகிறது, குறிப்பாக சிக்கலான ஜாவாஸ்கிரிப்ட்-அதிகமுள்ள பயன்பாடுகளைக் கொண்ட வலைத்தளங்களுக்கு. SSR-ஐப் பயன்படுத்தும் ஒரு பயண முகமை வலைத்தளத்தின் இலக்கு பக்கங்கள் சரியாக இன்டெக்ஸ் செய்யப்படும், அவை தொடர்புடைய தேடல் முடிவுகளில் தோன்றுவதை உறுதி செய்யும்.

மேம்படுத்தப்பட்ட அணுகல்தன்மை

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

மார்கோ vs. மற்ற கட்டமைப்புகள்

ரியாக்ட், வியூ மற்றும் ஆங்குலர் போன்ற பிற பிரபலமான UI கட்டமைப்புகளுடன் மார்கோ எப்படி ஒப்பிடப்படுகிறது?

மார்கோ vs. ரியாக்ட்

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

மார்கோ vs. வியூ

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

மார்கோ vs. ஆங்குலர்

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

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

மார்கோவுடன் தொடங்குவது எப்படி

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

  1. Node.js-ஐ நிறுவவும்: உங்கள் கணினியில் Node.js நிறுவப்பட்டுள்ளதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
  2. மார்கோ CLI-ஐ நிறுவவும்: மார்கோ கட்டளை-வரி இடைமுகத்தை உலகளவில் நிறுவ `npm install -g marko-cli` ஐ இயக்கவும்.
  3. புதிய மார்கோ திட்டத்தை உருவாக்கவும்: ஒரு புதிய மார்கோ திட்டத்தை உருவாக்க `marko create my-project` கட்டளையைப் பயன்படுத்தவும்.
  4. திட்ட கட்டமைப்பை ஆராயுங்கள்: இந்தத் திட்டத்தில் `index.marko` (உங்கள் முக்கிய கூறு), `server.js` (உங்கள் சர்வர்-சைடு நுழைவுப் புள்ளி), மற்றும் `marko.json` (உங்கள் திட்ட உள்ளமைவு) போன்ற கோப்புகள் இருக்கும்.
  5. மேம்பாட்டு சர்வரை இயக்கவும்: மேம்பாட்டு சர்வரைத் தொடங்க `npm start` கட்டளையைப் பயன்படுத்தவும்.
  6. உங்கள் கூறுகளை உருவாக்கத் தொடங்குங்கள்: உங்கள் கூறுகளுக்கு புதிய `.marko` கோப்புகளை உருவாக்கி, அவற்றை உங்கள் முக்கிய கூறில் இறக்குமதி செய்யவும்.

எடுத்துக்காட்டு மார்கோ கூறு (index.marko):


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marko Example</title>
  <!MARKUPROCESSED>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a simple Marko component.</p>
</body>
</html>

எடுத்துக்காட்டு சர்வர்-சைடு ரெண்டரிங் (server.js):


require('marko/node-require').install();
require('marko/compiler').configure({
  resolveCssUrls: true,
  cache: true
});

const express = require('express');
const marko = require('marko');
const template = marko.load(require.resolve('./index.marko'));

const app = express();

app.get('/', (req, res) => {
  template.render({}, res);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

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

மார்கோவின் நிஜ-உலக எடுத்துக்காட்டுகள்

eBay முதலில் மார்கோவை உருவாக்கியிருந்தாலும், இது இப்போது பல்வேறு தொழில்களில் உள்ள பல்வேறு நிறுவனங்களால் பயன்படுத்தப்படுகிறது:

இந்த எடுத்துக்காட்டுகள் மார்கோவின் பன்முகத்தன்மை மற்றும் பரந்த அளவிலான வலைப் பயன்பாடுகளுக்கான அதன் பொருத்தத்தைக் காட்டுகின்றன.

மார்கோவைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

மார்கோவிலிருந்து அதிகபட்ச ప్రయోజనాలనుப் பெற, இந்த சிறந்த நடைமுறைகளைக் கவனியுங்கள்:

முடிவுரை: மார்கோ – நவீன வலை மேம்பாட்டிற்கான ஒரு சக்திவாய்ந்த தேர்வு

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

கூடுதல் ஆதாரங்கள்: