۱۰ فریمورک کوچک و سریع توسعه فرانت اند

اگر در گوگل جستجو کنید، ده‌ها ابزار مفید برای بهبود عملکرد وبسایت خود خواهید یافت. اما یکی از مسائلی که کمتر طراحی به آن فکر میکند، بهینه سازی کدها است.این میتواند به معنای کاهش درخواست HTTP،کوچک تر کردن فایلهایتان و یا تغییر به یک فریمورک سفارشی برای سرعت بخشیدن به سایت باشد. جدیدترین نسخه بوت استرپ v4 عالی است اما همچنان یکی از سنگین‌ترین فریمورک‌ های آن است.

لیست زیر را آماده کردم تا با چند فریمورک فرانت اند که میتوانید بجای Bootstrap استفاده کنید،آشنا شوید. ممکن هست تعجب کنید که چقدر عالی هستند!

۱٫ Topcoat

با Topcoat شما یک فریمورک بهینه‌سازی شده برای سرعت می‌گیرید. توسعه‌دهندگانی که این چارچوب را ساخته‌اند به طور خاص تمامی ماژول‌های خود را آزمایش میکنند. برای هر وبسایت عالی است و سفارشی‌سازی آن فوق العاده آسان است.قابل به ذکر است که این چارچوب واکنشگرا یا mobile responsive است و CSS از BEM naming استفاده میکند. بنابراین ویرایش و اضافه کردن آن به stylesheet تان بسیار آسان است

۲٫Milligram

Milligram یکی دیگر از فریمورک‌های مینمالیستی فرانت اند است. این فریمورک بسیار دقیق است و به شکل قابل توجهی دنبال‌کننده زیادی دارد.شما میتوانید با استفاده هرکدام ار عمده پکیج منیجرهایی همچون Yarn،Bower و یا npm آن را نصب کنید. Milligram با یک نسخه کوچک شده از کل کتابخانه Milligram CSS پکیج میشود.

Milligram کامپوننت‌ها یا ویژگی‌های داینامیک که در بوت استرپ پیدا میکنید، را ندارد. بنابراین بیشتر برای توسعه‌دهندگانی که میخواهند طرح‌های کوچک و سریع و بدون نیاز به ویژگی‌های پیشرفته‌تر بسارند،مناسب است.

۳٫Pure CSS

بهترین چیز درباره Pure CSS، چگونگی آمدن کل فریمورک در یک سبک مدولار(modular) است. شما میتوانید stylesheet خود را برای دربرداشتن طرح‌های جدول، منوهای سفارشی، دکمه‌ها، فرم‌ها ویا ترکیبی از هرچیز که بخواهید، سفارشی سازی کنید.

یا اگر فقط یک نمونه کوچک ار کتابخانه‌ای همچون  just grids میخواهید، میتوانید آن را جداگانه دانلود کنید. بخش گرید Pure کلا چیزی حدود ۰٫۸KB است که بینهایت از Bootstrap یا Foundation سبک‌تر است.

Pure CSS از کامپوننت‌های صفحه پشتیبانی میکند بنابراین همه موارد اضافی را میتوانید اضافه کنید. با این حال این Pure کوچکتر از بوت استرپ می‌شود، بنابراین این یک جایگزین مناسب است.

۴٫ Mincss

Min.css به عنوان جایگزین منحصربه فرد بوت استرپ تبلیغ میشود و در واقع خود را به عنوان کوچک‌ترین فریمورک فرانت اند میداند طوری که جمعا حدود ۹۹۰ بایت(کمتر از  ۱KB) میباشد. این در همه مرورگرهای اصلی کار می‌کند و حتی مرورگرهای قدیمی‌تر مانند IE 6+ را پشتیبانی می‌کند.

اگر واقعا میخواهید زمان بارگیری و بالا آمدن سریع باشد، نگاهی به Mincss بیندازید و ببینید در مورد آن چه فکر میکنید. من احساس می‌کنم که شما ناامید نخواهید شد.

۵٫ Petal

Petal یک فریمورک فرانت اند با طراحی منحصر به فرد یک کتابخانه UI کوچکتر است. تعداد انگشت شماری از کاکپوننت هارا پشتیبانی می‌کند، اما عمدتا Petal به عنوان یک جایگزین CSS LESS برای همه‌ی کتابخانه‌های Sass که از آن استفاده می شود است.

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

۶٫ Picnic

با استفاده از Picnic CSS دقیقا همان چیزی را که تبلیغ میشود را بدست میاورید : کتابخانه فرانت اند سبک و زیبا.رنگ‌ها همچون ورژن ساده بوت استرپ که صاف و ظریف طراحی شده،احساس میشوند. شما میتوانید از چارچوب Picnic برای تقریبا هر نوع وبسایتی مانند نمونه کارهای شخصی،وبلاگ و یا فروشگاه ecommerce استفاده کنید.

۷٫ Kube

من واقعا تحت تاثیر Kube قرار گرفتم چون یک فریموردک بسیار عالی است اما این سبکترین و کوچکترین در این لیست نیست. با این حال به دلیل اینکه به اندازه کافی کوچک است ذر لیست قرار گرفت. کل کتابخانه در حدود ۳۰ کیلوبایت میباشد(شامل تمامی کامپوننت‌های js). این هنوز هم درحدود ۱۰برابر کوچکتر از بوت استرپ است و این باعث می‌شود که جایگذین معقول و منطقی برای بوت استرپ شود.

اما این هرگز نمی تواند با چیزی مانند Mincss رقابت کند زیرا Kube با موارد زیادی پکیج شده است. اگر این چیزی است که شما دنبال آن هستید، این کتابخانه عالی است!

۸٫ Chota

اگر بخواهید چیزی حدود ۱۰برابر کوچکتر از Kube داشته باشید، نگاهی به فریمورک CS4 CSS در ادامه داشته باشید.این فریمورک به طورکلی ۳ کیلوبایت است و یک چارچوب CSS است. این به این معنی است که شما در مورد منوی کشویی، زبانه ها یا دیگر ویدجت های پویا نگران نباشید.

Chota همچنین یکی از چندین چارچوب است که در preprocessor اجرا نمیشود. بدون Less،بدون Sass، فقط کدهای Chota را وصل کرده و بازیابی کنید تا برای هر طرح شما کار کند.

۹٫ Furtive

Furtive به عنوان یک “میکرو فریمورک” خود را اعلام کرده است و هیچ تعجبی نیست که حجم کل آن حدود ۲٫۴KB در هنگام فشرده‌سازی است.این یکی از چندین چارچوب تلفن همراه یا mobile-first است که حجم فایل فوق‌العاده کوچک را با لیست قوی کلاس‌ها و ساختارها برای صفحه شما ترکیب می‌کند.

این همچنین یکی از چارچوبهای پیشرفته‌تر است که با فناوری‌های مرورگرهای مدرن پیش میرود. به طور انحصاری با مواردی مانند flexbox و SVG کار میکند، بنابراین شما می توانید کل کد خود را ساده کرده و کاهش دهید.

۱۰٫ Siimple

Siimple به دنبال روند طراحی flat style است و بر پایه یک کد بسیار ساده ساخته شده است.این فریمورک مینیمالیسم را به یک سطح جدید با رویکرد تمیز برای طراحی و توسعه می‌دهد. رنگ‌ها، تایپوگرافی، گریدها، همه آنها یک رویکرد مینیمالیستی را دنبال میکنند که هنوز هم منحصر به فرد است.

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