தமிழ்

Mithril.js, வேகமான, பராமரிக்கக்கூடிய SPA-க்களை உருவாக்கும் ஒரு இலகுரக JavaScript ஃபிரேம்வொர்க். இதன் முக்கிய அம்சங்கள், பயன்கள், மற்றும் பிற ஃபிரேம்வொர்க்குகளுடன் ஒப்பீடு பற்றி அறிக.

Mithril.js: வேகம் மற்றும் எளிமையுடன் SPA-களை உருவாக்குவதற்கான ஒரு நடைமுறை வழிகாட்டி

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

Mithril.js என்றால் என்ன?

Mithril.js என்பது நவீன வலை பயன்பாடுகளை உருவாக்குவதற்கான ஒரு கிளையன்ட்-பக்க ஜாவாஸ்கிரிப்ட் ஃபிரேம்வொர்க் ஆகும். இது அதன் சிறிய அளவு (10kb க்கும் குறைவான gzipped), விதிவிலக்கான செயல்திறன் மற்றும் எளிதான பயன்பாட்டிற்காக அறியப்படுகிறது. இது ஒரு Model-View-Controller (MVC) கட்டமைப்பை செயல்படுத்துகிறது, இது உங்கள் குறியீட்டை ஒழுங்கமைக்க ஒரு கட்டமைக்கப்பட்ட அணுகுமுறையை வழங்குகிறது.

சில பெரிய, அதிக அம்சங்கள் கொண்ட ஃபிரேம்வொர்க்குகளைப் போலல்லாமல், Mithril.js அத்தியாவசியமானவற்றில் கவனம் செலுத்துகிறது, இது டெவலப்பர்கள் தங்கள் இருக்கும் ஜாவாஸ்கிரிப்ட் அறிவை அதிக கற்றல் இல்லாமல் பயன்படுத்த அனுமதிக்கிறது. அதன் முக்கிய செயல்பாட்டில் கவனம் செலுத்துவது விரைவான ஏற்றுதல் நேரம் மற்றும் மென்மையான பயனர் அனுபவத்திற்கு வழிவகுக்கிறது.

முக்கிய அம்சங்கள் மற்றும் நன்மைகள்

Mithril.js இல் MVC கட்டமைப்பு

Mithril.js Model-View-Controller (MVC) கட்டடக்கலை வடிவத்தைப் பின்பற்றுகிறது. Mithril.js ஐ திறம்பட பயன்படுத்த MVC ஐப் புரிந்துகொள்வது அவசியம்.

ஒரு Mithril.js பயன்பாட்டில் தரவு ஓட்டம் பொதுவாக இந்த முறையைப் பின்பற்றுகிறது:

  1. பயனர் வியூவுடன் தொடர்பு கொள்கிறார்.
  2. கண்ட்ரோலர் பயனர் தொடர்புகளையும் மாடலையும் புதுப்பிக்கிறது.
  3. மாடல் அதன் தரவை புதுப்பிக்கிறது.
  4. கண்ட்ரோலர் புதுப்பிக்கப்பட்ட தரவுடன் வியூவை மீண்டும் ரெண்டரிங் செய்ய தூண்டுகிறது.
  5. வியூ மாற்றங்களை பிரதிபலிக்க பயனர் இடைமுகத்தை புதுப்பிக்கிறது.

Mithril.js திட்டத்தை அமைத்தல்

Mithril.js உடன் தொடங்குவது நேரடியானது. பல்வேறு முறைகளைப் பயன்படுத்தி உங்கள் திட்டத்தில் இதைச் சேர்க்கலாம்:

அதிக சிக்கலான திட்டங்களுக்கு, உங்கள் குறியீட்டை தொகுக்கவும் மற்றும் சார்புகளை திறமையாக நிர்வகிக்கவும் Webpack அல்லது Parcel போன்ற ஒரு உருவாக்க கருவியை (build tool) பயன்படுத்துவது பரிந்துரைக்கப்படுகிறது. இந்த கருவிகள் ES6+ குறியீட்டை டிரான்ஸ்பைல் செய்வது மற்றும் உங்கள் ஜாவாஸ்கிரிப்ட் கோப்புகளை சுருக்குவது போன்ற பணிகளுக்கும் உதவலாம்.

ஒரு எளிய Mithril.js எடுத்துக்காட்டு

Mithril.js இன் அடிப்படை கருத்துக்களை விளக்க ஒரு எளிய கவுண்டர் பயன்பாட்டை உருவாக்குவோம்.

// மாடல்
let count = 0;

// கண்ட்ரோலர்
const CounterController = {
  increment: () => {
    count++;
  },
  decrement: () => {
    count--;
  },
};

// வியூ
const CounterView = {
  view: () => {
    return m(\"div\", [
      m(\"button\", { onclick: CounterController.decrement }, \"-\"),
      m(\"span\", count),
      m(\"button\", { onclick: CounterController.increment }, \"+\"),
    ]);
  },
};

// பயன்பாட்டை ஏற்றவும்
mount(document.body, CounterView);

விளக்கம்:

Mithril.js இல் கூறுகள்

Mithril.js கூறு அடிப்படையிலான கட்டமைப்பை ஊக்குவிக்கிறது, இது உங்கள் பயன்பாட்டை மீண்டும் பயன்படுத்தக்கூடிய மற்றும் சுயாதீனமான கூறுகளாகப் பிரிக்க அனுமதிக்கிறது. இது குறியீடு அமைப்பு, பராமரிப்புத்தன்மை மற்றும் சோதிக்கும் திறனை மேம்படுத்துகிறது.

ஒரு Mithril.js கூறு ஒரு view முறையைக் கொண்ட ஒரு ஆப்ஜெக்ட் ஆகும் (விரும்பினால், oninit, oncreate, onupdate, மற்றும் onremove போன்ற பிற வாழ்க்கை சுழற்சி முறைகளையும் கொண்டிருக்கும்). view முறை கூறின் விர்ச்சுவல் DOM பிரதிநிதித்துவத்தை வழங்குகிறது.

முந்தைய கவுண்டர் எடுத்துக்காட்டை ஒரு கூறைப் பயன்படுத்த மாற்றியமைப்போம்:

// கவுண்டர் கூறு
const Counter = {
  count: 0,
  increment: () => {
    Counter.count++;
  },
  decrement: () => {
    Counter.count--;
  },
  view: () => {
    return m(\"div\", [
      m(\"button\", { onclick: Counter.decrement }, \"-\"),
      m(\"span\", Counter.count),
      m(\"button\", { onclick: Counter.increment }, \"+\"),
    ]);
  },
};

// பயன்பாட்டை ஏற்றவும்
mount(document.body, Counter);

இந்த எடுத்துக்காட்டில், மாடல் மற்றும் கண்ட்ரோலர் லாஜிக் இப்போது Counter கூறுக்குள் இணைக்கப்பட்டுள்ளது, இது மேலும் தன்னிறைவுள்ளதாகவும் மீண்டும் பயன்படுத்தக்கூடியதாகவும் ஆக்குகிறது.

Mithril.js இல் ரூட்டிங்

Mithril.js ஒற்றைப்பக்க பயன்பாட்டு (SPA) நேவிகேஷனை உருவாக்குவதற்கான உள்ளமைக்கப்பட்ட ரூட்டிங் வழிமுறையை உள்ளடக்கியது. m.route() செயல்பாடு ரூட்களை வரையறுக்கவும் அவற்றை கூறுகளுடன் இணைக்கவும் உங்களை அனுமதிக்கிறது.

Mithril.js இல் ரூட்டிங்கை எவ்வாறு பயன்படுத்துவது என்பதற்கு ஒரு எடுத்துக்காட்டு இங்கே:

// வெவ்வேறு ரூட்களுக்கான கூறுகளை வரையறுக்கவும்
const Home = {
  view: () => {
    return m(\"h1\", \"முகப்புப் பக்கம்\");
  },
};

const About = {
  view: () => {
    return m(\"h1\", \"பற்றி பக்கம்\");
  },
};

// ரூட்களை வரையறுக்கவும்
m.route(document.body, \"/\", {
  \"/\": Home,
  \"/about\": About,
});

இந்த எடுத்துக்காட்டில், நாம் இரண்டு கூறுகளை வரையறுக்கிறோம்: Home மற்றும் About. m.route() செயல்பாடு / ரூட்டை Home கூறுக்கும், /about ரூட்டை About கூறுக்கும் வரைபடம் செய்கிறது.

ரூட்களுக்கு இடையில் இணைப்புகளை உருவாக்க, நீங்கள் href பண்புக்கூறு விரும்பிய ரூட்டிற்கு அமைக்கப்பட்டுள்ள m(\"a\") கூறைப் பயன்படுத்தலாம்:

m(\"a\", { href: \"/about\", oncreate: m.route.link }, \"பற்றி\");

oncreate: m.route.link பண்புக்கூறு, முழு பக்கத்தையும் மீண்டும் ஏற்றாமல் இணைப்பு கிளிக்கைக் கையாளவும் உலாவியின் URL ஐ புதுப்பிக்கவும் Mithril.js க்கு சொல்கிறது.

Mithril.js vs. பிற ஃபிரேம்வொர்க்குகள்

ஒரு ஜாவாஸ்கிரிப்ட் ஃபிரேம்வொர்க்கைத் தேர்ந்தெடுக்கும்போது, உங்கள் திட்டத்தின் குறிப்பிட்ட தேவைகளைக் கருத்தில் கொள்வது முக்கியம். Mithril.js React, Angular மற்றும் Vue.js போன்ற பெரிய ஃபிரேம்வொர்க்குகளுக்கு ஒரு கவர்ச்சிகரமான மாற்றீட்டை வழங்குகிறது, குறிப்பாக செயல்திறன், எளிமை மற்றும் சிறிய நினைவகப் பயன்பாடு ஆகியவை முக்கியமான சூழ்நிலைகளில்.

Mithril.js vs. React

Mithril.js vs. Angular

Mithril.js vs. Vue.js

Mithril.js க்கான பயன்பாட்டு வழக்குகள்

Mithril.js மேம்பாட்டிற்கான சிறந்த நடைமுறைகள்

சமூகம் மற்றும் வளங்கள்

Mithril.js சமூகம் பெரிய ஃபிரேம்வொர்க்குகளின் சமூகங்களை விட சிறியதாக இருந்தாலும், அது சுறுசுறுப்பானது மற்றும் ஆதரவானது. Mithril.js பற்றி மேலும் அறிய உங்களுக்கு உதவும் சில வளங்கள் இங்கே:

முடிவுரை

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