فرانت اند یکی از تکنولوژی های حوزه ی وب هستش که ظاهر سایت شما رو طراحی میکنه.در این مقاله قصد داریم با هم دیگه با فریم ورک های فرانت اند آشنا بشیم.پس تا آخر این مقاله با ما همراه باشید.اگر هنوز در مورد یادگیری مردد هستید،اینجا کلیک کنید.
خب اول از همه ببینیم فریم ورک چیه و چه کاری برامون انجام میده.
درواقع ابزار هایی هستن که به برنامه نویسا کمک میکنن تا هم کارشون زودتر پیش بره و هم اینکه راه رو براشون آسون تر میکنن.
این فریم ورک ها شامل کتاب خونه هایی هستن که طبق قوانین برنامه نویسی هستش.
خب این توضیح خودمونی بود. اما ببینیم توضیح علمیش چی میشه:
Framework:در اصطلاح به چارچوب نرم‌افزاری گفته میشود. یک فریمورک مجموعه‌ای از کتابخانه‌های برنامه‌نویسی و احتمالا مجموعه‌ای از قوانین برای برنامه‌نویسی است.
حالا یه مثال میزنم تا ملموس تر این موضوع رو متوجه بشید:
فریم ورکای فرانت اند تا حدودی مشابه چارچوب یک خانه واقعی هست که ممکنه شامل دستورالعمل‌هایی در مورد نحوه ساخت پنجره‌ها، درها یا اتاق‌ها باشه. توسعه‌دهنده خانه می‌تونه تصمیم بگیرد که چه جوری قوانینی را که چارچوب به اون ها ارائه میده اتخاذ کنه و خانه را به روشی که می‌خواد بسازه.(منبع:وب رمز)
خب دیگه وقتشه بریم سراغ فریم ورک های فرانت اند:
React:
ریکت یک کتابخانه متن-باز جاوا اسکریپت است که برای ساخت وب‌اپلیکیشن‌ها مورد استفاده قرار می‌گیرد. ریکت لایه View وب‌سایت‌ها و اپلیکیشن‌های موبایل را مدیریت می‌کند. توسعه‌دهندگان با استفاده از ریکت می‌توانند وباپلیکیشنهای بزرگی را بسازند که در آنها، داده‌ها می‌توانند بدون نیاز به بارگذاری مجدد صفحه تغییر یابند. هدف اصلی ریکت این است که وب‌اپلیکیشن‌هایی سریع، مقیاس‌پذیر و ساده بسازد.
سایت های طراحی شده با react:
مزایا:
- یادگیری بسیار راحت
- استفاده از مولفه های یکسان در شرایط متفاوت
- امکان ایجاد لایه انتزاعی هنگام طراحی سایت با React
- سازگاری و هماهنگی بسیار بالا
- حفظ کدهای ایجاد شده
- برخورداری از امکانات زیاد
- طراحی زیبا و ساده
- پویا بود چارچوب ری اکت
- اعتبار
معایب:
- عدم وجود اسناد جامع به دلیل سرعت پیشرفت قابل توجه
- منحنی یادگیری نسبتا طولانی
- توسعه دهندگان درک JSX را چالش برانگیز می‌دانند
Angular:
یک فریمورک ساخت‌‌یافته برای وباپلیکیشنهای پویا می‌باشد. انگولار علاوه بر اینکه این امکان را به شما می‌دهد که از HTML برای طراحی قالب استفاده کنید باعث میشود بتوانید سینتکس‌های HTML را طوری گسترش دهید تا جزئیات وب‌اپلیکیشن‌ها را نیز به وضوح بیان نمایید.همچنین این فریم ورک برای طراحی سایت و وب اپلیکیشن های تک صفحه ای استفاده می شود.
سایت های طراحی شده با Angular:
مزایا:
- توسط Google نگهداری می شود
- جامعه بزرگ و اکوسیستم
- استفاده انگولار از تایپ اسکریپت
- روتر قدرتمند
- پشتیبانی از Ionic
معایب:
- نسخه های بسیار زیاد
- عارضه زاویه ای
- جابجایی طرح‌های قدیمی‌از AngularJS به Angular
- مستندات CLI کاملاً تعریف نشده است
- منحنی یادگیری طولانی
JQuery:
جی کوئری (jQuery) یک کتابخانه کوچک جاوا اسکریپت است که موجب میشود کار با HTML آسان‌تر شود. این کتابخانه کارکردهای زیادی برای دست‌کاری عناصر صفحه‌های وب ارائه می‌کند که موجب میشود برای ایجاد محتوای دینامیک مفید باشد.
مزایا:
- انتقال درخواست‌های HTTP ساده شده است
- Document Object Model (DOM) برای جمع‌آوری یا حذف مؤلفه‌ها انعطاف‌پذیر است
- درخواست‌های HTTP آسان می‌شوند
- محتوای پویا را ساده می‌کند
معایب:
- جایگزین‌های پیشروی متعددی غیر از jQuery در دسترس هستند
- APIهای Document Object Model (DOM) قدیمی‌است
- قابلیت کار نسبتاً کند
Vue.js:
Vue.js یک فریمورک سبک و انعطاف‌پذیر است و یادگیری شروع به کار با آن آسان است. با این حال Vue.js یک فریمورک کامل و با امکانات فراوان است که می‌تواند نیازهای هر نوع اپلیکیشن پیشرفته را رفع سازد. این فریمورک اندازه کوچکی دارد و دو مزیت اصلی دارد – DOM بصری و مبتنی بر مؤلفه. همچنین از اتصال دو طرفه داده استفاده می‌کند. این فریم ورک فرانت اند همه کاره است و به شما در انجام وظایف مختلف هنگام ساخت برنامه‌های کاربردی وب کمک می‌کند. از ساخت برنامه‌های کاربردی وب و موبایل گرفته تا برنامه‌های کاربردی وب پیشرفته (PWA)، می‌تواند توسعه‌های پویا و ساده را به سادگی مدیریت کند.
سایت های طراحی شده با Vue.js:
مزایا:
- اسناد گسترده و دقیق
- سادگی و وضوح
- پسوند ابزارهای توسعه دهنده مرورگر
- قابلیت استفاده مجدد کد و یکپارچه سازی ساده
معایب:
- کاهش جامعه توسعه دهندگان
- انعطاف پذیری منجر به بی نظمی‌در کد میشود
Backbone.js:
با استفاده از فریم ورک BackBone.JS شما می‌توانید هر چیزی که از جاوا اسکریپت لازم دارید را روی وب‌سایت خود پیاده‌سازی کنید. در این چهارچوب جاوا اسکریپت از مدل، ویو، مجموعه، روتر، همگام‌سازی یا سینک و همین‌طور رویداد استفاده شده است. می‌توانید داده‌ها را با مدل و ساختار DOM پیاده‌سازی کنید. فریم ورک Backbone.js از طریق رویدادها ارتباط ایجاد می‌کند و به شما این اجازه را می‌دهد که کدها را تمیزتر و بهتر اجرا کنید. حتی فریم ورک بکبون، برای ساخت اپلیکیشن‌های موبایل نیز می‌تواند یک فریم ورک فوق‌العاده جاوا اسکریپتی باشد. درنهایت می‌توان برای افزایش تعداد خط‌های کد، نمایش انیمیشن و ساخت ریکوئست‌های حرفه‌ای از آن استفاده کرد.
مزایا:
- سریعترین فریمورکهای جاوا اسکریپت
- یادگیری بسیار آسان تر است
- یک چارچوب سبک وزن داشته باشید
معایب:
- بازدهی کم
- معماری نامشخص
- نشت حافظه مموری
Ember.js:
فریم ورک Ember یا Ember.js یک چارچوب وب متن باز و جاوا اسکریپتی مبتنی بر مدل الگوی MVVM است. این چارچوب به توسعه دهندگان اجازه می دهد تا برنامه های کاربردی وب یکپارچه مقیاس پذیر ایجاد کنند. اگر چه اساسا این یک چارچوب برای وب است، اما ممکن است برای برنامه های دسکتاپ و موبایل نیز مورد استفاده قرار گیرد (Apple Music مثال قابل توجهی از برنامه های دسکتاپی که توسط Ember ساخته شده اند، می باشد).
مزایا:
- سریعترین چارچوب توسعه
- به خوبی مدیریت شده است
- مستندات مناسب
- اتصال داده دو طرفه
معایب:
- به روز رسانی آهسته و نحو چالش برانگیز
- یک جامعه کوچک و کمتر محبوب
- چارچوب قابل توجهی برای برنامه‌های کوچک
- منحنی یادگیری دشوار
Semantic-UI:
Semantic UI توسط Jack Lukic اختراع شد و در سال ۲۰۱۴ منتشر شد. این یک فریم ورک frontend جدید است که توسط LESS و jQuery پشتیبانی میشود. هدف Semantic در اجازه دادن به طراحان و توسعه دهندگان سایت ساز، با ایجاد زبانی برای به اشتراک گذاری UI نهفته است. از زبان طبیعی استفاده می‌کند که کل کد را به خودی خود توضیح می‌دهد. این چارچوب با رابط کاربری چشمگیر، عملکردهای ساده و ویژگی‌هایش، تبدیل به یکی از محبوب‌ترین فریمورکهای فرانت‌اند در میان سایر فریمورکهای موجود در بازار شده است.
مزایا:
- دارای عملکرد برتر
- در میان جدیدترین فریم ورک های فرانت اند
- ماژول‌های UI غنی و پذیرایی
- پیچیدگی کمتر
معایب:
- برای زبان آموزانی که هیچ دانشی از جاوا اسکریپت ندارند مناسب نیست
- برای ساختن ملزومات سفارشی باید مهارت کافی داشت
- بسته‌های بزرگتر
Svelte:
Svelte یکی از چارچوب‌های مدرن برای توسعه frontend است. این فریمورک برخلاف فریمورک‌هایی مانند Vue و React، با قرار دادن کار در یک مرحله انباشته به جای ضربه زدن روی آنها در مرورگر، تغییر ایجاد کرده است. همچنین این فریمورک کد را برای به روز رسانی مدل شیء سند (DOM) در هماهنگی با شرایط برنامه رونویسی می‌کند.
مزایا:
- پشتیبانی Svelte از SSR یا Server Side Rendering باعث میشود تا اجرای برنامه به سرور منتقل شده و برای نمایش حالت قبلی یک صفحه نیاز به رندر کردن دوباره آن نباشد
- کم حجم و سریع است.
- برنامه‌نویسان سایر فریمورک‌ها در زمان کوتاهی به راحتی با آن ارتباط برقرار کرده و برای تشکیل تیم مشکلی نخواهد بود.
- جامعه‌ی برنامه‌نویسان Svelte، فضای به شدت دوستانه و روبه‌رشدی دارند.
- با جدا بودن بخش‌های مختلف برنامه تا حدودی، به راحتی می‌توانید به صورت تیمی روی یک پروژه فعالیت و کدهای خود را به سرعت یکجا جمع کنید.
معایب:
- تعریف نشدن هیچ نوع داده‌ای در Svelte
- کامپایل شدن پروژه با خطاهای import و export به خاطر کامپایلر بودن Svelte.
- آشنا بودن برنامه‌نویس با با ابزارهایی نظیر Webpack برای کار با وابستگی‌های فایل‌هایی مانند تصاویر، فونت‌ها، استایل‌ها و… در صفحات وب.
- کوچک بودن جامعه آن به یک امر استرس‌زا برای افرادی که میخواهند تازه وارد کار شوند، تبدیل شده است
- نسبت به سایر فریمورک‌ها، کتابخانه‌های کمتری وجود دارد.
Foundation:
Foundation یکی دیگر از فریم ورک های فرانت اند می باشد. این فریمورک شتاب GPU را برای ویژگی‌های رندر سریع موبایل، انیمیشن‌های روان و ویژگی‌های تبادل داده ارائه می‌کند که در آن بخش‌های سبک وزن را برای بخش‌های سنگین و موبایل برای دستگاه‌های بزرگتر بارگیری می‌کند.
مزایا:
- این به شما امکان می‌دهد وب‌سایت‌هایی با ظاهر نفیس ایجاد کنید
- شبکه‌های انعطاف پذیر
- تجربه کاربری شخصی شده برای دستگاه‌ها و رسانه‌های متفاوت
- کتابخانه احراز هویت فرم HTML5
معایب:
- انجمن‌های انجمن و پلتفرم‌های پشتیبانی کمتر
- چارچوب مدعی مانند توییتر، بوت استرپ بیشتر از Foundation رایج است
- یادگیری برای مبتدیان بسیار سخت است
