در
سطح Javascript تنوع این گونه کادر ورک نیز بسیار گسترده هست و ویژگی های بسیار زیادی را پشتیبانی می‌نمایند ، ولی جزو بخش های زیاد اصلی در پباده سازی اینترنت اپلیکیشن شما می‌تواند باشد و جایگاه دارای اهمیت تری نسبت به قاب ورک CSS نظیر Bootstrap داراست . در‌صورتی‌که وب تارنما شما بخش های دارای ربط با تجربه کاربری (UX) داراست مطلقا باید از یک عدد از فریم ورک های دارای شهرت را گزینش نمایید . ولی نکته ای وجود دارااست که این مدل فریم ورک ها باید دوچندان Lightweight باشند یعنی ناچیز حجم به طور مثال VUE .JS یک عدد از دارای شهرت ترین آنهاست که همگی چیزهایی را که یک اینترنت نرم افزار اضطراری داراست را به برنامه نویس می دهد از طرفی ویژگی های خیر از سایر کادر ورک ها گرفته می‌باشد که سبب معمولی بودن در یادگیری و اجرا را دارد .

 طراحی سایت در مشهد

خصوصیت
های مهم یک فریم ورک جاوااسکرپیتی خوب سبک
و ناچیز حجم باشد جامعه
بزرگی از برنامه نویسان آن را حمایت کنند یادگرفتن
های متنوعی در مثال های متفاوت در زمینه استفاده از آن منتشر شده باشد ماژولار
باشد و کامپوننت ها را ساپورت کند با
Webpack سازش داشته باشد معماری
MVVM را ساپورت کند به
طور دایم به روزرسانی شود در این نوشته به معرفی اجمالی سه فریم ورک 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 دارااست .