නව මෙවලම ප්‍රත්‍යස්ථ සේවාදායක-විදැහුම් කළ UI සමඟ වේගවත් වෙබ් අඩවි පොරොන්දු වේ

සැම දෙනාටම ආයුබෝවන්! මෙම ලිපියෙන් මම ඔබට උනන්දු විය හැකි ව්යාපෘතියේ ආරම්භය ගැන ඔබට කියන්නට කැමැත්තෙමි. කේතයේ වැඩ බොහෝ කාලයක් සිදු කරන ලදී, මට දායකයන්ගෙන් ද උදව් ලැබුණි, නමුත් දැන් එය නිෂ්පාදන අනුවාදයට සූදානම් යැයි මම සිතමි.

හරි, ඇත්ත වශයෙන්ම HMPL නමින් ව්‍යාපෘතියක් පෙන්වීම ඇත්තෙන්ම සිත්ගන්නා කරුණකි. එය සේවාදායකයෙන් සේවාදායකයාට UI පෙන්වීම සඳහා කුඩා අච්චු භාෂාවකි. එය ලබා ගැනීම හරහා සේවාදායකය වෙත යවන ලද අභිරුචිකරණය කළ හැකි ඉල්ලීම් මත පදනම් වී සූදානම් කර ඇති 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 හි ඔබ කැමති තරම් nodes සෑදිය හැක. alpine.js හා සසඳන විට, ඔබට ගතිකත්වය නිර්මාණය කළ හැකිය, නමුත් සේවාදායකය සමඟ ඒකාබද්ධව, ඔබේ ව්‍යාපෘතියට අමතර මොඩියුල ඇතුළත් නොකිරීමට ඔබට ඉඩ සලසයි.

ඔබට .hmpl දිගුව සමඟින් තනි ගොනු සමඟද වැඩ කළ හැක, නමුත් දැනට webpack සඳහා පමණි.

ප්රතිඵල සහ සංවර්ධනය ගැන ටිකක්

ඔබ ව්යාපෘතිය ගැන උනන්දු වනු ඇතැයි මම බලාපොරොත්තු වෙමි. අදහස් දැක්වීමේදී ඒ ගැන ඔබේ අදහස දැනගැනීම සතුටක් වනු ඇත. එය මත වැඩ කිරීමට බොහෝ කාලයක් ගත විය, සිසිල් වෙබ් අඩවියක්, ගබඩාවක් සහ තවත් බොහෝ දේ ගොඩනගා ඇත. එය ඔබට එතරම් කරදරයක් නොවේ නම්, ඔබට ව්‍යාපෘතියේ සංවර්ධනයට සහභාගී විය හැකි යැයි මම බලාපොරොත්තු වෙමි! සෑම සතියකම මම මට උදව් අවශ්‍ය විවෘත ගැටලු පළ කිරීමට උත්සාහ කරමි. එකට වැඩ කළොත් හොඳයි :). තවද, මම දැන් ආරම්භ කළ දා සිට, GitHub හි බොහෝ තරු නොමැති අතර ඔබ ව්‍යාපෘතියට කැමති නම් එය සිසිල් වනු ඇත, එවිට ඔබ එය තරුවකින් ශ්‍රේණිගත කරනු ඇත. ඔයාට ස්තූතියි!