عند العمل في مشروع معقد ، سواء كنت مبرمجًا متمرسًا أو مبتدئًا ، فمن المحتمل أن تواجه مشكلات. عندما تقوم بتقسيم مشروعك إلى عدة وحدات ، تظهر مشكلات ، مما يزيد من صعوبة تعقب الأخطاء وإيجاد الحلول. في ظروف أخرى ، قد يكون تصحيح الأخطاء الفردية أمرًا صعبًا لأنك لم تكتشف الحل المناسب للمشكلة التي كنت تعمل عليها.
يحدث أيضًا كقطعة من التعليمات البرمجية في بعض الأحيان ، والتي قد تبدو معقدة في ذلك الوقت. JavaScript هي إحدى اللغات المستندة إلى الويب وهي سهلة التعلم للغاية. ما عليك سوى تشغيل متصفح سطح المكتب الخاص بك والانتقال إلى Developer Tools (عادةً F12) ، وتكون قد انتهيت! يمكنك بعد ذلك تجربة JS دون الحاجة إلى تثبيت أو تشغيل أي برنامج معقد.
للبدء ، كل ما تحتاجه هو متصفح. إنه لأمر رائع أن تحصل على كل هذه البساطة فور إخراجها من الصندوق ، ولكن هناك مناسبات تحتاج فيها إلى المزيد. على سبيل المثال ، لنفترض أنك تريد تجربة واجهة برمجة تطبيقات ويب جديدة اكتشفتها مؤخرًا ولكنك لا تريد بدء مشروع جديد.
في هذا المنشور ، سنقارن ونقارن بين ملاعب JS الثلاثة الأكثر شيوعًا ، CodePen ، و CodeSandbox ، و StackBlitz. هيا بنا نبدأ!
CodePen
تتطور أدوات تطوير الويب للواجهة الأمامية دائمًا ، وتعد محررات النصوص مكونًا كبيرًا لأحدث التقنيات التي تجعل حياة المطور أكثر بساطة. بصرف النظر عن برامج تحرير النصوص المستقلة مثل Atom أو Notepad ++ ، كان هناك انفجار في برامج التحرير المستندة إلى المستعرض في السنوات الأخيرة والتي لا تتطلب تثبيت البرامج وتعزز تعاونًا أكبر.
CodePen هو "مجتمع عبر الإنترنت لاختبار وتقديم مقتطفات HTML و CSS و JavaScript التي أنشأها المستخدم" والتي توفر فرصًا رائعة لتعلم كيفية كتابة صفحات الويب الأمامية بشكل أفضل.
يمنحك CodePen "وضعين". القلم الأول والأكثر استخدامًا هو القلم. الأمر بسيط مثل النقر فوق الزر ونقله مباشرة إلى المحرر. من هناك ، يمكنك الوصول إلى لوحة المعاينة بالإضافة إلى نوافذ تحرير HTML و CSS و JS الأساسية.
لا يوجد "نظام ملفات" أو "IntelliSense" أو أي شيء آخر - فقط تمييز بسيط لبناء الجملة وأوامر سريعة مثل التخصيص. في علامة تبويب الخيارات ، يمكنك الاختيار من بين مجموعة محدودة من المعالجات الأولية لجميع اللغات الثلاث (مثل TypeScript لـ JS) أو إضافة اتصالات إلى مصادر خارجية.
إذا كنت تحتاج فقط إلى القيام بأي شيء مجانًا ، فسيكون ذلك كافيًا لأي من المحررين. أقترح CodePen لأي شيء لا يتطلب الكثير من الإعداد أو المكتبات - ببساطة HTML و CSS و JS مع المعالجات المسبقة الاختيارية في الأعلى. إذا كنت ترغب في استخدام الملعب لتحسين تواجدك على وسائل التواصل الاجتماعي أو تطوير محفظة شخصية ، فإن CodePen يعد خيارًا أفضل.
النسخة بريميوم
لديك عدد قليل من البدائل للاختيار من بينها على CodePen. إذا كنت تدفع سنويًا ، يمكنك الحصول على واحدة من ثلاث خطط متميزة مقابل 12 دولارًا أو 19 دولارًا أو 39 دولارًا شهريًا. يمكنك إنشاء عدد لا حصر له من الأقلام الخاصة والمشاركات والمجموعات على أي من المستويات الثلاثة.
ستحصل أيضًا على شارة Pro (تعزيز اجتماعي) ، والوصول إلى وضع التعاون المباشر ، وعدم الإعلان ، والمزيد. هناك أيضًا بعض الاستراتيجيات الخاصة بالفريق والتمييزات الأخرى عبر المستويات. تحقق من لوحة الفواتير الرسمية الخاصة بهم للحصول على مزيد من المعلومات.
الميزات الرئيسية
بصرف النظر عن إنشاء HTML و CSS و JavaScript في CodePen ، هناك عدد قليل من الأشياء التي تميزه.
- يمكن عرض الكود في الوقت الفعلي. لا يتطلب تجميع.
- تسمح لك التجربة بتعلم أشياء جديدة.
- قم بإنشاء حالات اختبار صغيرة للبحث عن المشكلات ومعالجتها.
- اعرض أعمالك الرائعة.
- قم بإنشاء وتخزين الأقلام لاستخدامها لاحقًا.
- جرب كود المطورين الآخرين وشاهده أثناء العمل.
المزايا
- للبدء ، لا توجد تكلفة.
- موارد التعلم المضمنة.
- تعاون مع الآخرين وقارن المشاريع لمعرفة أين يمكنهم الذهاب في المستقبل.
- واجهة المستخدم سهلة الاستخدام ومباشرة.
عيوب
- مكتبة الأكواد صغيرة ، الإكمال التلقائي للكود غير كافٍ. إنه جيد فقط لمشاريع من صفحة واحدة ولا يمكنه التعامل مع أي شيء أكبر.
- في CodePen ، يمكنك إنشاء أقلام خاصة ، لكنك ستحتاج إلى الترقية إلى عضوية Pro (9 دولارات شهريًا).
كود ساندبوكس
CodeSandbox هو محرر كود على شبكة الإنترنت. تعمل على أتمتة إدارة النتح والتعبئة والتبعية ، مما يسمح لك ببناء مشروع جديد بنقرة واحدة. بعد إنشاء شيء رائع ، يمكنك مشاركته مع الآخرين ببساطة عن طريق مشاركة الموقع.
المحرر متوافق مع أي مشاريع JavaScript ، على الرغم من أنه يتضمن ميزات معينة خاصة بـ React ، مثل خيار حفظ المشروع في قالب تطبيق create-react-app.
يبدأ أي مشروع تقوم بإنشائه في CodeSandbox بقالب. يمكن أن يرتبط إما بمكتبة أو إطار عمل أو وقت تشغيل معين (بما في ذلك Node.js) أو يستخدم ببساطة تقنيات الويب القياسية. بعد تحديد قالب ، يتم إرسالك إلى المحرر ، حيث ستجد كل الملفات الضرورية ونافذة المعاينة مفتوحة بالفعل.
لديك حق الوصول إلى "نظام الملفات" في جميع Sandboxes ، مما يعني أنه يمكنك إنشاء ملفات جديدة ، واستخدام الوحدات (بما في ذلك حزم NPM) ، والتفاعل مع الأصول الثابتة. هناك أيضًا فرصة لتعديل ملفات التكوين الخاصة بالقالب.
يمكنك أيضًا إنشاء القوالب الخاصة بك لحالة الاستخدام الفريدة الخاصة بك ، كاملة مع بنية الملف والتبعيات ، كما هو الحال في IDE. نظرًا لأن الأداة مرتبطة بـ Github ، يمكنك إنشاء الالتزامات وفتح العلاقات العامة بسرعة. يمكنك نشر تطبيقك على ZEIT أو Netlify على الفور.
CodeSandbox فريق برو
أطلقت CodeSandbox ، وهي شركة هولندية تسمح للمطورين بإنشاء بيئة حماية لتطوير تطبيقات الويب المستندة إلى المستعرض ، رسميًا منصة تعاون تتيح للفرق العمل على التعليمات البرمجية في السحابة. المنتج الجديد ، Team Pro ، هو حل بدون رمز تم إنشاؤه لفرق المنتج الكاملة ، بدءًا من المصممين والمديرين وحتى فرق ضمان الجودة (QA) وما بعدها.
يتم توفير المشاريع في واجهة سهلة الاستخدام لأي شخص يرغب في إجراء تغييرات أو قبولها على تطبيق ويب ، وتجنب الطرق البديلة مثل إرسال الملاحظات والتوصيات إلى المطورين لتنفيذ التغييرات ، وإعادتها للمناقشة ، وتكرار العملية.
الميزات الرئيسية
- محرر كود على شبكة الإنترنت وأداة نموذج أولي.
- للاستخدام المحلي ، يمكن تنزيل وضع الحماية بسهولة في ملف مضغوط.
- برمجة وتطوير يتم إجراؤه في صناديق رمل ، والتي يمكن مشاركتها بسهولة مع زملاء العمل.
المزايا
- تجربة مستخدم محسنة وتحكم أكبر في المحرر.
- يمكن تعديل ميزة المعاينة المباشرة وعرضها في نافذة منفصلة.
- يتم تنسيق الكود تلقائيًا ويتضمن CLI (codeandbox-cli)
- دعم وحدات npm المتقدمة.
- رسائل خطأ لطيفة مع التوصيات.
- يعمل على تحسين تجربة التصحيح من خلال توفير محطة طرفية أفضل ، وعارض اختبار ، وعارض مشكلة.
عيوب
- يتعرض المستهلك النهائي للعديد من التخصيصات.
- سحب وإسقاط الملفات من جهاز كمبيوتر محلي لا يعمل بشكل صحيح.
- يجب اتباع بنية مجلد معينة في CodeSandbox.
- وظيفة صندوق الحماية الخاص متاحة فقط للمستفيدين.
StackBlitz
StackBlitz هو IDE عبر الإنترنت يعمل بنظام Visual Studio Code لتطبيقات الويب. النظام الأساسي سريع الاستجابة وقابل للتكيف مثل إصدار سطح المكتب. StackBlitz هو IDE عبر الإنترنت يأتي محملاً مسبقًا بـ الزاوي ورد الفعل ادوات التطوير.
صمم Thinkster.io هذا المشروع الرائع لجعله بسيطًا قدر الإمكان لبدء مشروع Angular أو React دون الحاجة إلى القلق بشأن تثبيت التبعية أو إنشاء الإعدادات. يوفر StackBlitz الكثير من الميزات المدهشة والفريدة من نوعها التي لا يمتلكها أي محرر كود آخر على الإنترنت في الوقت الحالي. نتيجة لذلك ، من المفيد التحقيق في StackBlitz بشكل أكبر واكتشاف ما يقدمه IDE عبر الإنترنت.
Stackblitz يمكن مقارنته إلى حد بعيد بـ IDE الكامل ، خاصة إذا كنت لا تستطيع أن تقول وداعًا لرمز VS لأن الأداة تعتمد عليه. تحتوي الحزمة على مجموعة متنوعة من الميزات التي تتيح لك البدء في إنشاء تطبيق مكدس كامل ومتابعته.
البرنامج مدعوم من Visual Studio المعروف بين المطورين. التحرير في وضع عدم الاتصال هو الميزة البارزة للمشروع. لجعل هذا ممكنًا ، أنشأ فريق Stackblitz خادم ويب في المتصفح. أثناء الكتابة ، يقوم تلقائيًا بتثبيت التبعيات ، والتجميع ، والحزم ، وإعادة التحميل السريع.
النسخة بريميوم
يتوفر كاديت ورائد فضاء وقائد مجانًا ، 8 دولارات شهريًا و 29 دولارًا في الشهر على التوالي. يتضمن رائد الفضاء والقائد عددًا من الميزات مثل المشاريع الخاصة غير المحدودة ، وتحميلات الملفات غير المحدودة ، والدعوة إلى قناة سلاك الفريق الأساسية ، وما إلى ذلك. لمزيد من المعلومات ، راجع لوحة الفواتير الرسمية.
الميزات الرئيسية
- إضافة حزم NPM إلى مشروعك.
- بفضل خادم مطور جديد في المتصفح ، يمكنك التحرير أثناء عدم الاتصال بالإنترنت.
- عنوان URL للتطبيق المستضاف يسمح لنا بالوصول (ومشاركة) تطبيقنا المباشر في أي وقت.
- تشمل ميزات Visual Studio Code الأخرى البارزة Intellisense و Project Search (Cmd / Ctrl + P) والانتقال إلى التعريف وغيرها.
المزايا
- قدرات Firebase للنشر.
- المحرر سهل الاستخدام وسريع للغاية.
- يمكن للمستخدمين الوصول إلى package.json و index.html و index.js.
- رمز مصدر قابل للمشاركة ويمكن أيضًا تضمينه.
- المعاينة المباشرة على قسم كبير من الصفحة ، مع خيار الفتح على صفحة مختلفة إذا لزم الأمر.
- أثناء التحرير دون اتصال
- إتمام ذكي وتحسين Intellisense.
- جوهر Stackblitz هو المصدر المفتوح.
عيوب
- ليس لديك أي تأثير على المبنى أو خادم المطور لأنه تتم إدارته بواسطة أمر create-reaction-app.
- في React ، يجب مراعاة بنية المجلد الأساسية.
- لا يمكن تنسيق التعليمات البرمجية تلقائيًا ، على الرغم من إمكانية القيام بذلك يدويًا.
وفي الختام
في الوقت الحاضر ، يمكن استخدام ملعب الترميز مثل تلك التي رأيناها أعلاه لإنشاء أي مشروع ويب بالكامل. ليست هناك حاجة لتثبيت IDEs المرهقة على جهاز الكمبيوتر الخاص بك عندما يمكنك إنشاء وتصحيح واختبار ونشر مباشرة من متصفح الويب الخاص بك.
في رأيي ، سيكون StackBlitz هو الأفضل بينهم لأنه IDE قائم على الويب يسمح لـ JavaScript و Angular ومشاريع تطوير أخرى مباشرة خارج الصندوق ، دون الحاجة إلى تثبيت أي بيئات تطوير محلية مثل Node.js و npm و أو الزاوي. يوفر نفس تجربة استخدام Visual Studio Code محليًا. في الواقع ، نظرًا لأن StackBlitz يتم تشغيله بواسطة Visual Studio Code ، فإنه يبدو سريعًا ومتعدد الاستخدامات مثل إصدار سطح المكتب.
أي من CodePen و CodeSandbox و StackBlitz هي أداة الانتقال الخاصة بك؟ اسمحوا لنا أن نعرف في التعليقات.
أباتية
شكرًا على هذا المقال الرائع ، بمجرد أن رأيت stackblitz.com ، أعرف أن هذا ما أريده.