چطور یک طراح وب سایت شویم؟ (قسمت سیُّم)

تفاوت بین Framework و Library چیه؟

دونستنش کمکی زیادی نمیکنه منم کل این قسمت را به صورت کاپی پییست نوشتم!!

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

کتابخانه یا Library

کتابخانه یک فایل است که مجموعه‌ای از کدها را درون خود دارد و هر زمان در پروژه به متد‌ها و توابع آن احتیاج بود، می‌توان به راحتی آن را فراخوانی کرد. برای مثال Jquery یک کتابخانه است که در صفحات وب برای پیاده سازی یکسری جلوه‌ها در بخش Front-end استفاده می‌شود. برای استفاده از کتابخانه‌ی Jquery ابتدا کد‌های آن را از وب سایت دانلود کرده، سپس با استفاده از تگ script آن را در سند HTML، بارگذاری می‌کنیم. و در ادامه هر جایی از پروژه که خواستیم، متد‌های آن را فراخوانی می‌کنیم.

چهار چوب یا Framework

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

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

کتابخانه‌ها و فریم ورک‌های Front-End وب

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

سپس نوبت به کتابخانه‌ها و فریم ورک هایی مانند JQuery، Mootools.js و Prototype.js رسید تا به میدان جاوا اسکریپت بیایند. اما آنها برای ادامه مسیر توسعه وب، نقطه ضعف‌های بسیاری داشتند. هنوز میزان تکرار در کدها زیاد بود و برای وظایف کوچک خطوط کد نسبتا زیادی نوشته می‌شد. به این ترتیب کتابخانه‌ها و فریم ورک‌های جاوا اسکریپتی قدرتمندی به میدان رقابت وارد شدند. در این بخش از مقاله قصد داریم تعدادی از این کتابخانه‌ها و فریم ورک‌های Front-End را به شما معرفی کنیم.

فریم ورک Angular

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

انگولاریک محبوبترین و پرکاربرترین فریم ورک جاوا اسکریپت است که توسط گوگل پشتیبانی میشه با استفاده از آن می‌توانید نرم افزارهای تحت وب تک صفحه ای، برنامه های تحت موبایل و برنامه های تحت دسکتاپ ایجاد کنید.. با این فریم ورک شما می‌توانید تحت معماری MVC، کدهای Front-end پروژه را بنویسید. اما ایرادی که بهش هست اینه که کمی سنگینه (فایل دانلودی حدود 135 کیلو بایت و حدود 11میلی ثانیه بارگزاری کاملش زمان میبره) پس برای پروژه ای کوچیک از اون استفاده نکنید. اگه پروژه خیلی خیلی بزرگ کار میکنید برید سراغش البته بازار کارش هم داغتر از فریم ورکهای دیگه است پس اگر قصدتون اینه که جایی کار پیدا کنید یاد گرفتنش رو در الویت بذارید.

کتابخانه React

در قیاس با آنگولار، ری اَکت جکی جانه!! محبوب، سریع، کار را بیانداز ،دوست داشتنی و همه فن حریف!!!

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

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

فریم ورک Vue.js

این فریم ورک و دوستاش! مثل گروه پنجه آتشین هستند روز به روز به محبوبیتش اضافه میشه ساده و جمع و جور و سریع سرعت رشد اکوسیستمش زیاده و از همه مهمتر فریمورک محبوب منه! یادگیریش هم خیلی راحته

تصور کنید وقتی داده های شما در صفحه تغییر می کند به طور خودکار و بدون اینکه شما درگیر چیزی شوید ظاهر برنامه شما بدون ریلود شدن صفحه ، بروز رسانی می شود، این واقعا عالی است فقط زمانی قدر این نعمت را خواهید دانست که با فریمورکی مانند جی کوئری کار کرده باشید و بدانید مدیریت اینکار چقدر میتواند اعصاب خورد کن باشد.این قابلیتی است که به آن (two-way data binding) میگن البته در حال حاضر بیشتر فریمورکها و کتابخانه هایی که در این مقاله معرفی میکنیم این قابلیت رو دارند. Vue.js یکی از آنهاست

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

فریم ورک Ember

یک کلمه استتکهام؛ شیک، رسمی، مناسب هر نقشی، کچل جذاب! لعنتی...

فریم ورک Ember.JS در سال ۲۰۱۵ وارد چرخه کار شد طبق گفته ی خودش یک فریمورک هست برای برنامه نویس های بلند پرواز واقعا هم راست میگه، شرکت های بزرگی مثل مایکروسافت،نتفلیکس، لینکداین و ... ازش استفاده میکنند، با توجه به اینکه زمان کمی از روی کار آمدنش نمی گذرد توانسته خودش رو توی دل خیلی ها جا بکند، هرچیزی که نیاز داشته باشید برای ساخت یک وب اپلیکیشن تک صفحه ای رو در اختیارتون قرار میده از سرور گرفته که با یه دستور ساده اجرا میشه تا ساختن کامپوننت های چند بار مصرف، امبر جی اس واقعا شگفت انگیزه و در نوع خودش بی سابقه گرچه بسیاری از ویژگی هایی که داره توی فریمورک هایی که در بالا بررسی کردیم هم وجود دارن اما امبر واقعا یک چیز دیگست و با اینکه خیلی بزرگه اما بسیار قابل درکه پیشنهاد میکنم حتما یکبار هم که شده اون رو امتحان کنید، ما هم قول میدیم توی مقاله ای مجزا به صورت اختصاصی این فریمورک رو بررسی کنیم.

فریم ورک Mithril

با هاش کار نکردم اما کارش درسته کم حجم ترین و سریعترین عین جت لی

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

کتابخانه backbone

یک مبارز باستانی با روش مبارزه از راه دور تور رو که میشناسین! (دلیل این شباهت کمی فلسفیه پس بیخیال دلیلش بشین!)

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

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

فریم ورک Aurelia

نسل بعدی اپلیکیشن ها ؛

توی اورلیا خیلی راحت میشهHTML رو گسترش داد و کامپوننت های خیلی پیچیده رو بسادگی آب خوردن ساخت، سیستم اورلیا بشدت واکنش پذیره اون میفهمه کجای UI شما داره تغیر میکنه و سریع خودشو با تغییرات هماهنگ میکنه.

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

فریم ورک Polymer

عجیب و غریب!

فریمورک جاوا اسکریپتیه پلیمر توسط گوگل ساخته شده و پشتیبانی میشه، خیلی نمیخوام وارد بحث های عمیق تو بررسی این فریمورک ها بشم چون سطح این مقاله بیشتر برای افراد مبتدی هست ، اما بدونید شما با این فریمورک براحتی و بدون اینکه با مسائل پیچیده روبرو بشید میتونید المان ها و تگ های اختصاصی بنویسید و براحتیHMTL رو گسترش بدید.

جمع بندی:

تمام فریمورکها و کتابخانه هایی که معرفی کردم کم و بیش قابلیتهای مشابهی دارند با کمی تفاوت جزیی مهم اینه که با کدوم راحت تری و ارتباط برقرار می کنی. اما به نظر شخصی من موارد زیر میتونه کمک کننده باشه ( دوستانی که تجربه داند در کامنتها تجربه شون رو به اشتراک بذارن تا دیگران هم استفاده کنند)

اگر هدف شما.....

- استخدام است به ترتیب: انگولار، ری اَکت و ویو جی اس

- تولید برنامه تحت وب کوچک تا متوسط: ویو جی اس و میتریل

- تولید برنامه برای چند پلتفرم ( مثل وب، موبایل یا دستکتاپ) به ترتیب: امبر، ری اَکت، اورالیا، بک بن

- تولید نرم افزارهای بزرگ (مثل نرم اقزار های سازمانی و ...) به ترتیب: آنگولار، امبر، ری اَکت، بک بن، اورلیا

- وب دیزاینربه ترتیب: ری اَکت، ویو، اورلیا و پلیمر