نقد و بررسی فریمورک‌های محبوب رابط‌ کاربری در سال ۲۰۱۴

امروزه تعداد زیادی فریم ورک های برای استفاده در سمت کاربر وجود دارد اما تعداد فریم ورک های خوب تقریبا انگشت شمار است. در این مقاله به معرفی، نقد و بررسی 5 مورد از این برترین فریم ورک های خواهیم پرداخت. هر کدام از آن ها دارای نقاط ضعف و قوت و ویژگی کاربردی مخصوص به خود هستند که به شما برای انتخاب بهترین گزینه برای پروژه خود کمک می کنند. برای مثال اگر پروژه شما کوچک است نیازی نیست از فریم ورک های پیچیده استفاده کنید. همچنین خیلی از گزینه ها ماژولار هستند که به شما این امکان را می دهند تا فقط از اجزایی نیاز دارید استفاده کنید و یا حتی چندین فریم ورک را با هم ادغام کنید. فریم ورک هایی که در ادامه به شما معرفی می کنیم بر اساس محبوبیت در Github انتخاب شده و رتبه بندی شده اند که اولین آن ها بدون شک Bootstrap است (توجه داشته باشید که بعضی از این اطلاعاتی که در ادامه آورده شده اند مانند ستاره های Github یا شماره ورژن مسلما پس از طی مدت زمانی تغییر خواهند کرد.) در ادامه این نقد و بررسی با سکان آکادمی همراه باشید.

1- Bootstrap

این فریم ورک بدون شک قوی ترین فریم ورک موجود در وب است. با توجه به محبوبیتی که در حال حاضر دارد و این که هر روز محبوبیت آن در حال افزایش است، می توانید مطمئن باشید که این ابزار فوق العاده هرگز شما را در فرایند طراحی UI سایتتان لنگ نخواهد گذاشت!

طراحان: Mark Otto و Jacob Thornton
تاریخ انتشار: 2011
نسخه فعلی: 3.3.1
محبوبیت: بیش از 75000 ستاره در گیت هاب
توضیح: Bootstrap محبوب ترین فریمورک HTML، CSS و Java Script برای ایجاد پروژه های واکنش گرا و Mobile First است (به طور کلی منظور از این اصطلاح این است که طراحی موبایل در اولویت قرار گرفته است.)
مفاهیم اصلی: RWD و Mobile First
اندازه: 145 کیلوبایت
پیش پردازنده ها: Less و Sass
واکنش گرایی: بله
ماژولار: بله
پوسته های آغازین: دارد
مجموعه آیکان: مجموعه Glyphicons
افزودنی ها: همراه آن نیست اما تعداد زیادی پلاگین توسط سایر توسعه دهندگان برای آن نوشته شده است.
اجزای منحصر به فرد: Jumbotron
مستند سازی: خوب
سفارشی سازی: شخصی ساز رابط گرافیکی پایه ای. متاسفانه هیچ Color Picker یی برای وارد کردن رنگ در دسترس نیست و باید حتما رنگ ها به صورت دستی وارد شوند.
مرورگرهای پشتیبانی شده: فایرفاکس، کروم، سافاری، اینترنت اکسپلورر 8+ (برای IE8 باید از  Respond.js استفاده کنید.)
مجوز: MIT

نکاتی در مورد Bootstrap 
قدرت اصلی Bootstrap در محبوبیت آن است. اگر بخواهیم کمی فنی صحبت کنیم، لزوما این فریم ورک از همه در این لیست بهتر نیست بلکه به خاطر محبوبیت نسبتا زیاد، منابع زیادی از آن در دسترس است و به همین دلیل همه ترجیح می دهند از آن استفاده کنند.

2- Foundation

Foundation دومین گزینه از بهترین فریم ورک ها است. با حمایت شرکتی همچون ZURB، این فریم ورک یکی از قوی ترین ها و بهترین های دنیای وب شده است. به طور کلی، Foundation در چندین سایت بزرگ مثل فیسبوک، موزیلا، EBay، Yahoo و ... استفاده شده است.

طراح: شرکت ZURB
تاریخ انتشار: 2011
نسخه فعلی: 5.4.7
محبوبیت: بیش از 18000 ستاره در گیت هاب
توضیح: کامل ترین فریم ورک ظاهری واکنش گرا در دنیا
مفاهیم اصلی: RWD, Mobile First, Semantic
اندازه: 326 کیلوبایت
پیش پردازنده ها: Sass
واکنش گرا: بله
ماژولار: بله 
پوسته های آغازین: بله
مجموعه آیکان: Foundation Icon Fonts
افزودنی ها: بله
اجزای منحصر به فرد: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
مستند سازی: خوب 
سفارشی سازی: بدون رابط گرافیکی شخصی سازی
مرورگرهای پشتیبانی شده: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
مجوز: MIT

نکاتی درباره Foundation 
Foundation یک فریم ورک حرفه ای است که با پشتیبانی تجاری، آموزش و خدمات مشاوره ای ارائه شده است. هم چنین این فریم ورک منابعی برای استفاده سریع تر و آسان تر از فریم ورک را ارئه کرده است.

3- Semantic UI

Semantic UI حاصل جنبش هایی است که به منظور ساخت وب سایت هایی اصطلاحا Semantic تر است. این فریم ورک با بهره گیری از اصول کدنویسی رایج، کدهایی به مراتب خواناتر ایجاد کرده است.

طراحان: Jack Lukic
تاریخ انتشار: 2013 
نسخه فعلی: 1.2.0
محبوبیت: بیش از 12900 ستاره در گیت هاب
توضیح: یک فریم ورک برای اجزای UI بر اساس اصول زبان طبیعی
مفاهیم اصلی: بر اساس معنا، Tag Ambivalence و واکنش گرا
حجم: 552 کیلوبایت
پیش پردازنده ها: Less
واکنش گرا: بله 
ماژولار: بله 
پوسته های آغازین: خیر
مجموعه آیکان: Font Awesome
افزودنی ها: خیر 
اجزای منحصر به فرد:Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape
مستند سازی: خیلی خوب. این فریم ورک به خوبی مستندات را به صورت دسته بندی شده در آورده و علاوه بر آن یک وب سایت مجزا درباره راهنمای شروع کار و سفارشی سازی و ایجاد تم نیز ارائه می دهد. 
سفارشی سازی: فقط شخصی سازی دستی بدون رابط گرافیکی
مرورگرهای پشتیبانی شده: Firefox, Chrome, Safari, IE10+ (پشتیبانی IE9 فقط با prefix) , Android 4, Blackberry 10
مجوز: MIT

نکاتی درباره Semantic 
Semantic نوآورترین فریم ورک با امکانات کامل در میان تمامی این گزینه هاست. ساختار کلی و نحوه نام گذاری ها باعث شده تا از نظر منطقی و معنایی کدهای واضحی داشته باشد.

4- Pure

Pure یک فریم ورک سبک وزن و ماژولار است که با CSS خالص نوشته شده است. اجزای این فریم ورک می توانند به صورت همراه یا جدا از هم، بسته به نیازهای شما مورد استفاده قرار گیرند.

طراح: شرکت Yahoo
تاریخ انتشار: 2013
نسخه فعلی: 0.5.0
محبوبیت: دارای بیش از 9900 ستاره در گیت هاب
توضیح: مجموعه ای از مدل های کوچک و واکنش گرا CSS که می توان آن ها را در هر پروژه ای به کار برد.
مفاهیم اصلی: SMACSS, minimalism
حجم: 18 کیلوبایت
پیش پردازنده ها: None
واکنش گرا: بله
ماژولار: بله
پوسته های آغازین: بله
مجموعه آیکان: خیر. می توانید از Font Awesome در عوض استفاده کنید.
افزودنی ها: هیچ
اجزای منحصر به فرد: هیچ
مستند سازی: خوب
سفارشی سازی: رابط کاربری ساده ایجاد پوسته
مرورگرهای پشتیبانی شده: آخرین نسخه از Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x 
مجوز: Yahoo! Inc. BSD

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

5- UIkit

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

طراح: شرکت YOOtheme
تاریخ انتشار: 2013 
نسخه فعلی: 2.13.1
محبوبیت: بیش از 3,800 ستاره در گیت هاب
توضیح: یک فریم ورک سبک و ماژولار برای طراحی سریع و قوی رابط کاربری یا UI سایت ها
مفاهیم اصلی: RWD, Mobile First
حجم: 118 کیلو بایت
پیش پردازنده ها: Less, Sass
واکنش گرا: بله
ماژولار: بله
پوسته های آغازین: بله
مجموعه آیکان: Font Awesome
افزودنی ها: بله 
اجزای منحصر به فرد: Article, Flex, Cover, HTML Editor
مستند سازی: خوب 
سفارشی سازی: رابط گرافیکی پیشرفته سفارشی سازی
مرورگرهای پشتیبانی شده: Chrome, Firefox, Safari, IE9+
مجوز: MIT

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

کدام فریمورک مناسب شماست؟
در پایان نیز به چندین نکته و راهنمایی مهم برای انتخاب بهترین فریم ورک برای استفاده در یک پروژه می پردازیم:

- آیا فریم ورک مورد نظر به اندازه کافی محبوب است؟ محبوبیت کافی به معنی توسعه دهندگان بیشتر درگیر با آن پروژه و در نتیجه آموزش و مقالاتی بیشتر از طرف جامعه، مثال های واقعی بیشتر از وب سایت های استفاده کننده، افزودنی های بیشتری که توسط سایر طراحان برای آن نوشته شده، ادغام نسبتا بهتر با سایر خدمات طراحی وب است. محبوبیت بیشتر به معنای آینده بهتر برای آن فریم ورک است و احتمال خیلی کمی وجود دارد که آن پروژه رها شود یا پشتیبانی آن ضعیف گردد.

- آیا آن فریم ورک درحال توسعه فعال است؟ یک فریم ورک خوب نیاز به بروز بودن با آخرین تکنولوژی ها است، مخصوصا آخرین تکنولوژی های موبایل.

- آیا آن فریم ورک به بلوغ رسیده است؟ اگر یک پروژه کمتر توسط کاربران تست و استفاده شده است، برای امتحان کردن کدها خوب است اما قطعا برای استفاده در پروژه های بزرگ خوب نیست.

- آیا آن فریم ورک دارای مستند سازی خوبی است؟ قطعا هر فریم ورکی که مستندسازی بهتری داشته باشد، فرآیند یادگیری را راحت تر می کند.

- سطح ویژگی های آن فریم ورک در چه حدی است؟ قطعا کار با فریم ورکی که دارای ویژگی هایی با سطح کلی تر است آسان تر از فریم ورکی است که دارای ویژگی های سطح بالاتر است. در اغلب موارد بهتر است که از فریم ورکی استفاده کنید که حداقل استایل ها را استفاده کرده باشد چون برای سفارشی سازی راحت تر است. اضافه کردن قوانین جدید CSS خیلی راحت تر و کارآمدتر از ویرایش اطلاعات قبلی است.

در نهایت نیز اگر از انتخاب خود مطمئن نیستید می توانید با ادغام چندین فریم ورک، فریم ورک مورد پسند خود را بسازید و هر ویژگی خاص را از یک فریم ورک دریافت کنید.