از اونجا که گوگل اعلام کرد بود که به همراه اندروید 5.0 متد جدید طراحی خودش یعنی متیرال هم ارائه میشه ، تعداد زیادی فریمورک های front با هدف آوردن مفهوم این متد به فضای وب ظهور کردن. ما در حال حاضر تعدادی از این کتابخانه ها که مفهوم این متد رو ترویج میدن رو در دسترس داریم مثل ، MUI, Material-UI و Polymer که برای فضای وب ساخته شدن .
در آغاز July 2015 ، گوگل یک فریم ورک جدید برای استفاده آزاد و بدون وابستگی اضافی از مفهوم متریال در وب ارائه کرد ، اسم این فریم ورک Material Design Lite یا با اختصار MDL است. و هدف این فریم ورک مستقیما برای رقابت با bootstrap است . خوب کدوم یکی از اینها بهتره ؟ بوسترپ یا MDL ?
تفاوت های کلیدی
قبل اینکه ما بریم سراغ مثال زدن از تفاوت ها ، اجازه بدید اینجا چند تفاوت کلیدی بین بوت استرپ و MDL رو بیان کنیم .
فلسفه
1. بوسترپ در اصل توسط تویتر با هدف ساخت آسان وب سایت های رسپانسیو ارائه شد . این فریم ورک به شما اجزا و گزیئه های سفارشی سازی زیادی برای ساخت برنامه های وب خودتون ارائه میده .
2. Material Design Lite توسط گوگل و با هدف گسترش مفهوم متریال در وب ارائه شد و به شما فقط اجازه میده تا بلوک های پایه ای برای برنامه خودتون بسازید .
تجربه توسعه
1. بوت استرپ دارای اسناد و مدارک بسیار دقیق در سایت خودشه . توسعه شامل کپی و جسباندن از نمونه و گرفتن یک نتیجه قابل استفاده سریع می باشد. چیزی که بوسترپ در سایت خود به اون عمل کرده یعنی زدن مثال های متفاوت در اسناد وبسایت .
2. MDl حول محور BEM ساخته شده ، برای همین اجزا با ترکیب کلاس های متعدد برای راحت تر شدن کار ، ساخته شدن . این رویکرد کنترل زیادی به ما در پروژه هامون میده ، اما گاهی اوقات ممکنه کد های html ما رو به گند بکشه .
اجزا
1. در بوت استرپ ، تقریبا همه المنت ها طوری ساخته شدن که به راحتی میتونید بهشون استایل بدید و در کنار هم ازشون استفاده کنید و به شما اجزای مختلفی برای انواع طراحی میدن .
2. MDL به شما قطعات کمتری نسبت به بوت استرپ میده ، اما همه اون اجزاها به شما تمرکز خاصی برای ساخت یک برنامه تحت وب میده که با مفهوم متریال ساخته شده که دارای انیمیشن و استایل های زیبای هستن .
طرح بندی
1. بوت استرپ دارای سیستم پیشرفته grid با قابلیت offset ، اضافه کردن ستون ، پنهان سازی یا مرتب سازی مجدد ستون ها هست .
2. MDL دارای یک سیستم gird بدوی تر که سرعت انجام این کار رو بیشتر از زمان معمولی میکنه اما از ویژگی های پیشرفته پشتیبانی نمیکنه .
طراحی
1. بوت استرپ به شما یک طراحی از پیش تعریف شده قابل قبولی میده ولی از نظر یک طراح این طرح پیش فرض خسته کننده است برای همین توسعه دهنده های که یک وبسایت رو میسازن معمولا از اون برای طراحی ظاهر سایت استفاده نمیکنن . اما تعداد زیادی تم فوق العاده برای بوتسرپ وجود داره.
2. MDL به نظر میرسه دارای رنگ بندی و انیمیشن های جالبیه . البته اون به شما دیکته میکنه که باید برنامه وب خودتونو چطور بسازید و دارای فرصت شخصی سازی محدودیه .
انجمن
1. بوت استرپ در حدود مدتی که وجود داشته ، دارای یک جامعه عظیم ، که به تولید تم ها، پلاگین ها اقدام کرده اند است .
2. MDL به تازگی ارائه شده اما در gitHub از محبوبیت عجیبی برخورداره ، با این حال هنوز اوله راه و جای زیادی برای توسعه و افزایش محبوبیت داره .
خب این از مقایسه تئوری بین بوت استرپ و MDL بود اما در عمل اینها رو چطور با هم مقایسه کنیم ؟ این یک سوال مشکله که جواب دادن بهش خیلی راحت نیست . در این جا ما چندین نمونه اجرا شده در دو قالب رو مقایسه میکنیم تا شما درک بهتری از تفاوت بین این دو فریم ورک داشته باشید . در هر بخش از توضیح شما با کلیک بر روی عکس میتونید به نمونه عملی اون بخش مراجعه کنید .
1. Grid
مسلما ، grid ها بخش مهم و اساسی ساخت یک وب سایت هستند . این سیستم به ما کمک میکنه تا به راحتی برنامه های تحت وب رو هم برای دسکتاپ و هم برای موبایل ها بهینه سازی کنیم .
بوت استرپ دارای یک grid سیستم با 12 ستون است که صفحه رو به 12 ستون برابر تبدیل میکنه . بسته به عرض دید،از چهار کلاس با اندازه های مختلف استفاده می شود .
extra small (from 0 to 768px wide) , small (768px to 992px) , medium (992px to 1200px) , large (1200px+)
MDL دارای یک سیستم gird مشابه با بوت استرپ است اما دارای فقط سه اندازه است .
phone (0 to 480px), tablet (480px to 840px) و desktop (840px+)
MDL در دستکتاپ دارای 12 ستون ، در تبلت دارای 8 ستون و در موبایل ها داری 4 ستون است .
gird بوت استرپ کنترل های بیشتری در اختیار توسعه دهنده قرار میده و همچنین شما میتونید از offset ها ، پنهان سازی و مرتب سازی ستون ها استفاده کنید که خیلی برای رسپانسیو کردن طرح برنامه وب کمک میکنه . ما در MDL مجبوریم از ستون های خالی بجای offset استفاده کنیم تا به هدفمون برسیم . اما امیدواریم در نسخه های بعدی این مشکل حل بشه .
2 .Header Navigation
هدر ها در بوت استرپ به اسم Navbars شناخته میشن . این Navbars ها در تلفن های همراه بصورت افقی در میان . که درون اون ها شما میتونید از اجزاهای مختلفی استفاده کنید .
بطور مشابه MDL میاد برای نمایش header navigations در تلفن های همراه از یک منو همبرگری استفاده میکنه که به ما یک دید بهتر برای مشاهده موارد داخل خودش ارائه میده. استفاده از اون در سبک های مختلف و طرح های مختلف به راحتی ممکنه .
3. Footer
بوت استرپ در واقع دارای اجزای برای footer نیست ، در حالی که MDL دارای دو تنظیم مختلف برای footer یکی mini footer و دیگری mega footer است .
توجه داشته باشید که در نمایی کوچیک ، ستون های footer در هم شکسته میشه و به یک ستون تبدیل میشه .
4. Tabs
در هر دو فریم ورک این قابلیت بطور مشابه ای پیاده سازی شده البته با طراحی مخصوص بخودشون . مثل تعداد لینک برای انتقال بین زبانه ها، و مجموعه ای از div ها، انتخاب توسط ID، برای ذخیره سازی محتوا. و همچنین هر دو اونها به جاوا اسکریپت برای اجرا نیاز دارن ( البته در بوت استرپ نیاز به جی کوئری است )
5. Buttons
بوت استرپ دارای یک سری دکمه های پیش فرض مستطیل شکل با اندازه های مختلف است که به راحتی میشه رنگ اونها رو تغییر داد حتی یک سری رنگ با اصطلاح (خطر ، هشدار ، موفقیت) هم برای دکمه ها تعریف شده که به نسبت اون اصطلاح مورد استفاده قرار میگیره و رنگ دکمه تغییر میکنه . یکی دیگه از قابلیت های دکمه ها در بوت استرپ توانایی ساختن دکمه های که توانایی داشتن یک منو رو در خودشون دارن هست .
MDl دکمه ها رو در دو شکل ارائه میده مستطیلی و دایره ای ، گوگل دارای یک راهنما برای چگونگی استفاده از این دکمه ها است که به شما میگه در شرایط مختلف باید از چه دکمه ای استفاده کنید . همه دکمه ها در MDL از انیمیشن موجدار شدن بهره مند هستند .
6. Tables
رسپانسیو کردن جداول به کلی کار دشواریه . بوت استرپ با استفاده از یک اسکرول به نظر میرسه که تا حدی با این مشکل مقابله کرده است . اما در MDL این موضوع انجام نشده و توسعه دهندگان MDL اصلا توجه ای به این موضوع نکردن به این صورت که شما دارای یک جدول سرد و بی روح هستین که قابلیت رسپانسیو هم نخواهید داشت . همچنین بوت استرپ ویژگی های برای جداول خودش مثل راه راه کردن ، یا چیزهای دیگه استفاده کرده اما MDL حتی به این موارد در جداول هم دقت نکرده .
7. Forms
بوت استراپ از انواع ورودی در فرم ها پیشتیبانی میکنه و کلاس های برای انواع این ورودی ها داره . البته دارای کلاس های اعتبار سنجی برای این ورودی ها نیست . در مقابل بوت استرپ , MDL قرار داره که از تعداد کمتری از عناصر ورودی فرم ها پشتیبانی میکنه اما به عناصری که پیشتیبانی میکنه انیمیشن های خوبی اضافه کرده و همین کار باعث شده که دارای تعامل خوبی با کاربرها باشه و همچنین MDL دارای الگوهای مختلفی برای اعتبار سنجیه اطلاعات ورودیه که به کاربر زمانی که اطلاعات ورودیش اشتباه باشه پیام خطا و رنگ قرمز برای وردودی ها میده .
8. Dropdown Menu
در این قسمت رویکرد هر دو فریم ورک به یک صورته . یک دکمه با یک فلش که نشان دهنده Dropdown بودن اونه و همینطور با فشار دادن اون دکمه یک لیست برای شما به نمایش در میاد .
همون طور که در قسمت دکمه ها گفتیم در بوت استرپ با اضافه یک کلاس و چند خط کد میتونید یک دکمه رو به یک Dropdown Menu تبدیل کنه که این قابلیت باعث میشه تا بوت استرپ در اینجا برنده باشه . در ضمن برای استفاده Dropdown قطعا جاوا اسکریپت نیازه .
9. Tooltips
روش بوت استرپ برای استفاده از Tooltips به این صورت که یک صفت (data-attributes) به دکمه مورد نظر اضافه کنه که بعد با Hover کردن یا کلیک کردن میتونه Tooltips رو به راحتی ببنید . در ضمن بوت استرپ به شما اجزا میده از دو نوع Tooltips استفاده کنید یکی ساده و دیگری با ویژگی های پیشرفته تر .
در MDL این ویژگی یعنی Tooltips به طور ساده تری مورد استفاده قرار گرفته با دو گزینه یکی کوچیک و دیگری بزرگ البته دارای نکات منفی هم است ، یکی این که فقط در پایین عنصری که Tooltips بهش اضافه میشه به نمایش در میاد که این باعث میشه بازم بوت استرپ در اینجا برنده باشه .
برای استفاده از Tooltips به جاوا اسکریپت در هر دو فریم ورک نیازه .
10. Icons
بوت استرپ همراه با آیکون های Glyphicons icon font ارائه میشه که به شما اجازه میده تا از بین 250 فونت آیکون مختلف ، آیکون دلخواهتون رو انتخاب و استفاده کنید . این فونت آیکون ها بدونه هیچ نصب خاصی مورد استفاده قرار میگیرن.
MDL از یک سری فونت آیکون های که توسط خود گوگل چند وقت پیش به اسم Material Icons منتشر شد استفاده میکنه .این مجموعه عظیم از 800 فونت آیکون تشکیل شده است . این فونت آیکون با MDL همراه نیست پس برای استفاده باید آدرس زیر را در قسمت HEAD سایت وارد کنید .
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
نتیجه
بطور کلی Material Design Lite به عنوان یک فریم ورک frontend خوب عمل کرده و شما میتونید با استفاده از راهنمای MDL برنامه های تحت وب خودتون رو به راحتی طراحی کنید . اما این رو در نظر داشته باشید که MDL هنوز روز های اولیه خودش رو میگذرونه و قطعا توسط گوگل توسعه داده خواهد شد . اصلا یکی از نقاط قوت این فریم ورک اینکه توسط گوگل توسعه داده میشه ، پس شما میتونید مطمئن باشید که این فریم ورک به زودی به بهترین شکل آپدیت بشه .
در کل هر دو فریم ورک خوب هستند و به خود شما بستگی داره که از کدوم اینا اسفتاده کنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید