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 மிகவும் உகந்ததாக்கப்பட்ட விர்ச்சுவல் DOM செயலாக்கத்தைப் பயன்படுத்துகிறது, இது மிக வேகமான ரெண்டரிங் மற்றும் புதுப்பித்தல்களுக்கு வழிவகுக்கிறது.
- எளிய API: இதன் API சுருக்கமானது மற்றும் நன்கு ஆவணப்படுத்தப்பட்டுள்ளது, இது கற்றுக்கொள்வதற்கும் பயன்படுத்துவதற்கும் எளிதாக்குகிறது.
- MVC கட்டமைப்பு: உங்கள் பயன்பாட்டின் குறியீட்டை ஒழுங்கமைக்க ஒரு தெளிவான கட்டமைப்பை வழங்குகிறது, பராமரிப்புத்தன்மை மற்றும் அளவிடுதல் தன்மையை ஊக்குவிக்கிறது.
- கூறு அடிப்படையிலான: மீண்டும் பயன்படுத்தக்கூடிய கூறுகளை உருவாக்குவதை ஊக்குவிக்கிறது, இது மேம்பாட்டை எளிதாக்குகிறது மற்றும் குறியீடு நகலை குறைக்கிறது.
- ரூட்டிங்: SPA நேவிகேஷனை உருவாக்குவதற்கான உள்ளமைக்கப்பட்ட ரூட்டிங் வழிமுறையை உள்ளடக்கியது.
- XHR சுருக்கம்: HTTP கோரிக்கைகளைச் செய்ய ஒரு எளிதாக்கப்பட்ட API ஐ வழங்குகிறது.
- விரிவான ஆவணம்: Mithril.js ஃபிரேம்வொர்க்கின் அனைத்து அம்சங்களையும் உள்ளடக்கிய முழுமையான ஆவணத்தைக் கொண்டுள்ளது.
- கிராஸ்-பிரவுசர் இணக்கத்தன்மை: பரந்த அளவிலான உலாவிகளில் நம்பகத்தன்மையுடன் செயல்படுகிறது.
Mithril.js இல் MVC கட்டமைப்பு
Mithril.js Model-View-Controller (MVC) கட்டடக்கலை வடிவத்தைப் பின்பற்றுகிறது. Mithril.js ஐ திறம்பட பயன்படுத்த MVC ஐப் புரிந்துகொள்வது அவசியம்.- மாடல் (Model): உங்கள் பயன்பாட்டின் தரவு மற்றும் வணிக லாஜிக்கை குறிக்கிறது. இது தரவை மீட்டெடுப்பதற்கும், சேமிப்பதற்கும் மற்றும் கையாளுவதற்கும் பொறுப்பாகும்.
- வியூ (View): பயனருக்கு தரவைக் காட்டுகிறது. மாடலால் வழங்கப்பட்ட தரவின் அடிப்படையில் பயனர் இடைமுகத்தை ரெண்டரிங் செய்வதற்கு இது பொறுப்பாகும். Mithril.js இல், வியூக்கள் பொதுவாக UI இன் விர்ச்சுவல் DOM பிரதிநிதித்துவத்தை வழங்கும் செயல்பாடுகளாகும்.
- கண்ட்ரோலர் (Controller): மாடலுக்கும் வியூவிற்கும் இடையில் ஒரு இடைத்தரகராக செயல்படுகிறது. இது பயனர் உள்ளீட்டைக் கையாளுகிறது, மாடலை புதுப்பிக்கிறது மற்றும் வியூவிற்கு புதுப்பித்தல்களைத் தூண்டுகிறது.
ஒரு Mithril.js பயன்பாட்டில் தரவு ஓட்டம் பொதுவாக இந்த முறையைப் பின்பற்றுகிறது:
- பயனர் வியூவுடன் தொடர்பு கொள்கிறார்.
- கண்ட்ரோலர் பயனர் தொடர்புகளையும் மாடலையும் புதுப்பிக்கிறது.
- மாடல் அதன் தரவை புதுப்பிக்கிறது.
- கண்ட்ரோலர் புதுப்பிக்கப்பட்ட தரவுடன் வியூவை மீண்டும் ரெண்டரிங் செய்ய தூண்டுகிறது.
- வியூ மாற்றங்களை பிரதிபலிக்க பயனர் இடைமுகத்தை புதுப்பிக்கிறது.
Mithril.js திட்டத்தை அமைத்தல்
Mithril.js உடன் தொடங்குவது நேரடியானது. பல்வேறு முறைகளைப் பயன்படுத்தி உங்கள் திட்டத்தில் இதைச் சேர்க்கலாம்:
- நேரடி பதிவிறக்கம்: அதிகாரப்பூர்வ வலைத்தளத்திலிருந்து (https://mithril.js.org/) Mithril.js கோப்பைப் பதிவிறக்கம் செய்து, உங்கள் HTML கோப்பில் ஒரு
<script>
டேக் பயன்படுத்தி சேர்க்கவும். - CDN: உங்கள் HTML கோப்பில் Mithril.js ஐ சேர்க்க ஒரு உள்ளடக்க விநியோக நெட்வொர்க்கை (CDN) பயன்படுத்தவும். உதாரணமாக:
<script src=\"https://cdn.jsdelivr.net/npm/mithril@2.0.4/mithril.min.js\"></script>
- npm: npm பயன்படுத்தி Mithril.js ஐ நிறுவவும்:
npm install mithril
பின்னர், அதை உங்கள் ஜாவாஸ்கிரிப்ட் கோப்பில் இறக்குமதி செய்யவும்:import m from 'mithril';
அதிக சிக்கலான திட்டங்களுக்கு, உங்கள் குறியீட்டை தொகுக்கவும் மற்றும் சார்புகளை திறமையாக நிர்வகிக்கவும் 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);
விளக்கம்:
- மாடல் (Model):
count
மாறி தற்போதைய கவுண்டர் மதிப்பை சேமிக்கிறது. - கண்ட்ரோலர் (Controller):
CounterController
ஆப்ஜெக்ட் கவுண்டரை அதிகரிக்கவும் குறைக்கவும் முறைகளைக் கொண்டுள்ளது. - வியூ (View):
CounterView
ஆப்ஜெக்ட் பயனர் இடைமுகத்தை வரையறுக்கிறது. இது விர்ச்சுவல் DOM நோட்களை உருவாக்கm()
செயல்பாட்டை (Mithril இன் ஹைப்பர்ஸ்கிரிப்ட்) பயன்படுத்துகிறது. பட்டன்களின்onclick
பண்புக்கூறுகள் கண்ட்ரோலரில் உள்ளincrement
மற்றும்decrement
முறைகளுடன் இணைக்கப்பட்டுள்ளன. - ஏற்றுதல் (Mounting):
m.mount()
செயல்பாடுCounterView
ஐdocument.body
உடன் இணைத்து, பயன்பாட்டை உலாவியில் ரெண்டர் செய்கிறது.
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 ஆனது React ஐ விட கணிசமாக சிறியது.
- செயல்திறன்: Mithril.js ஆனது பெஞ்ச்மார்க்குகளில், குறிப்பாக சிக்கலான UI களுக்கு, React ஐ விட சிறப்பாக செயல்படுகிறது.
- API: Mithril.js ஆனது React ஐ விட எளிய மற்றும் சுருக்கமான API ஐக் கொண்டுள்ளது.
- JSX: React JSX ஐப் பயன்படுத்துகிறது, இது ஜாவாஸ்கிரிப்டிற்கான ஒரு தொடரியல் விரிவாக்கமாகும். Mithril.js விர்ச்சுவல் DOM நோட்களை உருவாக்க சாதாரண ஜாவாஸ்கிரிப்டைப் பயன்படுத்துகிறது.
- சூழல் அமைப்பு: React ஆனது பரந்த அளவிலான நூலகங்கள் மற்றும் கருவிகளைக் கொண்ட பெரிய மற்றும் முதிர்ந்த சூழல் அமைப்பைக் கொண்டுள்ளது.
Mithril.js vs. Angular
- அளவு: Mithril.js ஆனது Angular ஐ விட மிகவும் சிறியது.
- சிக்கல்தன்மை: Angular ஆனது Mithril.js ஐ விட அதிக கற்றல் வளைவைக் கொண்ட ஒரு முழுமையான ஃபிரேம்வொர்க் ஆகும்.
- நெகிழ்வுத்தன்மை: Mithril.js ஆனது Angular ஐ விட அதிக நெகிழ்வுத்தன்மையையும் குறைந்த கட்டமைப்பையும் வழங்குகிறது.
- TypeScript: Angular பொதுவாக TypeScript உடன் பயன்படுத்தப்படுகிறது. Mithril.js TypeScript உடன் அல்லது இல்லாமலும் பயன்படுத்தப்படலாம்.
- தரவு பிணைப்பு: Angular இருவழி தரவு பிணைப்பைப் பயன்படுத்துகிறது, அதேசமயம் Mithril.js ஒருவழி தரவு ஓட்டத்தைப் பயன்படுத்துகிறது.
Mithril.js vs. Vue.js
- அளவு: Mithril.js பொதுவாக Vue.js ஐ விட சிறியது.
- கற்றல் வளைவு: இரண்டு ஃபிரேம்வொர்க்குகளும் ஒப்பீட்டளவில் மென்மையான கற்றல் வளைவுகளைக் கொண்டுள்ளன.
- டெம்ப்ளேட்டிங்: Vue.js HTML அடிப்படையிலான டெம்ப்ளேட்டுகளைப் பயன்படுத்துகிறது, அதேசமயம் Mithril.js விர்ச்சுவல் DOM நோட்களை உருவாக்க சாதாரண ஜாவாஸ்கிரிப்டைப் பயன்படுத்துகிறது.
- சமூகம்: Vue.js ஆனது Mithril.js ஐ விட பெரிய மற்றும் சுறுசுறுப்பான சமூகத்தைக் கொண்டுள்ளது.
Mithril.js க்கான பயன்பாட்டு வழக்குகள்
- ஒற்றைப்பக்க பயன்பாடுகள் (SPAs): இதன் ரூட்டிங் மற்றும் கூறு அடிப்படையிலான கட்டமைப்பு SPAs ஐ உருவாக்குவதற்கு இதை சிறந்ததாக்குகிறது.
- டாஷ்போர்டுகள் மற்றும் நிர்வாக பேனல்கள்: இதன் செயல்திறன் மற்றும் சிறிய அளவு தரவு செறிவான பயன்பாடுகளுக்கு ஒரு நல்ல தேர்வாக அமைகிறது.
- மொபைல் பயன்பாடுகள்: இதன் சிறிய நினைவகப் பயன்பாடு குறைந்த வளங்களைக் கொண்ட மொபைல் சாதனங்களுக்கு நன்மை பயக்கும்.
- வலை விளையாட்டுகள்: மென்மையான மற்றும் பதிலளிக்கக்கூடிய வலை விளையாட்டுகளை உருவாக்குவதற்கு இதன் செயல்திறன் மிக முக்கியம்.
- உட்பொதிக்கப்பட்ட அமைப்புகள் (Embedded Systems): இதன் சிறிய அளவு குறைந்த நினைவகம் கொண்ட உட்பொதிக்கப்பட்ட அமைப்புகளுக்கு ஏற்றது.
- செயல்திறன் கட்டுப்பாடுகள் உள்ள திட்டங்கள்: ஏற்றுதல் நேரங்களைக் குறைப்பதும் செயல்திறனை அதிகப்படுத்துவதும் மிக முக்கியமாக இருக்கும் எந்த ஒரு திட்டமும். இது மெதுவான இணைய இணைப்புகள் உள்ள பகுதிகளில், அதாவது வளரும் நாடுகளில் உள்ள பயனர்களுக்கு குறிப்பாக பொருத்தமானது.
Mithril.js மேம்பாட்டிற்கான சிறந்த நடைமுறைகள்
- கூறுகளைப் பயன்படுத்துங்கள்: குறியீடு அமைப்பு மற்றும் பராமரிப்புத்தன்மையை மேம்படுத்த உங்கள் பயன்பாட்டை மீண்டும் பயன்படுத்தக்கூடிய கூறுகளாகப் பிரிக்கவும்.
- கூறுகளைச் சிறியதாக வைத்திருங்கள்: அதிக சிக்கலான கூறுகளை உருவாக்குவதைத் தவிர்க்கவும். சிறிய கூறுகள் புரிந்துகொள்வதற்கும், சோதிப்பதற்கும் மற்றும் மீண்டும் பயன்படுத்துவதற்கும் எளிதானவை.
- MVC வடிவத்தைப் பின்பற்றுங்கள்: உங்கள் குறியீட்டை கட்டமைக்கவும் மற்றும் கவலைகளைப் பிரிக்கவும் MVC கட்டடக்கலை வடிவத்தைப் பின்பற்றுங்கள்.
- ஒரு உருவாக்க கருவியைப் பயன்படுத்துங்கள்: உங்கள் குறியீட்டை தொகுக்கவும் மற்றும் சார்புகளை திறமையாக நிர்வகிக்கவும் Webpack அல்லது Parcel போன்ற ஒரு உருவாக்க கருவியைப் பயன்படுத்துங்கள்.
- அலகு சோதனைகளை எழுதுங்கள்: உங்கள் குறியீட்டின் தரம் மற்றும் நம்பகத்தன்மையை உறுதிப்படுத்த அலகு சோதனைகளை எழுதுங்கள்.
- செயல்திறனை மேம்படுத்துங்கள்: செயல்திறனை மேம்படுத்த குறியீடு பிரித்தல் (code splitting) மற்றும் மெதுவான ஏற்றுதல் (lazy loading) போன்ற நுட்பங்களைப் பயன்படுத்தவும்.
- ஒரு லின்டரைப் பயன்படுத்துங்கள்: குறியீட்டுத் தரங்களை செயல்படுத்தவும் சாத்தியமான பிழைகளைக் கண்டறியவும் ESLint போன்ற ஒரு லின்டரைப் பயன்படுத்தவும்.
- புதுப்பித்த நிலையில் இருங்கள்: பிழைத் திருத்தங்கள் மற்றும் செயல்திறன் மேம்பாடுகளிலிருந்து பயனடைய உங்கள் Mithril.js பதிப்பு மற்றும் சார்புகளை புதுப்பித்த நிலையில் வைத்திருங்கள்.
சமூகம் மற்றும் வளங்கள்
Mithril.js சமூகம் பெரிய ஃபிரேம்வொர்க்குகளின் சமூகங்களை விட சிறியதாக இருந்தாலும், அது சுறுசுறுப்பானது மற்றும் ஆதரவானது. Mithril.js பற்றி மேலும் அறிய உங்களுக்கு உதவும் சில வளங்கள் இங்கே:
- அதிகாரப்பூர்வ வலைத்தளம்: https://mithril.js.org/
- ஆவணம்: https://mithril.js.org/documentation.html
- கிட்ஹப் களஞ்சியம்: https://github.com/MithrilJS/mithril.js
- கிட்டர் அரட்டை: https://gitter.im/MithrilJS/mithril.js
- Mithril.js குக் புக்: நடைமுறை எடுத்துக்காட்டுகள் மற்றும் சமையல் குறிப்புகளுடன் கூடிய ஒரு சமூகம் பராமரிக்கும் ஆதாரம்.