۱۰ کتابخانه و فریم‌ورک جاوا اسکریپت که باید آنها را بشناسید — قسمت اول

به‌عنوان یک توسعه‌دهنده تازه‌کار جاوا، تعدادی کتابخانه (Libraries) و فریم‌ورک (Framework) یا چهارچوب ضروری وجود دارند که باید آنها را بشناسید.

در این پست شما با 10 کتابخانه و فریم‌ورک جاوا اسکریپت (JavaScript) آشنا خواهید شد. ما تلاش کردیم تا کتابخانه‌ها و فریم‌ورک‌های محبوب را برای شما جمع‌آوری کنیم. بااین‌حال ممکن است نام برخی از آنها را شنیده باشید. فهرستی که در ادامه برای شما ارائه می‌شود را می‌توان به‌عنوان یک مقدمه برای تازه‌کاران توسعه وب در نظر گرفت.

مواردی که در این مقاله‌ آنها را بررسی می‌کنیم در جدول زیر قرار دارند.

چه تفاوتی بین کتابخانه و فریم‌ورک وجود دارد؟

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

به‌طورکلی، کتابخانه، یک قطعه کد، باقابلیت استفاده مجدد است که در ابتدای کار مورداستفاده قرار می‌گیرد. یک کتابخانه می‌تواند از چندین توابع (functions)، اشیاء (objects) و متد (methods) وابسته به زبان، تشکیل‌شده باشد. (منظور از زبان در اینجا زبان برنامه‌نویسی هدف است؛ مثلا شما با زبان برنامه‌نویسی جاوا اسکریپت (JAVA SCRIPT)، جاوا (JAVA)، ویژوال‌بیسیک (VISUAL BASIC) یا پی‌اچ‌پی (PHP) برنامه‌ای را می‌نویسید.) برنامه‌ای که شما می‌نویسید برای استفاده از قابلیت‌های یک کتابخانه باید به آن لینک کند.

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

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

کتابخانه‌ها

JQUERY، یک کتابخانه کلاسیک قدیمی

در جهان جاوا اسکریپت، jQuery هنوز هم یکی از پرطرفدارترین و محبوب‌ترین کتابخانه‌ها است.

jQuery در سال 2006 توسط جان ریزک (John Resig) منتشر شد و در وب‌سایت‌های سراسر جهان مورداستفاده قرارگرفت. در برخی برآوردها بیش از 50٪ از تمام وب‌سایت‌های شناخته‌شده از jQuery استفاده می‌کنند. این ‌رقم، صدها میلیون وب‌سایت‌ را شامل می‌شود.

بنابراین، jQuery یک کتابخانه است که عمدتا برای مدل شیءگرای سند (Document Object Model, DOM) استفاده می‌شود. DOM یک ساختار درخت مانند است که تمام عناصر را در یک صفحه وب نشان می‌دهد.

درواقع، DOM يک رابط برنامه‌نويسی برای سندهای XML و Html است. با استفاده از DOM، نحوه دستيابی و انجام پردازش‌های لازم در رابطه با سند‌های XML و Html فراهم می‌گردد. برنامه‌نويسان با استفاده از DOM، قادر به ايجاد يک سند، حرکت در طول ساختار سند، افزودن، اصلاح يا حذف المان‌های يک سند XML و يا Html هستند.

jQuery می تواند عناصر DOM را انتخاب کند، انیمیشن بسازد، رخدادها را مدیریت کند و غیره. هدف از خلق این کتابخانه، ساده‌سازی، گسترش و واضح‌تر شدن کارها اعلام‌شده است. جی‌کوئری از ناسازگاری متقابل مرورگرها جلوگیری می‌کند و موجب تفکیک HTML و جاوا اسکریپت می‌شود.

آیا شما باید از jQuery استفاده کنید؟

خب، بستگی دارد. برخی از وب‌سایت‌ها اصرار دارند که jQuery دیگر مورد‌نیاز نیست. مرورگرهای مدرن، رابط برنامه‌نویسی نرم‌افزار کاربردی (Application Programming Interface, API) یا به‌صورت خلاصه رابط برنامه‌نویسی خود را به‌شدت بهبود بخشیده‌اند.

در‌گذشته، ممکن بود از jQuery برای انجام یک پرسش‌نامه انتخابی ساده استفاده کنید. اکنون می‌توانید این کار را به‌سادگی با جاوا اسکریپت انجام دهید. علاوه بر این، با محبوبیت فریم‌ورک‌های تک‌صفحه‌ای (Single-Page-Application, SPA)، استفاده از jQuery در بسیاری از موارد منطقی نیست. به‌عنوان‌مثال، در بسیاری از SPA‌ها نوعی رویداد مدیریتی ساخته‌شده وجود دارد. استفاده از jQuery می‌تواند در این موارد بیشتر از آنکه مفید باشد، خسارت ایجاد کند.

نکته: SPA یک اصطلاح است و به برنامه‌های وبی اشاره می‌کند که می‌توانند در یک صفحه وب جا بگیرند و نیازی ندارند تا به‌طور مرتب از سوی مرورگرها نوسازی شوند چون محتوای موردنظر با استفاده از جاوا اسکریپت به‌صورت پویا بارگذاری می‌شود.

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

Underscore and Lodash

در سال 2009، جرمی اشکناس (Jeremy Ashkenas) کتابخانه Underscore را ایجاد کرد. Underscore یک کتابخانه ابزار است که بیش از 100 تابع را پوشش می‌د‌هد. این توابع به شما کمک می‌کنند تا آرایه‌ها، اشیاء و سایر توابع را دستکاری کنید.

یکی از قوی‌ترین ویژگی‌های Underscore کمک‌های برنامه‌نویسی کاربردی آن است. به‌عنوان‌مثال، نقشه (map)، فیلتر (filter) و کاهش (reduce)، برخی از محبوب‌ترین کمک‌ها به شمار می‌روند. برنامه‌نویسی کاربردی (Functional Programming, FP) یک پارامتر برنامه‌نویسی است که از تغییر وضعیت و تغییر ‌داده‌ها جلوگیری می‌کند. در چند سال اخیر، FP بسیار محبوب‌ شده است.

در سال 2012، Lodash اولین نسخه خود را منتشر کرد. جان دیوید دالتون (John-David Dalton) این کتابخانه را جهت ایجاد یک تکرار سازگارتر برای محیط آرایه‌ها (arrays)، رشته‌ها (strings) و شیء توکار (argument objects) نوشت.

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

نکته: توابع جاوا اسکریپت در خود یک شیء دارند که آن، شیء توکار ( argument object) نامیده می‌شود. Argument object دربردارنده آرایه‌ای از آرگومان‌ها (Argument) است که به هنگام فراخوانی استفاده می‌شوند. با این روش می‌توان با استفاده از یک تابع، بیشترین مقدار (بزرگ‌ترین عدد) را در آرایه‌ای از اعداد به‌دست آورد. آرگومان به مقداری اعم از هر نوع گفته می‌شود که به داخل تابع فرستاده می‌شود و روی آن عملیات خاصی صورت می‌پذیرد.

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

D3.JS

D3.js یک کتابخانه جاوا اسکریپت برای تجسم داده است. این کتابخانه به‌منظور تحلیل و به نمایش گذاشتن داده‌های پویا و تعاملی در مرورگرهای وب مورداستفاده قرار می‌گیرد. D3.js در سال 2011 بر‌پایه یک پروژه به نام Protovis توسعه یافت.

مایک بوستوک (Mike Bostock)، جف هیر (Jeff Heer) و وادیم اوکیتسکی (D3.js ،(Vadim Ogievetsky را توسعه دادند. D3.js یک ابزار عالی برای ایجاد تصاویر سفارشی است. این کتابخانه دارای یک API قدرتمند است که از انتخاب‌گرها (selectors) استفاده می‌کند، بسیار شبیه به آنهایی که شما در jQuery می‌بینید. پس از انتخاب یک عنصر در DOM، می‌توانید تمام انواع انتقال و دست‌کاری را انجام دهید. D3 4.0، آخرین نسخه D3، مجموعه ای از 30 ماژول (modules) یا بخش مختلف است. هرکدام هدف متفاوتی دارند. تعدادی از آن‌ها کار کردن بارنگ‌ها را ساده‌تر می‌کنند، درحالی‌که تعداد دیگری با عناصر SVG کار می‌کنند.

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

REACT، کتابخانه مورد‌علاقه فیس‌بوک

در مارس 2013، جوردن والکه (Jordan Walke) در هنگام کار با فیس‌بوک، React را منتشر کرد. از آن به بعد، React به یکی از محبوب‌ترین کتابخانه‌های فوری تبدیل شد و در صدها‌ هزار وب‌سایت در سراسر جهان مورداستفاده قرار گرفت.

React، که گاهی آن را React.js نیز می‌نامند یک کتابخانه متن‌باز (open-source) است که توسط فیس‌بوک پشتیبانی می‌شود. این کتابخانه به شما کمک می‌کند تا برنامه‌های کاربردی وب را در مقیاس کوچک و بزرگ ایجاد کنید. با استفاده از این کتابخانه می‌توانید سایت‌های تعاملی قدرتمندی بسازید. صفتی که به این کتابخانه دادند، کتابخانه جاوا اسکریپت برای ایجاد رابط کاربری (A JavaScript Library For Building User Interfaces) است. React، گاهی SPA یا برنامه تک‌صفحه‌ای نامیده می‌شود. این کتابخانه از مولفه‌هایی استفاده می‌کند که به‌منظور کپسوله کردن کدها و حالت‌ها به‌کار گرفته می‌شوند. با استفاده از این مولفه‌ها، ساختن رابط کاربری پیچیده، آسان می‌شود.

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

اگر می‌خواهید وب‌سایت‌های front-end را توسعه‌ دهید، چاره‌ای جز تسلط بر این کتابخانه ندارید.

نکته: هر چیزی که با ایده‌های کاربر از‌جمله طراحی‌ها و زبان‌های برنامه‌نویسی مثل css ، html و یا javascript درگیر باشد را front-end می‌گویند.

GLIMMER.JS، مؤلفه‌های رابط کاربری برای وب

Glimmer.js یک تازه‌وارد به اکوسیستم کتابخانه‌های جاوا اسکریپت به ‌شمار می‌رود. این کتابخانه به‌دست توسعه‌دهندگانی که Ember.js را طراحی کرده‌اند در اوایل سال 2017 وارد دنیای فناوری شد. صفتی که به این کتابخانه دادند، مولفه UI سریع و سبک‌وزن برای وب (Fast and light-weight UI components for the web) است.

Glimmer.js از سوی تیم Ember برای پاسخ به درخواست توسعه‌دهندگانی ساخته شد که اصرار داشتند قابلیت‌های Ember.Js را به‌ شکلی سبک‌تر، روان‌تر و کوچک‌تر در اختیار داشته باشند. تام دیل (Tom Dale) برخی از انتقادات در مورد کتابخانه Ember.js را شنید و از آن برای کمک به ساخت Glimmer.js استفاده کرد. Glimmer.js مؤلفه‌های سبک‌تر و کوچک‌تری دارد و از Ember CLI استفاده می‌کند. این کتابخانه می‌تواند به‌عنوان مؤلفه‌ای همراه با Ember.js، به‌صورت مستقل یا به‌عنوان یک مولفه وب به یک برنامه موجود اضافه شود. این کتابخانه تازه ساخته‌شده است و باید دید تا کجا می‌تواند پیش برود.

بررسی کتابخانه‌ها در این قسمت به پایان رسید. برای ادامه این مقاله و بررسی فریم‌ورک‌ها، قسمت بعد را دنبال کنید.

اگر تمایل به مطالعه بیشتر در این موضوع داشته باشید؛ شاید آموزش های زیر نیز برای شما مفید باشند:

آموزش جاوا اسکریپت (JavaScript)

آموزش اسکریپت برنامه نویسی jQuery

آموزش لاگین های کاربردی جی کوئری (jQuery)

حلقه for در جاوا اسکریپت — از صفر تا صد + مثال و کد

منبع