நீங்கள் ஒரு அனுபவம் வாய்ந்த புரோகிராமராக இருந்தாலும் அல்லது புதியவராக இருந்தாலும், சிக்கலான திட்டத்தில் பணிபுரியும் போது, நீங்கள் கிட்டத்தட்ட சிக்கல்களைச் சந்திக்க நேரிடும். உங்கள் திட்டத்தைப் பல தொகுதிகளாகப் பிரிக்கும்போது, சிக்கல்கள் எழுகின்றன, பிழைகளைக் கண்டறிந்து தீர்வுகளைக் கண்டறிவது கடினமாகிறது. மற்ற சூழ்நிலைகளில், தனிப்பட்ட நிகழ்வுகளை பிழைத்திருத்துவது கடினமாக இருக்கலாம், ஏனெனில் நீங்கள் பணியாற்றிய பிரச்சனைக்கு சரியான தீர்வை நீங்கள் கண்டுபிடிக்கவில்லை.
இது சில சமயங்களில் ஒரு குறியீடாகவும் நிகழ்கிறது, இது அந்த நேரத்தில் சிக்கலானதாகத் தோன்றலாம். ஜாவாஸ்கிரிப்ட் என்பது இணைய அடிப்படையிலான மொழிகளில் ஒன்றாகும், இது கற்றுக்கொள்வதற்கு மிகவும் எளிதானது. உங்கள் டெஸ்க்டாப் உலாவியைத் துவக்கி, டெவலப்பர் கருவிகளுக்கு (பொதுவாக F12) செல்லவும், நீங்கள் முடித்துவிட்டீர்கள்! நீங்கள் எந்த சிக்கலான மென்பொருளையும் நிறுவவோ அல்லது இயக்கவோ தேவையில்லாமல் JS உடன் பரிசோதனை செய்யலாம்.
தொடங்குவதற்கு, உங்களுக்கு தேவையானது ஒரு உலாவி. இந்த எளிமையை பெட்டிக்கு வெளியே வைத்திருப்பது அற்புதம், ஆனால் உங்களுக்கு இன்னும் தேவைப்படும் சந்தர்ப்பங்கள் உள்ளன. எடுத்துக்காட்டாக, நீங்கள் சமீபத்தில் கண்டுபிடித்த புதிய வலை API ஐப் பரிசோதிக்க விரும்புகிறீர்கள், ஆனால் புதிய திட்டத்தைத் தொடங்க விரும்பவில்லை என்று வைத்துக்கொள்வோம்.
இந்த இடுகையில், மூன்று பிரபலமான JS விளையாட்டு மைதானங்களான CodePen, CodeSandbox மற்றும் StackBlitz ஆகியவற்றை ஒப்பிட்டுப் பார்ப்போம். தொடங்குவோம்!
CodePen
முகப்பு வலை மேம்பாட்டுக் கருவிகள் எப்போதும் உருவாகி வருகின்றன, மேலும் டெவலப்பரின் வாழ்க்கையை எளிதாக்கும் சமீபத்திய தொழில்நுட்பங்களின் ஒரு பெரிய அங்கமாக உரை எடிட்டர்கள் உள்ளன. Atom அல்லது Notepad ++ போன்ற தனித்த உரை எடிட்டர்களைத் தவிர, சமீபத்திய ஆண்டுகளில் உலாவி அடிப்படையிலான எடிட்டர்கள் வெடித்துள்ளன, அவை நிரல் நிறுவல் தேவையில்லை மற்றும் அதிக ஒத்துழைப்பை ஊக்குவிக்கின்றன.
CodePen என்பது "பயனர் உருவாக்கிய HTML, CSS மற்றும் JavaScript குறியீடு துணுக்குகளைச் சோதித்து வழங்குவதற்கான ஆன்லைன் சமூகம்" ஆகும், இது ஃபிரண்டெண்ட் வலைப்பக்கங்களை எவ்வாறு சிறப்பாக எழுதுவது என்பதை அறிய அருமையான வாய்ப்புகளை வழங்குகிறது.
CodePen உங்களுக்கு இரண்டு "முறைகளை" வழங்குகிறது. முதல் மற்றும் மிகவும் பொதுவாக பயன்படுத்தப்படும் பேனா. இது ஒரு பொத்தானைக் கிளிக் செய்து எடிட்டருக்கு நேரடியாகக் கொண்டு செல்வது போல எளிது. அங்கிருந்து, நீங்கள் முன்னோட்ட பேனலையும் அடிப்படை HTML, CSS மற்றும் JS எடிட்டிங் சாளரங்களையும் அணுகலாம்.
"கோப்பு அமைப்பு," "IntelliSense" அல்லது வேறு எதுவும் இல்லை - எளிமையான தொடரியல் சிறப்பம்சங்கள் மற்றும் prettify போன்ற வேகமான கட்டளைகள். விருப்பங்கள் தாவலில், மூன்று மொழிகளுக்கும் (JSக்கான டைப்ஸ்கிரிப்ட் போன்றவை) தடைசெய்யப்பட்ட முன்செயலிகளில் இருந்து தேர்ந்தெடுக்கலாம் அல்லது வெளிப்புற மூலங்களுக்கு இணைப்புகளைச் சேர்க்கலாம்.
நீங்கள் எதையும் இலவசமாக செய்ய வேண்டும் என்றால், எடிட்டர்களில் ஒருவர் போதுமானதாக இருக்கும். நிறைய அமைவு அல்லது நூலகங்கள் தேவையில்லாத எதற்கும் CodePen ஐ பரிந்துரைக்கிறேன் - வெறுமனே HTML, CSS மற்றும் JS மேல் விருப்பமான முன்-செயலிகளுடன். உங்கள் சமூக ஊடக இருப்பை மேம்படுத்த அல்லது தனிப்பட்ட போர்ட்ஃபோலியோவை உருவாக்க விளையாட்டு மைதானத்தைப் பயன்படுத்த விரும்பினால், CodePen ஒரு சிறந்த வழி.
பிரீமியம் பதிப்பு
CodePen இல் இருந்து தேர்ந்தெடுக்க இன்னும் சில மாற்று வழிகள் உள்ளன. நீங்கள் ஆண்டுதோறும் செலுத்தினால், ஒவ்வொரு மாதமும் $12, $19 அல்லது $39க்கு மூன்று பிரீமியம் திட்டங்களில் ஒன்றைப் பெறலாம். மூன்று அடுக்குகளில் ஏதேனும் ஒன்றில் நீங்கள் எண்ணற்ற தனிப்பட்ட பேனாக்கள், இடுகைகள் மற்றும் சேகரிப்புகளை உருவாக்கலாம்.
நீங்கள் ப்ரோ பேட்ஜ் (சமூக ஊக்கம்), நேரடி கூட்டு பயன்முறை அணுகல், விளம்பரம் இல்லை மற்றும் பலவற்றையும் பெறுவீர்கள். சில குழு-குறிப்பிட்ட உத்திகள் மற்றும் பிற குறுக்கு-அடுக்கு வேறுபாடுகளும் உள்ளன. மேலும் தகவலுக்கு அவர்களின் அதிகாரப்பூர்வ பில்லிங் போர்டைப் பார்க்கவும்.
முக்கிய அம்சங்கள்
CodePen இல் HTML, CSS மற்றும் JavaScript ஐ உருவாக்குவதைத் தவிர, வேறு சில விஷயங்கள் உள்ளன.
- உங்கள் குறியீட்டை நிகழ்நேரத்தில் பார்க்கலாம். இதற்கு தொகுக்க தேவையில்லை.
- பரிசோதனை செய்வது புதிய விஷயங்களைக் கற்றுக்கொள்ள உங்களை அனுமதிக்கிறது.
- சிக்கல்களைத் தேட மற்றும் தீர்க்க சிறிய சோதனை நிகழ்வுகளை உருவாக்கவும்.
- உங்கள் அற்புதமான படைப்புகளைக் காட்டு.
- பின்னர் பயன்படுத்த பேனாக்களை உருவாக்கி சேமிக்கவும்.
- பிற டெவலப்பர்களின் குறியீட்டை முயற்சிக்கவும், அதை செயலில் பார்க்கவும்.
நன்மைகள்
- தொடங்குவதற்கு, எந்த செலவும் இல்லை.
- உள்ளமைக்கப்பட்ட கற்றல் வளங்கள்.
- மற்றவர்களுடன் ஒத்துழைத்து, எதிர்காலத்தில் அவர்கள் எங்கு செல்லலாம் என்பதைப் பார்க்க, திட்டங்களை ஒப்பிடவும்.
- UI பயன்படுத்த எளிதானது மற்றும் நேரடியானது.
குறைபாடுகள்
- குறியீட்டு நூலகம் சிறியது, தானியங்கு குறியீடு நிறைவு போதுமானதாக இல்லை. இது ஒரு பக்க திட்டங்களுக்கு நல்லது மற்றும் பெரிய எதையும் கையாள முடியாது.
- CodePen இல், நீங்கள் தனிப்பட்ட பேனாக்களை உருவாக்கலாம், ஆனால் நீங்கள் ஒரு Pro மெம்பர்ஷிப்பிற்கு ($9/மாதம்) மேம்படுத்த வேண்டும்.
கோட்சாண்ட்பாக்ஸ்
CodeSandbox ஒரு இணைய அடிப்படையிலான குறியீடு திருத்தி. இது உங்களுக்காக டிரான்ஸ்பைரிங், பேக்கேஜிங் மற்றும் சார்பு மேலாண்மை ஆகியவற்றை தானியங்குபடுத்துகிறது, ஒரே கிளிக்கில் புதிய திட்டத்தை உருவாக்க உங்களை அனுமதிக்கிறது. நீங்கள் கவர்ச்சிகரமான ஒன்றை உருவாக்கிய பிறகு, வலைத்தளத்தைப் பகிர்வதன் மூலம் அதை மற்றவர்களுடன் பகிர்ந்து கொள்ளலாம்.
எடிட்டர் எந்த ஜாவாஸ்கிரிப்ட் திட்டங்களுடனும் இணக்கமாக உள்ளது, இருப்பினும் இது சில ரியாக்ட்-குறிப்பிட்ட அம்சங்களை உள்ளடக்கியது, அதாவது ப்ராஜெக்ட்டை உருவாக்கு-எதிர்வினை-பயன்பாட்டு டெம்ப்ளேட்டில் சேமிக்கும் விருப்பம் போன்றவை.
CodeSandbox இல் நீங்கள் உருவாக்கும் எந்தவொரு திட்டமும் டெம்ப்ளேட்டுடன் தொடங்கும். இது ஒரு குறிப்பிட்ட நூலகம், கட்டமைப்பு அல்லது இயக்க நேரத்துடன் (Node.js உட்பட) தொடர்புடையதாக இருக்கலாம் அல்லது நிலையான இணைய தொழில்நுட்பங்களைப் பயன்படுத்தலாம். டெம்ப்ளேட்டைத் தேர்ந்தெடுத்த பிறகு, நீங்கள் எடிட்டருக்கு அனுப்பப்படுவீர்கள், அங்கு தேவையான எல்லா கோப்புகளையும் மற்றும் முன்னோட்ட சாளரம் ஏற்கனவே திறந்திருக்கும்.
அனைத்து சாண்ட்பாக்ஸ்களிலும் "கோப்பு முறைமை"க்கான அணுகல் உங்களுக்கு உள்ளது, அதாவது நீங்கள் புதிய கோப்புகளை உருவாக்கலாம், தொகுதிகள் (NPM தொகுப்புகள் உட்பட) மற்றும் நிலையான சொத்துக்களுடன் தொடர்பு கொள்ளலாம். டெம்ப்ளேட்-குறிப்பிட்ட கட்டமைப்பு கோப்புகளை மாற்றுவதற்கான வாய்ப்பும் உள்ளது.
ஒரு IDE இல் உள்ளதைப் போலவே, கோப்பு அமைப்பு மற்றும் சார்புகளுடன் முழுமையான உங்கள் தனிப்பட்ட பயன்பாட்டுக்கான டெம்ப்ளேட்களை நீங்கள் உருவாக்கலாம். கருவி Github உடன் இணைக்கப்பட்டுள்ளதால், நீங்கள் விரைவாக கமிட்களை உருவாக்கலாம் மற்றும் PRகளைத் திறக்கலாம். நீங்கள் உடனடியாக உங்கள் விண்ணப்பத்தை ZEIT அல்லது Netlify க்கு அனுப்பலாம்.
CodeSandbox Team Pro
கோட்சாண்ட்பாக்ஸ், ஒரு டச்சு வணிகமாகும், இது டெவலப்பர்களை உலாவி அடிப்படையிலான வலை பயன்பாட்டு மேம்பாட்டு சாண்ட்பாக்ஸை உருவாக்க அனுமதிக்கிறது, இது கிளவுட்டில் குறியீட்டில் வேலை செய்ய குழுக்களை அனுமதிக்கும் ஒத்துழைப்பு தளத்தை அதிகாரப்பூர்வமாக வெளியிட்டுள்ளது. புதிய தயாரிப்பு, டீம் ப்ரோ, முழுமையான தயாரிப்புக் குழுக்களுக்காகக் கட்டமைக்கப்பட்ட ஒரு குறியீடு இல்லாத தீர்வாகும், இது வடிவமைப்பாளர்கள் மற்றும் மேலாளர்கள் முதல் தர உறுதி (QA) குழுக்கள் மற்றும் அதற்கு அப்பால் உள்ளது.
வலைப் பயன்பாட்டில் மாற்றங்களைச் செய்ய அல்லது ஏற்றுக்கொள்ள விரும்பும் எவருக்கும் பயனர் நட்பு இடைமுகத்தில் திட்டங்கள் வழங்கப்படுகின்றன, மாற்றங்களைச் செயல்படுத்த டெவலப்பர்களுக்கு குறிப்புகள் மற்றும் பரிந்துரைகளை அனுப்புதல், அவற்றை விவாதத்திற்கு அனுப்புதல் மற்றும் செயல்முறையை மீண்டும் செய்தல் போன்ற மாற்று முறைகளைத் தவிர்க்கவும்.
முக்கிய அம்சங்கள்
- இணைய அடிப்படையிலான குறியீடு திருத்தி மற்றும் முன்மாதிரி கருவி.
- உள்ளூர் பயன்பாட்டிற்கு, ஜிப் கோப்பில் சாண்ட்பாக்ஸ் எளிதாக பதிவிறக்கம் செய்யப்படலாம்.
- புரோகிராமிங் சாண்ட்பாக்ஸில் செய்யப்படுகிறது, இது சக பணியாளர்களுடன் உடனடியாகப் பகிரப்படலாம்.
நன்மைகள்
- மேம்படுத்தப்பட்ட பயனர் அனுபவம் மற்றும் எடிட்டர் மீது அதிக கட்டுப்பாடு.
- நேரடி முன்னோட்ட அம்சத்தை மாற்றியமைத்து தனி சாளரத்தில் பார்க்கலாம்.
- குறியீடு தானாக வடிவமைக்கப்படுகிறது மற்றும் CLI (குறியீடுகள் மற்றும் பெட்டி-கிளை) அடங்கும்
- மேம்பட்ட npm தொகுதிகளுக்கான ஆதரவு.
- பரிந்துரைகளுடன் நல்ல பிழைச் செய்திகள்.
- சிறந்த டெர்மினல், டெஸ்ட் வியூவர் மற்றும் பிரச்சினை வியூவரை வழங்குவதன் மூலம் பிழைத்திருத்த அனுபவத்தை மேம்படுத்துகிறது.
குறைபாடுகள்
- இறுதி நுகர்வோர் பல தனிப்பயனாக்கங்களுக்கு ஆளாகிறார்.
- உள்ளூர் கணினியிலிருந்து கோப்புகளை இழுத்து விடுவது சரியாக இயங்காது.
- CodeSandbox இல் ஒரு குறிப்பிட்ட கோப்புறை அமைப்பு பின்பற்றப்பட வேண்டும்.
- தனியார் சாண்ட்பாக்ஸின் செயல்பாடு புரவலர்களுக்கு மட்டுமே கிடைக்கும்.
StackBlitz
StackBlitz என்பது இணையப் பயன்பாடுகளுக்கான விஷுவல் ஸ்டுடியோ குறியீட்டால் இயங்கும் ஆன்லைன் IDE ஆகும். தளமானது டெஸ்க்டாப் பதிப்பைப் போலவே பதிலளிக்கக்கூடியது மற்றும் மாற்றியமைக்கக்கூடியது. StackBlitz என்பது ஒரு ஆன்லைன் IDE ஆகும், இது முன்பே ஏற்றப்பட்டது கோண மற்றும் எதிர்வினை வளர்ச்சி கருவிகள்.
சார்பு நிறுவல் அல்லது அமைப்புகளை உருவாக்குவது பற்றி கவலைப்படாமல், உங்கள் கோண அல்லது எதிர்வினை திட்டத்துடன் தொடங்குவதை முடிந்தவரை எளிமையாக்கும் வகையில் Thinkster.io அந்த அற்புதமான திட்டத்தை உருவாக்கியது. வேறு எந்த ஆன்லைன் குறியீடு எடிட்டரிடமும் இல்லாத அற்புதமான மற்றும் தனித்துவமான அம்சங்களை StackBlitz வழங்குகிறது. இதன் விளைவாக, StackBlitz ஐ மேலும் ஆராய்ந்து, இந்த ஆன்லைன் IDE என்ன வழங்குகிறது என்பதைக் கண்டறிவது பயனுள்ளது.
Stackblitz ஆனது முழுமையான IDE உடன் மிகவும் ஒப்பிடத்தக்கது, குறிப்பாக நீங்கள் VS குறியீட்டிற்கு விடைபெற முடியாது, ஏனெனில் கருவி அதை அடிப்படையாகக் கொண்டது. தொகுப்பில் பல்வேறு அம்சங்கள் உள்ளன, அவை முழு-ஸ்டாக் பயன்பாட்டை உருவாக்கத் தொடங்கவும் தொடரவும் உங்களை அனுமதிக்கின்றன.
இந்த திட்டம் விஷுவல் ஸ்டுடியோவால் இயக்கப்படுகிறது, இது டெவலப்பர்கள் மத்தியில் நன்கு அறியப்பட்டதாகும். ஆஃப்லைன் எடிட்டிங் என்பது திட்டத்தின் தனித்துவமான அம்சமாகும். இதை சாத்தியமாக்க, Stackblitz குழு உலாவியில் இணைய சேவையகத்தை உருவாக்கியது. நீங்கள் தட்டச்சு செய்யும் போது, அது தானாகவே சார்புகளை நிறுவுகிறது, தொகுக்கிறது, மூட்டைகளை உருவாக்குகிறது மற்றும் சூடான மறுஏற்றம் செய்கிறது.
பிரீமியம் பதிப்பு
கேடட், விண்வெளி வீரர் மற்றும் தளபதி ஆகியவை முறையே $8/மாதம் மற்றும் $29/மாதம் என இலவசமாகக் கிடைக்கும். Astronaut and Commander ஆனது வரம்பற்ற தனிப்பட்ட திட்டங்கள், வரம்பற்ற கோப்பு பதிவேற்றங்கள், முக்கிய குழு ஸ்லாக் சேனலுக்கான அழைப்பு மற்றும் பல அம்சங்களை உள்ளடக்கியது. மேலும் தகவலுக்கு, அதிகாரப்பூர்வ பில்லிங் போர்டைப் பார்க்கவும்.
முக்கிய அம்சங்கள்
- உங்கள் திட்டத்தில் NPM தொகுப்புகளைச் சேர்த்தல்.
- புதுமையான இன்-பிரவுசர் தேவ் சேவையகத்திற்கு நன்றி, நீங்கள் ஆஃப்லைனில் இருக்கும்போது திருத்தலாம்.
- ஹோஸ்ட் செய்யப்பட்ட பயன்பாட்டு URL, எந்த நேரத்திலும் எங்கள் நேரடி பயன்பாட்டை அணுக (மற்றும் பகிர) அனுமதிக்கிறது.
- மற்ற குறிப்பிடத்தக்க விஷுவல் ஸ்டுடியோ கோட் அம்சங்களில் Intellisense, Project Search (Cmd/Ctrl+P), Go to Definition மற்றும் பல அடங்கும்.
நன்மைகள்
- வரிசைப்படுத்துவதற்கான Firebase இன் திறன்கள்.
- எடிட்டர் பயன்படுத்த மிகவும் எளிதானது மற்றும் மிக விரைவானது.
- பயனர்களுக்கு pack.json, index.html மற்றும் index.js அணுகல் உள்ளது.
- உட்பொதிக்கக்கூடிய பகிரக்கூடிய மூலக் குறியீடு.
- தேவைப்பட்டால் வேறு பக்கத்தில் திறக்கும் விருப்பத்துடன், பக்கத்தின் பெரிய பகுதியில் நேரடி முன்னோட்டம்.
- ஆஃப்லைனில் இருக்கும்போது, திருத்துதல்
- ஸ்மார்ட் நிறைவுகள் மற்றும் மேம்படுத்தப்பட்ட நுண்ணறிவு.
- Stackblitz இன் முக்கிய அம்சம் திறந்த மூல.
குறைபாடுகள்
- பில்டிங் அல்லது டெவலப்பர் சர்வர் மீது உங்களுக்கு செல்வாக்கு இல்லை, ஏனெனில் அவை create-react-app கட்டளையால் நிர்வகிக்கப்படுகின்றன.
- எதிர்வினையில், ஒரு அடிப்படை கோப்புறை அமைப்பு கவனிக்கப்பட வேண்டும்.
- குறியீட்டை தானாக வடிவமைக்க முடியாது, இருப்பினும் அதை கைமுறையாக செய்ய முடியும்.
தீர்மானம்
இப்போதெல்லாம், நாம் மேலே பார்த்ததைப் போன்ற குறியீட்டு விளையாட்டு மைதானம் எந்தவொரு வலைத் திட்டத்தையும் முழுமையாக உருவாக்கப் பயன்படுத்தப்படலாம். உங்கள் இணைய உலாவியில் இருந்து நேரடியாக உருவாக்கவும், பிழைத்திருத்தவும், சோதிக்கவும் மற்றும் வரிசைப்படுத்தவும் முடியும் போது, உங்கள் கணினியில் சிக்கலான IDEகளை நிறுவ வேண்டிய அவசியமில்லை.
என் கருத்துப்படி, StackBlitz அவற்றுள் சிறந்ததாக இருக்கும், ஏனெனில் இது JavaScript, Angular மற்றும் பிற மேம்பாட்டுத் திட்டங்களை அனுமதிக்கும் வலை அடிப்படையிலான IDE ஆகும், Node.js, npm போன்ற உள்ளூர் மேம்பாட்டு சூழல்களை நிறுவ வேண்டிய அவசியமில்லை. அல்லது கோணல். உள்ளூரில் விஷுவல் ஸ்டுடியோ குறியீட்டைப் பயன்படுத்தும் அதே அனுபவத்தை இது வழங்குகிறது. உண்மையில், StackBlitz விஷுவல் ஸ்டுடியோ கோட் மூலம் இயக்கப்படுவதால், இது டெஸ்க்டாப் பதிப்பைப் போலவே வேகமாகவும் பல்துறையாகவும் உணர்கிறது.
CodePen, CodeSandbox மற்றும் StackBlitz ஆகியவற்றில் எது உங்கள் செல்ல வேண்டிய கருவி? கருத்துகளில் எங்களுக்குத் தெரியப்படுத்துங்கள்.
அப்பாட்ய்யா
இந்த சிறந்த கட்டுரைக்கு நன்றி, ஒருமுறை நான் stackblitz.com ஐப் பார்த்தேன், இது எனக்கு வேண்டும் என்று எனக்குத் தெரியும்.