https://virgool.io/avalamoozesh/feed آموزش متوسط و پیشرفته JavaScript «رسانه تخصصی جاوااسکریپت» fa 2026-06-16 17:36:14 https://files.virgool.io/upload/publication/vuch4psyjocm/w5zihr.jpeg https://virgool.io/avalamoozesh https://virgool.io/avalamoozesh/%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%A8%D8%A7%D8%B4%DB%8C%D9%85-tk3tgrljg1gn سال ۱۹۹۵ بود که برندان آیک (Brendan Eich)، کسی که بعداً شرکت موزیلا (Mozilla) رو تاسیس کرد، در طی ۱۰ روز یک زبان اسکریپت نویسی برای مرورگر Netscape نوشت تا بشه با اون صفحات وب رو در سمت کلاینت پویا‌تر کرد و اصلا دنبال این هم نبود که یک زبان برنامه نویسی جدی و حرفه‌ای رو توسعه بده بلکه فقط دنبال کمی پویایی بیشتر و البته رقابت در ماجرایی معروف به جنگ مرورگرها بود. آیک اسم این زبان رو موکا (mocha) گذاشت که اسم نوعی سرو قهوه هست و فکرشم نمی‌کرد که روزی موکا به این غول پرنفوذ تبدیل بشه.خالق JavaScript برندان آیکدر مطلب "صفر تا صد تاریخچه اینترنت و وب: درس‌هایی از اعماق وب" با جزئیاتی دقیق روند پیدایش اینترنت و وب رو توضیح دادم و اگر نمی‌دونید همه چیز از کجا شروع شد پیشنهاد می‌کنم یک سر به این مطلب بزنید تا دیدی جامع و دقیق پیدا کنید.بعد از اختراع وب توسط تیم برنرز لی (Timothy John Berners-Lee) در سال ۱۹۹۱ مرورگرها فقط صفحات استاتیکی بودن که از بارگذاری یکسری فایل استاتیک html ایجاد می‌شدن. دو سال بعد، در سال 1993 که گروه NCSA تکنولوژی CGI رو خلق کرد تا صفحات وب بتونن محتوهایی پویا و یکسری اعمال مثل اعتبارسنجی رو انجام بدن. این پویایی صرفا در سمت Back-End اتفاق افتاد و همچنان در سمت کلاینت همه چیز استاتیک بود تا این که برندان آیک (Brendan Eich) در سال ۱۹۹۵ اولین زبان برنامه نویسی سمت کلاینت رو به نام موکا اختراع کرد.برندان آیک یکی از برنامه‌نویسانی بود که در شرکت Netscape استخدام شده بود؛ شرکتی که مرورگر Netscape Navigator، محبوب‌ترین مرورگر اون دوران رو توسعه میداد. مهندسان شرکت Netscape دنبال این ایده بودن تا بشه سمت کلاینت رو هم با یک زبان برنامه نویسی پویا کنن. اونا در ابتدا تلاش کردن تا زبان Java که اون زمان خیلی هم محبوب شده بود رو در مرورگر خودشون بکار بگیرن ولی Java بیش از حد سنگین و پیچیده بود و چنین چیزی با توجه به محدودیت‌های نرم‌افزاری و سخت‌افزاری سیستم‌های اون زمان تقریبا نشدنی بود.در همین زمان به برندان آیک تسکی داده شد که طی اون مأموریت داشت تا ظرف ۱۰ روز زبانی جدید برای مرورگر Netscape بسازد با این شرایط:شبیه به Java به نظر برسد (Syntax اون مشابه Java به نظر برسه)آسان و سبک باشد تا کاربران معمولی هم راحت یاد بگیرند و استفاده کنندر مرورگر اجرا شود و محدودیت‌های نرم افزاری و سخت‌افزاری برای اون در نظر گرفته بشهقابلیت تعامل با DOM و HTML را هم داشته باشهبرندان با این که فرصت کمی داشت ولی موفق شد طی این ۱۰ روز زبانی ابتدایی که این مشخصات رو داشته باشه خلق کنه و اسمش رو بذاره موکا (Mocha)! برای این که چرا این اسم رو گذاشتن داستان‌های متفاوتی گفته شده. یک گروه میگن اسم قهوه محبوب آیک بوده، یکی گروه دیگه میگن مارک اندریسن (Marc Andreessen)، یکی از بنیان‌گذاران Netscape، پیشنهاد داده و گروه دیگری هم اون رو مربوط به یک دورهمی در یک کافه نسبت میدن به هر حال خیلی این نام ماندگار نشد و چند ماه بعد، در تابستان همان سال ۱۹۹۵ به LiveScript تغییر داده شد.برای نام گذاری LiveScript هم چنین دلایلی آورده شده: واژه‌ی "Live" نشان‌دهنده‌ی دینامیک بودن زبان هست یعنی بر خلاف HTML که ایستا هست، LiveScript می‌تونه در زمان اجرا به صفحه واکنش نشان بده. علاوه بر اون نام "LiveScript" جنبه بازاریابی و تبلیغاتی هم می‌تونست داشته باشه که ویژگی پویا و زنده بودن تعاملات در مرورگر Netscape نشون بده. این نام به صورت رسمی در نسخه‌ی Netscape Navigator 2.0 Beta 3 که در سپتامبر 1995 منتشر شد برای این زبان استفاده شد.اما این اسم هم چند ماه بیشتر دووام نیاورد! در زمستان ۱۹۹۵ (December 1995)، وقتی که Netscape آماده انتشار نسخه نهایی مرورگر Netscape Navigator 2.0 بود، در یک اقدام غیرمنتظره و جنجالی، نام زبان از LiveScript به JavaScript تغییر داده شد که کاملا هدفی بازاریابانه و تبلیغاتی داشت.داستان دقیق‌تر از این قرار بود که شرکت Sun Microsystems که سازنده‌ی زبان Java بود، در اون زمان با Netscape همکاری تجاری داشت و چون Java در سال ۱۹۹۵ خیلی پر سروصدا و محبوب بود، و رسانه‌ها اون رو آینده‌ی برنامه‌نویسی می‌دونستن و روایاپردازی‌های بانمکی نقل محافل بود و همین باعث شد تا Netscape هم بیاد از این آب گل آلود ماهی خودش رو بگیره و به نوعی تلاش کنه تا یک پیوند ذهن بین این داستان‌های هیجان انگیز و زبان تازه توسعه داده شده خودش ایجاد کنه.زبان لایو اسکریپت که حالا اسم جاوااسکریپت رو پیدا کرده بود، هیچ ربط و ارتباطی به Java نداشت و الان هم نداره و صرفا برخی Syntaxهای اون مشابه Java طراحی شده و اتفاقی کاملا تبلیغاتی بود پس این حرف که JavaScript کوچک شده Java هست کاملا غلط هست."It was a marketing gimmick. We knew that Java was the hot thing at the time, and this was a way to ride that wave."— Brendan Eichجاوااسکریپت تا سال‌ها با هویت گمراه‌کننده‌ای شناخته می‌شد و حتی تا امروز، بسیاری از مبتدی‌ها تصور می‌کنند Java و JavaScript به هم مرتبط‌اند هست و جاوااسکریپت نسخه کوچک شده جاوا هست! این نام‌گذاری، اگرچه گمراه‌کننده، اما باعث موفقیت تجاری زودهنگام این زبان شد و حیله بازاریابی Netscape جواب داد!در این سال که جاوااسکریپت متولد و هی تغییر نام داده شد، مایکروسافت اولین مرورگر IE خودش رو عرضه کرده بود و داشت تلاش می‌کرد تا اون رو توسعه بده و یک رقیب جدی برای مرورگر Netscape Navigator بشه. مایکروسافت در ابتدای سال ۱۹۹۵ ورژن یک مرورگر Internet Explorer خودش رو بر پایه مرورگر Spyglass Mosaic توسعه داد که نسخه‌ای بسیار ساده بود و فقط روی Windows 95 اجرا می‌شد. این مرورگر فقط قابلیتهای پایه مرور وب (HTML 2.0) را داشت و هیچ پشتیبانی از JavaScript، CSS نمی‌کرد یا حتی بوک مارک های درست حسابی هم نداشت اما در پایان همان سال (۱۹۹۵) نسخه ۲ این مرورگر رو توسعه داد که در این نسخه پشتیبانی اولیه از JavaScript و SSL اضافه شد. سال بعد (۱۹۹۶) با توسعه نسخه ۳ و افزودن پشتیبانی از CSS رسما وارد رقابت جدی با Netscape شد و جنگ مرورگرها آغاز شد!البته IE از جاوااسکریپت در ابتدا استفاده نکرد! مایکروسافت با مشاهده موفقیت جاوااسکریپت و با نوعی کپی برداری از اون، نسخه‌ی خودش را با نام JScript برای مرورگر Internet Explorer ساخت.از وقتی IE امد و جنگ مرورگرها شروع شد و این دو شرکت برای رقابت با هم مدام ساختارهای جدید و انحصاری توسعه دادن تا با کمک اون‌ها بتونن جذابیت و کارایی بیشتری پیدا کنن ناسازگاری و تفاوت در نوشتن و اجرای کدها روز به روز بیشتر و بیشتر شد تا جایی که به یک افتضاح ختم شد!چون این دو با هم رقیب بودن و برای شکست و حذف همدیگر تلاش می‌کردن هیچ وقت برای توسعه استانداردها با هم مشارکتی جدی نداشتن و به استانداردهای W3C که با هدف یکسان کردن استانداردها ایجاد شده بود بی‌توجه‌ی میکردن. جزئیات بیشتر این درگیری ها و چطوری شکست خوردن Netscape از IE و بعد پیدایش FireFox و Google کروم رو می‌تونید در مطلب "صفر تا صد تاریخچه اینترنت و وب: درس‌هایی از اعماق وب" بخونید.اختلاف ویژگی و اجرای JavaScript شرکت Netscape و JScript شرکت مایکروسافت بسیار شدید شده بود برای همین در اواخر 1996، شرکت Netscape مشخصات زبان JavaScript را به ECMA International که در اون زمان با نام European Computer Manufacturers Association فعالیت می‌کرد ارائه داد تا فرایند استانداردسازی رو شروع بشه و جلوی این آشفتگی گرفته بشه.چند ماه بعد، در ژوئن 1997 اولین نسخه رسمی با نام ECMAScript 1 (ES1) منتشر شد. بعدها در ۱۹۹۸ نسخه ECMAScript 2 و در ۱۹۹۹ هم نسخه ECMAScript 3 منتشر شد که شامل استانداردهایی برای regex و try/catch بود.طی این مدت، روز به روز مرورگر IE سهم بازار بیشتری می‌گرفت و مرورگر نت اسکیپ افول می‌کرد تا جایی که در سال ۱۹۹۹ که ES3 منتشر شده بود اینترنت اکسپلورر تقریبا همه بازار رو گرفته بود و به نوعی یک انحصار مطلق ایجاد کرده بود. برای مایکروسافت با این انحصار و سهم بازار منطقی نبود تا بیاد حرف‌ها و دستورات یک سازمان دیگه که هیچ قدرت خاصی در بازار نداره و تعیین کننده نیست رو بپذیره برای همین در تمام این دوران نسبت به ECMAScript بسیار بی‌توجه بود و اینطور می‌گفت که نیاز به ECMAScript نیست چون کل بازار دست IE هست و مهندسان مایکروسافت بهتر میدونن چی رو چطوری طراحی کنن!مایکروسافت در تمام جلسات ECMAScript سعی می‌کرد تا روند رو منحرف و کند کنه و همین موضوع باعث شد نسخه‌ی چهارم استاندارد (ES4) که قرار بود در اوایل دهه ۲۰۰۰ منتشر شود، به خاطر مخالفت مایکروسافت هرگز نهایی نشه و تبدیل به نسخه گم شده ECMAScript بشه!این قلدری‌ها دلسرد و کندی عجیبی در وب ایجاد کرده بود که حتی دامن W3C رو هم گرفته بود و مثل سابق روی توسعه استانداردهاش کار نمی‌کرد و حتی بعد از سال ۲۰۰۰ تا سال‌ها مایکروسافتی که مدام نسخه جدید و با ویژگی‌ها و تغییرات جدید منتشر می‌کرد هیچ نسخه جدیدی منتشر نکرد!تا این مرورگر جاه طلب و پیشرو موزیلا فایرفاکس شروع به توسعه کد و این محیط کسالت بار رو دوباره هیجان انگیز کرد. البته به این سادگی نبود و حسابی مایکروسافت چوب لای چرخ‌هاشون می‌کرد. مثلا سر همین ES4 گروه موزیلا تغییرات زیادی رو طلب می‌کردن ولی مایکروسافت معتقد بود نیاز نیست.در ES4 گروهی مثل موزیلا که خواهان پیشروی بلندپروازانه بودند دنبال پیاده سازی ویژگی‌های مثل کلاس‌ها و تایپ‌های استاتیک، ماژول‌ها و ... بودن ولی مایکروسافت و برخی دیگر معتقد بودند این تغییرات بیش از نیاز کاربران هست و چون مایکروسافت دست بالاتر رو داشت هیچ وقت ES4 امکان اجرا پیدا نکرد.اما این گروه تسلیم نشدن و ایده‌های خودشون رو در مرورگر فایرفاکس دنبال می‌کردن. حتی با W3C که کند شده بود هم به مشکل خوردن و گروهی تحت عنوان WHATWG برای توسعه HTML ایجاد کردن. همین روحیه در نهایت باعث شد تا فایرفاکس محبوبیت پیدا کنه. البته بعد از این که مایکروسافت متوجه پیشرفت فایرفاکس شد بعد از سال‌ها خواب بودن شروع کرد به توسعه و انتشار نسخه‌های جدید مرورگر IE ولی همون روندی که قبلا خودش برای حذف نت اسکیپ پیش گرفته بود برای خودش اتفاق افتاد و در نهایت پس از نسخه 11 توسعه این مرورگر رو متوقف کرد و عملا بازاری که قبلا پادشاه‌ش بود رو از دست داد.تا گروه موزیلا فایرفاکس کار خودشون رو سال ۲۰۰۲ شروع کردن و دو سال بعد اولین نسخه FirFox رو منتشر کرد و تا دو سال بعد (۲۰۰۶) هم نتونست آنچنان در مقابل IE قدم علم کنه ولی پس از ۲۰۰۶ هر سال کاربران بیشتری به دلیل کندی و باگ‌های زیاد اینترنت اکسپلورر به فایرفاکس مهاجرت می‌کردن و از قدرت مایکروسافت به مرور کم می‌شد.همین تضعیف جایگاه کم کم باعث شد تا مایکروسافت از سر اجبار و نه تعقل کوتاه بیاد تا این که در نهایت، در سال 2008 یک توافق صلح‌آمیز (Harmony proposal) بین دو گروهی که خواهان پیشروی آهسته (ES3.1) بودند (مثل مایکروسافت) و گروهی که خواهان پیشروی بلندپروازانه بودند (ES4) (مثل موزیلا) شکل گرفت که طی این توافق تاریخ در سال ۲۰۰۹ نسخه‌ی سبک‌تر ES5 منتشر شد و همزمان هم برای توسعه نسخه‌ی آینده (ES6/ES2015) چارچوبی پایه‌گذاری شد.این توافق نقطه عطف بسیار مهمی در تاریخ جاوااسکریپت هست، لحظه‌ای که اختلافات تعریف و اجرا کد شروع به یکسان شدن کردن و در نهایت باعث شد تا جاوااسکریپت بسیار فراگیر بشه.این توافق مهم توسط گروه TC39 یا همان Technical Committee 39 گروهی در ECMA است که وظیفه‌ی نگهداری، توسعه و تصویب استاندارد ECMAScript را بر عهده داره انجام شد. از جمله اعضای این گروه میشه به برندان آیک (Brendan Eich) خالق اولین نسخه جاوااسکریپت،آلن ویرفز بروک (Allen Wirfs-Brock) استانداردنویس برجسته ECMA، داگلاس کراکفورد (Douglas Crockford) خالق JSON و JSLint اشاره کرد.بعد از توافق ۲۰۰۹ و افول ارام جایگاه اینترنت اکسپلورر مایکروسافت و رشد مرورگرهایی مثل فایرفاکس و گوگل کروم، نهایتا در سال ۲۰۱۵ یک نسخه استاندارد جدید با کلی قابلیت‌های شگفت انگیز و انقلابی برای جاوااسکریپت با نام ECMAScript 6 منتشر که بعدها به‌طور رسمی به ECMAScript 2015 (ES2015) تغییر نام داد که منجر به فراگیری و رشد انفجاری جاوااسکریپت شد و دنیای وب مخصوصا در سمت کلاینت وارد تغییراتی جدی شد که تا همین امروز هم تب و تابش باقی هست.البته ناگفته نماند که خلق NodeJs بر پایه موتور V8 گوگل کروم و معرفی فریم ورک‌های SPA مثل AngularJs و ReactJS هم بسیار در این موضوع تاثیر گذار بودن.جاوااسکریپت در طی این ۱۰ سال بین ۱۹۹۵ تا سال ۲۰۱۵ خیلی جدی گرفته نمی‌شد. حتی قبل از توافق ۲۰۰۹ بیشتر برای مسخره کردن و اجرا عملیات‌های نچندان مهم و ظاهری مثل تغییر شکل موس و انیمیشن ریزش برف کریسمس استفاده می‌شد.تا قبل از پیدایش ES6 و بلوغ NodeJS شاخه توسعه رابط کاربری در توسعه وب بیشتر یک موضوع پیش پا افتاده بود و شرکتی هم یک فرد رو مستقلاً به عنوان Front-End Developer استخدام نمی‌کرد تا این که اتفاقات بالا افتاد و این فیلد شغلی بخش زیادی از وظیفه‌هایی که تا دیروز لایه Back-End و توسعه دهنده‌های اونها مسئولش بودن رو به عهده گرفت کار تا جایی پیش رفته که در برخی پروژه‌های لایه فرانت اند بسیار سنگین‌تر و تخصصی‌تر از لایه Back-End شده و تیم‌های زیادی داریم که توسعه دهنده Front-End در اون‌ها مساوی یا حتی بیشتر از Back-End developer اون حقوق دریافت می‌کنه. اول آموزش محمد ابراهیمی اول Sun, 11 Sep 2022 19:08:18 +0430 https://virgool.io/avalamoozesh/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%86%D8%B5%D8%A8-%D9%87%D9%85-%D8%B2%D9%85%D8%A7%D9%86-%DA%86%D9%86%D8%AF-%D9%86%D8%B3%D8%AE%D9%87-%D9%85%D8%AE%D8%AA%D9%84%D9%81-node-js-%D8%A8%D8%A7-nvm-w8c9ba2kriuf وقتی چند پروژه داشته باشیم که یکی قدیمی هست و یکی جدید یا این که بخواهیم پروژه رو با نسخه‌های مختلف test کنیم که مشکل اجرایی نداشته باشه و از این دست موارد، نیاز به ابزاری هستکه با اون بتونیم نسخه‌های مختلف node رو همزمان نصب کنیم تا هر وقت خواستیم از یکی از نسخه‌ها استفاده کنیم. nvm ابزاری هست که خیلی ساده و خوب این مسئله رو برای ما هندل میکنه.آموزش نصب هم‌زمان چند نسخه مختلف node js با nvm امکان نصب و استفاده از nvm روی محیط‌های unix, macOS, and windows WSL وجود داره. اگر کاربر خانواده لینوکس باشید که می‌تونید مستقیم به مرحله بعد برید ولی اگر کاربر windows هستید لازم هست ابتدا WSL رو نصب و راه اندازی کنید.توضیح بیشتر درباره WSL برای کابران ویندوزWSL یا همون Windows Subsystem for Linux بعنی داشتن لینوکس در ویندوز. شما ویندوز خودتون رو دارید و هم زمان می‌تونید لینوکس رو هم در ترمینال‌های خودتون در پس زمینه داشته باشید و با دستوراتی به اون ورود کنید یا از اون بخواهید یکسری عملیات رو تحت لینوکس روی سیستم عامل ویندوز فعلی خودتون اجرا کنه. چیزی شبیه VMware هست با این تفاوت که خیلی سریع اجرا میشه و در ترمینال‌های تحت ویندوز در دسترس هست. در (ایــنجا) قدم به قدم گفته چطور نصب و راه اندازی کنید و اگر اهل ویدیو دیدن هستید ( این اموزش یوتیوب) کمکتون می‌کنه. در کل کار سختی نیست، ویندوز خودتون رو آپدیت می‌کنید بعد از بخش turn windows features on or off دو گزینه virtual machine platform و Windows Subsystem for Linux رو تیک می‌زنید تا نصب بشن و بعد از ری‌استارت شدن سیستم wsl در دسترس هست. حالا از store ویندوز ubuntu رو دانلود و نصب می‌کنید و بعد با دستوری که در آموزش‌ها هست اون رو به wsl 2 تغییر بدید تا از قابلیت‌های بیشترش استفاده کنید.این NVM چطور کار می کنه؟بعد از نصب nvm و نسخه های node مورد نظرتون (با دستورات‌ زیر) در هر لحظه یکی از نسخه ها نودی که خودتون انتخاب کردید فعال میشه و هر دستوری بنویسید با اون نسخه اجرا میشه و لازم نیست در دستورات اجرایی خودتون تغییر ایجاد کنید. سویچ بین نسخه‌ها تنها به اجرا یک دستور نیاز داره. برای مثال اگر دستور node -v رو اجرا کنید و v14.16.1 رو نمایش بده اگر دستور nvm use 12.22.1 رو اجرا کنی و بعد دوباره node -v رو اجرا کنی این بار می بینی که v12.22.1 رو نمایش میده که نشون میده نسخه نود فعال تغییر کرده.نصب و راه اندازی nvm اگر می‌خواهید nvm رو روی macOS M1 Silicon نصب کنید قبلش این مطلب رو بخونید.با دستور زیر nvm نصب میشه اما این برای مثال هست و بهتره برید به صفحه گیت‌هاب nvm و دستور نصب نسخه جدیدش که مشابه دستور زیر هست رو کپی کنید و در ترمینال خودتون اجرا کنید.curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bashدستور زیر رو اجرا کنید و اگر nvm نمایش داده شد که هیچ اگر نشد لازم هست سیستم رو ری‌استارت کنید.command -v nvmنصب nvm و نسخه‌های مختلف node jsبرای نصب آخرین نسخه LTS دستور زیر رو اجرا کنید.nvm install --ltsاگر دستور زیر رو اجرا کنید مشخصات نسخه‌های نصب شده رو می‌بینید.nvm ls برای نصب سایر نسخه‌ها اگر version رو میدونید از دستور بعد و اگر می‌خواهید لیست نسخه‌های دردسترس رو ببیند دستور زیر رو اجرا کنید (دریافتش شاید کمی طول بکشه).nvm ls-remoteبرای نصب یک نسخه خاص از دستور زیر استفاده کنید. nvm install [node version] ### for example (nvm install 12.22.1) for node version 12.22.1حالا بهتره دستور nvm ls رو اجرا کنید و نسخه‌ها موجود رو ببنید.تنظیم نسخه پیش فرض nodeاگر دستور node -v رو اجرا کنید ورژن نسخه پیش فرض در حال اجرا رو می‌بنید. برای تغییر نسخه default از دستور زیر استفاده کنید تا هر بار سیستم restart شد به صورت پیش فرض اون برای اجرا اماده بشه.nvm alias default [node version] ### for example (nvm alias default 12.22.1)تغییر نسخه nodeخب رسیدیم به اصل داستان، با این دستور میشه در هر زمان که دوست داشتید به طور موقت نسخه node فعال رو تغییر بدید (دقت کنید که بعد از restart و بستن ترمینال این انتخاب حذف و نسخه پیش فرض فعال میشه). nvm use [node version] ### for example (nvm use 12.22.1)اگر به جای node version کلمه node رو بنویسید (nvm use node) به روزترین نسخه node نصب شده رو واستون فعال میکنه.حذف یکی از node‌هابرای حذف یکی از نسخه‌های node js از دستور زیر استفاده کنید.nvm uninstall [node version] ### for example (nvm uninstall 12.22.1)جمع بندیدر مستند nvm دستورات و توضیحات بیشتری هست ولی آنچه اصل ماجرا و مهم برای کار با nvm بود همین هایی بود که گفتم و می تونید کار رو با اون شروع کنید و ادامه بدید. اول آموزش محمد ابراهیمی اول Wed, 14 Apr 2021 13:09:30 +0430 https://virgool.io/avalamoozesh/%DA%A9%D8%A7%D9%86%D9%81%DB%8C%DA%AF-%DA%A9%D8%A7%D9%85%D9%84-eslint-%D8%A8%D8%B1%D8%A7%DB%8C-react-%D9%88-next-js-j66rbubujb22 مطالب پراکنده و ناقص زیادی در وب هست برای همین اینجا می‌خوام یکبار برای همیشه یک شرح کاملی از هر چیزی که لازم و ضروری هست که بدونید بگم. قبلش بهتره کمی در مورد این که ESLint چی هست و اصلا به چه دردی می‌خوره و آیا ما نیاز داریم که باشه یا نه، بدونیم و بعد بریم سراغ دستورالعمل قدم به قدم نصب، راه اندازی و استفاده ازش.کانفیگ کامل ESLint برای React و Next JSاین ESLint چی هست و به چه دردی می‌خوره؟کلمه lint معنی پرز یا ضایعات پنبه یا شاید در دید کلی‌تر به معنی خورده ضایعات حاشیه انجام کار معنی پیدا کنه. در اینجا وقتی می‌گیم یک ابزار یا پکیج lint استفاده می‌کنیم یعنی ما قصد داریم تا یک ناظر به پروژه اضافه کنیم، واسش یکسری قوانینی که دوست داریم رعایت بشه رو بگیم و کار ما رو بررسی کنه تا اگر خارج از اون قوانین رفتار کردیم بمون هشدار و خطا بده تا رفع کنیم و در نهایت کدی تمیز و روی اصول داشته باشیم. مثلا می‌تونیم برای اون تعریف کنیم که هر بار جایی من یک متغییر تعریف کردم ولی استفاده نکردم خطا بده تا اون رو پاک کنم یا اگر یک switch case تعریف کردم حتما باید بخش default هم داشته باشه تا بدونیم اگر caseها نشدن آخرش باید چی بشه و از این دست قوانین و شرایط.وقتی می‌گیم lint کردن معنی این میده که کد بررسی بشه و هر چیزی که با قوانین تعریف شده ما مطابقت نداشت به شکل خطا یا هشدار در کنسول به ما نمایش داده بشه. اینطور نیاز نیست مدام نگران این باشیم که نکنه جایی چیزی از دستمون در رفته و جلوی خطای انسانی هم گرفته میشه.پکیج‌های زیادی برای این کار هست ولی یکی از بهترین‌هاش ESLint هست. نصب و تنظیم ESLint برای Next JSبا دستور زیر پکیج eslint رو نصب می‌کنیم.npm install --save-dev eslintحالا وقت این هست که فایلی با نام eslintrc.json. رو در ریشه پروژه ایجاد کنیم تا در اون قوانینی که دوست داریم رو تعریف کنیم. البته راه ساده‌تری هم هست، استفاده از generator خود eslint. با اجرا یکی از دستورات زیر از شما سوالاتی در مورد قوانین می‌پرسه و بعد فایل رو با اون قوانینی که گفتید میسازه.npx eslint --initبا کلید‌های بالا پایین کیبورد می‌تونید بین گزینه‌ها جا به جا بشید و با زدن enter انتخابشون کنید. گزینه‌های زیر رو به ترتیب انتخاب کنید:To check syntax and find problemsJavaScript modules (import/export)Reactyes (اگر از تایپ‌اسکریپت استفاده می‌‌کنید) / no (استفاده نمی‌کنید)BrowserJSONYESالان پکیج‌های وابسته لازم نصب میشه و فایل کانفیگ در ریشه برنامه با قوانینی که گفتیم ساخته میشه که مقادیر زیر رو در خودش داره ( اگر بدشانسی اوردید و نصب eslint-plugin-react در مرحله آخرش به خطا خورد، خودتون دستی نصبش کنید):{ &quotenv&quot: { &quotbrowser&quot: true, &quotes2021&quot: true }, &quotextends&quot: [ &quoteslint:recommended&quot, &quotplugin:react/recommended&quot ], &quotparserOptions&quot: { &quotecmaFeatures&quot: { &quotjsx&quot: true }, &quotecmaVersion&quot: 12, &quotsourceType&quot: &quotmodule&quot }, &quotplugins&quot: [ &quotreact&quot ], &quotrules&quot: { } }تنظیمات تکمیلی الان وقت این هست که تنظیمات لازم برای Next JS رو به فایل تنظیماتمون اضافه کنیم. راه ساده‌ترش این هست که فایل eslintrc.json. ایجاد شده در ریشه رو باز کنید و هر چه در اون هست رو با تنظیمات زیر جایگزین کنید و بعد توضیحاتی که در ادامه دادم رو بخونید تا بدونید اینایی که اضافه کردیم چیه.{ &quotsettings&quot: { &quotreact&quot: { &quotversion&quot: &quotdetect&quot } }, &quotenv&quot: { &quotbrowser&quot: true, &quotes2021&quot: true, &quotnode&quot: true }, &quotextends&quot: [ &quoteslint:recommended&quot, &quotplugin:react/recommended&quot ], &quotparserOptions&quot: { &quotecmaFeatures&quot: { &quotjsx&quot: true }, &quotecmaVersion&quot: 12, &quotsourceType&quot: &quotmodule&quot }, &quotplugins&quot: [ &quotreact&quot ], &quotrules&quot: { &quotreact/prop-types&quot: &quotoff&quot, &quotreact/react-in-jsx-scope&quot: &quotoff&quot } }توضیح تنظیمات تکمیلیاحتمالا از نسخه ۱۷ React دارید استفاده می‌کنید پس لازم نیست react رو در همه صفحات import کنید ولی اگر نکنید ESLint گیر میده پس rule زیر رو اضافه کردیم:&quotreact/react-in-jsx-scope&quot: &quotoff&quotاز طرفی چون نمی‌خوایم در همه کامپوننت‌های از prop-types استفاده کنیم یا ممکن هست typescript داشته باشیم rule زیر رو هم اضافه کردیم (آگر لازم می‌دونید اینو نادیده بگیرید):&quotreact/prop-types&quot: &quotoff&quotاین هشدار رو در کنسول داشتیم:Warning: React version not specified in eslint-plugin-react settingsپس در تنظیمات شناسایی ورژن React رو هم اضافه کردیم:&quotsettings&quot: { &quotreact&quot: { &quotversion&quot: &quotdetect&quot } }چون در Next JS بحث Server Side Rendering رو داریم در envها node رو هم اضافه کردیم. &quotenv&quot: { &quotnode&quot: true, ....نادیده گرفتن فایل‌های غیرضروریطبیعتا دوست نداریم پکیج‌هایی که نصب کردیم رو ESLint بررسی کنه پس باید ignore کنیم. همچنین دایرکتوری‌های .next و out رو پس یک فایل در ریشه پروژه با نام eslintignore. می سازیم و در اون این دایکتوری‌ها رو تعریف می‌کنیم.**/node_modules/* **/out/* **/.next/*تعریف Script اجراییحالا باید در فایل package.json در بخش scripts یک دستور تعریف کنیم تا وقتی اجرا کردیم عملیات lint کردن کل پروژه انجام بشه. &quotscripts&quot: { ... &quotlint&quot: &quoteslint ./ --ext js,jsx,ts,tsx&quot }الان اگر در terminal پروژه دستور زیر رو اجرا کنید می‌تونید خروجی علمیات بررسی ESLint رو مشاهده کنید.npm run lintتعریف اجرای اتوماتیک در هنگام توسعهقاعدتا جالب نیست مدام دستور رو دستی اجرا کنیم و دوست داریم وقتی داریم یک کامپوننت رو توسعه میدیم همزمان عملیات lint کردن هم اتفاق بیفته تا ما حین توسعه متوجه اشتباهات بشیم و رفع کنیم. برای این کار باید تنظیمات webpack رو از طریق فایل next.config.js رو توسعه بدیم. (این فایل احتمالا در ریشه پروژه موجود باشه و اگر نیست ایجادش کنید). البته بهتره بدونید تنها فایل‌هایی که مرورگر به اونها درخواست بزنه lint میشه و تنها راه برای بررسی کل پروژه به طور کامل همون دستور بالاست. جای نگرانی نیست چون در حالت واقعی همیشه ما وقتی توسعه میدیم اون صفحه رو هم اجرا میکنیم تا تغییرات رو ببینم پس کم پیش میاد اتفاقی از دیدمون مخفی بشه و فقط برای اطمینان لازم هست قبل production build یک بار دستور بررسی سراسری رو اجرا کنید تا چیزی از قلم نیفته.با webpack 4 و eslint-loaderاگر از 4 webpack استفاده می‌کنید باید ابتدا eslint-loader رو نصب کنید:npm install eslint-loader --save-devو بعد تنظیمات زیر رو در فایل next.config.js بذارید. این تنظیمات باعث میشه تا eslint-loader با تغییر فایل‌ها و اجرا لودرهای مربوط به ترنسپایل اسکریپت‌ها هم اجرا بشه. module.exports = { webpack: (config, { dev }) => { if (dev) { config.module.rules.push({ test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader', options: { // Emit errors as warnings for dev to not break webpack build. // Eslint errors are shown in console for dev, yay :-) emitWarning: dev, } }) } return config } }البته eslint-loader در webpack 5 منسوخ شده و باید از روش زیر استفاده کنید.با webpack 5 و eslint-webpack-pluginاگر از 5 webpack استفاده می‌کنید باید ابتدا eslint-webpack-plugin رو نصب کنید:npm install eslint-webpack-plugin --save-devحالا باید تنظیمات زیر و در فایل next.config.js بذارید.این تنظیمات باعث میشه تا eslint-webpack-plugin با تغییر فایل‌ها و اجرا لودرهای مربوط به ترنسپایل اسکریپت‌ها هم اجرا بشه. const ESLintPlugin = require(&quoteslint-webpack-plugin&quot); module.exports = { future: { webpack5: true, }, webpack: (config, {dev}) => { if (dev) config.plugins.push(new ESLintPlugin()); return config; } };جلوگیری از commitفکر نکنم کسی دوست داشته باشه در حالی که چندتا خطا و هشدار eslint رو داریم اون رو در repository git commit کنیم. برای اتصال git به eslint و اجرا اون قبل هر کامیت از hookهای git میشه استفاده کرد. ابزاری جذاب به نام husky هست که دقیقا همین خواسته ما رو به خوبی انجام میده. پس بریم برای نصب و کانفیگش(اینجا روش‌های اتوماتیک و دستی نصب و کانفیگ هاسکی رو کامل گفته ولی در ادامه روشی که خودم بهتر دیدم رو می‌گم).قبل هر چیز husky رو نصب می‌کنیم:npm i -D huskyحالا باید اسکریپتی به نام prepare رو در package.json ایجاد کنیم تا طی اون git hookها ساخته بشه. ساده‌ترین راه اجرا این دستور هست. بعد این هم script فایل package.json ساخته میشه هم دستور اجرا میشه که حاصل اون میشه ایجاد دایرکتوری husky. در ریشه پروژه و تنظیمات لازم اتصالات git hook. (دقت کنید که دستور set-script در ورژن 7 به بعد npm موجود هست و اگر ورژن npm رو دوست ندارید اپدیت کنید باید خودتون scriptی با نام prepare و دستور اجرایی husky install رو در package.json تعریف و بعد فقط npm run prepare رو اجرا کنید.)npm set-script prepare &quothusky install&quot && npm run prepareالان کانفیگ پایه هاسکی انجام شده و فقط کافی هست دستوری که می‌خوایم قبل هر کامیت اجرا بشه و اگر همه چی اوکی بود اون وقت کامیت ثبت بشه رو ایجاد کنیم. برای این کار کافی هست دستور زیر رو اجرا کنید:npx husky add .husky/pre-commit &quotnpm run lint&quotاین دستور فایلی به نام pre-commit در دایرکتوی husky. ایجاد می‌کنه که در اون دستور npm run lint ثبت شده تا قبل هر کامیت اجرا بشه.دقت کنید که تنظیمات پایه در gitignore. ثبت شده پس اگر کسی پروژه رو clone کرد برای ایجاد این تنظیمات پایه باید ابتدا دستور زیر رو اجرا کنه.npm run prepareجمع بندیدر ابتدا eslint رو یکسری تنظیمات اولیه نصب و راه اندازی کردیم، بعد یکسری تنظیمات بیشتر برای Next JS و React به اون اضافه کردیم. بعد مواردی که نمی‌خواستیم در lint بیاد رو مشخص کردیم. در ادامه رسیدیم به ایجاد اسکریپت اجرایی و اجرای eslint طی عملیات توسعه و در آخر به کمک husky اون رو به git هم متصل کردیم تا اشتباهات قبل کامیت کردن رفع بشن. بعد اینها میشه گفت همه کارهای لازم برای یک توسعه خوب رو کردیم ولی شاید پایان پایان نباشه، شما می‌تونید در مورد قوانین و تنظیمات eslint بیشتر مطالعه کنید و اونها رو در فایل کانفیگش اضافه کنید مثلا با اضافه کردن قانون زیر به بخش rule شما مجبور خواهید شد همه‌جای پروژه stringها رو با double quotes بنویسید و اگر جایی با single quotes بنویسید به خطا می‌خورید.&quotquotes&quot: [&quoterror&quot, &quotdouble&quot] اول آموزش محمد ابراهیمی اول Mon, 12 Apr 2021 15:05:38 +0430 https://virgool.io/avalamoozesh/%DA%86%D8%B1%D8%A7-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%AE%D9%86%DA%AF-%D8%A8%D9%87-%D9%86%D8%B8%D8%B1-%D9%85%DB%8C%D8%B1%D8%B3%D8%AF-mtc1utxmhatb در جاوا اسکریپت موضوعی هست که باعث گیج شدن توسعه‌دهنده‌ها میشه و دلیلی شده برای نقد و مسخره کردن جاوا اسکریپت. چیزی شبیه این:اما داستان چیهبهتره برای شناخت و حل این چالش کمی عمیق‌تر موضوع رو بررسی کنیم از جایی که جاوا اسکریپت تصمیم گرفت منعطف باشه و مثل C++ یا هم قبیله‌هاش سختگیر و خشک نباشه.واسه همین اون تصمیم گرفت از نوع داده سست یا weak typing یا همون dynamic typing پشتیبانی کنه. این سبک معمولا به عنوان یک مزیت برای انعطاف پذیری برنامه‌ عنوان میشه. در این حالت برای متغییر نوع داده مهم نیست و هر مقداری رو در طول پروسه برنامه می‌توانیم در اون مقدار‌دهی کنیم. به عبارتی متغییر‌ها ظر‌ف‌هایی هستند که هر نوع داده‌ای را هر وقت بخواهیم می‌توانیم در آن بریزیم بدون این که به خطا و مشکلی بخوریم یا این که بعد از تبدیل نوع داده در طول برنامه مجبور باشیم تا یک متغییر جدید برای نوع داده جدید بوجود آمده بسازیم.این مثال رو ببینید (بهتره کد‌ها رو کپی کنید و در کنسول مرورگر اجرا کنید و نتیجه رو ببینید):var amount = 99.99; amount = amount * 2; console.log(amount); // 199.98 // convert `amount` to a string, and // add &quot$&quot on the beginning amount = &quot$&quot + String(amount); console.log(amount); // &quot$199.98&quotدر ابتدا amount داده‌ای از نوع Number داشت و در خط یکی مونده به آخر طی عملیات‌هایی داده‌ از نوع String شد. این در نوع داده سست یا پویا مجاز هست حالا فرض کنید اگر جاوا اسکریپت از نوع داده سخت یا Static typing که برخی موارد به اون type enforcement هم گفته میشه پشتیبانی می کرد در خط یکی مونده به آخر باید یک متغییر جدید مثلا amountAsString تعریف می‌شد تا داده تغییر یافته رو نگهداری می‌کرد و دیگه نمی‌شد داده رو توی amount که جنس عددی میگیره ریخت.تبدیل نوع داده خودکار ضمنی یا همون implicit coercion گفتیم که جاوا‌ اسکریپت با اختیار و علم، منعطف بودن رو انتخاب کرده در حالی که می‌تونست مثل خیلی از زبان‌ها خشک و سخت‌گیر باشه. یکی از ویژه‌ترین دلایل فراگیری و محبوب شدن JS همین منعطف بودنش هست.در راستای همین انعطاف پذیری جاوا اسکریپت در دل خود و دور از چشم ما قابلیتی رو پشتیبانی میکنه تحت عنوان تبدیل نوع داده خودکار ضمنی یا همون implicit coercion. در JS شما برای عملیات‌های ریاضی باید جنس داده‌هاتون عددی باشه و اگر بخواین چیزی رو روی صفحه نمایشگر نشون بدید باید از نوع String باشه و وقتی دارین شرط رو چک می‌کنید باید یک داده بولین (true / false) باشه.در راستای همین انعطاف پذیری JS وقتی نوع داده برای عملیاتی معتبر نباشه خودش سعی می‌کنه به نوع داده‌ای که می‌تونه معتبر باشه تبدیل نوع انجام بده و تا حد امکان سخت نگیره و خطا نده. مثلا وقتی شما یک رشته رو به یک شرط بدید اون رو به بولین تبدیل می‌کنه و نمیگه داده معتبر نیست و باید بولین باشه. در JS رشته‌ی تنهایی که خالی هست به False و دارای کاراکتر به True تعبیر میشه:if (&quot this is sample test &quot) alert(1000);همچنین یک اتفاق دیگه هم در کد بالا می‌افته ولی شما متوجه اون نمی‌شید. وقتی alert اجرا میشه چون نمایش یک داده در صفحه است باید 1000 که یک عدد است به رشته تبدیل بشه این کار رو JS اتوماتیک انجام میده. به همه این تبدیل‌های خودکاری که اتفاق می‌افته تبدیل نوع داده خودکار ضمنی یا همون implicit coercion گفته میشه.از طرفی این کار بسته به محل و شرایط اتفاق می افته نه همیشه و همه جا به یک صورت.مثلا رشته غیر خالی اگر به تنهایی در شرط بیاد به true تعبیر می‌شود ولی اگر در یک عملیات مقایسه‌ای بیاد به عدد تبدیل میشه و اگر رشته قابل تبدیل به عدد نباشه NaN میشه!>>> &quot0&quot == false true >>> if (&quot0&quot) console.log(&quot it's true &quot) it's true هر چیزی یه خوبی داره یه بدی داره انصافا درک این تبدیل نوع خودکار کمی پیچیده هست و خب طبق رسم این دنیا هر چیزی یه خوبی‌ داره یه بدی.این کار باعث کاهش عدم قطعیت کد و بروز خطاهای عجیب غریب و گیج کننده‌بودن برای توسعه دهنده میشه. به مثال زیر دقت کنید:یک مثال دیگه:I>>> &quot0&quot == 0 true >>> 0 == [ ] true >>> &quot0&quot == [ ] falseراه حلراه حل این مشکل استفاده از شرط‌های قطعی و تبدیل نوع‌های دستی هست. در واقع هر کس این اصول رو یاد گرفت و باش مشکلی نداشت می‌تونه باش کار کنه ولی کسایی که نمی‌تونن JS دستشون رو نبسته و این امکان رو گذاشته که از شرط قطعی و تبدیل اجباری استفاده کنن تا شبیه زبان‌های نوع داده سخت بشه. دو مثال بالا بعد از تغییرات سختگیرانه:>>> &quot0&quot === false false >>> if ( Number(&quot0&quot) !== 0 ) console.log(&quot it's true &quot) // no resultیک مثال دیگه:I>>> &quot0&quot === 0 false >>> 0 === [ ] false >>> &quot0&quot === [ ] falseاین مطالب هم می‌تونه واست سودمند باشه: https://virgool.io/JavaScript8/%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%D8%AF%D9%87%D9%86%D8%AF%D9%87-front-end-%DB%8C%D8%A7-%DA%86%DB%8C-euhuy45ijfdf https://virgool.io/programmers-revolution/%D8%A7%D8%B3%D8%AA%D8%A7%D8%B1%D8%AA%D8%A2%D9%BE-%DB%8C%D8%A7-%D9%82%D8%AA%D9%84%DA%AF%D8%A7%D9%87-%DA%A9%D8%A7%D8%B1%D9%85%D9%86%D8%AF%D8%A7%D9%86-whtphuslrdju اول آموزش محمد ابراهیمی اول Sun, 19 May 2019 13:37:49 +0430 https://virgool.io/avalamoozesh/%D8%AF%D8%B1%D9%88%D8%BA%DB%8C-%D8%A8%D9%87-%D9%86%D8%A7%D9%85-%D8%B4%D8%A8%D8%A7%D9%87%D8%AA-react-%D9%88-react-native-ecv0abjf8ftk احتمالا به شما هم وقتی که خواستین برید سراغ توسعه دهندگی React یا React Native این رو گفتن که اگر اینو یاد بگیری اونم می‌تونی بزنی و مرزهای جهان برات گشوده میشه و تبدیل می‌شی به یه آدم خفن که هم آپ موبایل میتونه بزنه و هم وب سایت!یکسان نبودن React و React Nativeاو یک مبتدیست!آواز دهل از دور خوش است و گویا دوستان توسعه‌دهنده بخاطر توسعه استارت آپ‌‌های میوه و سبزیجات به میدون میوه و تره‌بار رفت و آمدن داشتن و کمال هم نشین درشون اثر کرده و با نشون دادن میوه‌های درشت و خوشگل سر اصرار دارن بگن تا تهش همینجوره!اگر کسی چنین حرفی بتون زد شک نکنید یا کلا هیچ کدوم رو یاد نداره و احتمالا به مقاله یکی از دوستان میوه‌ فروش استناد میکنه و یا هم توسعه دهنده یکی از دو هست و در دیگری در حد Hello World تجربه داره.اصل نقد من به همکارهای توسعه دهنده‌ هست. برای این که توی‌ کل‌کل‌برتری تکنولوژی‌ها کم نیارن و اثبات کنن React خیلی خفن هست فقط بخشی از حقیقت رو می‌گن و تبدیلش میکنن به یک دروغ که باعث انحراف دیگران مخصوصا کارفرما‌ها میشه!حالا بیا و به کارفرماهایی که عمدتا برنامه نویس نیستن اثبات کن که این همه‌ی حقیقت نیست! نه دیگه، تو راست نمیگی چون ارشد Front-End فلان شرکت معروف گفته میشه! حالا میری ریز میشی تو کار اون شخص می‌بینی توسعه دهنده React Native هست و اوج تلاشش برای توسعه React یک سایت چند صفحه‌ای ساده بوده! نخسته دلاور! چرا React و React Native متفاوت هستندری اکت جی اس برای وب ساخته شده و اجزا داخلیش از جنس ساختار‌‌های صفحات وب هست در حالی که ری‌اکت نیتیو چون قرار هست یک برنامه موبایل تولید کنه و دیگه وب و مرورگری در کار نیست از بسیاری از اون قابلیت‌ها محروم شده و دست به شبیه سازی زده و از طرفی دیگه هم با کدهای نیتیو درگیر هست.بسیاری از پکیج‌ها فقط قابلیت استفاده در یکی از این دو رو دارن. همون طور که گفتم React native از HTML برای رندر برنامه استفاده نمی‌کنه و شبیه سازی میکنه مثلا به جای تگ div شما می‌تونید از کامپوننت View استفاده کنید. پس اگر قطعه کد یا پکیجی رو که برای React و بهتر بگم وب آماده شده رو در ری‌اکت نیتیو import کنید به خطا می خورید.بدیهی هست که ری‌اکت نیتیو هر چقدر هم تلاش کنه تا ساختارهای وب رو شبیه سازی کنه‌ نمی‌تونه دقیقا مشابه به وب رفتار کنه، چرا که اگر دو پلتفرم یکسان بودن خب از یک ساختار هم استفاده می‌شد پس تفاوت‌های وجود داره. این تفاوت ها باعث تفاوت‌های حل نشدنی بخصوص در جزئیات شده. هر چند در کلیات مثلا نام المنت‌ها (div - View) تفاوت‌ها مشخص هست اما مشکل اصلی که باعث نوشتن این نقد هم شده جزئیاتی هست که خودشون رو در پروژه‌های متوسط و حرفه‌ای نشون میدن نه در hello world!مشکل فقط فنی نیست! از لحاظ روانشناسی سویچ به بین این دو محیط باعث کاهش تمرکز و ایجاد اضطراب در افراد میشه! تا دیروز داشتی می‌نوشی div و padding-left : 30px بعد میری اونجا می‌نویسی view و paddingLeft: 30 خب معلومه آب روغن قاطی میکنی و هر چند وقت صفحه خطا رو می‌بینی میگی وای یادم رفت px نذارم!تفاوت‌ها به همینجا ختم نمیشه، نحوه بلید ، اجرا و دیباگ، انیمیشن و حرکات، نویگیشن (Routing)‌، کدهای Native و ... هم باید به این لیست اضافه کرد. جمع بندیشباهت این دو مثل ماشین سواری و کامیون هست، جفتشون ۴ تا چرخ دارن، حرکت میکنن، شیشه جلو و برف پاک کن ،آینه بغل و خیلی چیزای شبیه به هم دارن ولی کاربردشون کاملا متفاوت هست. تعمیرکارهاشونم همین طور! شاید خیلی‌ها باشن که گواهی‌نامه هر دو رو داشته باشن و حتی در هر دو حرفه‌ای باشن، ولی سوال اینه آیا هم اینطور هستن؟ آیا برای همه ممکن هست و این اتفاق چقدر می‌تونه فراگیر باشه؟در واقع جلمه درست این هست: اگر شما React JS رو یاد داشته باشید و روزی تصمیم بگیرید که به توسعه دهندگی برنامه موبایل تغییر شغل بدید،شما نسبت به کسی که با ری‌اکت نیتیو آشنا نیست می تونید سریعتر به توانایی توسعه app موبایل دست پیدا کنید و یا به عبارتی دیگه، زمان یادگیری و توانایی توسعه برنامه موبایل برای شما با ری‌اکت نیتیو کمتر از نیتیو خواهد بود.خلاصه این که، این تصور که این دو کاملا شبیه به هم هستن، و به راحتی از روی پروژه وب سایت میتونی بری روی اپ و دوباره برگردی به وب‌سایت برای توسعه، بدون این که اذیت بشی و نیاز باشه چیز زیادی یاد بگیری اشتباه هست، تو فقط این پتانسیل رو داری که اگر روزی نیاز شد بتونی با سختی کمتری نسبت به ناآشناها به فیلد دیگه سویچ کنی.این مطالب هم می‌تونه واست سودمند باشه: https://virgool.io/iran-react-community/%D8%AE%D8%AF%D8%A7%D8%AD%D8%A7%D9%81%D8%B8-%D8%AF%D8%B4%D9%88%D8%A7%D8%B1%DB%8C%D9%87%D8%A7%DB%8C-redux-zypz5yuqq0t1 https://virgool.io/iran-react-community/%D8%B4%D9%86%D8%A7%D8%AE%D8%AA-%D9%85%D9%81%D8%A7%D9%87%DB%8C%D9%85-ssr-%D9%88-csr-%D8%AF%D8%B1-react-js-v2lsdju7aiuc اول آموزش محمد ابراهیمی اول Sun, 17 Feb 2019 14:37:14 +0330 https://virgool.io/avalamoozesh/%D8%B4%D9%86%D8%A7%D8%AE%D8%AA-%D9%85%D9%81%D8%A7%D9%87%DB%8C%D9%85-ssr-%D9%88-csr-%D8%AF%D8%B1-react-js-v2lsdju7aiuc یک وب اپلیکیشن که به کمک کتابخانه React JS توسعه داده می‌شود، همواره براساس یکی از ساختار‌های SSR یا CSR خواهد بود. هر دو ساختار در جایگاه خاص خود می‌توانند مفید باشند و هیچ کدام بر دیگری برتری مطلق ندارد و در هر پروژه انتخاب یکی از این ساختار می‌تواند بر دیگری برتر باشد.در معماری CSR پردازش‌ها و دریافت اطلاعات در سمت کلاینت و به کمک مرورگر کاربر انجام ‌می‌شود. ابزار Create-React-App مشهورترین ابزار تولید وب اپلیکیشن‌های CSR ری‌اکت است.در معماری SSR بخشی اصلی از پردازش‌ها در سمت سرور و با هدف رفع نقص‌های معماری CSR انجام می‌شود.لود اولیه در معماری SSRویدیو آشنایی با این معماری‌ها با هدف شناخت و انتخاب معماری مناسب برای پروژه تهیه شده و سعی شده ساختار معماری‌ها با جزیئات کامل توضیح داده شود تا توسعه دهنده‌‌ها بتواند درک بهتری از این معماری‌ها داشته باشد و با شناخت پروژه معماری مناسب آن را نیز انتخاب کنند. https://www.aparat.com/v/CV1ic ادامه این محموعه آموزشی منجر به خلق بویلرپلیت RSSR شد که در گیت‌هاب می‌تونید اون رو بررسی کنید و در اینجا هم آموزش‌هاش رو ببیند. این مطالب هم می‌تونه واست سودمند باشه: https://virgool.io/iran-react-community/%D8%AF%D8%B1%D9%88%D8%BA%DB%8C-%D8%A8%D9%87-%D9%86%D8%A7%D9%85-%D8%B4%D8%A8%D8%A7%D9%87%D8%AA-react-%D9%88-react-native-ecv0abjf8ftk https://virgool.io/iran-react-community/%D8%AE%D8%AF%D8%A7%D8%AD%D8%A7%D9%81%D8%B8-%D8%AF%D8%B4%D9%88%D8%A7%D8%B1%DB%8C%D9%87%D8%A7%DB%8C-redux-zypz5yuqq0t1 اول آموزش محمد ابراهیمی اول Mon, 11 Feb 2019 14:41:22 +0330