एखाद्या जटिल प्रकल्पावर काम करताना, तुम्ही अनुभवी प्रोग्रामर किंवा नवीन माणूस असलात तरी, तुम्हाला कदाचित समस्यांचा सामना करावा लागेल. जेव्हा तुम्ही तुमचा प्रकल्प अनेक मॉड्यूलमध्ये विभाजित करता, तेव्हा समस्या उद्भवतात, ज्यामुळे त्रुटी शोधणे आणि उपाय शोधणे अधिक कठीण होते. इतर परिस्थितींमध्ये, वैयक्तिक उदाहरणे डीबग करणे कठीण असू शकते कारण तुम्ही ज्या समस्येवर काम करत आहात त्याचे योग्य समाधान तुम्हाला सापडलेले नाही.
हे प्रसंगी कोडचा एक भाग म्हणून देखील उद्भवते, जे त्या वेळी जटिल दिसू शकते. JavaScript ही वेब-आधारित भाषांपैकी एक आहे जी शिकण्यास अत्यंत सोपी आहे. फक्त तुमचा डेस्कटॉप ब्राउझर लाँच करा आणि डेव्हलपर टूल्स (सामान्यतः F12) वर नेव्हिगेट करा आणि तुमचे काम पूर्ण झाले! त्यानंतर तुम्ही कोणतेही क्लिष्ट सॉफ्टवेअर इंस्टॉल किंवा रन न करता JS सह प्रयोग करू शकता.
प्रारंभ करण्यासाठी, आपल्याला फक्त ब्राउझरची आवश्यकता आहे. हे सर्व साधेपणा बॉक्सच्या बाहेर असणे आश्चर्यकारक आहे, परंतु असे प्रसंग येतात जेव्हा आपल्याला अधिक आवश्यक असते. उदाहरणार्थ, समजा तुम्हाला नवीन वेब API चा प्रयोग करायचा आहे जो तुम्ही नुकताच शोधला आहे परंतु नवीन प्रोजेक्ट सुरू करू इच्छित नाही.
या पोस्टमध्ये, आम्ही तीन सर्वात लोकप्रिय JS खेळाच्या मैदानांची, CodePen, CodeSandbox आणि StackBlitz ची तुलना आणि फरक करू. चला सुरू करुया!
कोडपेन
फ्रंटएंड वेब डेव्हलपमेंट साधने नेहमीच विकसित होत असतात आणि मजकूर संपादक हे नवीनतम तंत्रज्ञानाचा एक मोठा घटक आहेत जे विकसकाचे जीवन सोपे बनवतात. अॅटम किंवा नोटपॅड ++ सारख्या स्टँड-अलोन टेक्स्ट एडिटर व्यतिरिक्त, अलिकडच्या वर्षांत ब्राउझर-आधारित संपादकांचा स्फोट झाला आहे ज्यांना प्रोग्राम इंस्टॉलेशनची आवश्यकता नाही आणि अधिक सहकार्याचा प्रचार केला गेला आहे.
CodePen हा "वापरकर्त्याने तयार केलेल्या HTML, CSS आणि JavaScript कोड स्निपेट्सची चाचणी आणि सादरीकरणासाठी एक ऑनलाइन समुदाय आहे" जो फ्रंटएंड वेब पृष्ठे अधिक चांगली कशी लिहायची हे शिकण्यासाठी विलक्षण संधी देते.
कोडपेन तुम्हाला दोन "मोड" देतो. पहिला आणि सर्वात जास्त वापरला जाणारा पेन आहे. हे बटणावर क्लिक करणे आणि थेट संपादकाकडे नेले जाण्याइतके सोपे आहे. तेथून, तुम्ही पूर्वावलोकन पॅनेल तसेच मूलभूत HTML, CSS आणि JS संपादन विंडोमध्ये प्रवेश करू शकता.
कोणतीही "फाइल सिस्टीम," "इंटेलिसेंस," किंवा इतर काहीही नाही - फक्त साधे वाक्यरचना हायलाइटिंग आणि प्रीटीफाय सारख्या जलद कमांड. पर्याय टॅबमध्ये, तुम्ही तीनही भाषांसाठी (जसे की JS साठी TypeScript) प्रीप्रोसेसरच्या प्रतिबंधित श्रेणीमधून निवडू शकता किंवा बाह्य स्त्रोतांशी कनेक्शन जोडू शकता.
तुम्हाला फक्त मोफत काहीही करायचे असल्यास, संपादकांपैकी एक पुरेसा असेल. ज्यासाठी जास्त सेटअप किंवा लायब्ररींची आवश्यकता नाही अशा कोणत्याही गोष्टीसाठी मी CodePen सुचवेन - फक्त HTML, CSS आणि JS वर पर्यायी प्री-प्रोसेसरसह. तुम्हाला तुमची सोशल मीडिया उपस्थिती सुधारण्यासाठी किंवा वैयक्तिक पोर्टफोलिओ विकसित करण्यासाठी खेळाच्या मैदानाचा वापर करायचा असल्यास, CodePen हा एक चांगला पर्याय आहे.
प्रीमियम आवृत्ती
CodePen वर निवडण्यासाठी तुमच्याकडे आणखी काही पर्याय आहेत. तुम्ही वार्षिक पैसे भरल्यास, तुम्ही दरमहा $12, $19 किंवा $39 साठी तीन प्रीमियम प्लॅनपैकी एक मिळवू शकता. तुम्ही कोणत्याही तीन स्तरांवर अनंत संख्येने खाजगी पेन, पोस्ट आणि संग्रह तयार करू शकता.
तुम्हाला प्रो बॅज (सामाजिक बूस्ट), लाइव्ह कोलॅब मोड अॅक्सेस, कोणतीही जाहिरात नाही आणि बरेच काही देखील मिळेल. काही संघ-विशिष्ट धोरणे आणि इतर क्रॉस-टियर भेद देखील आहेत. अधिक माहितीसाठी त्यांचे अधिकृत बिलिंग बोर्ड पहा.
महत्वाची वैशिष्टे
CodePen मध्ये HTML, CSS आणि JavaScript तयार करण्याव्यतिरिक्त, आणखी काही गोष्टी आहेत ज्या त्यास वेगळे करतात.
- तुमचा कोड रिअल-टाइम पाहणे शक्य आहे. त्यासाठी संकलनाची गरज नाही.
- प्रयोग केल्याने तुम्हाला नवीन गोष्टी शिकता येतात.
- समस्या शोधण्यासाठी आणि त्यांचे निराकरण करण्यासाठी लहान चाचणी केस तयार करा.
- तुमची अद्भुत कामे दाखवा.
- नंतर वापरण्यासाठी पेन तयार करा आणि संग्रहित करा.
- इतर विकसकांचा कोड वापरून पहा आणि तो कृतीत पहा.
फायदे
- सुरू करण्यासाठी, कोणतीही किंमत नाही.
- अंगभूत शिक्षण संसाधने.
- इतरांसह सहयोग करा आणि ते भविष्यात कुठे जाऊ शकतात हे पाहण्यासाठी प्रकल्पांची तुलना करा.
- UI वापरण्यास सोपा आणि सरळ आहे.
तोटे
- कोड लायब्ररी लहान आहे, ऑटो-कोड पूर्णता अपुरी आहे. हे फक्त एक-पृष्ठ प्रकल्पांसाठी चांगले आहे आणि मोठे काहीही हाताळू शकत नाही.
- CodePen वर, तुम्ही खाजगी पेन तयार करू शकता, परंतु तुम्हाला प्रो सदस्यत्व ($9/महिना) वर अपग्रेड करावे लागेल.
कोडसँडबॉक्स
CodeSandbox हा वेब-आधारित कोड संपादक आहे. हे तुमच्यासाठी ट्रान्सपायरिंग, पॅकेजिंग आणि डिपेंडेंसी मॅनेजमेंट स्वयंचलित करते, तुम्हाला एका क्लिकवर नवीन प्रोजेक्ट तयार करण्याची परवानगी देते. तुम्ही काहीतरी आकर्षक बनवल्यानंतर, तुम्ही वेबसाइट शेअर करून ते इतरांसोबत शेअर करू शकता.
संपादक कोणत्याही JavaScript प्रकल्पांशी सुसंगत आहे, जरी त्यात काही विशिष्ट प्रतिक्रिया-विशिष्ट वैशिष्ट्ये समाविष्ट आहेत, जसे की प्रकल्प तयार-प्रतिक्रिया-अॅप टेम्पलेटमध्ये सेव्ह करण्याचा पर्याय.
तुम्ही CodeSandbox मध्ये तयार केलेला कोणताही प्रकल्प टेम्पलेटने सुरू होतो. हे एकतर विशिष्ट लायब्ररी, फ्रेमवर्क किंवा रनटाइम (Node.js सह) शी संबंधित असू शकते किंवा फक्त मानक वेब तंत्रज्ञान वापरू शकते. टेम्पलेट निवडल्यानंतर, तुम्हाला संपादकाकडे पाठवले जाईल, जिथे तुम्हाला सर्व आवश्यक फाइल्स आणि पूर्वावलोकन विंडो आधीच उघडलेली आढळेल.
तुम्हाला सर्व सँडबॉक्सेसमधील “फाइल सिस्टम” मध्ये प्रवेश आहे, याचा अर्थ तुम्ही नवीन फाइल्स तयार करू शकता, मॉड्यूल्स (NPM पॅकेजेससह) वापरू शकता आणि स्थिर मालमत्तेशी संवाद साधू शकता. टेम्पलेट-विशिष्ट कॉन्फिगरेशन फाइल्समध्ये बदल करण्याची संधी देखील आहे.
तुम्ही तुमच्या अनन्य वापर-केससाठी तुमच्या स्वत:च्या टेम्पलेट तयार करू शकता, फाइल स्ट्रक्चर आणि डिपेंडेंसीसह पूर्ण, अगदी IDE प्रमाणे. साधन Github शी जोडलेले असल्यामुळे, तुम्ही पटकन कमिट तयार करू शकता आणि PR उघडू शकता. तुम्ही तुमचा अर्ज लगेच ZEIT किंवा Netlify वर तैनात करू शकता.
कोडसँडबॉक्स टीम प्रो
CodeSandbox, एक डच व्यवसाय जो विकसकांना ब्राउझर-आधारित वेब अॅप डेव्हलपमेंट सँडबॉक्स तयार करण्यास अनुमती देतो, अधिकृतपणे एक सहयोग मंच जारी केला आहे जो संघांना क्लाउडमध्ये कोडवर कार्य करण्यास अनुमती देतो. नवीन उत्पादन, टीम प्रो, हे पूर्ण उत्पादन संघांसाठी तयार केलेले नो-कोड सोल्यूशन आहे, जे डिझाइनर आणि व्यवस्थापकांपासून गुणवत्ता हमी (QA) संघांद्वारे आणि त्याहूनही पुढे आहे.
वेब अॅप्लिकेशनमध्ये बदल करू इच्छित असलेल्या किंवा स्वीकारू इच्छिणाऱ्या कोणत्याही व्यक्तीसाठी प्रकल्प वापरकर्ता-अनुकूल इंटरफेसमध्ये प्रदान केले जातात, बदल अंमलात आणण्यासाठी विकासकांना नोट्स आणि शिफारसी पाठवणे, त्यांना चर्चेसाठी परत पाठवणे आणि प्रक्रिया पुन्हा करणे यासारख्या पर्यायी पद्धती टाळणे.
महत्वाची वैशिष्टे
- वेब-आधारित कोड एडिटर आणि प्रोटोटाइप टूल.
- स्थानिक वापरासाठी, झिप फाइलमध्ये सँडबॉक्स सहजपणे डाउनलोड केला जाऊ शकतो.
- प्रोग्रामिंग सँडबॉक्समध्ये केले जाते, जे सहकर्मचार्यांसोबत सहज शेअर केले जाऊ शकते.
फायदे
- सुधारित वापरकर्ता अनुभव आणि संपादकावर अधिक नियंत्रण.
- थेट पूर्वावलोकन वैशिष्ट्य सुधारित केले जाऊ शकते आणि वेगळ्या विंडोमध्ये पाहिले जाऊ शकते.
- कोड स्वयंचलितपणे स्वरूपित केला जातो आणि त्यात CLI (कोडसँडबॉक्स-क्ली) समाविष्ट असतो.
- प्रगत एनपीएम मॉड्यूल्ससाठी समर्थन.
- शिफारसींसह छान त्रुटी संदेश.
- हे एक चांगले टर्मिनल, चाचणी दर्शक आणि समस्या दर्शक प्रदान करून डीबगिंग अनुभव सुधारते.
तोटे
- अंतिम ग्राहक अनेक वैयक्तिकरणांच्या संपर्कात असतो.
- स्थानिक संगणकावरील फायली ड्रॅग आणि ड्रॉप करणे योग्यरित्या कार्य करत नाही.
- CodeSandbox मध्ये विशिष्ट फोल्डर रचना फॉलो करणे आवश्यक आहे.
- खाजगी सँडबॉक्सची कार्यक्षमता केवळ संरक्षकांसाठी उपलब्ध आहे.
स्टॅकब्लिट्झ
StackBlitz वेब अनुप्रयोगांसाठी एक व्हिज्युअल स्टुडिओ कोड-संचालित ऑनलाइन IDE आहे. प्लॅटफॉर्म डेस्कटॉप आवृत्तीइतकेच प्रतिसाद देणारे आणि अनुकूल आहे. StackBlitz एक ऑनलाइन IDE आहे जो प्री-लोड केलेला आहे कोनीय आणि प्रतिक्रिया विकास साधने.
Thinkster.io ने तो विलक्षण प्रकल्प तयार केला आहे जेणेकरून ते तुमच्या अँगुलर किंवा रिएक्ट प्रकल्पासह प्रारंभ करणे शक्य तितके सोपे करण्यासाठी अवलंबित्व इंस्टॉलेशन किंवा बिल्ड सेटिंग्जची चिंता न करता. StackBlitz अनेक आश्चर्यकारक आणि अद्वितीय वैशिष्ट्ये प्रदान करते जी आत्ता इतर कोणत्याही ऑनलाइन कोड संपादकाकडे नाही. परिणामी, StackBlitz ची अधिक चौकशी करणे आणि या ऑनलाइन IDE ने काय ऑफर केले आहे ते शोधणे फायदेशीर आहे.
Stackblitz पूर्ण IDE शी अत्यंत तुलना करता येण्याजोगे आहे, विशेषत: जर तुम्ही VS कोडला अलविदा म्हणू शकत नाही कारण साधन त्यावर आधारित आहे. पॅकेजमध्ये विविध वैशिष्ट्ये आहेत जी तुम्हाला पूर्ण-स्टॅक ऍप्लिकेशन तयार करण्यास आणि सुरू ठेवण्यास अनुमती देतात.
प्रोग्राम व्हिज्युअल स्टुडिओद्वारे समर्थित आहे, जो विकसकांमध्ये सुप्रसिद्ध आहे. ऑफलाइन संपादन हे प्रकल्पाचे उत्कृष्ट वैशिष्ट्य आहे. हे शक्य करण्यासाठी, Stackblitz टीमने एक इन-ब्राउझर वेबसर्व्हर तयार केला. जसे तुम्ही टाइप करता, ते आपोआप अवलंबित्व स्थापित करते, संकलित करते, बंडल करते आणि गरम रीलोडिंग करते.
प्रीमियम आवृत्ती
कॅडेट, अंतराळवीर आणि कमांडर अनुक्रमे $8/महिना आणि $29/महिना विनामूल्य उपलब्ध आहेत. अंतराळवीर आणि कमांडरमध्ये अमर्यादित खाजगी प्रकल्प, अमर्यादित फाइल अपलोड, कोअर टीम स्लॅक चॅनेलला आमंत्रित करणे आणि यासारख्या अनेक वैशिष्ट्यांचा समावेश आहे. अधिक माहितीसाठी, अधिकृत बिलिंग बोर्ड पहा.
महत्वाची वैशिष्टे
- तुमच्या प्रकल्पात NPM पॅकेजेस जोडत आहे.
- ब्राउझरमधील नवीन डेव्हल सर्व्हरबद्दल धन्यवाद, तुम्ही ऑफलाइन असताना संपादित करू शकता.
- होस्ट केलेले अॅप URL जे आम्हाला आमच्या थेट अॅपमध्ये कधीही प्रवेश (आणि सामायिक) करण्यास अनुमती देते.
- इतर लक्षणीय व्हिज्युअल स्टुडिओ कोड वैशिष्ट्यांचा समावेश आहे Intellisense, Project Search (Cmd/Ctrl+P), गो टू डेफिनिशन आणि इतर.
फायदे
- तैनातीसाठी फायरबेसची क्षमता.
- संपादक वापरण्यास खरोखर सोपे आणि अत्यंत जलद आहे.
- वापरकर्त्यांना package.json, index.html आणि index.js वर प्रवेश आहे.
- सामायिक करण्यायोग्य स्त्रोत कोड जो एम्बेड केला जाऊ शकतो.
- पृष्ठाच्या मोठ्या भागावर थेट पूर्वावलोकन, आवश्यक असल्यास भिन्न पृष्ठावर उघडण्याच्या पर्यायासह.
- ऑफलाइन असताना, संपादन
- स्मार्ट पूर्णता आणि सुधारित इंटेलिसेंस.
- स्टॅकब्लिट्झचा गाभा आहे मुक्त स्रोत.
तोटे
- तुमचा बिल्डिंग किंवा डेव्हलपर सर्व्हरवर प्रभाव नाही कारण ते create-react-app कमांडद्वारे व्यवस्थापित केले जातात.
- प्रतिक्रिया मध्ये, एक मूलभूत फोल्डर रचना पाहिली पाहिजे.
- कोड स्वयंचलितपणे स्वरूपित करणे शक्य नाही, जरी ते स्वहस्ते करणे शक्य आहे.
निष्कर्ष
आजकाल, आम्ही वर पाहिलेल्या कोडींग खेळाच्या मैदानाचा वापर कोणताही वेब प्रकल्प पूर्णपणे तयार करण्यासाठी केला जाऊ शकतो. तुम्ही तुमच्या वेब ब्राउझरवरून थेट तयार, डीबग, चाचणी आणि उपयोजित करू शकता तेव्हा तुमच्या PC वर अवजड IDE स्थापित करण्याची गरज नाही.
माझ्या मते, StackBlitz त्यांच्यापैकी सर्वोत्तम असेल कारण हा वेब-आधारित IDE आहे जो JavaScript, Angular, आणि इतर विकास प्रकल्पांना अगदी बॉक्सच्या बाहेर परवानगी देतो, Node.js, npm, सारखे कोणतेही स्थानिक विकास वातावरण स्थापित करण्याची आवश्यकता नाही. किंवा टोकदार. हे स्थानिक पातळीवर व्हिज्युअल स्टुडिओ कोड वापरण्यासारखाच अनुभव प्रदान करते. प्रत्यक्षात, स्टॅकब्लिट्झ हे व्हिज्युअल स्टुडिओ कोडद्वारे चालवलेले असल्यामुळे, ते डेस्कटॉप आवृत्तीइतकेच जलद आणि बहुमुखी वाटते.
CodePen, CodeSandbox आणि StackBlitz पैकी कोणते साधन तुमचे जाण्यासाठी आहे? आम्हाला टिप्पण्यांमध्ये कळवा.
अब्बात्या
या छान लेखाबद्दल धन्यवाद, एकदा मी stackblitz.com पाहिला, मला माहित आहे की मला हेच हवे आहे.