புதிய கருவி நெறிப்படுத்தப்பட்ட சர்வர்-ரெண்டர் செய்யப்பட்ட UI உடன் வேகமான வலைத்தளங்களை உறுதியளிக்கிறது

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

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

உண்மையில், htmx மற்றும் alpine.js போன்ற தொகுதிக்கூறுகளுக்கு மாற்றாக இது மிகவும் நல்லது, ஏனெனில் இது குறைந்தபட்ச அமைப்புமுறை அளவுருக்கள் மற்றும் வெளியீட்டு கோப்புகளின் அளவுடன் டைனமிக் இடைமுகங்களை உருவாக்க உங்களை அனுமதிக்கிறது. சேவையகத்துடன் பணிபுரிவதன் மூலம் இது அடையப்படுகிறது, நாங்கள் அங்கு UI ஐ தயார் செய்து, அதை API வழியாக கிளையண்டிற்கு மட்டுமே மாற்றுவோம்.

குறியீட்டில் இது எப்படி வேலை செய்கிறது?

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

 import { compile } from "hmpl-js"; const templateFn = compile( `<div> <form onsubmit="function prevent(e){e.preventDefault();};return prevent(event);" id="form"> <div class="form-example"> <label for="name">Enter your email: </label> <input type="email" name="email" id="email" required /> </div> <div class="form-example"> <input type="submit" value="Register!" /> </div> </form> <p> { { "src":"/api/register", "after":"submit:#form", "repeat":false, "indicators": [ { "trigger": "pending", "content": "<p>Loading...</p>" } ] } } </p> </div>` ); const initFn = (ctx) => { const event = ctx.request.event; return { body: new FormData(event.target, event.submitter), credentials: "same-origin", }; }; const obj = templateFn(initFn); const wrapper = document.getElementById("wrapper"); wrapper.appendChild(obj.response);

குறியீட்டின் முடிவு:

இந்த படிவத்தில் சில எழுத்துக்கள் செலவழிக்கப்பட்டன, இப்போது Vue போன்ற கட்டமைப்புகளில் இதையே செய்வோம் என்று கற்பனை செய்தால், சேவையகத்துடன் இணைந்து பினியாவை இணைக்க வேண்டும், பல கூறுகளை உருவாக்க வேண்டும், மேலும் இது எடுக்கும். நிறைய வட்டு இடம்.

சர்வர் பக்க அணுகுமுறையின் முக்கியத்துவம்

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

இதனால், மாற்றம் குறையலாம் மற்றும் விற்பனையாளர் கட்டிய விற்பனை புனல் இதன் காரணமாக பயனற்றதாக இருக்கலாம். எனவே, இந்தத் திட்டம் உண்மையில் உதவக்கூடும், ஏனென்றால் பக்கங்களை மிக வேகமாக ஏற்ற முடியும் (முழு UI சேவையகத்தில் இருப்பதால்), மற்றும் கிளையண்டிலும் பயனர் கட்டமைப்பில் செய்யப்பட்டதைப் போலவே பார்ப்பார்.

மற்றவர்களுடன் ஒப்பிடும்போது தொகுதியின் நன்மைகள்:

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

நீங்கள் .hmpl நீட்டிப்புடன் தனிப்பட்ட கோப்புகளுடன் வேலை செய்யலாம், ஆனால் இப்போதைக்கு வெப்பேக்கிற்கு மட்டுமே.

முடிவுகள் மற்றும் வளர்ச்சி பற்றி கொஞ்சம்

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