نمایش مطلب نمایش مطلب

مقایسه اجمالی فریم ورک های Bootstrap, Foundation, Semantic UI

 

چکیده

در این متن به معرفی مختصری از سه فریم ورک Bootstrap, Foundation, Semantic UI انجام شده است .همچنین مقایسه اجمالی بین آن‌ها و مزایا و معایب آن‌ها پرداخته شده است. بیشترین استفاده را در بین انها، bootstrap دارد. امکانات طراحی semantic در مقایسه با دو فریم ورک دیگر بیشتر است و لی بدلیل پیچیدگی کار با ان بعنوان ابزار کمکی در طراحی مورد استفاده قرا می گیرد.

کلید واژه ها

فریم ورک، Bootstrap, Foundation, Semantic UI

 

 

 

 

۱مقدمه

در این متن به معرفی اجمالی سه فریم ورک Bootstrap, Foundation, Semantic UI  و مقایسه ای از امکانات مزایا و معایب انها ارائه خواهد شد.

۲معرفی فریم ورک های مذکور

2-1 معرفی Bootstrap

Bootstrap پروژه ای متن باز1 توسعه یافته توسط مارک اوتو و جیکوب تورنتون2 که اولین بار برای استفاده در توییتر در سال 2011 ایجاد شده است. Bootstrap از تکنولوژیfront-end 3 استفاده می کند و برای توسعه وب، شامل قالب های طراحیhtml و CSS برای تایپوگرافی، طراحی فرم ها، دکمه ها، جداول­ها، مدل ها و همچنین افزونه های جاوااسکریپت است.  هرکسی با کمترین دانش HTML و CSS  می تواند از آن استفاده کند. اولین استایل موبایل بعنوان جزئی از core در ورژن 3، Bootstrap ایجاد شده است و توانایی کار با تمام مرورگرهای مدرن (Chrome, Firefox, Internet Explorer, Safari, and Opera) را دارد.  فریم ورک های front-end زیادی وجود دارند که bootstrap  و foundation مهمترین آنها هستند. درحال حاضر بیش از 20 نسخه از bootstrap  منتشر شده است که بیشترین تعداد star را در بین پروژه های GitHub به خود اختصاص داده است.

2-2- معرفی Foundation

Foundation در سال 2008 توسط zurb طراحی شد و در سال 2011 به عرضه عمومی رسید. به مرور زمان تعداد نسخه های foundation بیشتر از bootstrap شد که این نشانه تلاش بیشتر برنامه نویسان آن در رفع خطا ها و باگ های برنامه است. با این حال به گستردگی bootstrap از آن استفاده نمی شود.

2-3- Semantic UI

Semantic UI یکی از فریم ورک های جایگزین برای bootstrap با ساختاری پیچیده تر است. Semantic UI برخلاف bootstrap که یک theme اصلی و واحد دارد، پکیجی با بیش از 20 them در فرم اصلی بهمراه فایلهای مختلفی از JS و CSS است. کار کردن با semantic UI  مشکل است ولی طراحی هایی که از این فریم ورک استفاده می کنند بسیار قوی هستند به این دلیل استفاده از مجموعه ای از کامپوننتها و اجزای مختلف در طراحی، طراحی با ان سرعتر و قویتر است. رابط کاربری بسیار قوی و سازماندهی شده ای دارد ولی به اندازه bootstrap  محبوبیت ندارد.

 

۳شباهتهای فریم ورک ها

3-1- مقایسه بین  Foundation و Bootstrap

1- هردو متن باز هستند تحت لیسانس MIT

2- هر دو طراحی responsive دارند و نیازی به کار اضافی نیست.

3- هر دو از سیستم طراحی 12 ستونی استفاده می کنند. هر دو فریم ورک شامل سطر و ستون است و توانایی کشیدن ستون در سطر و بلعکس را دارند.

4-اجزای CSS جداگانه. هر دو فریم ورک از کامپوننتهای از پیش طراحی شده و ready to use استفاده می کنند. مانندNavigation bar, Buttons, Pagination, Labels, Progress bar,  ….

5- استفاده از افزونه های اختیاری جاوا اسکریپت: پیاده سازی سریع پلاگین های JS برای اضافه کردن انواع خاصی از ویژگی های پیشرفته مانند affixed sidebar یا pop-up models . در طراحی bootstrap 12 پلاگین JS و foundation 15 پلاگین  استفاده شده است.


شکل1: bootstrap , foundation grid

 

شکل2 bootstrap and foundation component

 

2-1- مقایسه  semantic UI و bootstrap

1- طراحی سریعتر و قوی تر semantic نسبت به  bootstrap

2- تمام پکیج ها در semantic بخوبی سازماندهی شده اند هر کامپوننت در style sheet مربوط به خود قرار دارد و فقط کامپوننتهای مورد نیاز هر صفحه را بارگزاری می کند.

3-طراحی اجزا semantic بسیار شگفت انگیز است، اما درابط کاربری ان در مرورگرها نسبت به bootstrap ضعیف تر است. Bootstrap با مروگر ie7 به بعد سازگاری دارد در حالی که semantic با ie9 به بعد4.

 

ولی بطور کلی تفاوت اساسی بین انها وجود ندارد فقط از لحاظ کدنویسی سریعتر، تمیزتر، استفاده راحتتر و سبک بودن semantic  از bootstrap بهتر استدر اکثر موارد از semantic بعنوان ابزار موازی طراحی در کنار bootstrap و foundation استفاده می شود.

۴مزایا و معایب استفاده از هر فریم ورک

1-4- مزایای bootstrap

1- پشتیبانی از جامعه گسترده

2- قالبهای در دسترس بیشتر

3- سازگاری بیشتر با مرورگر ها( سازگاری با مرورگر های قدیمی مانند ie8 در حالی که foundation از ie9  به بعد پشتیبانی می کند)

4- قابلیت استفاده از Less  یا Sass

5- بکار رفته در سایتهای معتبر و موفقی همچون Newsweek,Vogue,Lyft, Spotify

2-4-مزایای استفاده از foundation

1- متکی به طراحی کاربر

2- امکان طراحی responsive

3- بدلیل محبوبیت کمتر و نمونه های کمتر خاص تر هست

4- توانایی ایجاد سیستم های شبکه ای (More grid system capabilities)

5- به کارگیری ویجت های از پیش ساخته شده

در مقایسه بین کامپوننتهای اضافی، bootstrap  و foundation با هم برابرند ولی موارد دیگری هم هستند که در foundation وجود دارد ولی در bootstrap  نیست:

1- اعتبارسنجی فرم ها در html5

2- منو  off-canvas

3- جدول قیمت گذاری

4- Responsive media

5-پشتیبانی از right-to-left

6- تعریف تور و هدایای تبلیغاتی در سایت

7-پشتیبانی های اضافی : برخلاف bootstrap ،تیم  foundation خدمات و دوره های مختلف پشتیبانی را ارائه می هند . انها همچنین دوره های انلاین اموزشی را نیز برگزار می کنند.

8-سایتهایی که از foundation استفاده می کنند : PBS, National Geographic ,The Washington Post, Mozilla

4-3- چرا foundation نسبت به  bootstrap محبوبیت ندارد؟

Foundation روی دو جنبه تمرکز دارد : ایجاد فریم ورک responsive برای سایت و ایمیل. در حالی که bootstrap فقط روی طراحی  فریم ورک کار می کند و اخیرا چند قالب توسعه یافته ارائه کرده است.  ولی با وجود این توییتر مبلغ خوبی برای bootstrap است. در شکل زیر شمای گرافیکی از پیشرفتهای هر دو فریم ورک ارائه شده است که نشان از حرکت زیکزاکی همسان هر دو دارد . اما bootstrap محبوبیت دو برابری نسبت به foundation دارد .

 

شکل  3- مقایسه گرافیکی پیشرفت فریم ورک bootstrap  و foundation


 

4-4-مزایای semantic UI

1- سفارشی سازی باورنکردنی

2- راه حل های معنایی

3- بارگزاری کامپوننتها بسته به نیاز کاربر

4- کامپوننتهای قابل شمارش UI

5- مستند سازی عالی

6- طراحی زیبا

7- پشتیبانی رسمی از برنامه های نسل 3

4-5-معایب semantic UI

Semantic UI هم مانند bootstrap برنامه ی کاملی نیست. پکیج های ان هم بسیار بزرگتر از ان هستند که توسط رقبا استفاده شوند بنابراین بهتر است از ماژول های خاصی از semantic استفاده کنیم. بسیاری از کاربران از اشکالات در چارچوب شکایت دارند . بسیاری از امکانات سفارشی سازی ان با جاوا اسکریپت است و  در ایجاد بسیاری از امکانات سفارشی باید توسط کاربر ایجاد گردد.

۵نتیجه‌گیری

بطور کلی هر سه فریم ورک های قوی در طراحی هستند و لی بدلیل محبوبیت بیشتر bootstrap ، بیشترین استفاده را در بین انها دارد. امکانات طراحی semantic در مقایسه با دو فریم ورک دیگر بیشتر است و لی بدلیل پیچیدگی کار با ان بعنوان ابزار کمکی در طراحی مورد استفاده قرا می گیرد.


 

۶منابع

[1]. https://www.angularminds.com/blog/article/difference-between-sematic-ui-and-bootstrap.html

[2]. https://blog.templatetoaster.com/bootstrap-vs-foundation/

[3]. https://www.codementor.io/codementorteam/bootstrap-3-vs-foundation-5-which-front-end-framework-should-you-use-8s90mhsgn#the-advantages-of-bootstrap

[4]. https://hostpresto.com/blog/framework-smackdown-bootstrap-vs-semantic-ui/

1-open source

2- Mark Otto, Jacob Thornton

3 -فریم ورک های front-end به این معنی است که برای توسعه یک وب سایت جدید نیاز به طراحی مجدد نیست. همچنین فریم ورک front-end نسبت به CSS ارجحیت دارد و معمولا با مجموعه ای از فایل ها یhtml,css,js همراه است.

 

4- البته این مورد خیلی مهمی نیست چون حتی گوگل هم از 3تا از اخرین نسخه اصلی ie پشتیبانی می‌کند

 

آدرس کوتاه :