این مقاله تفاوت‌های بین چارچوب‌ها و کتابخانه‌ها را در محیط جاوا اسکریپت سمت کلاینت، که کدی است که در مرورگر وب شما اجرا می‌شود، به شما آموزش می‌دهد. با این حال، برخی از نکات مطرح‌شده در این مقاله برای محیط‌های دیگر نیز صدق می‌کند، زیرا کتابخانه‌ها و چارچوب‌ها بخشی از بسیاری از زمینه‌های مهندسی نرم‌افزار، مانند توسعه برنامه‌های موبایل بومی هستند.
بحث‌های این پست به جای تفاوت‌های کمی بین کتابخانه‌ها و چارچوب‌ها، بر تفاوت‌های کیفی متمرکز است. به عنوان مثال:
- کمی: چارچوب ها معمولاً از اصل وارونگی کنترل پیروی می کنند.
- کیفی: وقتی به دنبال شغل هستید، تجربه چارچوب می تواند برای کارفرمایان آینده جذابیت بیشتری داشته باشد.
چرا درباره کتابخانه ها و چارچوب ها یاد بگیریم؟
استفاده از کتابخانه و چارچوب جاوا اسکریپت در سراسر وب پربار است. به نظر می رسد هر وب سایت دیگری از برخی کدهای شخص ثالث به عنوان بخشی از منابع جاوا اسکریپت خود استفاده می کند. وزن صفحه وب با گذشت زمان بدتر می شود که بر کاربران تأثیر می گذارد . جاوا اسکریپت یک عامل کمک کننده بزرگ به وزن کلی صفحه است، و این همان جاوا اسکریپت است که اغلب شامل کتابخانه ها و چارچوب های شخص ثالث است.
گفتن «استفاده از چارچوب های جاوا اسکریپت را متوقف کنید» به اندازه کافی خوب نیست، زیرا فریم ورک ها مزایای بزرگی را برای توسعه دهندگان فراهم می کنند. چارچوب‌ها می‌توانند به شما در کدنویسی کارآمد و ارائه سریع ویژگی‌ها، از جمله مزایای دیگر کمک کنند. در عوض، باید خود را آموزش دهید تا بتوانید در زمان مناسب تصمیمی آگاهانه بگیرید.
"آیا امروز باید از یک کتابخانه یا چارچوب استفاده کنم؟" سوالی غیر معمول است که از خود بپرسید کتابخانه ها و چارچوب ها دو چیز کاملا متفاوت هستند. با این حال، کتابخانه‌ها و چارچوب‌ها اغلب با هم ترکیب می‌شوند و هرچه دانش بیشتری در مورد این دو داشته باشید، احتمال بیشتری برای تصمیم‌گیری آگاهانه در مورد استفاده از آنها خواهید داشت.
نمونه هایی از کتابخانه ها و چارچوب ها
ممکن است کدهای شخص ثالث را با نام‌های دیگری مانند ویجت‌ها، پلاگین‌ها، polyfills یا بسته‌ها متوجه شوید. با این حال، همه آنها معمولاً در دسته یک کتابخانه یا یک چارچوب قرار می گیرند. اساساً تفاوت این دو را می توان به شرح زیر خلاصه کرد:
- برای یک کتابخانه، کد برنامه شما کد کتابخانه را صدا می کند.
- برای یک چارچوب، کد برنامه شما توسط چارچوب فراخوانی می شود .
کتابخانه
کتابخانه‌ها ساده‌تر از چارچوب‌ها هستند و دامنه عملکردی محدودی را ارائه می‌دهند. اگر یک ورودی را به یک متد ارسال کنید و یک خروجی دریافت کنید، احتمالاً از یک کتابخانه استفاده کرده اید.
به این مثال از کتابخانه lodash نگاه کنید:
import lodash from 'lodash'; // [1]
const result = lodash.capitalize('hello'); // [2]
console.log(result); // Hello
همانطور که در مورد بسیاری از کتابخانه ها وجود دارد، خواندن این کد و درک آنچه که انجام می دهد عملی است. جادوی بسیار کمی وجود دارد :
- یک دستور
importکتابخانه lodash را به برنامه جاوا اسکریپت وارد می کند. - متد
capitalize()فراخوانی می شود. - یک آرگومان واحد به متد ارسال می شود.
- مقدار بازگشتی در یک متغیر ثبت می شود.
چارچوب
چارچوب‌ها معمولاً بزرگتر از کتابخانه‌ها هستند و بیشتر به وزن کلی صفحه کمک می‌کنند. در واقع یک چارچوب می تواند شامل یک کتابخانه باشد.
این مثال یک چارچوب ساده و بدون کتابخانه را نشان می‌دهد و از Vue استفاده می‌کند که یک فریمورک محبوب جاوا اسکریپت است:
<!-- index.html -->
<div id="main">
{{ message }}
</div>
<script type="module">
import Vue from './node_modules/vue/dist/vue.esm.browser.js';
new Vue({
el: '#main',
data: {
message: 'Hello, world'
}
});
</script>
اگر این مثال چارچوب را با نمونه کتابخانه قبلی مقایسه کنید، ممکن است این تفاوت ها را متوجه شوید:
- کد چارچوب تکنیک های متعددی را در بر می گیرد و آنها را در API نظری خود انتزاع می کند.
- توسعه دهندگان کنترل کاملی بر نحوه و زمان انجام عملیات ندارند. برای مثال، نحوه و زمانی که Vue رشته
'Hello, world'را در صفحه می‌نویسد، از شما جدا می‌شود. - نمونه سازی کلاس
Vueدارای برخی عوارض جانبی است که هنگام استفاده از فریم ورک ها رایج است، در حالی که یک کتابخانه ممکن است توابع خالص را ارائه دهد. - چارچوب یک سیستم قالب HTML خاص را به جای استفاده از خود شما تجویز می کند.
- اگر اسناد چارچوب Vue یا بیشتر اسناد چارچوب دیگر را مطالعه کنید، می توانید ببینید که چگونه چارچوب ها الگوهای معماری را تجویز می کنند که می توانید از آنها استفاده کنید. چارچوب‌های جاوا اسکریپت مقداری بار شناختی را از شما دور می‌کند، زیرا لازم نیست خودتان آن را بفهمید.
زمان استفاده از کتابخانه در مقابل چارچوب
پس از خواندن مقایسه‌های بین کتابخانه‌ها و چارچوب‌ها، ممکن است شروع به درک زمان استفاده از یکی یا دیگری کنید:
- یک چارچوب می تواند پیچیدگی را برای شما، توسعه دهنده، کاهش دهد. همانطور که بحث شد، یک چارچوب می تواند منطق، رفتار و حتی الگوهای معماری را از بین ببرد. به ویژه زمانی که یک پروژه جدید را شروع می کنید مفید است. یک کتابخانه می تواند به پیچیدگی کمک کند، اما معمولاً بر استفاده مجدد از کد تمرکز می کند.
- نویسندگان چارچوب از شما می‌خواهند که سازنده باشید و اغلب ابزارهای اضافی، نرم‌افزار اشکال‌زدایی و راهنماهای جامع را در میان منابع دیگر توسعه می‌دهند تا به شما در استفاده مؤثر از یک چارچوب کمک کنند. نویسندگان کتابخانه همچنین از شما می خواهند که سازنده باشید، اما ابزارهای تخصصی در کتابخانه ها غیر معمول هستند.
- اکثر فریم‌ورک‌ها یک نقطه شروع کاربردی مانند یک اسکلت یا دیگ بخار ارائه می‌کنند تا به شما در ساخت سریع برنامه‌های وب کمک کنند. یک کتابخانه بخشی از پایگاه کد از قبل ایجاد شده شما می شود.
- به طور کلی، فریم ورک ها پیچیدگی هایی را به پایگاه کد شما وارد می کنند. پیچیدگی همیشه در ابتدا آشکار نیست، اما می تواند در طول زمان خود را نشان دهد.
به عنوان یادآوری، شما معمولاً یک کتابخانه را با یک چارچوب مقایسه نمی‌کنید، زیرا آنها چیزهای مختلفی هستند که وظایف متفاوتی را انجام می‌دهند. با این حال، هر چه دانش بیشتری در مورد این دو داشته باشید، قدرت بیشتری خواهید داشت تا تصمیم بگیرید کدام یک برای شما بهترین است. تصمیم برای استفاده از یک چارچوب یا کتابخانه در نهایت به نیازهای شما بستگی دارد.
قابلیت تعویض
کتابخانه یا چارچوب خود را هر هفته تغییر نمی‌دهید. با این حال، درک نکات منفی بسته ای که شما را در اکوسیستم آن قفل می کند، تمرین خوبی است. همچنین توصیه می‌شود که درک کنید توسعه‌دهنده‌ای که تصمیم به استفاده از بسته شخص ثالث می‌گیرد تا حدودی مسئول ایجاد یک اتصال آزاد بین بسته و کد منبع برنامه است.
بسته ای که به کد منبع گره خورده است، حذف و تعویض با بسته دیگری سخت تر است. ممکن است نیاز به تعویض بسته داشته باشید زمانی که:
- باید بسته‌ای را که دیگر نگهداری نمی‌شود به‌روزرسانی کنید.
- متوجه می شوید که بسته برای کار کردن بیش از حد باگ است.
- در مورد بسته جدیدی که نیازهای شما را بهتر برآورده می کند، یاد می گیرید.
- الزامات محصول شما تغییر می کند و بسته دیگر مورد نیاز نیست.
این مثال را در نظر بگیرید:
// header.js file
import color from '@package/set-color';
color('header', 'dark');
// article.js file
import color from '@package/set-color';
color('.article-post', 'dark');
// footer.js file
import color from '@package/set-color';
color('.footer-container', 'dark');
مثال قبلی از بسته ثالث @package/set-color در سه فایل جداگانه استفاده می کند. اگر روی این کد کار می کنید و باید بسته شخص ثالث را جایگزین کنید، باید کد را در سه مکان به روز کنید.
از طرف دیگر، می‌توانید نگهداری را ساده کنید و استفاده از کتابخانه را در یک مکان خلاصه کنید، که در این مثال می‌توانید ببینید:
// lib/set-color.js file
import color from '@package/set-color';
export default function color(element, theme = 'dark') {
color(element, theme);
}
// header.js file
import color from './lib/set-color.js';
color('header');
// article.js file
import color from './lib/set-color.js';
color('.article-post');
// footer.js file
import color from './lib/set-color.js';
color('.footer-container');
در مثال قبلی، استفاده از کتابخانه مستقیم انتزاع شده است. بنابراین، اگر باید بسته شخص ثالث را تعویض کنید، فقط یک فایل را به روز می کنید. علاوه بر این، اکنون کار با کد آسان‌تر است زیرا فایل set-color.js داخلی یک تم رنگی پیش‌فرض را برای استفاده تعیین می‌کند.
سهولت استفاده
یک چارچوب ممکن است یک API پیچیده داشته باشد، اما چارچوب می‌تواند ابزارهای توسعه‌دهنده‌ای را ارائه دهد که استفاده از آن را به طور کلی آسان‌تر می‌کند. سهولت استفاده بر اساس عوامل زیادی است و می تواند بسیار ذهنی باشد. استفاده از چارچوب ممکن است سخت باشد زیرا:
- این فریم ورک دارای یک API ذاتاً پیچیده است.
- چارچوب مستند ضعیفی است و برای حل مشکلات به آزمون و خطای زیادی نیاز دارد.
- این چارچوب از تکنیک هایی استفاده می کند که برای شما و تیمتان ناآشنا هستند.
چارچوب ها می توانند این چالش ها را از طریق بهترین شیوه های رایج کاهش دهند، مانند موارد زیر:
- این چارچوب ابزارهای توسعه‌دهنده و تشخیصی را برای آسان‌تر کردن اشکال‌زدایی ارائه می‌کند.
- این چارچوب دارای یک جامعه فعال از توسعه دهندگان است که در مستندات، راهنماها، آموزش ها و ویدیوهای رایگان با یکدیگر همکاری می کنند. بعد از اینکه این محتوا را مصرف کردید، با چارچوب کارآمد هستید.
- این چارچوب یک API ارائه می‌دهد که از قراردادهای رایج کدنویسی پیروی می‌کند. شما با این چارچوب کارآمد هستید زیرا قبلاً چنین قراردادهایی را یاد گرفته اید و با سبک های کدنویسی آشنایی بیشتری دارید.
در حالی که این نکات معمولاً به چارچوب ها نسبت داده می شوند، می توانند به کتابخانه ها نیز نسبت داده شوند. به عنوان مثال، کتابخانه جاوا اسکریپت D3.js قدرتمند است و دارای یک اکوسیستم بزرگ است که کارگاه‌ها، راهنماها و مستندات را در میان منابع دیگر ارائه می‌دهد، که همگی بر سهولت استفاده از آن تأثیر می‌گذارند.
علاوه بر این، یک چارچوب معمولاً یک معماری را برای برنامه وب شما تجویز می کند در حالی که یک کتابخانه معمولاً با معماری موجود شما سازگار است، هر چه که باشد.
عملکرد
به طور کلی، چارچوب‌ها می‌توانند عملکرد را بیشتر از کتابخانه‌ها تحت تأثیر قرار دهند، اگرچه استثناهایی در این مورد وجود دارد. عملکرد وب یک منطقه بزرگ با موضوعات بسیار است، بنابراین این بخش ها به دو موضوع توجه می کنند: تکان دادن درخت و به روز رسانی نرم افزار.
تکان درخت
بسته‌بندی تنها یکی از جنبه‌های عملکرد وب است، اما تأثیر عملکرد بزرگی دارد، به خصوص با کتابخانه‌های بزرگتر. استفاده از تکان دادن درخت در حین واردات و صادرات به عملکرد کمک می کند زیرا کدهای غیر ضروری را برای برنامه پیدا کرده و هرس می کند.
وقتی کد جاوا اسکریپت را بسته‌بندی می‌کنید، مرحله مفیدی به نام تکان دادن درخت وجود دارد که یک بهینه‌سازی عملکرد ارزشمند است که می‌توانید در کد خود انجام دهید، اگرچه انجام آن با کتابخانه‌ها آسان‌تر از چارچوب‌ها است.
هنگامی که کد شخص ثالث را به کد منبع خود وارد می کنید، معمولاً کد را در یک یا چند فایل خروجی قرار می دهید. برای مثال، فایل‌های header.js ، footer.js ، و sidebar.js همگی در فایل output.js ترکیب می‌شوند، که فایل خروجی است که در برنامه وب خود بارگذاری می‌کنید.
برای درک بهتر لرزش درختان، این نمونه کد را در نظر بگیرید:
// library.js file
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
// main.js file
import {add} from './library.js';
console.log(add(7, 10));
برای نمایش، نمونه کد library.js عمداً در مقایسه با آنچه ممکن است در دنیای واقعی پیدا کنید، کوچک نگه داشته می شود، جایی که کتابخانه می تواند هزاران خط داشته باشد.
یک فرآیند بسته ساده ممکن است کد را با این خروجی صادر کند:
// output.js file
function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b;
}
console.log(add(7, 10));
اگرچه تابع subtract() در این برنامه مورد نیاز نیست، اما همچنان در بسته نهایی گنجانده شده است. کدهای غیر ضروری مانند این باعث افزایش حجم دانلود، تجزیه و کامپایل زمان و هزینه های اجرایی می شود که کاربران شما باید بپردازند. یک رویکرد اصلی تکان دادن درخت کد مرده را حذف می کند و این خروجی را تولید می کند:
// output.js file
function add(a, b) {
return a + b;
}
console.log(add(7, 10));
توجه داشته باشید که کد کوتاه تر و مختصرتر است. در این مثال، بهبود عملکرد ناچیز است، اما در یک برنامه دنیای واقعی که در آن کتابخانه هزاران خط طول دارد، اثر عملکرد می‌تواند بسیار مهم‌تر باشد. جالب توجه است که ابزارهای باندل مدرن مانند Parcel، Webpack و Rollup یک گام فراتر می روند زیرا آنها کوچک سازی و تکان دادن درخت را برای ایجاد یک بسته نرم افزاری بسیار بهینه سازی شده ترکیب می کنند. برای نشان دادن اثربخشی ابزارهای بسته، از Parcel برای ایجاد یک فایل بسته با نمونه کدهای قبلی استفاده کردیم. بسته تمام کدهای استفاده نشده را حذف کرد و این ماژول واحد را صادر کرد:
console.log(7+10);
Parcel به اندازه کافی هوشمند است تا عبارات واردات، تعاریف عملکرد و رفتار را در میان موارد دیگر حذف کند تا کد بسیار بهینه شده ایجاد کند.
بسته‌بندی تنها یکی از جنبه‌های عملکرد وب است، اما تأثیر عملکرد بزرگی دارد، به خصوص با کتابخانه‌های بزرگتر. تکان دادن درخت معمولا با کتابخانه ها ساده تر از فریمورک ها است.
به روز رسانی نرم افزار
برای بسیاری از کتابخانه‌ها و چارچوب‌ها، به‌روزرسانی‌های نرم‌افزاری قابلیت‌ها را اضافه می‌کنند، باگ‌ها را برطرف می‌کنند و در نهایت در طول زمان حجم آن افزایش می‌یابد. دانلود به‌روزرسانی‌ها همیشه ضروری نیست، اما اگر به‌روزرسانی‌ها شامل رفع اشکال، بهبود ویژگی‌های مورد نظر یا رفع‌های امنیتی باشد، احتمالاً باید به‌روزرسانی کنید. با این حال، هر چه داده های بیشتری را از طریق سیم ارسال کنید، عملکرد برنامه شما کمتر است و تأثیر عملکرد بیشتری بر تجربه کاربری شما خواهد داشت.
اگر اندازه کتابخانه بزرگ می شود، می توانید از تکان دادن درخت برای کاهش رشد استفاده کنید. از طرف دیگر، می توانید از جایگزین کوچکتری برای کتابخانه جاوا اسکریپت استفاده کنید. برای اطلاعات بیشتر، قابلیت تعویض را ببینید.
اگر اندازه یک فریمورک بزرگ شود، نه تنها تکان دادن درختان یک چالش بیشتر است، بلکه تعویض یک چارچوب با چارچوب دیگر می تواند دشوارتر باشد. برای اطلاعات بیشتر، قابلیت تعویض را ببینید.
اشتغال پذیری
این که بسیاری از شرکت‌ها برای توسعه‌دهندگانی که چارچوب خاصی را می‌شناسند، الزامات سختی دارند، کمی یک راز آشکار است. آنها ممکن است دانش شما را از اصول وب نادیده بگیرند و فقط بر دانش خاص شما از یک چارچوب جاوا اسکریپت خاص تمرکز کنند! درست یا غلط، این واقعیت برای بسیاری از مشاغل است.
آگاهی از چند کتابخانه جاوا اسکریپت به درخواست شغلی شما آسیبی نمی رساند، اما تضمین کمی وجود دارد که شما را متمایز کند. اگر چند فریم ورک محبوب جاوا اسکریپت را به خوبی می شناسید، این احتمال وجود دارد که کارفرمایان این دانش را در بازار کار فعلی برای توسعه دهندگان وب مطلوب ببینند. برخی از سازمان‌های بزرگ سازمانی با چارچوب‌های جاوا اسکریپت بسیار قدیمی گیر کرده‌اند و حتی ممکن است برای نامزدهایی که با چنین چارچوب‌هایی راحت هستند، ناامید باشند.
شما می توانید از این راز آشکار به نفع خود استفاده کنید. با این حال، با احتیاط و با در نظر گرفتن این ملاحظات به بازار کار برخورد کنید:
- به یاد داشته باشید که اگر زمان زیادی را در حرفه خود فقط با یک چارچوب بگذرانید، ممکن است تجربه یادگیری با سایر چارچوب های مدرن تر را از دست بدهید.
- توسعه‌دهنده‌ای را در نظر بگیرید که کاملاً اصول توسعه نرم‌افزار یا توسعه وب را نمی‌داند، اما به‌عنوان توسعه‌دهنده چارچوب استخدام شده است. این برنامه‌نویس کد مؤثری نمی‌نویسد، و ممکن است کار بر روی چنین پایگاه کدی برای شما سخت یا طاقت‌فرسا باشد. در برخی موارد، این سناریو می تواند منجر به فرسودگی شغلی شود. به عنوان مثال، ممکن است مجبور شوید کد را اصلاح کنید یا کد را تنظیم کنید زیرا کند است.
- هنگامی که توسعه وب را یاد می گیرید، بهترین راه این است که با تمرکز شدید روی اصول توسعه وب، توسعه نرم افزار و مهندسی نرم افزار شروع کنید. چنین پایه قوی به شما کمک می کند تا هر چارچوب جاوا اسکریپت را سریع و موثر انتخاب کنید.
نتیجه گیری
برای درک اینکه چارچوب ها و کتابخانه های جاوا اسکریپت چگونه با هم مقایسه می شوند، کار سختی را انجام دادید. شما اغلب چارچوب ها یا کتابخانه ها را انتخاب نمی کنید مگر اینکه روی پروژه های سبز یا به عنوان مشاور کار کنید. با این حال، هنگامی که چنین تصمیماتی مطرح می شود، هرچه دانش بیشتری در مورد موضوع داشته باشید، تصمیم شما آگاهانه تر است.
همانطور که آموخته اید، انتخاب چارچوبی که انجام می دهید - و در برخی موارد، انتخاب کتابخانه - می تواند به طور قابل توجهی بر تجربه توسعه و کاربران نهایی شما تأثیر بگذارد، مانند عملکرد.