https://virgool.io/feed/@aminda یک گیک کامپیوتر و تکنولوژی fa 2026-07-06 13:40:31 https://files.virgool.io/upload/users/63263/avatar/tP8kzF.png?height=120&width=120 https://virgool.io/@aminda https://virgool.io/@aminda/%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%D8%AF%D8%B1-%D8%B3%D9%85%D8%AA-%DA%A9%D9%84%D8%A7%DB%8C%D9%86%D8%AA-%D9%88-%D8%A7%D9%86%D8%AA%D8%B4%D8%A7%D8%B1-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D8%A8%D8%AE%D8%B4-%D8%AF%D9%88%D9%85-l83fj6nobjkq پیشنهاد می کنم ابتدا مقدمه این سری از مقالات رو بخونید تا پیش زمینه خوبی داشته باشین برای شروع لینکعملیات کامپایل کردن کدهاتوسعه دهندگان زبان جاوا اسکریپت در طول سال‌ها، دستورات و قابلیت های بیشتری را به آن اضافه کرده اند. و در ES2015 یا همان ES6 به طور موثر مقدار سینتکس ها و ویژگی ها در این زبان تقریبا دو برابر شد.هر بار که مرورگر ها نسخه جدیدی را منتشر می کنند، آن نسخه درک ثابتی از نسخه های خاص از زبان JS دارد. از آنجایی که هر نسخه مرورگر ممکن است برای سال‌های زیادی مورد استفاده قرار گیرد، توسعه‌دهندگان باید کد را تنها با استفاده از نسخه ای از زبان جاوا اسکریپت ارسال کنند که توسط حداکثر مرورگرها پشتیبانی شود(مثلا ورژن ES5 زبان جاوا اسکریپت که اکثر مرورگرها پشتیبانی خیلی خوبی از اون دارن). از طرف دیگه توسعه دهندگان تمایل دارند که با استفاده از آخرین ورژن زبان جاوا اسکریپت و بهترین سینتکس، کد بنویسند . به طور ساده تر میشه گفت که بعضی از کاربر ها از نسخه قدیمی مرورگرها استفاده می کنند و به سرعت به سمت نسخه های جدید مرورگرها که درک درستی از ورژن های جدید js دارند نمی روند و از آن طرف هم چون معمولا در نسخه های جدید زبان js کد نویسی ساده تر ، تمیز تر و آسان تر میشه دولوپر ها دوست دارن که بتونن از سینتکس ها و ویژگی های جدید آخرین ونسخه زبان استفاده کنن، برای رفع این مشکل توسعه دهندگان باید کد JS ای را که نوشته‌اند به نسخه‌ای معادل از سینتکس قدیمی‌تر ، کامپایل یا تبدیل کنند تا مرورگرهای بیشتری از برنامه آنها پشتیبانی کند .برای حل این مشکل در حال حاضر بهترین کار استفاده کردن از کامپایلر ها هستش که پرکاربرد ترین آنها کامپایلر Babel هستش. که این کامپایلر ابزار استانداردی است که برای کامپایل متقابل کد JS در انواع مختلف ورژن های آن استفاده می شود ، و همچنین این کامپایلر دارای تعداد وسیعی از پلاگین ها است که قدرت اون را بیشتر می کنه ! حتی کد را بوسیله اون میتوان برای تبدیل به ماژول فرمت خاص نیز استفاده کرد.برای مثال قطعه کد زیر را مشاهد کنید که از یکسری قابلیت های ورژن ES6 زبان JS مثل کلمات کلیدی let و const و همچنین توابع arrow و در خط آخر از shorthand object declaration استفاده میکنه :export const myFunc = () => { let longVariableName = 1; return {longVariableName}; }حال اگر بوسیله کامپایلر بابل این قطعه از کد را بخواهیم به فرمت CommonJs تبدیل کنیم خروجی ما به شکل زیر می شود :&quotuse strict&quot Object.defineProperty(exports, &quot__esModule&quot, { value: true }); exports.myFunc = void 0; var myFunc = function myFunc() { var longVariableName = 1; return { longVariableName: longVariableName }; }; exports.myFunc = myFunc;در حال حاضر بیشتر از این کامپایلر برای تبدیل کد های جدید به نسخه ES5 جاوا اسکریپت استفاده میشه که پشتیبانی وسیعی رو مرورگرها از این نسخه دارن.( البته در فریمورکی مثل ری اکت هم از این کامپایلر استفاده وسیعی میشه ! )علاوه بر این، بسیاری از زبان‌های «کامپایل به JS» در صنعت استفاده می‌شوند ( که برخی از این زبان‌های خاص گمنام هستند، برخی برای چند سال محبوب بودند و از آن زمان منقرض شده‌اند مثل (CoffeeScript) ) و در مواقعی نیاز است که آنها نیز به نسخه خوبی از جاوا اسکریپت کامپایل شوند .رایج‌ترین زبان کامپایل به JS که در زمان حاضر استفاده می‌شود TypeScript است که یک ابرمجموعه با تایپ های استاتیک از JS است که توسط مایکروسافت ایجاد شده است. کامپایلر TypeScript خودش مقادیر تایپ ها را در زمان کامپایل حذف می‌کند و JS ساده را خروجی می‌دهد. مشابه با کامپایلر بابل، همچنین می‌تواند سینتکس جدیدتر را به نسخه‌های مختلف زبان قدیمی کامپایل کند.// Input: TypeScript syntax is JS with type annotations const add2 = (x: number, y: number) => { return x + y; }; // Output: plain JS, no type annotations const add2 = (x, y) => { return x + y; };عملیات باندل کردندلایل متعددی وجود دارد که کد JS را نباید آنطور که ما نوشته ایم به مرورگر تحویل بدهیم :1- کد نوشته شده با فرمت CommonJS توسط مرورگرها قابل ارزیابی و اجرا نیست !2-کد نوشته شده در قالب فرمت ES Module می تواند باشد، اما نیاز به کار دقیق دارد تا همه فایل ها و URL های مسیر به درستی تنظیم شوند.3-مرورگرها مورد استفاده توسط مصرف کنندگان احتمالاً از تمام سینتکس مدرن پشتیبانی نمی کنند4- کد بیس ( Codebase ) ممکن است از هزاران فایل JS مجزا تشکیل شده باشد و بارگیری هر فایل به صورت جداگانه خیلی زمان بر می شود.5- منبع اصلی کد حاوی کامنت ها ، فضاهای خالی و نام متغیرهای طولانی تر است و توسعه دهندگان باید تعداد بایت های ارسال شده به مرورگر را به حداقل برسانند تا صفحات سریعتر دریافت و بارگذاری شوند.6- زبان‌هایی مانند TypeScript توسط مفسرهای JS پشتیبانی نمی‌شوند - کد اصلی آنها باید به سینتکس ساده JS کامپایل شود.به همین دلایل، کد منبع JS ما باید برای استفاده بهینه توسط مرورگرها آماده سازی شود که به این عملیات باندل کردن میگوییم . که این عملیات باید هم در محیط توسعه و هم در خروجی نهایی کد اتفاق بیفتد.فرآیند باندل کردن از بررسی درخت ایمپورت و اکسپورت ها شروع شده و ابتدا از فایل نقطه ورودی پروژه یا entry point پروژه ماننده (مانند src/index.js) شروع به پردازش می‌کند. سپس هر فایل ایمپورت شده در این نقطه ورودی به لیست فایل هایی که باید پردازش شوند اضافه می شود.باندلر تمام ایمپورت های درخواستی را پردازش می‌کند، ترتیب بارگیری آنها را تعیین می‌کند، و ماژول ها را که در چند فایل قرار داده شده اند را خروجی می‌دهد و برنامه را هنگام لود فایل باندل شده توسط مرورگر، مقداردهی اولیه می‌کند.ابزارهای باندل سازی نیز معمولاً از چندین مرحله پردازش اضافی در طول فرآیند باندل کردن پشتیبانی می‌کنند. به طور خاص، باندلرها معمولاً به شکل زیر پیکربندی می شوند:یک کامپایلر مانند Babel یا TypeScript را روی همه فایل های JS/TS اجرا می کنند .اگر از TS استفاده می کنید، با کامپایلر TS چک می کند تا مطمئن شود که کد واقعاً کامپایل شده استقابلیت ایمپورت کردن و پردازش منابعی مانند فایل های CSS و تصاویر را فعال می کنداندازه فایل خروجی پروژه را با کوچک کردن آن (فرآیند minifying کردن که آن را به عنوان uglifying هم میشناسیم) بهینه می کند تا آن را تا حد ممکن کوچک نگه دارد.minifying کد های JS شامل کوچک کردن حجم فایل خروجی کد تا حد امکان است که این فرایند با کارهایی نظیر حذف فضای خالی و کامنت ها، جایگزینی نام های طولانی با نام های کوتاه تر و استفاده از کوتاه ترین نسخه های ممکن سینتکس زبان.به علاوه، minifier ها می توانند کد مرده و بی کاربرد را شناسایی کرده و آن را حذف کنند. و کد هایی از جاوا اسکریپت که مثلا با فلگی مثل زیر نوشته شده اند را if (process.env.NODE_ENV !== 'production') حذف میکند از فایل نهایی...همان خروجی کامپایل‌شده بوسیله کامپایلر بابل در بالا وقتی کوچک‌سازی می‌شود به این شکل تقریبا تبیدل می شود:&quotuse strict&quotObject.defineProperty(exports,&quot__esModule&quot,{value:!0}),exports.myFunc=void 0;var myFunc=function(){return{longVariableName:1}};exports.myFunc=myFunc;ابزار Webpack پرکاربردترین باندلر JS است. ابزارهای دیگری مانند Parcel، Snowpack و ESBuild نقش های مشابهی را انجام می دهند، اما هرکدام مزایا و محدودیت های خاص خودشان را دارند و برای اهداف مشخصی استفاده می شوندنقشه کد ها یا Source Mapsبه دلیل انجام این فرآیند ها روی کد ما، کد لود شده توسط یک مرورگر به یک فرم کاملا غیر قابل شناسایی تبدیل میشود که باعث می شود که خوانایی و اشکال زدایی و دیباگ کردن آن خیلی سخت و غیرممکن شود . برای حل این مشکلات، ابزارهای توسعه نقشه های کد را می نویسند ، که بوسیله این نقشه ، کد تبدل شده را به نقاط مرتبط با کد منبع اصلی مرتبط می کنند . این کار اجازه می دهد تا debuggers مرورگر برای نشان دادن کد منبع اصلی، حتی اگر یک زبان غیر از جاوا اسکریپت باشه نیز مشکلی نداشته باشد . مرورگر "منبع اصلی کد " را در فایل های مجزا نشان می دهد و به توسعه دهندگان اجازه می دهد تا "منبع اصلی" را با تنظیم نقطه های breakpoint و مشاهده محتویات متغیر پیدا کنند.محیط ها و ابزارهای توسعهران تایم Node.jsیک ران تایم یا محیط اجرای کد های JS خارج از محیط مرورگر است. معادل JRE برای جاوا است یا NET Framework SDK یا ران تایم اجرایی پایتون است. که شامل موتور V8 کروم است که برای استفاده به عنوان یک فایل اجرایی مستقل، به همراه کتابخانه های استاندارد از APIها برای تعامل با سیستم فایل، ایجاد سوکت‌ها و سرورها، و همراه یا موارد دیگر پکیج شده است.پکیج منیجر NPMدر حالت کلی "NPM" سه معنی دارد:الف : یک منبع رجیستری برای کتابخانه های جاوا اسکریپت است که میزبان کتابخانه های JS شخص ثالث و کتاب خانه های های منتشر شده توسط انجمن است.ب : یک CLI منبع باز است که برای نصب بسته ها از آن رجیستری استفاده می شودپ : NPM شرکتی است که رجیستری را اجرا می کند و کلاینت CLI را توسعه می دهد (که اخیراً توسط مایکروسافت خریداری شده است)کتابخانه ها و بسته های نصب شده بوسیله NPM در پوشه node_modules قرار می گیرند. مثلا دستور ، npm install redux آخرین آرشیو منتشر شده از این پکیج redux را از سرورهای رجیستری NPM دانلود می کند و محتویات را در پوشه node_modules/redux قرار می دهد.مدیریت بسته Yarn یک ابزار جایگزین برای NPM است که همان پکیج ها ها را از همان رجیستری NPM عمومی نصب می کند. این ابزار همان قابلیت‌های اصلی ابزار npm را دارد، اما گزینه‌های پیکربندی متفاوتی را ارائه می‌کند.ابزارهای ساخت Node یا Node Build Toolsاز آنجایی که اکثر ابزارهای کمکی توسعه JS توسط توسعه دهندگان JS برای توسعه دهندگان JS نوشته می شوند، خود این ابزارها معمولاً بوسیله زبان JS نوشته می شوند، که شامل ابزارهای پرکاربرد مانند Babel، Webpack، ESLint و بسیاری دیگر هستند ، بنابراین، برای اجرای آنها، باید Node.js را در محیط توسعه خود نصب کرده باشید ( در کامپیوتری که قصد برنامه نویسی با جاوا اسکریپت را دارید ) ( البته همانطور که بعدا توضیح داده میشود ، برای اجرای کد کلاینت خود در مرورگر نیازی به نصب Node.js روی سرور ندارید، مگر اینکه خود برنامه سرور خود را نیز بوسیله جاوا اسکریپت نوشته باشید.)اخیراً روند جدیدی از ایجاد ابزارهای ساخت JS بوسیله زبان های پرسرعتی مثل Rust یا Go ایجاد شده است که هدف آنها ایجاد کامپایل و باندلینگ بسیار سریعتر از طریق استفاده از کد native و موازی سازی است . البته بسیاری از این ابزارها هنوز به استفاده زیاد بوسیله عموم برنامه نویس های جاوا اسکریپت نرسیده‌اند، اما پتانسیل بالقوه آنها به اندازه‌ای بزرگ است که این ابزارها احتمالاً در آینده فراگیر میشوند.البته نمونه هایی عملیاتی از این ابزار های ساخت هم داریم که به مرحله اجرا رسیده اند و سرعت توسعه رو به مقدار زیادی بالا برده اند مانند کامپایلری که فریم ورک Next js در ورژن 12 ام خودش معرفی کرده است که براساس زبان Rust نوشته شده است و مدعی هستند حدود 3 برابر قابلیت Fast Refresh را بالا برده است و حدود 5 برابر هم سرعت build پروژه را بالا برده !سرورهای توسعه یا Dev Serversاز آنجا که کد اصلی که ما به عنوان توسعه دهنده آن را مینویسیم باید بارها و بارها مجددا دوباره کامپایل شود و به صورت محلی یا لوکال برای ما نمایش داده شود ، فرآیند های توسعه کد معمولا شامل راه اندازی یک سرور Development هستند ، یک فرایند جداگانه ای است که تغییر کد را تشخیص می دهد و تغییرات را مثلا در مرورگر برای ما نمایش می دهند . سرور DEV به طور معمول به عنوان یک پروکسی HTTP عمل می کند و درخواست های ارسال شده برای داده ها و منابع را به یک سرور نرم افزاری واقعی منتقل می کند.یک مثال از کارکرد آنها به این صورت است:فرآیند سرور برنامه ( سرور APP ) به پورت 8080 گوش می کندفرایند سرور توسعه ( سرور dev ) برنامه های کلاینتی ما به پورت 3000 گوش می کنددر سمت توسعه کلاینتی ،توسعه‌دهنده برای مشاهده صفحه به آدرس http://localhost:3000 در کامپیوتر خودش مراجعه می‌کند سپس سرور توسعه در پورت 3000 درخواست را دریافت می کند، صفحه HTML و کد های JS را از حافظه بارگیری می کند و آن را نمایش می دهد. هنگامی که مرورگر http://localhost:3000/images/avatar.png را درخواست می کند، سرور dev آن را به سرور APP در http://localhost:8080/images/avatar.png ارسال می کند. به طور مشابه، درخواست داده توسط مرورگر برای دریافت http://localhost:3000/items به سرور برنامه در آدرس http://localhost:8080/items ارسال می شود و پاسخ از طریق سرور توسعه به مرورگر ارسال می شود .ابزاری مانند Webpack یک سرور توسعه‌دهنده از پیش ساخته شده در دسترس ما قرار می دهد و ابزارهای دیگری مانند Create-React-App اغلب در اطراف سرور توسعه دهنده Webpack قرار می‌گیرند تا قابلیت‌های بیشتری را برای ما فراهم کنند.قابلیت Hot Module Reloadingبه طور معمول، کامپایل مجدد یک برنامه وب نیاز به بارگیری کامل صفحه برای مشاهده کد تغییر یافته در حال اجرا دارد. وقتی صفحه به‌روزرسانی می‌شود، هر state یا حالتی که در برنامه قرار داده شده است را پاک می‌کند.ابزارهایی مانند Webpack توانایی "Hot Module Reloading" را ارائه می دهند. هنگامی که یک فایل ویرایش می شود، سرور توسعه تغییرات را دوباره کامپایل می کند، سپس یک اعلان به کد کلاینت در مرورگر ارسال می کند. سپس کلاینت می‌تواند با توجه به اعلان رسیده تغییرات فایل ها را متوجه شود، آنگاه نسخه جدید کد را مجدداً وارد می کند و کد قدیمی را با کد جدید جایگزین کند و برنامه همچنان در حال اجرا می ماند.ابزارهای دیگری مانند کتابخانه React دارای حالتی به نام "Fast Refresh" هستند که می توانند از این قابلیت بارگیری مجدد ماژول برای تعویض بخش های خاصی از برنامه استفاده کنند، مانند جایگزینی اجزای کامپوننت های React در زمان درست.انتشار پروژه یا Deploymentارائه خروجی Build شده :خروجی یک فرآیند Build باندل شده ، پوشه ای پر از فایل های JS، HTML، CSS و فایل های تصویری استاتیک است. در اینجا ساختار خروجی یک برنامه معمولی React آمده است:/my-project/build - index.html /static /css - main.34928ada.chunk.css - 2.7110e618.chunk.css /js - 2.e5df1c81.chunk.js - 2.e5df1c81.chunk.js.map - main.caa84d88.chunk.js - main.caa84d88.chunk.js.map - runtime-main.d653cc00.js - runtime-main.d653cc00.js.map /media - image1.png - image2.jpg - fancy-font.woff2اینها فایل های استایک ساده ای هستند که می توانند توسط هر وب سروری پردازش شوند. و برای استقرار این فایل‌ها و انتشار سایت، باید در مکانی مناسب در دستگاهی که برنامه سرور را میزبانی می‌کند، آپلود شوند. این کار اغلب با استفاده از پروتکل انتقال فایل مانند SFTP یا FTP انجام می شود.افزودن ویژگی با Polyfillsبسیاری از ویژگی ها جدید و API های جدید وجود دارند که مرورگرهای قدیمی از آنها پشتیبانی نمی کنند، ونمی توان آنها را با سینتکس کامپایل به گذشنه( backwards-compiling ) مدیریت کرد. و شامل توابع داخلی، کلاس ها و انواع داده می شوند. برای نمونه می توان از متد String.padStart و ساختار داده Map نام برد .با این حال، برخی از این موارد را هنوز هم می توان با Polyfills ارائه شده توسط توسعه دهندگان به مروگر اضافه کرد.Polyfills کد اضافی است که هنگام بارگذاری یک برنامه اجرا می شود، تشخیص می دهد که آیا یک ویژگی مشخص در زمان اجرا در محیط فعلی وجود دارد یا خیر، و یک پیاده سازی مصنوعی معادل را به صورت پویا و داینامیک اضافه می کند.به عنوان مثال، یک polyfill برای متد ()String.padStart ممکن است چیزی شبیه به کد زیر باشد :if (!String.prototype.padStart) { String.prototype.padStart = function padStart(targetLength,padString) { // actual logic here } }تقسیم کردن کدها یا Code Splittingحتی با انجام عملیات کوچک‌سازی( minification )، کد های نهایی ما می‌توانند بسیار بزرگ شوند (250K، 1MB یا بدتر) . و بزرگ شدن و حجیم شدن یک فایل سرعت دریافت آن را کاهش می دهد و در نهایت باعث کاهش عملکرد سایت نوشته شده خواهیم بود ، که اغلب به دلیل استفاده از کتابخانه های شخص ثالث برای انجام عملکردهای اضافی است.تقسیم کد یا Code Splitting به باندلرها اجازه می دهد تا فایل های بسیار بزرگ را به قطعات کوچکتر ( chunks ) تقسیم کنند. که این chunk های اضافی تولید شده یا به‌عنوان تگ‌های اضافی به صفحه HTML میزبان اضافه می‌شوند، یا در حین اجرای برنامه به صورت داینامیک دانلود می‌شوند.هر کدام از این قطعات ممکن است رفتار متفاوتی را داشته باشند برخی از این تکه ها ممکن است فقط حاوی کد کتابخانه شخص ثالث باشند که به آنها «vendor chunks» میگوییم که قابلیت این را دارند کهتوسط مرورگر ذخیره شوند و فقط اولین باری که کاربر از یک سایت بازدید می‌کند دانلود شود. یا برخی دیگر از تکه‌ها ممکن است منطق و لاجیک مشترکی باشند که بین چندین بخش از یک برنامه به اشتراک گذاشته می‌شوند، مانند توابع utilities که آنها را نوشته ایم ودر چند قسمت مختلف برنامه مانند صفحه اصلی سایت و صفحه مدیریت استفاده شود. برخی از تکه‌ها ممکن است تنها زمانی که کاربر یک ویژگی خاص را فعال می‌کند، به صورت"lazy loaded" باشند.به عنوان مثال، یک ویرایشگر متن ممکن است 500K اضافی به بسته نهایی برنامه ما اضافه کند، اما فقط در یک مدال (Modal) خاص استفاده شود، و کد مدالی که نوشته ایم می تواند به صورت داینامیک کتابخانه ویرایشگر متن را ایمپورت کند. سپس باندلر آن ایمپورت پویا را شناسایی می‌کند، کد ویرایشگر را به یک تکه جداگانه تقسیم می‌کند، و این قطعه تنها زمانی دانلود می‌شود که کاربر آن مدال را باز کند. aminda aminda Sat, 21 May 2022 12:20:52 +0430 https://virgool.io/@aminda/%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%D8%AF%D8%B1-%D8%B3%D9%85%D8%AA-%DA%A9%D9%84%D8%A7%DB%8C%D9%86%D8%AA-%D9%88-%D8%A7%D9%86%D8%AA%D8%B4%D8%A7%D8%B1-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D8%A8%D8%AE%D8%B4-%D8%A7%D9%88%D9%84-wl5bkvxkzvhb پیشنهاد می کنم ابتدا مقدمه این سری از مقالات رو بخونید تا پیش زمینه خوبی داشته باشین برای شروع لینکجاوا اسکریپت : فرآیندهای توسعه و ساخت برای درک این موضع که چرا در حال حاضر زبان جاوا اسکریپت به این گستردگی استفاده میشه لازمه بدونیم که در طول زمان این زبان چگونه تکامل پیدا کرده .این نقل قول از آقای Eric Lippert ، توسعه دهنده سابق جاوا اسکریپت و مرورگر IE در مایکروسافت که برای توضیح ابتدای پیدایش و توسعه جاوا اسکریپت است قابل توجه هستش :هدف طراحی جاوا اسکریپت این بود که وقتی که موس روی میمون رفت شروع به رقصیدن کند. ( المنت های صفحه اینترکتیو و زنده شوند ). در ابتدا اسکریپت ها اغلب یک خط بودند. ما ده خط اسکریپت را کاملاً عادی در نظر گرفتیم، صد خط را بزرگ و هزاران خط اسکریپت برای ما ناشناخته بود. این زبان مطلقاً برای برنامه نویسی در مقیاس بزرگ طراحی نشده بود و تصمیمات اجرایی ما، اهداف ، عملکرد و... بر اساس این فرض بود.این تعریف از سایت https://javascript.info هم میتونه بعضی چیز هایی رو که در بالا اشاره شدن رو برای شما روشن تر کنه :جاوا اسکریپت در ابتدا برای زنده کردن صفحات وب ایجاد شد و به برنامه های که با این زبان نوشته میشوند اسکریپت می گویند. اسکریپت ها به صورت متن ساده ( plain text ) ارائه و اجرا می شوند. آنها برای اجرا نیاز به آماده سازی یا ویرایش خاصی ندارند.امروزه برنامه های بزرگ نوشته شده به این زبان ممکن است از صدها هزار خط کد تشکیل شده باشند . که این ویژگی یک رویکرد کاملاً متفاوت برای مدیریت کردن محدودیت‌ها ، نحوه نوشتن این زبان ، ساخت و ارائه برنامه‌ها را لازم دارد. به زبان ساده تر یعنی اینکه با توجه به بزرگی اپلیکیشن های موجود برای توسعه و نوشتن این زبان در مقایسه با به زمان ابتدایی استفاده از آن بایست در زمینه های نوشتن درست کد ها و اجرای بهینه آنها و ساخت و نگه داری آنها رویکرد جدیدی را توسعه دهندگان این زبان در پیش بگیرن !این محدودیت ها منجر به رویکرد توسعه بسیار متفاوتی نسبت به روزهای اولیه شده و توسعه دهندگان وب مدرن امروزی به جای نوشتن چند خط کد جاوا اسکریپت و قرار دادن آنها در یک صفحه HTML برای اجرا شدن، از زنجیرهای از ابزارهای پیچیده ساخت استفاده می کنند که معادل کامپایلرهای زبان هایی مانند C++ یا جاوا هستند.فرمت های ماژول ها در جاوا اسکریپتتقریباً همه زبان‌ها دارای سینتکسی به خصوص برای استفاده و اعلام «ماژول‌ها» یا «پکیج ها» هستند.برای توسعه دهنده هایی که در ابتدای راه هستند لازمه که ذکر کنم ماژول در جاوا اسکریپت یک فایل حاوی کد های مرتبط است ( فایلی است که درون خودش قطعه کدی دارد که ما میخواهیم آن قطعه کد را وارد فایل حاضر خودمان کنیم ) که برای استفاده از کد ها و توابع این فایل ، آن را وارد فایلی که اکنون در آن هستیم میکنیم ( منابع برای مطالع بیشتر منبع اول و منبع دوم )به عنوان مثال، یک فایل در زبان جاوا ممکن است اعلام کند که بخشی از pakage com.my.project است وسپس با دستور import some.other.project.SomeClass یک وابستگی به پکیج دیگری را شما اعلام کنید.زبان های C#، Python، Go، و Swift همگی تعریف پکیج و دستور import/export مخصوص خود را دارند.اما جاوا اسکریپت یکی از این زبان ها نیست !برخلاف تمام این زبان‌ها، جاوا اسکریپت در ابتدا هیچ ساختار قالب ماژول داخلی نداشت. در سال های ابتدایی پیدایش این زبان، کد های جاوا اسکریپت به صورت تگ‌های درون خطی ( inline) مستقیماً در HTML یا به‌عنوان فایل‌های js کوچک با چند متغیر گلوبال مشترک نوشته می‌شد. با پیشرفت دنیای وب و بزگتر شدن کد بیس های برنامه های جاوا اسکریپتی، جامعه توسعه دهندگان این زبان شروع به اختراع قالب های ماژول خود کردند تا به ارائه ساختار برای کدها و کپسوله سازی( ایزوله سازی) کد ها کمک کنند. که هر یک از این فرمت ها برای حل مشکلات و موارد استفاده ( use case ) مختلف اختراع شده بودند.فرمت ماژول قدیمیاضافه کردن چندین تگ اسکریپت به یک صفحه میتونه مشکلات متعددی رو بوجود بیاره ! تعیین وابستگی بین فایل های اسکریپت مختلف و بارگذاری آنها به ترتیب مناسب می تواند کار را بسیرا سخت کنه و همچنین، از آنجایی که همه متغیرهای سطح بالا ( top-level variables ) فضای نام ( namespace ) گلوبال یکسانی را اشغال می کنند، بسیار قابل پیش بینی هست که به طور تصادفی متغیرهایی با نام یکسان بر یکدیگر تاثیر بزران و باگ های عجیبی رو بوجود بیارن !مثال زیر رو ببینید که متغیر delay رو در دو ماژول مختلف با مقادیر مختلف داریم ! و در هنگام استفاده از آن ممکن است به باگ بخوریم ...<script src=&quotjquery.min.js&quot> <script src=&quotjquery.someplugin.js&quot> <script src=&quot./components/dropdown.js&quot> <script src=&quot./components/modal.js&quot> <script src=&quot./application.js&quot> // dropdown.js var delay = 2000; // in ms // modal.js var delay = 4000; // in ms // application.js // Oops - is it 2000 or 4000? console.log(delay)برای حل مشکلات اینچنینی از دو الگو و پترن توابع IIFE (با تلفط "ایفی") و AMD استفاده می شد !توابع IIFE یا Immediately Invoked Function Expressions الگویی هستند که متکی به متغیرهای JS هستند که به نزدیکترین تابع محدود می شوند. IIFE شامل تعریف یک تابع جدید و سپس فراخوانی فوری آن برای به دست آوردن نتیجه مورد نظر است. IIFE به تابعی گفته میشه که به محض تعریف شدن، اجرا میشه. سینتکس نوشتن اون به صورت زیر است ( منابع برای مطالعه بیشتر : منبع اول و منبع دوم )( function () { })();توابع IIFE کپسوله‌سازی را فراهم می‌کنند و جایی که یک IIFE یک آبجکتی را بازگشت بدهد که ساختار یا API عمومی آن را تعریف کرده است ، به عنوان مبنای الگوی revealing module ( "ماژول آشکار" ) استفاده می‌شود، (و معادل یک تابع فاکتوری یا کلاس کانستتراکتور هستند):// dropdown.js (function(){ var delay = 2000; // in ms APP.dropdown.delay = delay; }()); // modal.js const modalAPI = (function(){ // No name clash - encapsulated in the IIFE var delay = 4000; // in ms APP.modal.delay = delay; $(&quot#myModal&quot).show(); function hideModal() { $(&quot#myModal&quot).hide() } // return a &quotpublic API&quot for the modal by exposing methods return { hideModal : hideModal } }());الگو AMD یا Asynchronous Module Definition به طور خاص برای استفاده توسط مرورگرها طراحی شده بود . نحوه کار آن به این صورت است که در ابتدا یک کتابخانه مخصوص که کار آن لود کردن ماژول های AMD است ، ابتدا یک تابع به نام define را به صورت گلوبال ایجاد می کند و سپس ماژول‌های AMD، تابع define را فراخوانی می‌کنند و در آرایه‌ای از نام‌های ماژول که به آن وابسته هستند و تابعی که به عنوان بدنه ماژول عمل می‌کند، عبور میکنند. تابع بدنه ماژول تمام وابستگی های درخواستی ( requested dependencies ) را به عنوان آرگومان ورودی دریافت می کند و ممکن است هر مقدار را به عنوان "خروجی" یا export خود برگرداند. سپس کتابخانه لودر بررسی می کند که آیا تمام وابستگی های درخواستی ثبت و بارگذاری شده اند یا خیر. اگر این کار به درستی انجام نشده باشد، به صورت بازگشتی وابستگی‌های دیگر را به سبک آبشاری دانلود می‌کند، و راه خود را به زنجیره وابستگی برمی‌گرداند تا هر تابع ماژول را با وابستگی‌هایش مقداردهی اولیه کند.// moduleA.js // Loader library adds a global `define()` function define([&quotjquery&quot, &quotmyOtherModule&quot], function($, myOtherModule) { // Body of the function is the module definition const a = 42; const b = 123; function someFunction() { } // Return value is the &quotexports&quot of the module // Can do &quotnamed exports&quot by returning object with many values return {a : a, publicName : b, someFunction : someFunction} }); // moduleB.js define([&quotbackbone&quot], function(Backbone) { const MyModel = Backbone.Model.extend({}); // Can do a &quotdefault&quot export by just returning one thing // instead of an object with multiple things inside return MyModel; });توضیحات بالا عجیب و غریب و گنگ بود نه ؟! :|بزارین کمی ساده ترش کنیم ، کد زیر رو مشاهده کنید :define(['myModule', 'myOtherModule'], function(myModule, myOtherModule) { console.log(myModule.hello()); });آنچه در اینجا اتفاق می افتد این است که تابع define آرایه ای از هر یک از وابستگی های ماژول را به عنوان اولین آرگومان خود می گیرد ، سپس این وابستگی‌ها در background بارگذاری می‌شوند (به شیوه‌ non-blocking)، و پس از لود کامل، تابع کال بک درونی را فراخوانی می‌کند.آنگاه در این مرحله، تابع callback به عنوان آرگومان، وابستگی هایی را که بارگذاری شده اند می گیرد ( در مثال بالا، myModule و myOtherModule )و می تواند از این وابستگی ها استفاده کند ( منبع برای مطالع بیشتر منبع اول ، منبع دوم ، منبع سوم )در حال حاضر الگو های IIFE و AMD دیگر به عنوان الگو های استفاده از ماژول ها در جاوا اسکریپت استفاده نمی شوند ، ولی کد بیس هایی قدیمی هنوز وجود دارند که از این الگو ها استفاده می کنند .فرمت ماژول CommonJSاسم این فرمت رو اگر با جاوا اسکریپت از قبل آشنا باشین احتمالا شنیدید، فرمت ماژول CommonJS به طور خاص برای استفاده در Node.js ایجاد شد . ( Node.js یک ران تایم و محیط اجرای را برای کد های جاوا اسکریپت در خارج از مرورگر فراهم میکند) .از آنجایی که Node به سیستم فایل دسترسی دارد ، یعنی میتواند فایل ها را از روی حافظه سیستم بخواند، فرمت CommonJS برای بارگیری همزمان ( synchronously ) ماژول ها از دیسک به محض وارد کردن آنها نیز طراحی شده است.مفسر Node.js برای انجام عملیات ایمپورت و تزریق یک فایل ، یک تابع به نام require به صورت گلوبال را تعریف می کند که این تابع مسیرهای نسبی، مسیرهای مطلق یا نام کتابخانه را می پذیرد. سپس Node از یک فرمول جستجوی پیچیده استفاده می کند تا فایلی مطابق با مسیر/ نام داده شده را پیدا کند و در صورت یافتن، بلافاصله فایل درخواستی را خوانده و بارگذاری می کند.برای انجام عملیات export ، ماژول های CommonJS هیچ تابع ای مانند تابع require را ندارد ، برای انجام عملیات export مفسر یک متغیر گلوبال و عمومی module.exports را تعریف می کند و ماژول مقادیری که میخواد export کند را ، با اختصاص دادن به آن متغیر به بیرون ارسال می کند.// moduleA.js // Node runtime system adds `require()` function and infrastructure const $ = require(&quotjquery&quot); const myOtherModule = require(&quotmyOtherModule&quot); // The entire file is the module definition const a = 42; const b = 123; function someFunction() { } // Node runtime adds a `module.exports` keyword to define exports // Can do &quotnamed exports&quot by assigning an object with many values module.exports = { a : a, publicName : b, someFunction : someFunction } // moduleB.js const Backbone = require(&quotbackbone&quot); const MyModel = Backbone.Model.extend({}); // Can do a &quotdefault&quot export by just assigning // one value to `module.exports` module.exports = MyModel;فرمت ماژول CommonJS امکان وارد کردن داینامیک و پویا ماژول‌های را در هر زمان می‌دهند و می‌توانند به صورت مشروط نیز عملیات ایمپورت را انجام دهند.طرف دیگرماجرا این است که ماژول های CommonJS را نمی توان در مرورگر است استفاده کرد - به نوعی آداپتور و ... نیاز است برای این کار.فرمت ماژول UMDکه مخفف Universal Module Definition است . نیاز بود که برخی از کتابخانه‌ها بتوانند در محیط‌های متعدد با قابلیت های یکسان استفاده شوند .مثلا به عنوان یک تگ گلوبال ساده یا به عنوان یک ماژول AMD در یک مرورگرباشد و یا یک فایل CommonJS در Node باشد. برای حل این مشکل جامعه توسعه دهندگان یک هک عجیب و غریب اختراع کرند که به یک ماژول اجازه می داد در هر سه محیط با قابلیت های تشخیص ویژگی های آن محیط به درستی کار کند. که این فرمت به نام UMD نامگذاری شد .// File log.js (function (global, factory) { if (typeof define === &quotfunction&quot && define.amd) { define([&quotexports&quot], factory); } else if (typeof exports !== &quotundefined&quot) { factory(exports); } else { var mod = { exports: {} }; factory(mod.exports); global.log = mod.exports; } })(this, function (exports) { &quotuse strict&quot function log() { console.log(&quotExample of UMD module system&quot); } // expose log to other modules exports.log = log; });از این فرمت ماژول امروزه کم و بیش استفاده می شودفرمت ماژول ES Modulesخب بالاخره به اون چیزی که میخواستیم رسیدیم ، فرمت ماژولی که مخصوصا در سمت کلاینت بسیار ازش استفاده میشه همین فرمت ماژول ES است !در ES2015 در نهایت این فرمت ماژول به عنوان دستور ماژول رسمی را به زبان JS اضافه شد.که اکنون به عنوان ES Modules یا "ESM" شناخته می شود. این فرمت دستوری را برای تعریف import ها و export ها به صورت نامگذاری شده ( named )و پیش فرض( default ) ارائه می دهد.به دلیل تفاوت بین مرورگرها و Node.js، این فرمت ماژول مشخصات نحوه لود شدن ماژول ها توسط یک مفسر را مشخص نمی کند ، یا اینکه مشخص کند که رشته های import به چه چیزی اشاره می کنند، و در عوض آن را به ران تایم های مختلف واگذار می کند تا خودشان درک کنند که چگونه ماژول ها را به درستی لود کنند.همه مرورگرهای مدرن لود کردن ماژول های ES را بر اساس URL ها به عنوان رشته های import پیاده سازی کرده اند. اما Node به دلیل تکیه بر ماژول های CommonJS به عنوان فرمت پیش فرض، به طور قابل توجهی در حرکت رو به جلو برای بکار گیری کامل این فرمت ماژول با مشکل بیشتری روبرو بوده است.از ورژن پانزدهم Node از لود ماژول‌های ES پشتیبانی می‌کند، اما هنوز مشکلاتی در تعیین نحوه تعامل فایل‌های CommonJS و ES Module با یکدیگر وجود دارد.( که احتمالا در ورژن های بالاتر این مشکلات به مرور از بین می روند )ماژول های ES به گونه ای طراحی شدند که قابل تجزیه و تحلیل باشند ، همچنین نکته منفی این است که نمی توانید import های دینامیک یا مشروط را با این فرمت ماژول انجام بدید !// moduleA.js // ES6 language spec defines import/export keywords import $ from &quotjquery&quot // Can do &quotdefault&quot imports - no curly braces around the variable name import myOtherModule from &quotmyOtherModule&quot // Define &quotnamed exports&quot by adding `export` in front of a variable export const a = 42; export const b = 123; export {b as publicName}; export function someFunction() { } // moduleB.js // Can do &quotnamed imports&quot from other modules import {Model} from &quotbackbone&quot const MyModel = Model.extend({}); // Can do a &quotdefault&quot export with the `export default` keyword export default MyModel;برای اینکه این پست خیلی طولانی نشه ادامه این مبحث رو در پستی مجزا منتشر میکنم aminda aminda Tue, 17 May 2022 19:15:08 +0430 https://virgool.io/@aminda/%D8%A2%D8%B4%D9%86%D8%A7%DB%8C%DB%8C-%D8%A8%D8%A7-http-%D9%88-server-%D9%87%D8%A7-%D8%A8%D8%AE%D8%B4-%D8%AF%D9%88%D9%85-c23bybabk5zd کد های وضیعت HTTP :کد های وضیعت یا status code های HTTP اعدادی هستند که در پاسخ های HTTP از سمت سرور به سمت کلاینت برگشت داده می شوند . که همراه با یک رشته متنی به نام "reason" هستند که مقدار کد وضعیت را توضیح یا توصیف می کند .کدهای وضعیت اعداد 3 رقمی هستند که در محدوده های زیر گروه بندی می شوند:الف: 1xx: حاوی اطلاعات (Informational)ب : 2xx: موفق (Successful)پ : 3xx: تغییر مسیر (Redirection)ت : 4xx: خطای کلاینت (Client error)ث : 5xx: خطای سرور (Server error)به طور ساده منظور این است که در هر ارتباط بین کلاینت و سرور ، پاسخی که از سمت سرور به سمت کلاینت ارسال میشود همراه با اعداد مشخصی است که به آنها کد های وضعیت HTTP می گوییم ، هر شماره ای که از سمت سرور برگشت داده میشود دقیقا دارای مفهوم مشخص و خاصی است که در بالا محدوده آنها و معنی هر محدوده را برای شما قرار دادم . در زیر کد های وضعیت که به کرات معمولا دیده میشوند را مشاهده مینمایید :200 ("OK"): پاسخ موفقیت آمیز بوده است301 ("Moved permanently"): منبعی که در این آدرس در خواست داده اید به آدرس جدیدی منتقل شده است304 ("Not Modified"): مقدار این آدرس از آخرین درخواستی که داده اید تغییری نکرده است400 ("Bad Request"): درخواست شما از فرمت درست استفاده نمی کند401 ("Not Authorized"): برای مشاهده این مورد احراز هویت نشده اید403 ("Forbidden"): اجازه دیدن این محتوا را ندارید404 ("Not Found"): سرور این آدرس را نمی شناسد500 ("Internal Server Error"): هنگام رسیدگی به این درخواست مشکلی در سرور رخ داده است503 ("Service Unavailable"): بخشی از سرور خراب است و نمی تواند پاسخ دهدبرای دیدن توضیحات تکمیلی و دقیق هر عدد به راحتی میتوانید در اینترنت جتسجو کنید .کوکی ها :درخواست های HTTP ذاتاً به صورت پیش‌فرض «بدون وضعیت» یا "stateless” هستند ، اما سرورها معمولاً راهی را لازم دارند تا هویت یک کلاینت خاص را بین چندین درخواست مرتبط کنند و او را شناسایی نمایند .به عنوان مثال، اگر من وارد یک سایت انجمن بشم ، سرور باید به خاطر داشته باشه که در هنگام مرور صفحات مختلف وارد سیستم شده ام و برای مشاهده هر صفحه نیازی نباشه که مجددا نام کاربری و پسورد خودم را وارد کنم !درخواست های HTTP به سرورها اجازه می‌دهند تا هدر های Set-Cookie را در پاسخ‌هایی با کلیدها و مقادیر خاص بگنجانند:HTTP/2.0 200 OK Content-Type: text/html Set-Cookie: yummy_cookie=choco Set-Cookie: tasty_cookie=strawberryو هر زمان که یک کلاینت درخواست های بعدی را به آن سرور ارسال کند، مقادیر کوکی به طور خودکار در درخواست ارسالی به آن سرور گنجانده میشه و به سرور ارسال میشه:GET /sample_page.html HTTP/2.0 Host: www.example.org Cookie: yummy_cookie=choco; tasty_cookie=strawberryبه طور معمول برای مدیریت بهتر کلاینت ها و کاربران، سرور یک "session cookie" را تنظیم می کند که حاوی یک مقدار شناسه منحصر به فرد(عدد منحصر به فرد ) است، و آن شناسه منحصر به فرد را در درون به داده های اضافی نگاشت می کند (مانند : شناسه سشن 12345 در واقع علامت کاربری به نام مارک است). به این ترتیب، هر بار که درخواستی ارسال می شود، سرور می تواند داده های لازم مورد نیاز برای رسیدگی به آن کاربر خاص را جستجو کند . به عنوان مثال "درخواست برای دریافت همه پیام ها از سمت کلاینت می آید و داده های session می گوید که کاربر مارک است - از پایگاه داده برای همه پیام های ارسال شده بوسیله کاربر مارک را جستجو میکند و به کلاینت پاسخ می دهد ")سرور Serverکلمه "سرور" بسته به مکان و محیط استفاده ، چندین مفهوم مرتبط دارد :برنامه ای که یک سوکت برای گوش دادن به درخواست های دریافتی باز می کند .برنامه ای که به طور خاص قادر به رسیدگی به درخواست های HTTP و ارسال پاسخ ها آنها است .ماشین فیزیکی یا مجازی که برنامه سرور را اجرا می کند .در این مقاله ما بر روی معنای "برنامه رسیدگی به درخواست HTTP" تمرکز خواهیم کرد.پردازش درخواست های پایه ای HTTPهر سرور HTTP با پذیرش یک اتصال سوکت ورودی و تجزیه محتوای درخواست ارسال شده و با توجه به ساختار داده تعریف شده برای آن ، شروع به رسیدگی و پردازش درخواست می کند. سپس سرور مسیر درخواست HTTP و روش تعیین هدف درخواست را بررسی می کند.بسته به اینکه سرور چگونه نوشته شده و کانفیگ شده است، با انجام ترکیبی از موارد زیر به درخواست رسیدگی می کند:خواندن فایل ها از روی حافظهاتصال به پایگاه داده و دریافت یا به روز رسانی داده ها در آنبه روز رسانی داخلی اطلاعات session کاربراجرای کد ها و عملیات مشخص شده بر اساس درخواست کلاینتدر نهایت، سرور یک پاسخ HTTP را بر اساس تمام پردازش ها پر می کند، آن را در سوکت می نویسد و اتصال را می بندد.مسیر یابی یا Routingمسیریابی به تعیین کدی که بر اساس URL ارسالی بایست اجرا شود اشاره دارد . سرورها معمولاً از ترکیبی از متد درخواست HTTP و مسیر URL ارسالی استفاده می‌کنند تا تعیین کنند کدام کد باید یک درخواست را مدیریت کند.برای مثال، درخواست GET /users ممکن است توسط یک تابع خاص، POST /users توسط یک تابع دوم، و درخواست GET /images/header.png توسط یک تابع دیگر مدیریت شود.سرورها معمولاً از قراردادی استفاده می کنند که اگر some-folder/index.html وجود داشته باشد، به عنوان محتوای پاسخ برای درخواست GET /some-folder استفاده می شود. یعنی اینکه فایل index.html را به عنوان خروجی دیفالت برای درخواست GET /some-folder قرار می دهند .این الگو و رفتار به بسیاری از حوزه های دیگر نیز منتقل شده است. به عنوان مثال، سروری که با استفاده از زبان PHP نوشته شده است، ممکن است از some-folder/index.php برای رسیدگی به درخواست‌ GET /some-folderاستفاده کند، و بوسیله فرمت برنامه نویسی CommonJS در Node.js برای فراخوانی دستور require('some-folder') از فایل index.js (البته به شرط موجود بودن این فایل ) در فولدر some-folder/index.js استفاده می کند .فایل های استاتیکبسیاری از درخواست‌های HTTP که از سمت کلاینت می آیند از سرور درخواست می کنند که یک نسخه از یک فایل خاص مانند GET /images/header.png یا GET /app/index.html را برگرداند. و سپس سرور معمولاً با جستجو و انطباق دادن URL ها به مجموعه خاصی از پوشه ها روی دیسک و بررسی اینکه آیا فایلی با آن نام در مسیر پوشه خاص وجود دارد این موارد را مدیریت می کند. اگر این عملیات موفقیت آمیز بود ، سرور بلافاصله با خواندن کل فایل از روی دیسک و برگرداندن محتوای آن درون بدنه یا body پاسخ، جواب را به کلاینت درخواست دهنده ارسال می کند.از آنجایی که این فایل ها روی دیسک معمولاً تغییر نمی کنند، به عنوان فایل های استاتیک یا ثابت شناخته می شوند. ارائه فایل‌های استاتیک یک قابلیت پایه است که همه سرور های HTTP می‌توانند انجام دهند، و اکثر چارچوب‌های وب سرور که وجود دارند مکانیزمی درونی برای ارائه خودکار فایل‌ها از یک پوشه تعیین‌شده را ارائه می‌کنند. همچنین سایت‌ها و ابزارهای زیادی وجود دارند که فقط فایل‌های استاتیک را میزبانی می‌کنند و به آنها سرویس می‌دهند - کاربر فقط باید فایل‌های خود را آپلود کند، و سایت از قبل برای ارائه خودکار آنها پیکربندی شده است.منطق سرور داینامیکبا این حال، سرورها همچنین باید با اجرای منطق ( کد ها و دستورات ) نوشته شده توسط یک توسعه دهنده به درخواست های دریافتی پاسخ دهند . دستور العمل یا Syntax دقیق و تکنیک های مورد استفاده برای تعریف منطق سرور به طور گسترده ای در زبان ها و چارچوب های برنامه های کاربردی سرور ها متفاوت هستند، اما همه آنها جنبه های مشترکی دارند.یک چارچوب رایج سرور برای ایجاد برنامه کاربردی وب به توسعه دهنده اجازه می دهد :مشخص کند که کدام روش HTTP در حال مدیریت استمشخص کند که چه مسیرهای URL در حال مدیریت هستندخواندن و ارزیابی یک شی که حاوی اطلاعات درخواست HTTP است، که شامل فیلدهایی با تمامهدر ها، سایر ابرداده ها یا metadata ها و محتوای بدنه درخواست است.تعامل با یک شی که نشان دهنده پاسخ HTTP در حال پردازش است، که حاوی فیلدها ومتد هایی برای کمک به تولید محتوای پاسخ نهایی است.بسیاری از چارچوب های برنامه های وب نیز نوعی میان افزار یا middleware را پیاده سازی می کنند ، که تکه تکه های ( chunks ) منطقی کد هستند که با هم ترکیب می شوند . هر یک از میدلور ها معمولاً هدف خاصی دارند . مانند افزودن اطلاعات سشن ( session )به درخواست بر اساس یک کوکی .سپس میدلور ترکیبی، خط تولیدی از مراحل پیش‌پردازش برای هر درخواست را تشکیل می‌دهد که در هر درخواست ورودی قبل از رسیدگی به درخواست توسط منطق برنامه ،این خط تولید اجرا می‌شوند. یعنی اینکه به کمک میدلور ها قبل از اینکه درخواست به منطق یا لاجیک کد های سمت سرور برسند بسته به نیاز برنامه یکسری پیش پردازش ها در یک سلسله مراتب ( خط تولید پردازشی ) بر روی درخواست صورت میگیرد تا درخواست بهتر و پخته تر و آماده تری را تحویل لاجیک برنامه در سمت سرور قرار بدهیم.کد و منطق رسیدگی به درخواست ممکن است از هر شیوه و منطقی که لازم باشد برای ایجاد پاسخ پویا استفاده کند . و ممکن است شبیه به زیر باشد :ابتدا آدرس URL و متد HTTP را بررسی کندکوکی‌ها را برای شناسه سشن بررسی کند و جزئیات یک کاربر را در داخل سرور جستجو کند .خواندن کوئری پارامترها .استخراج داده ها از بدنه درخواست .برای بازیابی و دریافت اطلاعات به پایگاه داده متصل شودمقداری محاسبات را انجام دهدپایگاه داده را بر اساس محاسبات یا محتوای درخواست به روز کندیک سند HTML یا یک داده JSON بسازددر نهایت آن محتوا را به عنوان بدنه پاسخ ارسال کند .البته فرآیند بالا و گام های آن فقط یک مثال از ابتدای رسیدن درخواست به یک سرور و پاسخ آن سرور به درخواست بود. بسته به برنامه و درخوسات ارسال شده و ارزیابی آن و منطقی که در سمت سرور برای آن نوشته شده مراحل مختلفی به این سیکل پاسخ گویی اضافه و کم میشوندفرمت های پاسخگوییسرورها می توانند هر داده ای را که می خواهند در یک پاسخ ارسال کنند، اما بیشتر پاسخ ها با یکی از چند فرمت رایج زیر بازگردانده می شوند :فرمت HTML: زبان نشانه گذاری استاندارد که ساختار و محتوای یک صفحه وب را توصیف می کندفرمت CSS: زبان استانداردی است که برای تعریف ظاهر یک صفحه وب استفاده می شودفرمت JSON: یک فرمت داده مبتنی بر متن ، بر اساس سینتکس اشیاء جاوا اسکریپتفرمت XML: یک فرمت داده مبتنی بر متن قابل تنظیم بر اساس رتگ ها یا المنت های تو در تو، شبیه به HTMLفایل های استاتیک واقعی (تصاویر، فایل های جاوا اسکریپت و غیره)برای داده ها و دیتا ها، JSON تبدیل به فرمت استاندارد انتقال اطلاعات شده است.منابع : استک اورفلو ، و سایت های https://www.tutorialspoint.com و w3schools و mdn وbranch.io aminda aminda Sun, 15 May 2022 18:51:37 +0430 https://virgool.io/@aminda/%D8%A2%D8%B4%D9%86%D8%A7%DB%8C%DB%8C-%D8%A8%D8%A7-http-%D9%88-server-%D9%87%D8%A7-%D8%A8%D8%AE%D8%B4-%D8%A7%D9%88%D9%84-ytlmuswtx6x8 پیشنهاد می کنم ابتدا مقدمه این سری از مقالات رو بخونید تا پیش زمینه خوبی داشته باشین برای شروع لینکزبان مرورگرها چیست ؟ ?مرورگرها برای درخواست اطلاعات فقط به یک زبان صحبت می کنند که نام آن زبان HTTP هستش، می توان اون را قانون یا پروتوکل رد و بد اطلاعات برای مرورگرها نیز نامید .HTTP = Hyper Text Transfer Protocolکه معنی آن به فارسی تقریبا میشه : قانون جابه جایی ابر متن .ابر متن هم متن هایی هستند که میتونن خیلی بزرگ باشند و اونها رو روی دستگاه های الکترونیکی می بینیم . توضیحات بیشترهمچنین باید به این نکته هم اشاره کرد که مروگر ها وقتی از پروتوکل HTTP استفاده میکنن بایست به سروری وصل بشن که اون سرور هم قابلیت پاسخ گویی به درخواست های HTTP رو داشته باشه.شبکه HTTP برای رد و بدل اطلاعات نیاز به شبکه داریم ، و شبکه های کامپیوتری در سطح نرم افزار بر اساس یک مفهوم انتزاعی (ذهنی) به نام سوکت برقرار می شوند و سوکت ها نشان دهنده یک اتصال باز ( به صورت ویژه ) به رایانه دیگری هستند .کار سرور گوش دادن به اتصال های درخواستی است و کار کلاینت باز کردن یک اتصال می باشد.اتصالاها بوسیله IP ، یعنی آدرس ها که به صورت عددی هستند ایجاد می شوند . IP آدرس نشانی دقیق سرور مد نظر ما در اینترنت هستش که میتونه شامل یک شماره پورت هم باشه ،که بعد از آدرس IP با دونقطه قرار می گیره. مانند : 192.168.0.255:443که عدد 443 شماره پورت مورد نظر است که این شماره پورت نوع سرویس درخواستی از سرور را مشخص میکند.هر قسمت IP آدرس که با نقطه از هم جدا شده است میتواند عددی مابین 0 تا 255 باشد و شماره پورت میتواند عددی مابین 0 تا 65535 باشدمیتونیم اینجوری فکر کنیم که IP مانند آدرس رسیدن به یک آپارتمان هستش ( آپارتمان سرور مورد نظر ما هستش که میخواهیم به آن وصل بشیم که شامل اتاق های زیادی هست. ) و شماره پورت اتاق خاص مدنظر ما در این آپارتمان هستش که میخواهیم وارد آن بشیم و با آن رد و بدل اطلاعات را انجام بدهیم.داده هایی که در یک اتصال سوکت رد و بدل میشوند همگی از نوع بایت هستند (bytes) ، که میتوانند text یا binary باشند .پس HTTPS چیه ؟پروتوکل HTTP ساده یک پروتکل رمزگذاری نشده هستش. اما برای امنیت بهتر است که از پروتوکل HTTPS استفاده کنیم که یک پروتوکل رمز گذاری شده بوسیله ssl هستش .شماره پورت دیفالت در IP آدرس :پروتوکل های HTTP و HTTPS در حالت اولیه یا دیفالت خودشان در ارتباط با سرور از شماره پورت های خاصی استفاده میکنند. پروتوکل HTTP از شماره پورت 80 و پروتوکل HTTPS از شماره پورت 443 در ارتباطات استفاده میکنند. مثلا آدرس URL به صورت زیرhttp://192.168.0.255اشاره میکند که پورت ما 80 است و اگر همین درخواست با پروتوکل HTTPS ارسال بشه دلالت میکنه که پورت ما به صورت دیفالت 443 هستش.سایر پورت ها نیز اغلب بسته به تنظیمات پروژه استفاده می شوند ،به عنوان مثال، بسیاری از برنامه ها در یک محیط توسعه به پورت 8080 یا 3000 گوش می دهند ( اگر از ری اکت استفاده کرده باشین ، یا در آینده آستفاده کنید این پورت رو میبنیدش . که در زمان توسعه اپلیکیشن ، برنامه شما روی این پورت به صورت دیفالت قابل دسترس هستش .)اما استفاده از این شماره ها و به خاطر سپردن اونها کاره خیلی سختی هستش برای ما ?حالا DNS وارد می شودبه خاطر همین ما آدرس ها رو به صورت یک متن مینویسیم و کار تبدیل کردن اونها به عدد ها رو به چیزی به نام DNS میسپاریم ، معمولا در مقالات و توضیحات DNS رو به عنوان یک دفترچه تلفن معرفی میکنن که میدونه هر اسم سایتی دقیقا به چه سروری اشاره میکنه ، خود DNS یک سرور در اینترنت هستش که وقتی که اسم سایت رو در مرورگر وارد میکنیم مرورگر اسم سایت رو به اون میفرسته و سپس DNS آدرس IP اون سرور رو به مرورگر برمیگردونه و سپس مرورگر بوسیله این IP آدرس به سرور متصل میشوددرخواست و پاسخ HTTP همانطور که قبلا اشاره شد HTTP مخفف HyperText Transfer Protocol یعنی پروتکل جابه جایی ابر متن هستش ، این متنی که بوسیله HTTP جابه جا میشه و و نقل و انتقال پیدا میکنه یک متن ساده بدون حالت یا stateless هستش. برای بدون حالت ( وضعیت ) بودن اون میشه این تعریف رو در نظر گرفت که به عنوان یک پروتکل بدون حالت نامیده می شه زیرا هر درخواست به طور مستقل و بدون اطلاع از درخواست هایی که قبل از آن اجرا شده است اجرا می شود. یا این تعریف رو در نظر داشته باشید : به این معنی که هر بار کلاینت یک صفحه وب را درخواست می کند، مرورگر کاربر یک اتصال جداگانه به سرور باز می کند و سرور به طور خودکار هیچ سابقه ای از درخواست قبلی را نگه نمی داره .و در حالت کلی HTTP یک پروتوکل بر پایه درخواست ها و پاسخ ها هستش :1- در ابتدا یک کلاینت باید یک اتصال به سرور را ارسال کند و درخواستی را با استفاده از یک قالب متنی بفرستد .2- سپس سرور درخواست را تجزیه و تحلیل می کند، و با توجه به درخواست ارسال شده کدی را برای پردازش و رسیدگی مناسب به درخواست اجرا می کند و یک پاسخ مبتنی بر متن را سمت کلاینت ارسال می کندو پس از ارسال پاسخ، اتصال سوکت باز را می بندد3- هر درخواست / پاسخ یک تراکنش مستقل بین کلاینت و سرور است و به طور پیش‌فرض هیچ ارتباطی بین درخواست‌های جداگانه وجود ندارد.البته هم درخواست ها و هم پاسخ ها ممکن است حاوی داده های باینری باشند، اما محتوای درخواست و پاسخ مربوط به HTTP دستورالعمل های متنی هستند.یک نمونه درخواست HTTP معمولی که مروگر ( کلاینت ما ) به سمت سرور میفرسته به شکل زیر میتونه باشه:GET <https://www.example.com/description.html> HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) Chrome/16.0.912.75 Safari/535.7 Accept: text/html,application/xhtml+xml Referer: <http://www.google.com/url?&q=example> Accept-Language: en-US,enکه خط اول این درخواست یا خط شروع درخواست که به کلمه GET شروع شده رو میتونیم به 3 قسمت مجزا تقسیم کنیم :قسمت اول خود همین کلمه کلیدی GET هستش که اون رو به عنوان HTTP Verb یا HTTP methods میشناسیم ، این کلمه و یسکری دیگه از کلمات کلیدی دیگه مثل POST و PUT و... هدف ما رو از ارتباط سرور مشخص میکنند .GET یعنی گرفتن و در اینجا منظور ما این است که میخواهیم از این URL مد نظر اطلاعات رو بخونیم یا دریافت کنیم.قسمت دوم در خط اول میشه [<https://www.example.com/description.html>](<https://www.example.com/description.html>) که بهش مسیر درخواست یا Path میگیم .و در آخر این خط هم ورژن درخواست HTTP مشخص شده که برابر است با HTTP/1.1بعد از این خط چیز هایی که میبنید به عنوان header درخواست شناخته میشن که شامل زبان درخواست ، نوع درخواست و غیره هستش. هر header می تواند شامل متا دیتا های مختلفی باشد تا سرور بهتر بفهمد چه نوع اطلاعاتی ازش درخواست میشه.و البته هر درخواست میتواند شامل بخشی به نام body یا بدنه درخواست باشد ( در این مثال بدنه درخواست وجود ندارد ) که شامل اطلاعاتی هستند که میخواهیم آنها را در سرور ذخیره نماییم !به طور خلاصه هر درخواست HTTP شامل خط شروع (که با فعل های HTTP شروع میشه ) و سپس header و body درخواست میتونه باشه . که اشاره شد با توجه به درخواست میتونه شامل header های متفاوت باشیم و body درخواست هم بسته به هدف ما از ارتباط با سرور میتونه وجود داشته باشه یا نداشته باشه !خب حالا بریم ببینیم یک پاسخ ساده یا Response از نوع HTTP چجوری هستش :HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Server: Apache/2.4 Date: Sun, 01 Nov 2020 16:38:23 GMT Content-Length: 17151 <html> <head> <title>Page Title Here</title> </head> <body> Content here </body> </html>بازم مثل قبل در خط اول پاسخ دریافتی از سرور اطلاعات مهمی وجود داره که شامل ورژن HTTP هستش و سپس بعد از اون یک شماره را سرور به سمت کلاینت ارسال کرده که برابر عدد 200 هستش ، این اعداد برگشتی بسیار مهم هستن و هر عدد مفهموم دقیق و خاصی رو داره که به این اعداد HTTP status code یا کد های وضعیت میگیم . سرور با توجه به پاسخی که به ما میده عدد خاصی رو بازگشت میده که کد یا عدد 200 یعنی اینکه عملیات درخواست / پاسخ موفقیت آمیز بوده ، و بعد از این عدد هم کلمه OK هستش که به اون HTTP status reason میگیم که اشاره به همین موضوع موفقیت آمیز بودن عملیات درخواست / پاسخ اشاره میکنه ، و فرمت اون از نوع text هستش .و بعد از خط اول هدر های پاسخ اومدن که یکسری اطلاعات metadata در مورد پاسخ اسالی ، از جمله اندازه کل body پاسخ به صورت بایت و زمان پاسخ و غیره میشه.و در نهایت، پاسخ شامل محتویات body هستش که یک صفحه html رو به سمت کلاینت بازگشت داده است.هدر های HTTPده‌ها فیلد هدر وجود دارد که می‌توانند از طریق HTTP ارسال شوند، و هم کلاینت‌ها و هم سرورها می‌توانند هدرهای دیگری را که خودشون تعریف کرده‌اند رو نیز ارسال کنن.برخی از رایج ترین هدرها عبارتند از:برای رکوئست ها یا درخواست ها از سمت کلاینت :1- اطلاعات کابر یا User-Agent: رشته ای که نوع و ورژن کلاینت را توصیف می کند2- کوکی: قطعه کوچکی از داده که قبلاً توسط سرور برای کمک به ردیابی این کلاینت پیوست شده است3- ارجاع دهنده یا Referer: آدرس صفحه قبلی که روی لینک آن کلیک شده استبرای پاسخ هایی که از سمت سرور می آید :1- طول پاسخ یا Content-Length: اندازه پاسخ که بر حسب بایت است.2- مکان یا Location : تغییر مسیر درخواست به یک URL جدید3- تنظیم مجدد کوکی Set-Cookie: یک مقدار کوکی جدید را ایجاد می کندفصل مشترک در سمت کلاینت و سرور :مقدار Content-Type: نام فرمت مورد استفاده در بدنه درخواست / پاسخ را مشخص میکنیم در این فیلد .متد های HTTPپروتکل HTTP چندین متد را در دسترس ما قرار می دهد و هر متد HTTP نوع متفاوتی از هدف درخواست را نشان می دهد :1- متد GET: کلاینت می خواهد اطلاعات را دریافت کند .2- متد POST: کلاینت می خواهد داده ها را روی سرور ایجاد یا آپدیت کند ،این متد برای ارسال اطلاعات به سمت سرور استفاده میشه . ارسال اطلاعات یا دیتا ها بوسیله این متد بیشتر برای ایجاد اطلاعات است تا آپدیت اطلاعات . ولی خب با این متد هم قادریم که اطلاعات رو در سرور (دیتابیس ) آپدیت کنیم ! در حالت کلی در ذهن خودتون اینطور به خاط بسپارید که برای ارسال اطلاعات از این متد استفاده میشه !3- متد PUT: کلاینت می خواهد داده های سرور را آپدیت یا جایگزین کند . از این متد برای آپدیت کردن دیتا استفاده میکنیم .4- متد DELETE: کلاینت می خواهد برخی از داده های سرور را حذف کند5- متد PATCH : عملکرد آن شبیه به متد PUT است ولی برای آپدیت جزئی یا آپدیت یک قسمت از دیتا استفاده می شود6- متد های HEAD و OPTIONS رو هم داریم که نحوه کارکردشون رو به خود شما میسپارم ! :)هر متد HTTP تغییرات مختلفی در نحوه قالب بندی درخواست را ایجاد میکند ، یعنی اینکه مثلا قالب درخواست GET در بعضی از اطلاعات ارسالی میتونه متفاوت با قالب درخواست POST و غیره باشه ، و بسته به نیاز های کلاینت ایجاد می شود . و نکته مهم این است که علاوه بر این، برخی از انواع درخواست‌ها را می‌توان به‌عنوان «بی‌توان» یا "idempotent” در نظر گرفت (می‌توان چندین بار بدون ایجاد تغییرات اضافی آن درخواست را انجام داد).خب چون این متد ها بسیار پرکاربرد هستن و درک اونها برای یک دولوپر خیلی ضروریه درادامه اونها رو بیشتر توضیح میدیم :درخواست GET :درخواست های GET برای بازیابی و گرفتن اطلاعات از سرور، بر اساس یک URL خاص استفاده می شوند .این درخواست های شامل body یا بدنه درخواست نمی باشند. با این حال کلاینت ها میتوانند داده های اضافی را به عنوان query parameters یا query string به URL اصلی متصل کنند . این کوئری استرینگ ها به عنوان یک اضافه شونده به URL هستند که برای کمک به تعریف محتوا یا اقدامات خاص بر اساس داده های ارسال شده استفاده می شوند.این کوئری استرینگ ها با علامت سوال ؟ شروع میشوند و فرمت آهنا به صورت key=value است و اگر چندتا از آنها را نیاز باشد که ارسال کنیم آنها را با علامت & یا ampersands از هم دیگر جدا میکنیم.مانند :/endpoint?a=1&b=stuffدر کوئری پارامتر ها space ها و کارکترهای خاص در URLها ممکن است نیاز به کد گذاری URL ای داشته باشند.(منظور انجام عملیات URL-encoded است ) و در جاهایی ممکن است که مقدار اصلی با یک درصد و یک عدد جایگزین شود ، مانند مثل زیر که space با علامت % و عدد 20 جایگزین شده است?a=Some Value ممکن است تبدیل بشود به مقدار زیر ?a=Some%20Valueاز آنجایی که درخواست های GET فقط برای دریافت داده ها استفاده می شود، سرورها نیاز نیست که داده ها را در پاسخ به GET به روز کنند. این بدان معناست که انجام دادن چندین باره درخواست GET بدون ایجاد عوارض جانبی یا ساید افکت ها ( side effect=changing something somewhere ) هستند و از این نظر ایمن هستند .درخواست های POST :درخواست های POST برای اینکه به سرور بگوییم اطلاعات ارسالی را ذخیره نماید یا برخی داده ها را به روز کند یا برخی از اطلاعات را پردازش کند استفاده می شود . POST ها معمولاً تمام اطلاعات را در بدنه یا body درخواست قرار می دهند و به ندرت شامل کوئری استرینگ ها می شوند .بدنه ها یا body درخواست های POST معمولا از چند فرمت رایج زیر استفاده می کنند :الف : "Form-encoded” : همان ساختار Key / Value به عنوان کوئری استرینگ ها هستش، اما در بدنه یک POST قرار می گیرد .ب :"Multi-part form data” : یک قالب محدود که بدنه درخواست را به بخش هایی تقسیم می کند .ج : "JSON” : نمایش رشته ای از ساختارهای داده جاوا اسکریپت مانند اشیا و آرایه ها .درخواست های PUT :عملکرد و هدف از درخواست های PUT بسیار شبیه به درخواست های POST است و این درخواست ها شامل ارسال داده به سرور با قصد به روز رسانی است !تفاوت مورد نظر در این است که یک درخواست PUT برای ایجاد ( create ) یا جایگزینی ( replace) یک مقدار در نظر گرفته شده است، در حالی که یک POST برای ایجاد ( create ) یا به روز رسانی ( update ) یک مقدار در نظر گرفته شده است.از نظر مفهومی، یک درخواست PUT باید چندین بار پشت سر هم انجام شود، در حالی که یک درخواست POST احتمالاً باعث می شود در هر درخواست اتفاقی جداگانه و متمایزی رخ دهد.درخواست های PATCH :درخواست‌های PATCH نیز مشابه درخواست‌های PUT هستند، اما هدف از ارسال آنها فرستادن یک مقدار جزئی از یک آیتم یا دیتا است، در حالی که PUT به معنای ارسال کامل یک آیتم است.درخواست های DELETE :درخواست های DELETE برای ارسال درخواست به سرور برای حذف برخی از داده ها استفاده می شود. از نظر مفهومی، ارسال چندین بار درخواست DELETE ایمن است چونکه اگر مقداری قبلاً از بین رفته و پاک شده باشد، سرور باید درخواست مجدد را نادیده بگیرد .خب برای اینکه خیلی طولانی نشه این قسمت بقیه مطلب در پست بعدی منتشر می کنم .قسمت دوم aminda aminda Sat, 14 May 2022 11:00:10 +0430 https://virgool.io/@aminda/%D9%88%D8%A8-%DA%86%DA%AF%D9%88%D9%86%D9%87-%DA%A9%D8%A7%D8%B1-%D9%85%DB%8C%DA%A9%D9%86%D9%87-xg7ccjukbxuj وب امروزی تشکیل شده از تکنولوژی های مختلفه ! که مثل قطعات پازل کنار هم هستن .به نام خدابه عنوان یک توسعه دهنده یا همون برنامه نویس ، خیلی خوبه که بدونیم که تکنولوژی هایی که هر روز در حال استفاده از اونها هستیم دقیقا چه چیزی هستن و چطوری کار میکنن !توسعه وب در زمان حاضر یک میدان بزرگ با مجموعه وسیعی از مفاهیم، اصطلاحات، ابزارها و فناوری ها است.خیلی بهتره که در ابتدای سفر دور و درازتون به عنوان یک برنامه نویس با این مفاهیم به خوبی آشنا باشین ! خود من در ابتدا این مشکل رو داشتم و با اینکه از گوشه و کنار بسیاری از اصطلاحات و مفاهیم رو شنیده بودم اما درک صحیحی از اونها و کاربرد و عملکرد اونها نداشتم ،مثلا مفاهیمی مثل مرورگر ، HTTP ، سرور ، کلاینت ،API ، عملیات Ajax و...و از اون مهم تر نمیدونستم که این مفاهیم و تکنواوژی ها که شبیه به قطعات پازل هستند چگونه کنار هم قرار میگرن و مفهوم کلی وب و عملکرد قابل مشاهده اون رو برای ما ایجاد میکنن .برای همین با جستجویی که داشتم به مجموعه مقالاتی از آقای Mark Erikson که از افراد شناخته شده در حوزه وب و فرانت هستش برخوردم که بنظرم مقالات خیلی خوب و ارزشمندی هستن و تصمیم گرفتم که ترجمه آزادی از این مجموعه مقالات داشته باشم این سری از مقالات ، مروری بر مفاهیم و فناوری‌های اساسی توسعه‌دهندگی وب، چیستی این مفاهیم و فناوری ها، چرایی نیاز به آنها و ارتباط آنها با یکدیگر را ارائه میکنه . که البته با توجه به همین مقالات و ترتیب انتشار آنها اگر مفهومی نیاز به توضیح بیشتر یا توضیح ساده تر داشت از اطلاعات خودم و سایت های دیگه ای هم استفاده کردم که در انتهای هر مقاله به منابع آنها اشاره می کنم. با ارزش بودن این مقالات و محتوای اونجا مشخص میشه که سایت reactiflux (بزرگترین کامیونیتی تخصصی راکت و تکنولوژی های آن ) این سری از مقالات رو به عنوان شروع مسیر برنامه نویسی فرانت معرفی کرده و توصیه کرده که از اینجا شروع کنید یادگیری برنامه نویسی فرانت رو ! لینک پس اگر میخواهید برنامه نویسی وب رو درست و اصولی شروع کنید و در آینده موفق تر باشید با دقت این مطالب رو مطالعه کنید و هرجایی که مبهم بود براتون اون مطلب رو رها نکنید ! بلکه در اینترنت به صورت فارسی و انگلیسی جستجو کنید ، و اگر بازم براتون مبهم بود از دیگر توسعه دهنده های با تجربه سوال بپرسید و درخواست کنید که شما رو راهنمایی کنن. این کار رو تا درک درست از این مطالب و سر فصل های اشاره شده در مقالات ادامه بدین ...همچنین بد نیست اشاره کنم که اینجا شما با یک آموزش کامل در باره این مفاهیم روبه رو نیستید که به صورت جامع تمامی این مفاهیم رو توضیح داده باشم ، سعی کردم در عین سادگی و با کمترین حجم ، ضروری ترین مفاهیم رو خدمت شما ارئه کنم.همچنین این یک مسیر راه یا Road Map کلی است که بدونید چه مفاهیم اساسی در این حوزه وجود دارند که باید در ابتدا بلد باشید و درک درستی از اونها داشته باشید و هدف این مقالات کمک به شما برای پیدا کردن یک دید کلی و دادن اطلاعات کافی هستش ، تا بتونید در صورت نیاز درباره این اصطلاحات و موضوعات، عمیق‌تر تحقیق کنید.این سری از مقالات مناسب چه کسانی است؟ اگر توسعه دهنده سمت فرانت هستین که دونستن این اطلاعات برای شما ضروریه ! و به طور کلی اطلاعات درون مقالات بیشتر به سمت توسعه برنامه های سمت فرانت اند (کلاینت )با جاوا اسکریپت اشاره میکنه ،اما بسیاری از موضوعات به اندازه کافی مهم و اساسی هستند که برای توسعه برنامه های سمت سرور نیز مورد استفاده قرار بگیرند، پس اگر برنامه نویس بک اند هم هستین دونستن این موضوعات حتما برای شما مفید خواهد بود. همچنین بدنیست اشاره کنم که به خاظر ذات این مفاهیم ممکنه که خوندن این سری از مقالات برای شما خشک و خسته کننده باشه ، ولی موضوع مهم این هستش که شما به عنوان توسعه دهنده حتما باید این مفاهیم رو به خوبی درک کنید و بلد باشید . پس اگر خوندن مقاله خسته کننده بود فعلن اون ها رو رها کنید و در یک زمان مناسب دیگر ادامه بدین.امیدوارم که برنامه نویس هایی که تازه میخوان وارد این حوزه بشن به کمک این سری از مقالات و همچنین جستجو و پیگیری خوبی که انجام میدن به دید و درک خوبی از این مفاهیم ضروری برسند.در پایان خدمت شما بایست اشاره کنم که وب سایت MDN مرجع خیلی خوبی میتونه برای شما باشه تا روی این موضوعات و خیلی چیزهای مرتبط با وب عمیق تر بشید.خب توضیحات کافیه و بهتره که با هم شروع کنیم : پست اول aminda aminda Sat, 14 May 2022 10:55:47 +0430