فریم ورک های فرانت اند

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

باگذشت زمان و تکنولوژی در زمینه‌های مختلف و به‌ویژه سخت‌افزار و نرم‌افزار، زبان‌های راحت‌تری نیز معرفی شدند که بسیار بهتر از نمونه‌های اولیه بودند. مثل سی(C)، جاوا(Java)، پایتون(Python) و... .

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

به همین دلیل، ابزار فریم ورک (Framework) برنامه‌نویسی پا به عرصه گذاشت. فریم ورک آمده بود تا هر آنچه یک برنامه‌نویس برای راحتی کد نویسی به آن نیاز دارد را فراهم کند.

فریم ورک ها در حقیقت باعث می‌شود که فرایند کد نویسی سریع‌تر، بهتر، منظم‌تر و با تمرکز بیشتری انجام شود. اصلی‌ترین ابزار فریم ورک وجود کدهای پیش‌فرضی است که از قبل نوشته و در فریم ورک گرد هم آمده‌اند. می‌توان از این کدهای آماده، هرکجا که به آن نیاز باشد، سریعاً استفاده کرد. سایر ابزارهای فریم ورک مثل پشتیبانی از چند زبان، کتابخانه‌های مختلف، ابزار تست کد و... نیز از مهم‌ترین ابزارهای فریم ورک ها به شما می‌روند.

هر زبان برنامه‌نویسی مطرح حداقل یک یا چند فریم ورک دارند. زبان‌هایی مثل پایتون (Python)، جاوا (Java)، پی اچ پی (PHP) و جاوا اسکریپت (JavaScript) تعداد زیادی فریم ورک دارند.

این فریم ورک ها چه تفاوتی با یکدیگر دارند و چرا متفاوت از هم هستند؟

بسته به نیاز از هر زبان برنامه‌نویسی مختلف، در پروژه‌های گوناگون نیز فریم ورک ها هم فرق می‌کنند. به‌طورکلی برنامه‌نویسی به دوشاخه اصلی و مهم تقسیم می‌شود: اول برنامه‌نویسی برای ساخت برنامه‌ها برای هر دستگاه و ماشین با توان پردازش، دوم برنامه‌نویسی برای ایجاد یک سایت و یا برنامه‌های تحت وب.

برنامه‌نویسی برای سایت‌ها و برنامه‌های تحت وب نیز به دوشاخه برنامه‌نویسی فرانت‌اند (Front-End) و برنامه‌نویسی بک‌اند(Back-End) تقسیم می‌شوند.

هردوی این زیرشاخه‌ها، زبان‌های مخصوص برنامه‌نویسی و به دنبال این زبان‌ها، فریم ورک های برنامه‌نویسی مخصوص دارند. گرچه تعدادی از این زبان‌ها و فریم ورک های آن‌ها در هردو زمینه بک‌اند و فرانت‌اند مشترک نیز هستند (مانند زبان پایتون و فریم ورک های آن).

در این مطلب، نمونه‌هایی از فریم ورک های فرانت اند بر اساس زبان‌های مختلف را باهم بررسی خواهیم کرد.

عمده زبان‌های برنامه‌نویسی مورداستفاده در فرانت‌اند شامل (HTML)، CSS،  JavaScript هستند. تقریباً همه فریم ورک ها، کدهای زبان (HTML) را پشتیبانی می‌کنند و نیازی برای تهیه فریم ورک برای این زبان نیست. زبان‌های  JavaScriptو  CSSسهم بیشتری نسبت بهHTML   از فریم ورک های فرانت‌اند دارند. زبان  CSSبه مخصوص ایجاد کدهای گرافیکی است و زبان JavaScript مسئول پویایی و بهبود این کدهای گرافیکی.

فریم ورک های جاوا اسکریپت (JavaScript)

Vue.js

اولین فریم ورکی که بررسی می‌کنیم Vue.js است. Vue.js برای ساخت و ایجاد یک رابط کاربری خوب و حرفه‌ای استفاده می‌شود. این فریم ورک متن‌باز بوده و از ابتدای رونمایی و معرفی آن همواره تحت حمایت فریم ورک محبوب زبان پی اچ پی یعنی لاراول بوده است. با به‌روزرسانی‌ها و آپدیت‌های این فریم ورک، علاوه بر اینکه می‌توان برای سایت‌های مختلف رابط کاربری ایجاد کرد؛ بلکه این امکان که Vue.js برای ساخت رابط کاربری برای تلفن‌های همراه نیز مورداستفاده قرار بگیرد نیز اضافه شد.

Vue.js نسبت به سایر فریم ورک های جاوا اسکریپت کمترین حجم را دارد و فضای بسیار کمتری اشغال می‌کند. به‌طوری‌که در ابتدای شروع برنامه‌نویسی با آن، فضایی که نیاز دارد حتی به 50 کیلوبایت هم نمی‌رسد.

انعطاف در فریم ورک ها و کد نویسی از مهم‌ترین ویژگی‌ها است. هرچه انعطاف و به‌نوعی سازش‌پذیری یک فریم ورک بالاتر باشد، تبدیل کدهای آن به زبان‌های دیگر و یا ادغام آن کدها با کدهای زبان‌های دیگر و حتی آن کدها با فریم ورک های دیگر به‌آسانی و بدون دردسر خواهد بود. Vue.js نیز از این قاعده مستثنا نیست و توانایی بالایی در انعطاف دارد؛ به‌خصوص در تبدیل کدها در چهارچوب HTML و ایجاد گره‌های مجازی و همخوانی قابلیت استفاده این کدها در سایر فریم ورک های جاوا اسکریپت و ادغام با کدهای برنامه‌های دیگر.

مستندات دقیق و قابلیت ارتباط دوطرفه به لطف معماری MVVM این فریم ورک از دیگر قابلیت‌های آن محسوب می‌شوند.

Angular.js

 آنگولار حدود چند سال قبل‌تر از Vue.js معرفی شد. آنگولار هم یک فریم ورک متن‌باز و رایگان است که بیشتر برای طراحی سایت‌های تک‌صفحه‌ای پویا (SPA) مورداستفاده قرار می‌گیرد. این نوع سایت به‌گونه‌ای است که بدون لود شدن به‌سرعت به‌روزرسانی می‌شوند.

آنگولار به‌طور ویژه‌ای با استفاده از HTML و گسترش سینتکس (Syntax) های آن، جزئيات وب اپلیکیشن ها را به‌طور شفاف بیان می‌کند.

با این فریم ورک در کد نویسی، برای یک ماژول کمترین میزان کد را خواهید نوشت.

با ویژگی تزریق وابستگی (Dependency Injection) انگولار، می‌توان مجموعه دستوراتی را از پیش تعیین کرد و هر جا که نیاز به آن بود بلافاصله با استفاده از این ویژگی به‌نوعی تزریق کرد.

دایرکتیوهای (Directives) آنگولار که می‌توان با آن‌ها تگ‌های جدید ساخت و یا تست پذیری راحت کدهای ساخته‌شده با آنگولا سایر ویژگی‌های مفید این فریم ورک هستند.

React.js

ری اکت در فاصله بین معرفی آنگولار و Vue.js رونمایی شد. این فریم ورک نیز به‌صورت متن‌باز و رایگان در دسترس قرار گرفت.

همانند آنگولار، ری اکت برای طراحی و ساخت سایت‌ها و برنامه‌های تحت وب تک‌صفحه‌ای به کار می‌رود؛ با این تفاوت که مدیریت این صفحه‌ها راحت‌تر است. این ویژگی این امکان را ایجاد می‌کند که قابلیت به‌روزرسانی صفحه‌ها بدون لود در پروژه‌های بزرگ‌تر و پیچیده‌تر پیاده شود و بتوان این قابلیت‌های ایجادشده را تحت الگوی (MVC) با سایر فریم ورک ها ادغام کرد.

در ری اکت به‌جای استفاده از جاوا اسکریپت معمولی از (JSX) استفاده می‌شود که یک جاوا اسکریپت ساده است و این امکان را ایجاد می‌کند که(HTML)  را درون جاوا اسکریپت بیاورند.

ری اکت نیتیو (React Native) یک فریم ورک مبتنی بر جاوا اسکریپت مخصوص توسعه برنامه‌های مخصوص موبایل و محصولات مایکروسافت است که از ری اکت مشتق شده است.

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

Ember.js

یکی از بهترین و محبوب‌ترین فریم ورک ها برای جاوا اسکریپت است. امبر با هدف گردآوری مجموعه ابزارهای مفید و موردنیاز برنامه‌نویسی در یک ابزار و به‌خصوص برای سایت‌های تک‌صفحه‌ای و مقیاس‌پذیر ایجاد شد. ویژگی‌ها و قابلیت‌های زیاد این فریم ورک به همراه پشتیبانی قوی، آن را میان برنامه نویسان محبوب‌تر کرد. امبر در حقیقت خلأهایی که انگولار و ری اکت داشتند را برطرف کرده امکانات اختصاصی هردو آن‌ها را اضافه کرده و با ویژگی‌های جدید خود و به‌روزرسانی‌هایی که به‌طور منظم ارائه می‌کند، بهترین پکیج را به وجود آورده است.

ارجحیت قرارداد (Convention) بر پیکربندی (Configuration) که در زبان روبی (Ruby) محبوب است در امبر پیاده شده است. ویژگی که برای شروع یک پروژه بسیار مهم است.

سازگاری رو به عقب، یعنی بسیاری از تکنولوژی‌ها و برنامه‌های قدیمی با این فرم ورک سازگار هستند: مثل اینترنت اکسپلورر (Internet Explorer 9.0).

بسیاری از مشکلات پروژه‌های بزرگ در این فریم ورک رفع شده و سیستم روتر پیشرفته و رو به آپدیت آن، ازجمله ويژگی دیگر این فریم ورک است.

فریم ورک‌های محبوب دیگری مانند(JQuery) ،(Backbone.js) ،(Node.js)  نیز از این زبان در سایر زمینه‌ها نیز وجود دارد و برحسب کاربرد و مصارف گوناگون نیز موردتوجه برنامه نویسان هستند.

فریم ورک های CSS

Bootstrap

محبوب‌ترین فریم ورک برای طراحی گرافیکی سایت در زبان CSS بوت استرپ است. بوت استرپ در ابتدا برای استفاده شخصی سازنده توییتر توسط مک اتو (MC Eto) ساخته شد و هدف از توسعه این فریم ورک، این بود که یک فریم ورک با ابزارهای قدرتمند و داخلی و به‌دوراز خطاهای سایر ابزارها باشد. سپس به‌صورت رایگان و متن‌باز منتشر شد.

این فریم ورک بعدها با انتشار به‌روزرسانی‌ها بهینه‌تر شد. این فریم ورک از دستورهای همه زبان‌های فرانت‌اند پشتیبانی می‌کند و کتابخانه جی کوئری (jQuery) بخش جدانشدنی آن محسوب می‌شود.

واکنش گرایی یا ریسپانسیو (Responsive) بودن بوت استرپ به همراه پشتیبانی از مرورگرهای قدیمی این امکان را به این فریم ورک داد تا طراحی‌های زیبای آن در انواع مختلفی از دستگاه‌ها با سایزهای مختلف بدون ازهم‌پاشیدگی به نمایش درآیند، همچنان زیبایی خود را حفظ کنند.

بوت استرپ بیشتر قسمت‌های سایت را به‌صورت پیش‌فرض می‌سازد و در سرعت کار را بسیار بالا می‌برد و این باعث می‌شود که طراح عملاً به کدهای کمتری برای نوشتن احتیاج داشته باشد. از طرفی باعث می‌شود که سایت‌های ساخته‌شده با این فریم ورک شبیه هم باشند که یک نکته منفی برای این فریم ورک محسوب می‌شود.

سازگاری بوت استرپ با دیگر زبان‌ها و فریم ورک ها، این امکان را به بوت استرپ می‌دهد که در پروژه‌های مختلفی استفاده شود و از آن بهره ببرند.

صرفه‌جویی در وقت برای ایجاد کدها، سفارشی‌سازی‌های زیاد در قسمت‌های مختلف و پشتیبانی بالا در فروم‌ها و گروه‌های مختلف، دلایل محبوبیت این فریم ورک هستند.

Foundation

فاندیشن رقیب اصلی بوت استر محسوب می‌شود. هردوی این‌ها تشابهات و تفاوت‌هایی دارند. فاندیشن بسیار قدیمی‌تر از بوت استرپ است و حتی قبل از اینکه قرن 21 شروع شود معرفی‌شده بود. به‌محض اینکه بوت استرپ رونمایی شد رقابت میان این دو شدت گرفت. واکنش گرایی فاندیشن در همان سال‌های اولیه که بوت استرپ به وجود آمد، اضافه شد و با انتشار نسخه دوم تبدیل به یک پروژه متن‌باز شد. با اینکه هردو فریم ورک قابلیت واکنش گرایی سایت را در اختیار دارند ولی فاندیشن در این کار موفق‌تر و بهتر ظاهرشده است.

حجم کم فاندیشن و ماژولار بودن قابلیت‌های آن‌یک برتری محسوس نسبت به بوت استرپ است. در فاندیشن هر ابزاری را که نیاز دارید، می‌توان اضافه کرد اما در بوت استرپ همه باهم نصب می‌شوند و هر جا که نیاز بود یکی از آن‌ها اجرا می‌شوند.

یادگیری فاندیشن راحت‌تر از بوت استرپ بوده ولی در ادامه، کار کردن با آن کمی پیچیده می‌شود. به همین منظور برای افراد مبتدی چندان توصیه نمی‌شود

یک نقطه‌ضعف بزرگ این فریم ورک که به خاطر آن مقام دوم فریم ورک ها را گرفته است این است که از پشتیبانی ضعیف‌تری نسبت به بوت استرپ برخوردار است.

سایر ویژگی‌های این فریم ورک نیز مانند بوت استرپ است؛ مثل شبیه بودن و تکراری شدن طراحی‌های سایت‌های مختلف، المان‌ها و قابلیت‌های شخصی‌سازی بالا نیز در این فریم ورک حضور دارند.

Materialize

متریالایز یک زیرشاخه از فریم ورک اصلی متریال دیزاین (Material Design) گوگل محسوب می‌شود و به‌صورت متن‌باز توسط چند دانشجوی آمریکایی ساخته شد. متریال دیزاین بر پایه طراحی قدیمی و روتین قبل بر اساس تکنولوژی و پیشرفت امروزی است. متریال دیزاین این امکان را فراهم کرد که به ساده‌ترین شکل ممکن طراحی سایت را به‌پیش برد و اجرا کرد.

متریالایز نیز همه این ویژگی‌ها را داشته و بیشتر بر تجربه کاربری پروژه (UX) تمرکز دارد.

این فریم ورک نیز همانند سایر فریم ورک ها با مرورگرهای کنونی سازگار است و قابلیت واکنش گرایی و سیستم شبکه‌ای گرید (Grid) هم ارائه می‌کند.

برخلاف سایر فریم ورک ها که رابط کاربری خود آن‌ها پیچیده و معمولی بود، متریالایز رابط کاربری بسیار زیبایی دارد و کار کردن با آن را لذت‌بخش‌تر می‌کند.

یادگیری و کار با این فریم ورک بسیار آسان است و پیچیدگی بسیار زیادی ندارد و در کد نویسی با آن‌هم با کمترین میزان کد می‌توان طراحی کرد.

زیاد بودن ماژول‌ها، المان‌های طراحی و ویژگی‌های پویایی آن‌ها از بهترین ویژگی این فریم ورک است.

Skeleton

سبک‌ترین و جمع و جورترین فریم ورک طراحی است که به‌منظور طراحی برنامه‌های مخصوص موبایل و وب اپلیکیشن ها رونمایی شده است.

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

فریم ورک های(Semantic UI) ،(Material UI) ، (Pure CSS) نیز سایر فریم ورک های محبوب زبان (CSS) هستند و مطرح‌اند.

فریم ورک پایتون (Python)

Django

زبان پایتون به‌طور اختصاصی و عمده برای طراحی فرانت اند استفاده نمی‌شود و مثل سایر زبان‌های فرانت‌اند قابلیت ادغام و انعطاف بسیار بالایی با بقیه زبان‌های فرانت‌اند ندارد.

پایتون بیشتر در سمت طراحی بک‌اند استفاده می‌شود و قدرت‌نمایی می‌کند اما در مواردی برای قسمتی از کد نویسی فرانت‌اند از این زبان می‌توان استفاده کرد. جنگو (Django) محبوب‌ترین و مشهورترین فریم ورک این زبان است.

مجموعه امکانات و ویژگی‌هایی که این فریم ورک ارائه می‌کند، نسبت به سایر فریم ورک های پایتون جامع‌تر و کامل‌تر و صدالبته قدرتمندتر است. کدهایی که با این فریم ورک نوشته می‌شود به‌طور لحظه‌ای بررسی می‌شوند، پشتیبانی قدرتمندی دارد و سئو فرندلی است.

شرایط استفاده از پایتون در فرانت‌اند به این صورت است که باید بر جاوا اسکریپت مسلط باشید و از دو کتابخانه Skulpt و Brython استفاده کنید. فرایندی که برای استفاده از پایتون در فرانت‌اند طی می‌شود کمی دشوار است و اگر علاقه و نیازی به آن نداشته باشید بهتر است سراغ آن نروید. شاید در آینده‌ای نه‌چندان دور پایتون به رقیب جاوا اسکریپت تبدیل شود.

همان‌طور که گفته شد کلیت طراحی فرانت‌اند حول سه زبان JavaScript ,HTML ,CSS می‌چرخد. جدا از زبان HTML که چهارچوب اصلی طراحی فرانت‌اند است، دو زبان دیگر طراحی گرافیکی و زیبایی پروژه را شکل می‌دهند.

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

سخن نهایی

البته همه این فریم ورک های فرانت اند تفاوت چندان زیادی ندارند و با هرکدام می‌توان فرایند طراحی را ادامه داد. طراحی فرانت‌اند به‌گونه‌ای است که به خلاقیت نیز نیاز دارد که ذاتاً این فریم ورک ها از آن بی‌بهره‌اند.

در کنار این کد نویسی، طراح باید با سایر برنامه‌های گرافیکی مثل فتوشاپ (Adobe Photoshop)، افتر افکت (Adobe After Effects) و ایلاستریتور (Adobe Illustrator) و... هم آشنا باشد و بتواند از خلاقیت خود در طراحی المان‌ها و ماژول‌هایی که در دسترسش نیست بهره ببرد و این قسمت‌های جدید طراحی را با کدهای طراحی هماهنگ استفاده کند.

امیدوارم از خواندن این مطلب لذت برده باشید.