6 محیط توسعه و تست برای دولوپرهای فرانت اند

در زمان های که در حال توسعه و یا تست رابط کاربری یک وب سایت یا یک وب اپلیکیشن هستیم نیاز می شود تا کدهای که نوشتیم رو تست کنیم گاهی اوقات دسترسی به ابزار های تست مناسب کمی مشکل میتواند باشد ولی به لطف اینترنت ابزار های رایگان زیادی برای تست و حتی توسعه و اشتراک گذاری کدها که نوشتیم وجود دارد.در این پست با 6 محیط توسعه و تست برای دولوپرهای فرانت اند آشنا خواهیم شد.

اگرچه وب‌سایت‌های بسیاری وجود دارند که این امکانات را در اختیار دولوپرهای فرانت اند  قرار می‌دهند اما ویژگی‌هایی وجود دارد که باعث می‌شود برخی از آن‌ها توجه کاربران را بیشتر به خود جلب نمایند که برخی از مهم‌ترین این ویژگی‌ها عبارتند از:
– رنگ‌بندی کدهای HTML ،CSS و JavaScript
– پنجره‌ای برای نمایش نتیجهٔ اجرای کدها (البته بدون نیاز به رفرش کردن صفحه)
– پشتیبانی از تکنولوژی‌های جدید کدنویسی مثل HAML ،LESS ،SASS و Stylus CSS
– ارائهٔ لایبرری‌های معمول جاوااسکریپت
– ابزارهای ارزیابی سورس‌کد
– به‌اشتراک‌گذاری صفحات با یوآر‌الهای کوتاه
– تغییر ساختار سورس‌کد
– رایگان بودن امکانات برای دولوپرهای فرانت اند
– محیطی مناسب برای نمایش توانایی و مهارت شما در کدنویسی

JSFiddle

یکی از اولین وب‌سایت‌ها در این زمینه JSFiddle می‌باشد و بسیاری از سایت‌های مشابه بعدی، JSFiddle را الگوی خود قرار داده‌اند؛ برخلاف نام این سایت، می‌توان مجموعه‌ای از کدهای HTML ،CSS و البته JavaScript را در این سایت بررسی و اجرا نمود. اگرچه قالب و ظاهر این سایت ممکن است ابتدایی به‌نظر برسد اما امکانات پیشرفته‌ای نظیر شبیه‌ساز Ajax نیز در آن وجود دارد که دولوپرهای فرانت اند میتوانند از آن برای افزایش سرعت توسعه ابزار های مختلف استفاده کنند

Codepen

شاید بهترین وب‌سایت از نظر طراحی رابط‌کاربری و تنوع امکانات Codepen باشد؛ در این سایت می‌توان بدون نیاز به ثبت‌نام با ایجاد یک Pens، شروع به نوشتن کدها نمود و در پایان با یک URL اختصاصی نتیجه را با سایر دولوپرها به اشتراک گذاشت.

همچنین اخیراً امکانات دیگری نظیر اتصال فایل‌های CSS و JavaScript از خارج وب‌سایت به پروژه نیز فراهم شده است. پلن‌های حرفه‌ای‌تر این وب‌‌سایت از مبلغی در حدود 9 دلار به‌صورت ماهیانه شروع شده و شامل امکاناتی نظیر تست‌ کدها در مرورگرهای مختلف، برنامه‌نویسی هم‌زمان و نکات آموزشی می‌باشد.

Dabblet

یکی دیگر از اولین سایت‌هایی که در این زمینه فعالیت خود را شروع نمود Dabblet است (این وب‌سایت توسط فرانت‌اند دولوپری حرفه‌ای به‌نام Lea Verou ساخته شده است). به‌طور معمول، وب‌سایت‌های شخصی دولوپرهای معروف همیشه حاوی جدیدترین اطلاعات در زمینهٔ کاری‌شان می‌باشد؛ در این مورد نیز وب‌سایت شخصی Lea Verou شامل مطالب جدید و مفید در زمینهٔ توسعهٔ فرانت‌اند می‌باشد.

CSS Deck

در Cssdeck سعی شده است تا به جذابیت‌های بصری به نسبت سایر سایت‌های مشابه بیشتر پرداخته شود؛ اگرچه نام این وب‌سایت تنها شامل CSS می‌باشد، اما دور از ذهن نیست که کدهای HTML و JavaScript نیز در آن پشتیبانی می‌شوند. در رابطه با عملکرد، شاید این سایت را بتوان شبیه‌ترین گزینه به Codepen دانست.

JS Bin

JS Bin توسط Remy Sharp یکی از اساتید حرفه‌ای جاوااسکریپت لانچ شد و این در حالی است که این سایت بیشتر سعی در اجرای صحیح کدهای جاوااسکریپت دارد؛ پس اگر به این زبان اسکریپتی علاقه دارید و یا از دولوپرهای آن هستید، فرصت تجربه کار با JS Bin را از دست ندهید.

Liveweave

این سایت را می‌توان یکی از کامل‌ترین گزینه‌ها در این زمینه دانست؛ پشتیبانی از لایبرری‌ها (کتابخانه ها) و فریمورک‌های معمول نظیر جی‌کوئری، بوت‌استرپ، انگولار و غیره، و امکان اضافه کردن آن‌ها به پروژه تنها با چند کلیک در این سایت به‌سادگی امکان‌پذیر است.

اما شاید وجه تمایز این سایت امکانات گرافیکی فوق‌العاده مفید آن باشد؛ مواردی نظیر کدهای CSS نوشته‌شده که به‌صورت بصری می‌توان با دکمه‌های تعریف شده آن‌ها را تغییر داد، پنل انتخاب رنگ و همچنین محیط طراحی المان‌های گرافیکی، همگی باعث شده است تا Liveweave بتواند درمقابل رقبای خود گوی سبقت را به‌سادگی برباید.

استفاده از این ابزار های به سرعت روند توسعه و همچنین مهم‌تر از همه این‌ که شما نیازی به اجرای نرم‌افزارهای معمول توسعهٔ نرم‌افزار مانند نت بینز ندارید.در آخر هم توصیه میکنم اگر میخواهید تبدیل به یک دولوپر  فرانت اند شوید،می توانید از دوره های ویدئویی آموزشی کدفرند استفاده کنید.