کار بر روی یک پروژه پیچیده، چه یک برنامه نویس با تجربه و چه دانشجوی سال اول، تقریباً با مشکلاتی مواجه خواهید شد. هنگامی که پروژه خود را به ماژول های زیادی تقسیم می کنید، مشکلاتی پیش می آید که ردیابی خطاها و یافتن راه حل را دشوارتر می کند. در شرایط دیگر، اشکالزدایی نمونههای فردی ممکن است سخت باشد زیرا راهحل مناسبی برای مشکلی که روی آن کار میکردید پیدا نکردهاید.
همچنین در مواردی به عنوان یک قطعه کد ظاهر می شود که ممکن است در آن زمان پیچیده به نظر برسد. جاوا اسکریپت یکی از زبان های مبتنی بر وب است که یادگیری آن بسیار ساده است. به سادگی مرورگر دسکتاپ خود را راه اندازی کنید و به ابزار Developer Tools (معمولاً F12) بروید و کارتان تمام شد! سپس می توانید بدون نیاز به نصب یا اجرای نرم افزار پیچیده، با JS آزمایش کنید.
برای شروع، تنها چیزی که نیاز دارید یک مرورگر است. داشتن این همه سادگی از جعبه فوق العاده است، اما مواردی وجود دارد که به موارد بیشتری نیاز دارید. برای مثال، فرض کنید میخواهید با Web API جدیدی که اخیراً کشف کردهاید، آزمایش کنید، اما نمیخواهید پروژه جدیدی را شروع کنید.
در این پست، سه زمین بازی محبوب JS، CodePen، CodeSandbox و StackBlitz را با هم مقایسه و مقایسه خواهیم کرد. بیایید شروع کنیم!
CodePen
ابزارهای توسعه وب فرانت اند همیشه در حال پیشرفت هستند و ویرایشگرهای متن جزء بزرگی از جدیدترین فناوریها هستند که زندگی توسعهدهندگان را سادهتر میکنند. جدای از ویرایشگرهای متنی مستقل مانند Atom یا Notepad ++، در سالهای اخیر انفجاری از ویرایشگرهای مبتنی بر مرورگر وجود داشته است که نیازی به نصب برنامه ندارند و همکاری بیشتر را ترویج میکنند.
CodePen یک «جامعه آنلاین برای آزمایش و ارائه تکه کدهای HTML، CSS و جاوا اسکریپت ایجاد شده توسط کاربر» است که فرصتهای خارقالعادهای را برای یادگیری نحوه بهتر نوشتن صفحات وب پیشانی ارائه میدهد.
CodePen دو حالت به شما می دهد. اولین و رایج ترین مورد استفاده، قلم است. این کار به سادگی کلیک کردن روی یک دکمه و انتقال مستقیم به ویرایشگر است. از آنجا میتوانید به پانل پیشنمایش و همچنین پنجرههای ویرایش اولیه HTML، CSS و JS دسترسی داشته باشید.
هیچ «سیستم فایل»، «IntelliSense» یا هر چیز دیگری وجود ندارد - فقط برجسته کردن نحو ساده و دستورات سریع مانند prettify. در برگه گزینهها، میتوانید از یک محدوده محدود از پیشپردازندهها برای هر سه زبان (مانند TypeScript برای JS) انتخاب کنید یا اتصالاتی را به منابع خارجی اضافه کنید.
اگر فقط به انجام کاری به صورت رایگان نیاز دارید، هر یک از ویرایشگرها کافی است. من CodePen را برای هر چیزی که به تنظیمات یا کتابخانه های زیادی نیاز ندارد - به سادگی HTML، CSS و JS با پیش پردازنده های اختیاری در بالا پیشنهاد می کنم. اگر می خواهید از زمین بازی برای بهبود حضور خود در رسانه های اجتماعی یا توسعه یک نمونه کار شخصی استفاده کنید، CodePen گزینه بهتری است.
نسخه حق بیمه
شما چند گزینه دیگر برای انتخاب در CodePen دارید. اگر سالانه پرداخت می کنید، می توانید یکی از سه طرح برتر را با قیمت 12، 19، یا 39 دلار در هر ماه دریافت کنید. شما می توانید تعداد بی نهایت قلم، پست و مجموعه خصوصی را در هر یک از سه سطح ایجاد کنید.
همچنین نشان Pro (یک تقویت اجتماعی)، دسترسی به حالت همکاری زنده، بدون تبلیغات و موارد دیگر را دریافت خواهید کرد. همچنین استراتژیهای خاص تیم و سایر تمایزات متقابل وجود دارد. برای اطلاعات بیشتر به تابلوی صورتحساب رسمی آنها مراجعه کنید.
ویژگی های کلیدی
به غیر از ایجاد HTML، CSS و جاوا اسکریپت در CodePen، چند چیز دیگر وجود دارد که آن را متمایز می کند.
- مشاهده همزمان کد شما امکان پذیر است. نیازی به تدوین ندارد.
- آزمایش به شما امکان می دهد چیزهای جدیدی یاد بگیرید.
- موارد کوچک آزمایشی را برای جستجو و رفع مشکلات ایجاد کنید.
- آثار فوق العاده خود را به نمایش بگذارید.
- قلمها را برای استفاده بعدی ایجاد و ذخیره کنید.
- کد توسعه دهندگان دیگر را امتحان کنید و آن را در عمل ببینید.
مزایای
- برای شروع، هیچ هزینه ای وجود ندارد.
- منابع یادگیری داخلی
- با دیگران همکاری کنید و پروژه ها را مقایسه کنید تا ببینید در آینده به کجا می توانند بروند.
- استفاده از رابط کاربری ساده و سرراست است.
معایب
- کتابخانه کد کوچک است، تکمیل کد خودکار ناکافی است. این فقط برای پروژه های یک صفحه ای خوب است و نمی تواند چیز بزرگتری را اداره کند.
- در CodePen، میتوانید قلمهای خصوصی ایجاد کنید، اما باید به عضویت حرفهای (9 دلار در ماه) ارتقا دهید.
جعبه شنی کد
CodeSandbox یک ویرایشگر کد مبتنی بر وب است. انتقال، بسته بندی و مدیریت وابستگی را برای شما به طور خودکار انجام می دهد و به شما امکان می دهد با یک کلیک یک پروژه جدید بسازید. پس از ایجاد یک چیز جذاب، می توانید آن را با دیگران به اشتراک بگذارید.
این ویرایشگر با هر پروژه جاوا اسکریپت سازگار است، اگرچه شامل ویژگیهای خاص React است، مانند گزینه ذخیره پروژه در یک الگوی ایجاد-رکت-برنامه.
هر پروژه ای که در CodeSandbox بسازید با یک الگو شروع می شود. این می تواند به یک کتابخانه خاص، چارچوب یا زمان اجرا (از جمله Node.js) مربوط باشد یا از فناوری های وب استاندارد استفاده کند. پس از انتخاب یک الگو، به ویرایشگر فرستاده میشوید، جایی که همه فایلهای لازم را میبینید و پنجره پیشنمایش از قبل باز شده است.
شما به یک «سیستم فایل» در همه Sandboxها دسترسی دارید، به این معنی که میتوانید فایلهای جدیدی ایجاد کنید، از ماژولها (از جمله بستههای NPM) استفاده کنید و با داراییهای ثابت تعامل کنید. همچنین فرصتی برای اصلاح فایل های پیکربندی خاص قالب وجود دارد.
شما حتی ممکن است الگوهای خود را برای مورد استفاده منحصر به فرد خود بسازید، با ساختار فایل و وابستگی ها، بسیار شبیه به یک IDE. از آنجایی که این ابزار به Github مرتبط است، می توانید به سرعت commit ها را ایجاد کنید و PR ها را باز کنید. می توانید برنامه خود را فوراً در ZEIT یا Netlify مستقر کنید.
CodeSandbox Team Pro
CodeSandbox، یک کسبوکار هلندی که به توسعهدهندگان اجازه میدهد یک سندباکس توسعه برنامه وب مبتنی بر مرورگر بسازند، رسما یک پلتفرم همکاری منتشر کرده است که به تیمها اجازه میدهد روی کد در فضای ابری کار کنند. محصول جدید، Team Pro، یک راه حل بدون کد است که برای تیم های محصول کامل، از طراحان و مدیران تا تیم های تضمین کیفیت (QA) و فراتر از آن ساخته شده است.
پروژهها در یک رابط کاربر پسند برای هر کسی که میخواهد تغییراتی در یک برنامه وب ایجاد کند یا بپذیرد، ارائه میشود، از روشهای جایگزین مانند ارسال یادداشتها و توصیهها به توسعهدهندگان برای اجرای تغییرات، ارسال مجدد آنها برای بحث، و تکرار فرآیند اجتناب میکند.
ویژگی های کلیدی
- یک ویرایشگر کد مبتنی بر وب و ابزار نمونه اولیه.
- برای استفاده محلی، یک سندباکس ممکن است به راحتی در یک فایل فشرده دانلود شود.
- برنامه نويسي در جعبه های ماسه ای انجام می شود که ممکن است به راحتی با همکاران به اشتراک گذاشته شود.
مزایای
- تجربه کاربری بهبود یافته و کنترل بیشتر بر ویرایشگر.
- ویژگی پیش نمایش زنده را می توان تغییر داد و در یک پنجره جداگانه مشاهده کرد.
- کد به طور خودکار قالب بندی می شود و شامل یک CLI (codesandbox-cli) است.
- پشتیبانی از ماژول های پیشرفته npm
- پیام های خطای خوب با توصیه ها.
- با ارائه ترمینال بهتر، نمایشگر آزمایشی و نمایشگر مشکل، تجربه اشکال زدایی را بهبود می بخشد.
معایب
- مصرف کننده نهایی در معرض بسیاری از شخصی سازی ها قرار دارد.
- کشیدن و رها کردن فایل ها از یک رایانه محلی به درستی کار نمی کند.
- ساختار پوشه خاصی باید در CodeSandbox دنبال شود.
- عملکرد یک سندباکس خصوصی فقط برای کاربران در دسترس است.
StackBlitz
StackBlitz یک IDE آنلاین مبتنی بر کد ویژوال استودیو برای برنامه های کاربردی وب است. این پلتفرم به اندازه نسخه دسکتاپ پاسخگو و سازگار است. StackBlitz یک IDE آنلاین است که از قبل بارگذاری شده است Angular و React ابزارهای توسعه
Thinkster.io آن پروژه خارقالعاده را ساخته است تا بدون نگرانی در مورد نصب وابستگی یا تنظیمات ساخت، شروع به کار با پروژه Angular یا React را تا حد ممکن ساده کند. StackBlitz بسیاری از ویژگی های شگفت انگیز و منحصر به فرد را ارائه می دهد که هیچ ویرایشگر کد آنلاین دیگری در حال حاضر ندارد. در نتیجه، ارزش آن را دارد که StackBlitz را بیشتر بررسی کنیم و کشف کنیم که این IDE آنلاین چه چیزی برای ارائه دارد.
Stackblitz بسیار قابل مقایسه با IDE کامل است، به خصوص اگر نمی توانید با کد VS خداحافظی کنید زیرا ابزار مبتنی بر آن است. این بسته دارای ویژگی های متنوعی است که به شما امکان می دهد ایجاد یک برنامه فول استک را شروع کرده و ادامه دهید.
این برنامه توسط ویژوال استودیو، که در بین توسعه دهندگان شناخته شده است، طراحی شده است. ویرایش آفلاین ویژگی برجسته پروژه است. برای ایجاد این امکان، تیم Stackblitz یک وب سرور درون مرورگر ایجاد کرد. همانطور که شما تایپ می کنید، به طور خودکار وابستگی ها را نصب می کند، کامپایل می کند، باندل می کند و بارگذاری مجدد را انجام می دهد.
نسخه حق بیمه
Cadet، Astronaut و Commander به ترتیب به صورت رایگان، 8 دلار در ماه و 29 دلار در ماه در دسترس هستند. Astronaut and Commander شامل تعدادی ویژگی مانند پروژه های خصوصی نامحدود، آپلود نامحدود فایل، دعوت به کانال اسلاک تیم اصلی و غیره است. برای اطلاعات بیشتر به صفحه رسمی صورتحساب مراجعه کنید.
ویژگی های کلیدی
- افزودن بسته های NPM به پروژه شما
- به لطف یک سرور توسعه دهنده جدید درون مرورگر، می توانید در حالت آفلاین ویرایش کنید.
- یک URL برنامه میزبانی شده که به ما امکان می دهد در هر زمان به برنامه زنده خود دسترسی داشته باشیم (و به اشتراک بگذاریم).
- سایر ویژگی های قابل توجه ویژوال استودیو کد عبارتند از Intellisense، Project Search (Cmd/Ctrl+P)، Go to Definition و موارد دیگر.
مزایای
- قابلیت های Firebase برای استقرار
- استفاده از ویرایشگر بسیار آسان و بسیار سریع است.
- کاربران به package.json، index.html و index.js دسترسی دارند.
- کد منبع قابل اشتراک گذاری که می تواند جاسازی شود.
- پیش نمایش زنده در بخش بزرگی از صفحه، با گزینه باز کردن در صفحه دیگری در صورت لزوم.
- در حالت آفلاین، در حال ویرایش
- تکمیل هوشمند و Intellisense بهبود یافته.
- هسته Stackblitz است منبع باز.
معایب
- شما روی ساختمان یا سرور توسعهدهنده نفوذی ندارید زیرا آنها توسط دستور create-react-app مدیریت میشوند.
- در React، یک ساختار پوشه اساسی باید رعایت شود.
- امکان فرمت کد به صورت خودکار وجود ندارد، اگرچه امکان انجام آن به صورت دستی نیز وجود دارد.
نتیجه
امروزه، یک زمین بازی برنامه نویسی مانند مواردی که در بالا دیدیم ممکن است برای ساخت کامل هر پروژه وب استفاده شود. هنگامی که می توانید مستقیماً از مرورگر وب خود بسازید، اشکال زدایی کنید، آزمایش کنید و به کار ببرید، نیازی به نصب IDE های دست و پا گیر بر روی رایانه شخصی شما نیست.
به نظر من، StackBlitz در بین آنها بهترین خواهد بود زیرا یک IDE مبتنی بر وب است که به جاوا اسکریپت، انگولار و سایر پروژه های توسعه اجازه می دهد بدون نیاز به نصب محیط های توسعه محلی مانند Node.js، npm، یا Angular. این همان تجربه استفاده از کد ویژوال استودیو به صورت محلی را فراهم می کند. در واقعیت، از آنجایی که StackBlitz توسط Visual Studio Code هدایت میشود، مانند نسخه دسکتاپ سریع و همهکاره است.
کدام یک از CodePen، CodeSandbox، و StackBlitz ابزار مورد استفاده شماست؟ در نظرات به ما اطلاع دهید.
عباتیه
با تشکر از این مقاله عالی، وقتی stackblitz.com را دیدم، می دانم که این همان چیزی است که می خواهم.