فریم ورک (Framework) چیست؟
معرفی چند مورد از بهترین فریم ورک های ریسپانسیو CSS برای طراحی سایت
در این مقاله ، علاوه بر توضیح اینکه اساسا یک فریم ورک چیست و چه کاربردی دارد ، قصد دارم به طراحان سایتی با اسکریپت های توسعه وب سایت آشنا هستند و می خواهند تا با منابع و ابزار جدید و بیشتری از دنیای طراحی وب آشنا بشوند ، کمک کنم تا بهتر بتوانند از بین تمام فریم ورک های رایگان موجود برای دانلود ، کدام یک را برای کار و نیاز وب سایتشان انتخاب کنند و حداکثر بهره وری را داشته باشند.
فریم ورک چیست؟
یک فریم ورک مجموعه ای از مفاهیم ، کاربردها و شاخص هاست که برای حل یک سری از مشکلات کدنویسی در فضای وب است. البته همچنین می توان با مطالعه ساختار یک فریم ورک ، بدون این که از آن به طور مستقیم در پروژه خود استفاده کنیم ، راه حل های مختلفی برای مشکلات و چالش های برنامه نویسی و اسکریپتینگ آشنا شویم و کار خود را پیش ببریم. به طور خلاصه می توان گفت که فریم ورک (framework) در حوزه برنامه نویسی وب به نوعی همان کتابخانه (library) در سایر زبان های برنامه نویسی است اما به طور گسترده تر و کاربردی تر.
در دنیای طراحی سایت ، برای اینکه یک تعریف قابل فهم تر ارائه کنم ، فریم ورک یک فایل است که محتوای آن مجموعه ای از کدها و اسکریپت ها در زبان های مختلف توسعه وب سایت از جمله HTML , CSS , JS , PHP , … می باشد که می توان از این کدهای آماده برای حل کردن برخی مشکلات و دشواری های توسعه وب سایت استفاده کرد و یا حتی یک وب سایت را به طور کامل با استفاده از آن ها ایجاد و راه اندازی کرد.
اکثر وب سایت ها دارای ساختار مشابه (نه یکسان) هستند. هدف فریم ورک ها نیز ارائه ساختار مشترک و مشابه برای طراحی سایت است تا دیگر توسعه دهندگان وب سایت مجبور به کدنویسی و اسکریپتینگ صفر تا صد پروژه نباشند و هر جا به هر اسکریپتی نیاز داشتند به راحتی آن را از فریم ورک مناسب کارشان کپی کرده و در فایل اسکریپت مربوطه قرار دهند. به این طریق ، استفاده از فریم ورک به ما کمک می کند تا زمان کمتری را برای پیاده سازی پروژه صرف کنیم.
چند نوع فریم ورک به طور کلی وجود دارد؟
به طور کلی می توان فریم ورک ها را به دو دسته تقسیم کرد : فریم ورک های توسعه Back-end و فریم ورک های توسعه Front-end وب سایت.
این مسئله خیلی مهم است که ما بدانیم فریم ورک های یک ایده مفهومی هستند : یک کیت (ابزار) استاندارد از پیش آماده شده برای استفاده و پیش برد کار. مفهوم یک فریم ورک می تواند برای پروسه های متفاوت در بستر وب مورد استفاده قرار گیرد : مثلا در لایه برنامه نویسی که با استفاده از زبان PHP وب سایت را به دیتابیس متصل می کنیم و محتوا و داده های موجود را در صفحات سایت به نمایش در می آوریم ؛ یا در لایه طراحی که با باید با استفاده از اسکریپت HTML به همراه استایل هایی که با CSS برای آن تعریف کردیم ، محتوای سایت را به زیبایی در انواع بروزرها برای کاربران به نمایش بگذاریم.
فریم ورک های مربوط به توسعه Front-end (فریم ورک های CSS)
فریم ورک های front-end معمولا متشکل از بسته های شامل فایل های ساختاری و فولدرهای حاوی کدهای استاندارد شده (HTML , CSS , JS , …) هستند.
اجزاء این فریم ورک ها به طور معمول
- منبع کد CSS برای ایجاد یک گرید (grid) : این تکه کد به توسعه دهنده اجازه می دهد تا عناصر مختلف صفحه وب سایت را به راحتی و آنگونه که می خواهد به صورت جدول مانند چیدمان کند.
- تعریف استایل های تایپوگرافی برای عناصر HTML
- ارائه راه حل هایی برای مواردی از اسکریپت ها که در بروزرها پشتیبانی نمی شوند تا استایل سایت آنگونه که مد نظر طراح است در هر بروزری دیده شود.
- ایجاد کلاس های استاندارد CSS که می توان از آن ها برای استایل دادن به اجزاء واسط کاربری (UI) به طور پیشرفته استفاده کرد.
درباره فریم ورک های ریسپانسیو : اخیرا تکنیک های طراحی سایت ریسپانسیو – روشی که در آن توسعه دهنده وب سایت با تعریف ابعاد مختلف نمایشگرها توسط مدیا کوئری ها (media query) در CSS سایت ، سایت را اصطلاحا واکنش گرا یا mobile-friendly می سازد – به قدری افزایش داشته که توسعه دهندگان برای راحتی کار یک سری فریم ورک ریسپانسیو ایجاد کرده اند. به این طریق طراحی سایت ریسپانسیو نیز با استفاده از راه حل های ارائه شده توسط این فریم ورک ها ، بسیار ساده تر قبل شده است.
انتخاب فریم ورک (به تناسب نیاز پروژه) در طراحی سایت
با توجه به تعدد فریم ورک های CSS ، می توان با در نظر گرفتن سطح و پیچیدگی ، آن ها را به دو دسته تقسیم بندی کرد : فریم ورک های ساده و فریم ورک های کامل. البته این دسته بندی به معنی برتری یک کدام به دیگری نیست ، بلکه با توجه به سطح کاری مورد نیاز پروژه شما و انعطاف راه حل ، راه حل های مختلفی را برای انواع سبک های طراحی ارائه کرده اند.
فریم ورک های ساده CSS
به آن ها گرید سیستم (grid system) نیز گفته می شود. آن ها استایل هایی با سیستم ستونی ارائه می کنند تا توسعه دهنده با توجه به طرح سایت ، عناصر صفحه را مانند عناصر یک جدول چیدمان کند.
چند نمونه از این فریم ورک های گرید سیستم عبارت اند از :
۱۱۴۰ CSS Grid , Golden Grid System , Mueller Grid System , Responsive Grid System Graham Miller , Titan , Responsive Grid System Denis LeBlanc , Less Framework 4 , Gridiculo , Columnal , Toast , Ingrid , 960 Grid System , Base , Susy , …
فریم ورک های کامل در بحث طراحی سایت
معمولا دارای منبع کد کاملی هستند که می توان با استفاده از آن ها تایپوگرافی ، فرم ها ، دکمه ها ، آیکون ها ، و تمام اجزاء تشکیل دهنده یک صفحه وب را پیکره بندی کرد.
چند نمونه از این فریم ورک های کامل عبارت اند از :
BootStrap , Foundation 3 , Skeleton , YAML 4 , Tuktuk , Gumby , Kube , Groundwork , ResponsiveAeon , …
چگونه از بین این همه فریم ورک ، مورد مناسب را انتخاب کنیم؟
انتخاب یک فریم ورک مناسب می تواند بنا به دلائل متعدد از جمله دلائل زیر ، کار دشواری باشد
- هر وب سایتی نیازمند مشخصات و عناصر خاص خودش است. مثلا اگر برای یک سایت تک صفحه ای از یک فریم ورک کامل استفاده کنیم ، طبیعتا بخش زیادی از آن فریم ورک بی مصرف می ماند و تنها حجم بارگذاری منابع سایت را افزایش می دهد که باعث کندی سرعت عملکرد سایت می شود.
- در حال حاضر اغلب فریم ورک ها دارای کارکرد مناسب هستند و تفاوت چندانی بین آن ها نیست.
اگر این موارد را در نظر بگیرید ، احتمالا راحت تر می توانید در مورد انتخاب فریم ورک تصمیم بگیرید :
- سرعت بارگذاری و راحتی در استفاده
- راحتی در فهم عملکرد آن
- گزینه هایی که به شما ارائه می کند
- سازگاری با سیستمی که از آن استفاده می کند
- ارائه پشتیبانی بلند مدت (long-term support) بهتر
آیا استفاده از فریم ورک در طراحی سایت توصیه می شود؟
نه الزاما. این توسعه دهنده وب سایت است که در نهایت باید تصمیم بگیرد که برای پیش برد کار و پیاده سازی طرح وب سایت از چه روش و راه حل هایی استفاده کند. حال که با تعدادی از فریم ورک ها آشنا شده اید ، می توانید با مطالعه داکیومنتیشن هر کدام از آن ها که در وب سایتشان موجود است ، اشراف و تسلط بیشتری بر این موضوع بدست آورید و از قسمت های مفید آن ها در پروژه های خود استفاده کنید.