معرفی چند فریمورک و ابزار مفید برای توسعه دهندگان وب

Headless CMS این روزها بسیار معروف شده است. به‌طور خلاصه باید در این باره بگوییم Headless CMS اصلا به فرانت اند مربوط نمی‌شود. CMS تنها محتوا را آن هم معمولاً در فرم معماری RESTful API به نمایش می‌گذارد؛ در‌حالی‌که توسعه‌دهندگان وب ممکن است از هر ابزار یا روش معماری دیگری استفاده کنند و محتوا را به شکل دیگری ارائه دهند. همان‌طور که گفتیم، Headless CMS این روزها در میان برنامه‌نویسان وب بسیار محبوب شده است و به همین خاطر چارچوب‌ها و فریم‌ورک‌های مختلفی برای بهره گرفتن از آن و افزایش سرعتش به‌وجود آمده‌اند.

در این مطلب قصد داریم چند فریمورک و ابزار مفید برای توسعه دهندگان وب را معرفی نماییم. با ما همراه باشید.

Headless WP Starter

 Headless WP Starter یک تم اولیه، ساده و بدون پیچیدگی در WordPress است که برخلاف سایر تم‌ها، از WP-API برای دسترسی به محتوا بهره می‌برد؛ سپس آن را با استفاده از Node و React به HTML استاتیک تبدیل می‌کند تا وب‌سایتتان نهایتاً Headless شود.

VueStoreFront

VueStoreFront هم یک فریم‌ورک دیگر درزمینه Headless CMS است. این فریم‌ورک روی Vue.js و Node ساخته شده و به کمک API ها اصالتاً برای پلتفرم‌های e-Commerce مانند Magento، Prestashop و Shopware طراحی شده است. فریم‌ورک VueStoreFront همچنین از رویکرد PWA که  امکان استفاده از وب‌سایت را در حالت آفلاین هم فراهم می‌آورد، پشتیبانی می‌کند.

Gatsby JS

Gatsby یک مولد استاتیک سایت است که با React.js ساخته شده. شما می‌توانید CMSها را با APIهایی مانند WordPress، Markdown و JSON به کار ببرید تا محتوا را وارد فید وب‌سایت کند. Gatsby همچنین از برخی تکنولوژی‌های تازه ازجمله Node، PWA و React بهره می‌برد تا سرعت بارگذاری‌اش را هم افزایش دهد.

DustPress

DustPress هم یک تم ساده WordPress با رویکرد توسعه مدرن است. این تم از زبان قالب (تمپلیت) Dust.js بهره می‌برد و قالب HTML را از منطق PHP جدا می‌کند. بدین ترتیب توسعه‌دهندگان قادر خواهند بود کدهای مرتب‌تری بنویسند. تم DustPress همچنین سرعت روند توسعه و قابلیت نگه‌داری از کدها را افزایش می‌دهد و ساختار سازمان‌یافته مرتبی به تم وب‌سایت می‌بخشد.

VSCode Icons

Visual Studio Code به‌سرعت توانست در میان توسعه‌دهندگان محبوب شود و به همین خاطر به یکی از محبوب‌ترین ابزارهای ویرایش کد تبدیل شد. این ابزار بسیار سبک طراحی شده است و پلاگین‌های بسیاری دارد. VSCode همچنین آیکون‌های مختلفی ارائه می‌دهد و اگر معتقدید که آیکون‌های پیش‌فرض آن جالب نیستند، می‌توانید از فهرست آیکون‌های ارائه‌شده هرکدام را که مایل هستید برگزینید.

TailWindCSS

TailWindCSS یک فریم‌ورک CSS دیگر است اما با سایر فریم‌ورک‌‌های محبوب CSS مانند Bootstrap و Foundation از این جهت تفاوت دارد که اجزای مختلف UI را فراهم نمی‌کند. البته این فریم‌ورک دارای بخش‌های مخصوص دیگری است که شما را قادر می‌سازد UI اختصاصی خودتان را طراحی کنید.

Traefik

Traefik یک پراکسی معکوس و تعدیل‌کننده است و امکان روت کردن اسم دامین‌ را در نگه‌دارنده‌های مختلف درون یک ماشین فراهم می‌آورد. این ابزار علاوه بر Docker از سروی‌های دیگری هم مانند Kubernetes، Rancher وAmazon Elastic Container پشتیبانی می‌کند.

CubeUI

CubeUI روی Vue.js ساخته شده و یک جزء فوق‌العاده رابط کاربری برای ایجاد اپلیکیشن‌های موبایلی است. این ابزار دارای اجزای مختلفی مانند Button، Popup، TimePicker، Slide و Checkbox است. هرکدام از این اجزا به TestUnit مجهز شده‌اند تا صحت هماهنگی کلی‌شان به‌طور پیوسته حفظ شود و امکان بروز باگ هم در آن‌ها کاهش یابد.

Air

Air یک تم بسیار ساده WordPress است و با توسعه _s چند جزء دیگر مانند Slide، Sticky Navigation Bar و WooCommerce-ready را هم اضافه می‌کند.

EmptyStates

EmptyStates درواقع مجموعه‌ای از صفحه‌های خالی وب‌سایت‌ها و اپلیکیشن‌های موبایلی است که برای الهام گرفتن برنامه‌‌نویسان و توسعه‌دهندگان طراحی شده. این نوع صفحه‌ها معمولاً کمتر موردتوجه قرار می‌گیرند و هدف EmptyStates هم گردآوری و ارائه آن‌ها برای همه توسعه‌دهندگانی است که تمایل دارند این صفحه‌های الهام‌بخش را پیش از شروع به کارشان ببینند.

Shortcut Design

Shortcut Design مجموعه‌ای از میانبرها به محبوب‌ترین اپلیکیشن‌ها و ابزارهای مورداستفاده طراحان و توسعه‌دهندگان را در اختیارتان قرار می‌دهد. در Shortcut Design قادر خواهید بود به میانبرهای Sketch، Photoshop، InDesign، Sublime Text، WordPress و بسیاری ابزارهای دیگر دست یابید. این فهرست درحال‌حاضر تنها شامل میانبرهایی برای macOS است؛ اما اگر میانبرهای مخصوص Windows هم به آن افزوده شود، عالی خواهد شد.

Uppy

Uppy یک فریم‌ورک برمبنای JavaScript برای ایجاد رابط کاربری مناسب بارگذاری فایل است. با Uppy می‌توانید فایل‌ها را نه‌تنها از درایو محلی بلکه از سرویس‌های خارجی ذخیر فایل هم مانند Google Drive، Dropbox، Instagram و سایر سرویس‌ها بازیابی کنید. Uppy سبک و ماژولار طراحی شده است و می‌توانید آن را با پلاگین‌های مختلف توسعه دهید.

VuetifyJS

VuetifyJS اقدامی ابتکاری از John Leider برای ایجاد Material Design حول Vue.js است. البته گوگل هم چنین اقدامی با MDL یا Material Design Lite انجام داده است اما این ابزار ظاهراً از جذابیت کافی در میان طراحان برخوردار نیست و روند توسعه و پیشرفتش هم در ماه‌های اخیر بسیار کند بوده است. به همین خاطر اگر یک گزینه جایگزین مناسب می‌خواهید، VuetifyJS احتمالاً هما‌ن ابزاری است که به دنبالش هستید.

WP ULike

WP ULike یک پلاگین WordPress برای افزودن لایک به انواع مختلف محتوای شما ازجمله پست‌های داخلی WordPress، پست‌های رایج، bbPress و همچنین BuddyPress است. این پلاگین همچنین چند ویژگی جالب دیگر هم مانند Notification System، Analytics و Widget را با خود به همراه دارد و همین موضوع آن را به یکی از بهترین و محبوب‌ترین سامانه‌های لایک مخصوص WordPress تبدیل کرده است.

Vee Validate

Vee Validate یک کتابخانه JavaScript برای افزودن فیلد ورودی به همراه تأیید اعتبار درونی است. این ابزار از انواع ورودی‌ها مانند Email، Number، Date، URL، آدرس IP و غیره پشتیبانی می‌کند.

Vue Data Tables

Vue Data Tables یکی دیگر از پلاگین‌های مفید Vue.js است که احتمالاً به کارتان می‌آید. این پلاگین درواقع در ایجاد جدول‌هایی با قابلیت شخصی‌سازی و صفحه‌بندی با Vue.js به شما کمک می‌کند. Vue Data Tables با رویکردی وسیع طراحی شده است و می‌تواند حجم عظیمی از داده‌ها را بدون بروز مشکل به جدول‌های موردنظر شما تبدیل کند. این پلاگین همچنین دارای اجزای مفید دیگری ازجمله Pagination، Searchbox و Filter است و شما را در ایجاد و تنظیم جدول‌ها یاری می‌کند.

Googler

Googler یک CLI (رابط خط فرمان) است که شما را قادر می‌سازد در میان خطوط دستور در گوگل جستجو کنید. این ابزارهمچنین شبیه رابط است و موضوع، توضیح و URL بازیابی شده را در قالب صفحه‌های متوالی به نمایش می‌گذارد. Googler مخصوصاً برای کاربران macOS و Linux مفید واقع می‌شود.

Bolt CMS

Bolt درواقع CMS ایجادشده به کمک PHP است. تنظیم Bolt ساده است و از Twig به‌عنوان ماشین قالب‌سازی استفاده می‌کند؛ این ابزار به‌طور کامل از PHP7 پشتیبانی می‌کند و به کمک یک فایل ساده YAML به‌آسانی شخصی‌سازی می‌شود.

Teletype

Teletype محصول تازه Atom Editor است. این ویژگی تازه شما را قادر می‌سازد تا با سایر همکاران خود در برنامه‌نویسی هم‌فکری و همکاری کنید. برای استفاده از این ابزار ابتدا باید پلاگین رسمی Teletype را نصب کنید.

Plyr

Plyr که مانند کلمه player تلفظ می‌شود، یک کتابخانه مدرن پخش فایل‌های صوتی و تصویری در اندازه تنها ۱۰  کیلوبایت است. به کمک این ابزار می‌توانید پخش‌کننده صوتی و تصویری HTML، Youtube و Vimeo و همچنین پخش زنده را شخصی‌سازی کنید. Plyr همچنان به‌صورت فعال در حال توسعه است و در آینده شاهد اضافه شدن ویژگی‌های مفید دیگری مانند پشتیبانی از ویدیوهای Wistia و Facebook هم در آن خواهیم بود.