ඔබ පළපුරුදු ක්රමලේඛකයෙකු හෝ නවකයෙකු වුවද, සංකීර්ණ ව්යාපෘතියක් මත වැඩ කිරීම, ඔබට ප්රායෝගිකව ගැටළු වලට මුහුණ දීමට සිදුවනු ඇත. ඔබ ඔබේ ව්යාපෘතිය බොහෝ මොඩියුලවලට බෙදූ විට, ගැටලු පැනනගින අතර, දෝෂ සොයා ගැනීමට සහ විසඳුම් සෙවීමට අපහසු වේ. වෙනත් අවස්ථා වලදී, ඔබ වැඩ කරමින් සිටි ගැටලුවට නිසි විසඳුම ඔබ සොයාගෙන නොමැති නිසා තනි අවස්ථා නිදොස් කිරීම දුෂ්කර විය හැක.
එය අවස්ථාවන්හිදී කේත කොටසක් ලෙසද සිදු වේ, එය එකල සංකීර්ණ ලෙස පෙනෙනු ඇත. ජාවාස්ක්රිප්ට් යනු ඉගෙනීමට අතිශයින්ම සරල වන වෙබ් පාදක භාෂාවලින් එකකි. ඔබේ ඩෙස්ක්ටොප් බ්රවුසරය දියත් කර සංවර්ධක මෙවලම් වෙත (සාමාන්යයෙන් F12) යන්න, ඔබ ඉවරයි! එවිට ඔබට සංකීර්ණ මෘදුකාංග ස්ථාපනය කිරීම හෝ ධාවනය කිරීම අවශ්ය නොවී JS සමඟ අත්හදා බැලීම් කළ හැක.
ආරම්භ කිරීමට, ඔබට අවශ්ය වන්නේ බ්රවුසරයක් පමණි. මේ සියලු සරල බව පෙට්ටියෙන් පිටත තිබීම පුදුම සහගතයි, නමුත් ඔබට තවත් අවශ්ය වන අවස්ථා තිබේ. උදාහරණයක් ලෙස, ඔබ මෑතකදී සොයා ගත් නමුත් නව ව්යාපෘතියක් ආරම්භ කිරීමට අවශ්ය නැති නව Web API සමඟ අත්හදා බැලීමට ඔබට අවශ්ය යැයි සිතන්න.
මෙම පළකිරීමේදී, අපි වඩාත් ජනප්රිය JS ක්රීඩා පිටි තුන, CodePen, CodeSandbox, සහ StackBlitz සංසන්දනය කරන්නෙමු. අපි පටන් ගනිමු!
කෝඩ්පෙන්
ඉදිරිපස වෙබ් සංවර්ධන මෙවලම් සෑම විටම විකාශනය වන අතර පෙළ සංස්කාරක යනු සංවර්ධකයෙකුගේ ජීවිතය සරල කරන නවතම තාක්ෂණයන්හි විශාල අංගයකි. Atom හෝ Notepad ++ වැනි Stand-alone පෙළ සංස්කාරක හැරුණු විට, වැඩසටහන් ස්ථාපනය සහ වැඩි සහයෝගීතාවයක් ප්රවර්ධනය කිරීම අවශ්ය නොවන බ්රවුසර පදනම් සංස්කාරකවල පිපිරීමක් මෑත වසරවලදී සිදුවී ඇත.
CodePen යනු "පරිශීලකයින් විසින් සාදන ලද HTML, CSS සහ JavaScript කේත කොටස් පරීක්ෂා කිරීම සහ ඉදිරිපත් කිරීම සඳහා සබැඳි ප්රජාවක්" වන අතර එය ඉදිරිපස වෙබ් පිටු වඩා හොඳින් ලියන ආකාරය ඉගෙන ගැනීමට අපූරු අවස්ථා ලබා දෙයි.
CodePen ඔබට "මාදිලි" දෙකක් ලබා දෙයි. පළමු සහ වඩාත් බහුලව භාවිතා වන්නේ පෑනයි. එය බොත්තමක් ක්ලික් කර සංස්කාරකය වෙත ප්රවාහනය කිරීම තරම් සරල ය. එතැන් සිට, ඔබට පෙරදසුන් පැනලයක් මෙන්ම මූලික HTML, CSS සහ JS සංස්කරණ කවුළු වෙත ප්රවේශ විය හැක.
එහි "ගොනු පද්ධතියක්", "IntelliSense" හෝ වෙනත් කිසිවක් නොමැත - සරල වාක්ය ඛණ්ඩ උද්දීපනය සහ prettify වැනි වේගවත් විධාන පමණි. විකල්ප පටිත්තෙහි, ඔබට භාෂා තුනම (JS සඳහා TypeScript වැනි) සඳහා සීමා කරන ලද පූර්ව සැකසුම් පරාසයකින් තෝරා ගැනීමට හෝ බාහිර මූලාශ්ර වෙත සම්බන්ධතා එක් කිරීමට හැකිය.
ඔබට ඕනෑම දෙයක් නොමිලේ කිරීමට අවශ්ය නම්, සංස්කාරකවරුන්ගෙන් එක් අයෙකු ප්රමාණවත් වේ. බොහෝ සැකසුම් හෝ පුස්තකාල අවශ්ය නොවන ඕනෑම දෙයක් සඳහා මම CodePen යෝජනා කරමි - සරලව HTML, CSS, සහ JS ඉහළින් විකල්ප පෙර සැකසුම්. ඔබට ඔබේ සමාජ මාධ්ය පැවැත්ම වැඩිදියුණු කිරීමට හෝ පුද්ගලික කළඹක් සංවර්ධනය කිරීමට ක්රීඩා පිටිය භාවිතා කිරීමට අවශ්ය නම්, CodePen වඩා හොඳ විකල්පයකි.
වාරික අනුවාදය
ඔබට CodePen වෙතින් තෝරා ගැනීමට තවත් විකල්ප කිහිපයක් තිබේ. ඔබ වාර්ෂිකව ගෙවන්නේ නම්, ඔබට සෑම මසකම $12, $19, හෝ $39 සඳහා වාරික සැලසුම් තුනෙන් එකක් ලබා ගත හැක. ඔබට තට්ටු තුනෙන් ඕනෑම එකක් මත අනන්ත පුද්ගලික පෑන්, පෝස්ට් සහ එකතු කිරීම් නිර්මාණය කළ හැක.
ඔබට ප්රෝ ලාංඡනය (සමාජ ප්රවර්ධනයක්), සජීවී සහයෝගීතා ප්රකාර ප්රවේශය, ප්රචාරණ නැත, සහ තවත් දේ ද ලැබෙනු ඇත. ඇතැම් කණ්ඩායම්-විශේෂිත උපාය මාර්ග සහ අනෙකුත් හරස්-ස්ථර වෙනස්කම් ද ඇත. වැඩිදුර තොරතුරු සඳහා ඔවුන්ගේ නිල බිල්පත් පුවරුව පරීක්ෂා කරන්න.
මූලික ලක්ෂණ
CodePen හි HTML, CSS සහ JavaScript නිර්මාණය කිරීම හැරුණු විට, එය වෙන් කරන තවත් කරුණු කිහිපයක් තිබේ.
- ඔබගේ කේතය තත්ය කාලීන බැලීමේ හැකියාව ඇත. එය සම්පාදනය කිරීම අවශ්ය නොවේ.
- අත්හදා බැලීම ඔබට අලුත් දේවල් ඉගෙන ගැනීමට ඉඩ සලසයි.
- ගැටළු සෙවීමට සහ විසඳීමට කුඩා පරීක්ෂණ අවස්ථා සාදන්න.
- ඔබේ අපූරු කෘති පෙන්වන්න.
- පසුකාලීන භාවිතය සඳහා පෑන් සාදා ගබඩා කරන්න.
- වෙනත් සංවර්ධකයින්ගේ කේතය උත්සාහ කර එය ක්රියාවෙන් බලන්න.
වාසි
- ආරම්භ කිරීමට, කිසිදු වියදමක් නොමැත.
- අන්තර්ගත ඉගෙනුම් සම්පත්.
- වෙනත් අය සමඟ සහයෝගයෙන් කටයුතු කරන්න සහ අනාගතයේදී ඔවුන්ට යා හැකි ස්ථානය බැලීමට ව්යාපෘති සංසන්දනය කරන්න.
- UI භාවිතා කිරීමට සරල සහ සරල ය.
අවාසි
- කේත පුස්තකාලය කුඩායි, ස්වයංක්රීය කේත සම්පූර්ණ කිරීම ප්රමාණවත් නොවේ. එය එක් පිටුවක ව්යාපෘති සඳහා පමණක් හොඳ වන අතර විශාල කිසිවක් හැසිරවිය නොහැක.
- CodePen හි, ඔබට පුද්ගලික පෑන සෑදිය හැක, නමුත් ඔබට Pro සාමාජිකත්වයකට ($9/මසකට) උත්ශ්රේණි කිරීමට අවශ්ය වනු ඇත.
කේත සෑන්ඩ්බොක්ස්
CodeSandbox යනු වෙබ් පාදක කේත සංස්කාරකයකි. එය ඔබ වෙනුවෙන් සම්ප්රේෂණය, ඇසුරුම්කරණය සහ යැපුම් කළමනාකරණය ස්වයංක්රීය කරයි, ඔබට තනි ක්ලික් කිරීමකින් නව ව්යාපෘතියක් තැනීමට ඉඩ සලසයි. ඔබ සිත් ඇදගන්නාසුළු දෙයක් නිර්මාණය කළ පසු, වෙබ් අඩවිය බෙදාගැනීමෙන් ඔබට එය අන් අය සමඟ බෙදා ගත හැක.
නිර්මාණ-ප්රතික්රියා-යෙදුම් අච්චුවක ව්යාපෘතිය සුරැකීමේ විකල්පය වැනි, යම් යම් ප්රතික්රියා-විශේෂිත විශේෂාංග ඇතුළත් වුවද, සංස්කාරකය ඕනෑම JavaScript ව්යාපෘති සමඟ අනුකූල වේ.
ඔබ CodeSandbox හි ගොඩනඟන ඕනෑම ව්යාපෘතියක් අච්චුවකින් ආරම්භ වේ. එය විශේෂිත පුස්තකාලයකට, රාමුවකට හෝ ධාවන කාලයකට (Node.js ඇතුළුව) සම්බන්ධ විය හැකිය, නැතහොත් සරලව සම්මත වෙබ් තාක්ෂණයන් භාවිතා කළ හැක. අච්චුවක් තේරීමෙන් පසු, ඔබව සංස්කාරකය වෙත යවනු ලැබේ, එහිදී ඔබට අවශ්ය සියලුම ගොනු සහ පෙරදසුන් කවුළුව දැනටමත් විවෘතව පවතිනු ඇත.
ඔබට සියලුම සෑන්ඩ්බොක්ස් වල “ගොනු පද්ධතියක්” වෙත ප්රවේශය ඇත, එයින් අදහස් වන්නේ ඔබට නව ගොනු තැනීම, මොඩියුල (NPM පැකේජ ඇතුළුව) භාවිත කිරීම සහ ස්ථිතික වත්කම් සමඟ අන්තර් ක්රියා කළ හැකි බවයි. සැකිලි-විශේෂිත වින්යාස ගොනු වෙනස් කිරීමට ද අවස්ථාව තිබේ.
IDE එකක මෙන්, ගොනු ව්යුහය සහ පරායත්තතා සමඟින් සම්පූර්ණ වූ, ඔබේ අනන්ය භාවිත අවස්ථාව සඳහා ඔබට ඔබේම සැකිලි තැනීමට පවා හැකිය. මෙවලම Github වෙත සම්බන්ධ කර ඇති නිසා, ඔබට ඉක්මනින් කැපවීම් ජනනය කර PR විවෘත කළ හැක. ඔබට ඔබගේ අයදුම්පත ZEIT හෝ Netlify වෙත වහාම යෙදවිය හැක.
CodeSandbox Team Pro
සංවර්ධකයින්ට බ්රවුසරය මත පදනම් වූ වෙබ් යෙදුම් සංවර්ධන වැලිපිල්ලක් තැනීමට ඉඩ සලසන ලන්දේසි ව්යාපාරයක් වන CodeSandbox, කණ්ඩායම් වලට වලාකුළෙහි කේතය මත වැඩ කිරීමට ඉඩ සලසන සහයෝගීතා වේදිකාවක් නිල වශයෙන් නිකුත් කර ඇත. නව නිෂ්පාදනය, Team Pro, නිර්මාණකරුවන් සහ කළමනාකරුවන්ගේ සිට තත්ත්ව සහතික (QA) කණ්ඩායම් සහ ඉන් ඔබ්බට ගොස් සම්පූර්ණ නිෂ්පාදන කණ්ඩායම් සඳහා ගොඩනගා ඇති කේත රහිත විසඳුමකි.
වෙබ් යෙදුමක වෙනස්කම් කිරීමට හෝ පිළිගැනීමට කැමති ඕනෑම අයෙකුට ව්යාපෘති සපයනු ලබන්නේ, වෙනස්කම් ක්රියාත්මක කිරීම සඳහා සංවර්ධකයින්ට සටහන් සහ නිර්දේශ යැවීම, ඒවා සාකච්ඡාවට ආපසු යැවීම සහ ක්රියාවලිය නැවත කිරීම වැනි විකල්ප ක්රම මඟ හැරීමෙනි.
මූලික ලක්ෂණ
- වෙබ් පාදක කේත සංස්කාරකයක් සහ මූලාකෘති මෙවලමක්.
- දේශීය භාවිතය සඳහා, වැලිපිල්ලක් zip ගොනුවකින් පහසුවෙන් බාගත හැක.
- ක්රමලේඛ වැලි පෙට්ටිවල සිදු කරනු ලැබේ, එය සගයන් සමඟ පහසුවෙන් බෙදා ගත හැකිය.
වාසි
- වැඩිදියුණු කළ පරිශීලක අත්දැකීමක් සහ සංස්කාරකය කෙරෙහි වැඩි පාලනයක්.
- සජීවී පෙරදසුන් විශේෂාංගය වෙනස් කර වෙනම කවුළුවකින් නැරඹිය හැකිය.
- කේතය ස්වයංක්රීයව හැඩසවි ඇති අතර CLI (codesandbox-cli) ඇතුළත් වේ
- උසස් npm මොඩියුල සඳහා සහාය.
- නිර්දේශ සහිත හොඳ දෝෂ පණිවිඩ.
- එය වඩා හොඳ පර්යන්තයක්, පරීක්ෂණ නරඹන්නෙකු සහ නිකුත් කරන නරඹන්නෙකු ලබා දීමෙන් නිදොස් කිරීමේ අත්දැකීම වැඩි දියුණු කරයි.
අවාසි
- අවසාන පාරිභෝගිකයා බොහෝ පුද්ගලීකරණයන්ට නිරාවරණය වේ.
- දේශීය පරිගණකයකින් ගොනු ඇදගෙන යාම නිසි ලෙස ක්රියා නොකරයි.
- CodeSandbox හි නිශ්චිත ෆෝල්ඩර ව්යුහයක් අනුගමනය කළ යුතුය.
- පුද්ගලික වැලිපිල්ලක ක්රියාකාරීත්වය ලබා ගත හැක්කේ අනුග්රාහකයන්ට පමණි.
StackBlitz
StackBlitz යනු වෙබ් යෙදුම් සඳහා විෂුවල් ස්ටුඩියෝ කේතය-බලගන්වන සබැඳි IDE වේ. වේදිකාව ඩෙස්ක්ටොප් අනුවාදය මෙන් ප්රතිචාරාත්මක සහ අනුවර්තනය විය හැකිය. StackBlitz යනු පෙර පටවා ඇති සබැඳි IDE එකකි කෝණික සහ ප්රතික්රියා සංවර්ධන මෙවලම්.
Thinkster.io එම අපූරු ව්යාපෘතිය ගොඩනඟා ඇත්තේ පරායත්ත ස්ථාපනය හෝ ගොඩනැගීමේ සැකසීම් ගැන කරදර නොවී ඔබේ කෝණික හෝ ප්රතික්රියා ව්යාපෘතිය සමඟ ආරම්භ කිරීම හැකිතාක් සරල කිරීමටය. StackBlitz වෙනත් කිසිදු සබැඳි කේත සංස්කාරකයකට දැන් නොමැති විශ්මයජනක සහ අද්විතීය විශේෂාංග රාශියක් සපයයි. එහි ප්රතිඵලයක් වශයෙන්, StackBlitz තව දුරටත් විමර්ශනය කිරීම සහ මෙම සබැඳි IDE පිරිනමන්නේ කුමක්දැයි සොයා බැලීම වටී.
Stackblitz සම්පූර්ණ IDE සමඟ සැසඳිය හැකි ය, විශේෂයෙන්ම මෙවලම එය මත පදනම් වී ඇති නිසා ඔබට VS කේතයට සමු දිය නොහැකි නම්. පැකේජයේ ඔබට සම්පූර්ණ-ස්ටැක් යෙදුමක් නිර්මාණය කිරීම ආරම්භ කිරීමට සහ දිගටම කරගෙන යාමට ඉඩ සලසන විවිධ විශේෂාංග ඇත.
වැඩසටහන බලගන්වන්නේ සංවර්ධකයින් අතර ප්රසිද්ධ විෂුවල් ස්ටුඩියෝ විසිනි. නොබැඳි සංස්කරණය ව්යාපෘතියේ කැපී පෙනෙන ලක්ෂණයයි. මෙය සිදු කිරීම සඳහා, Stackblitz කණ්ඩායම බ්රවුසරයේ වෙබ් සේවාදායකයක් නිර්මාණය කළේය. ඔබ ටයිප් කරන විට, එය ස්වයංක්රීයව පරායත්තතා ස්ථාපනය කරයි, සම්පාදනය කරයි, බණ්ඩල් කරයි, සහ උණුසුම් නැවත පූරණය කරයි.
වාරික අනුවාදය
ශිෂ්යභටයා, ගගනගාමියා සහ අණදෙන නිලධාරියා පිළිවෙලින් මසකට $8 සහ $29 සඳහා නොමිලේ ලබා ගත හැකිය. අසීමිත පුද්ගලික ව්යාපෘති, අසීමිත ගොනු උඩුගත කිරීම්, ප්රධාන කණ්ඩායම් ස්ලැක් නාලිකාවට ආරාධනා, යනාදී විශේෂාංග ගණනාවක් ගගනගාමී සහ අණදෙන නිලධාරියාට ඇතුළත් වේ. වැඩිදුර තොරතුරු සඳහා, නිල බිල්පත් පුවරුව බලන්න.
මූලික ලක්ෂණ
- ඔබේ ව්යාපෘතියට NPM පැකේජ එකතු කිරීම.
- නව බ්රවුසරයේ dev සේවාදායකයකට ස්තූතියි, ඔබට නොබැඳිව සිටියදී සංස්කරණය කළ හැක.
- ඕනෑම වේලාවක අපගේ සජීවී යෙදුම වෙත ප්රවේශ වීමට (සහ බෙදා ගැනීමට) අපට ඉඩ සලසන සත්කාරක යෙදුම් URL එකක්.
- අනෙකුත් කැපී පෙනෙන විෂුවල් ස්ටූඩියෝ කේත විශේෂාංග අතරට ඉන්ටලිසෙන්ස්, ව්යාපෘති සෙවුම (Cmd/Ctrl+P), Go to Definition, සහ වෙනත් ය.
වාසි
- යෙදවීම සඳහා Firebase හි හැකියාවන්.
- සංස්කාරකය භාවිතා කිරීමට ඉතා පහසු සහ ඉතා ඉක්මන් වේ.
- පරිශීලකයින්ට pack.json, index.html, සහ index.js වෙත ප්රවේශය ඇත.
- කාවැද්දීමටද හැකි බෙදාගත හැකි මූලාශ්ර කේතය.
- පිටුවේ විශාල කොටසක සජීවී පෙරදසුන, අවශ්ය නම් වෙනත් පිටුවක විවෘත කිරීමේ විකල්පය ඇත.
- නොබැඳිව සිටියදී, සංස්කරණය කිරීම
- ස්මාර්ට් සම්පූර්ණ කිරීම් සහ වැඩිදියුණු කළ බුද්ධිය.
- Stackblitz හි හරය වේ විවෘත කේතයකි.
අවාසි
- නිර්මාණය-ප්රතික්රියා-යෙදුම විධානය මඟින් කළමනාකරණය කරන බැවින් ඔබට ගොඩනැගිල්ලට හෝ සංවර්ධක සේවාදායකයට බලපෑමක් නැත.
- ප්රතික්රියාවේදී, මූලික ෆෝල්ඩර ව්යුහයක් නිරීක්ෂණය කළ යුතුය.
- එය අතින් කළ හැකි වුවද කේතය ස්වයංක්රීයව ආකෘතිකරණය කළ නොහැක.
නිගමනය
වර්තමානයේ, අපි ඉහත දැක ඇති ආකාරයේ කේතීකරණ ක්රීඩා පිටියක් ඕනෑම වෙබ් ව්යාපෘතියක් සම්පූර්ණයෙන් තැනීමට භාවිතා කළ හැක. ඔබට ඔබේ වෙබ් බ්රවුසරයෙන් සෘජුවම ගොඩනගා ගැනීමට, නිදොස් කිරීමට, පරීක්ෂා කිරීමට සහ යෙදවීමට හැකි විට ඔබේ පරිගණකයේ අපහසු IDE ස්ථාපනය කිරීමට අවශ්ය නොවේ.
මගේ මතය අනුව, StackBlitz ඔවුන් අතර හොඳම වනු ඇත, එය JavaScript, Angular සහ වෙනත් සංවර්ධන ව්යාපෘති සඳහා ඉඩ ලබා දෙන වෙබ්-පාදක IDE එකක් වන අතර, Node.js, npm වැනි දේශීය සංවර්ධන පරිසරයක් ස්ථාපනය කිරීමට අවශ්ය නොවේ. හෝ කෝණික. එය දේශීයව Visual Studio කේතය භාවිතා කරන අත්දැකීමම සපයයි. ඇත්ත වශයෙන්ම, StackBlitz විෂුවල් ස්ටුඩියෝ කේතය මගින් මෙහෙයවනු ලබන නිසා, එය ඩෙස්ක්ටොප් අනුවාදය තරම් වේගවත් සහ බහුකාර්ය බවක් දැනේ.
CodePen, CodeSandbox, සහ StackBlitz වලින් ඔබගේ යායුතු මෙවලම කුමක්ද? අදහස් දැක්වීමේදී අපට දන්වන්න.
අබ්බත්ය්ය
මෙම විශිෂ්ට ලිපියට ස්තූතියි, මම stackblitz.com දුටු පසු, මට අවශ්ය වන්නේ මෙය බව මම දනිමි.