feed.xml

<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.8.5">Jekyll</generator><link href="http://pullrequest.ir/feed.xml" rel="self" type="application/atom+xml" /><link href="http://pullrequest.ir/" rel="alternate" type="text/html" /><updated>2018-12-23T13:55:41+00:00</updated><id>http://pullrequest.ir/feed.xml</id><title type="html">پول ریکوئست</title><subtitle>پول ریکوئست، دست نوشته های فنی فارسی زبان</subtitle><entry><title type="html">داستان کشف تایم‌زون</title><link href="http://pullrequest.ir/%D8%AA%D8%A7%DB%8C%D9%85-%D8%B2%D9%88%D9%86/" rel="alternate" type="text/html" title="داستان کشف تایم‌زون" /><published>2018-12-23T00:00:00+00:00</published><updated>2018-12-23T00:00:00+00:00</updated><id>http://pullrequest.ir/%D8%AA%D8%A7%DB%8C%D9%85%E2%80%8C%D8%B2%D9%88%D9%86</id><content type="html" xml:base="http://pullrequest.ir/%D8%AA%D8%A7%DB%8C%D9%85-%D8%B2%D9%88%D9%86/">&lt;p&gt;یک روز سرد پاییزی در ساعت پنج عصر، یک سری جوجه دانشمند بیکار که مشغول یادداشت کردن تغییرات روز و شب بودن به یه نکته عجیب برخوردن. این سوال واسشون پیش اومده بود که چرا تا همین شش ماه پیش ساعت پنج عصر هوا آفتابی بود و خورشید تو آسمون بود، ولی الان خورشید رفته پشت کوه و هوا تاریکه؟&lt;/p&gt;

&lt;p&gt;بعد از اینکه این مورد رو با دانشمند بزرگ زمانه‌شون در میون گذاشتن، دانشمند بزرگ تمام شاگردها رو از اتاقش به بیرون پرت کرد و به دیوار خیره شد. داشت به این فکر می‌کرد که کشف قبلیش که سعی داشت این مشکل رو حل کنه، چرا کار نمی‌کنه؟ رفت دفترچه کشفیات خودش رو باز کرد و شروع کرد به خوندن داستان کشف قبلیش که همون کشف Timezone بود:&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;طی تماس اسکایپی که با خاله‌ام در برلین داشته‌م متوجه شدم اینجا هوا تاریک است و آنجا هنوز هوا تاریک نشده و خورشید در آسمانشان است. منطقی هم هست، کره زمین گرد است و می‌چرخد و خورشید آن طرف‌تر ثابت ایستاده. خب اگر این طرف زمین آفتاب وسط آسمان باشد، آن طرف دیگر باید نصفه شب باشد دیگر. ولی آیا منطقی است که تعریف ما از ساعت متفاوت باشد؟ من یک عمر در اینجا به شاگردانم دستور داده‌ام که ساعت شش صبح بیدار شوند و برای من نان سنگک تازه بخرند، اما اگر با یکی از این کودن‌ها به آنجا برویم ساعت شش هوا مثل سگ تاریک است و هنوز نانوایی‌ها باز نکرده‌اند. نمی‌شود که هر بار به جایی می‌رویم ساعت کاری‌مان به هم بخورد.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;وزن خود را از باسن چپش به باسن راست انداخت و ادامه داد:&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;برای حل این موضوع به راه‌حلی رسیدم که می‌تواند این مشکل را حل کند. این که آن وسط کره زمین که اسمش گرینویچ است و همیشه ساعت دوازده ظهر هوا روشن و دوازده شب هوا تاریک است را ساعت مبدا کره زمین در نظر بگیریم و ما که اینور با فاصله از مبدا قرار داریم، ساعت روزمره‌مان را با یک فاصله ثابت از آن ساعت مبدا در نظر بگیریم. خاله‌ام در آلمان هم همین وضعیت، منتها یک فاصله زمانی متفاوت. اینطوری این کودن‌ها هر قبرستانی که بروند باز هم باید ساعت شش صبح بیدار شوند و بروند نان سنگک تازه بخرند. با کمک خط‌کش و یک کره زمین پلاستیکی و یک ساعت مچی، اکنون به دستاورد بزرگی رسیده‌ام. لیستی که فاصله‌زمانی یا همان تایم‌زون کشورهای مختلف کره زمین در آن محاسبه شده و باعث می‌شود همه جای دنیا ساعت شش صبح نانوایی‌ها باز باشند. حال این لیست را به یکی از این کودن‌ها می‌دهم تا در اینترنت آپلود کند و لینک آن را به اشتراک بذارد: 
&lt;a href=&quot;https://www.timeanddate.com/time/map&quot;&gt;https://www.timeanddate.com/time/map&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;کمی خود را خواراند و دوباره به فکر فرو رفت. چه می‌شود اگر ما هر شش ماه یک‌بار بیاییم ساعت را بکشیم جلو تا دوباره ساعت نانوایی‌ها به هم نخورد و دوباره بعد از شش ماه بکشانیمش سر جایش؟ فکر خیلی خوبی بود. باعث می‌شد به هم خوردن ساعت کاری نانوایی‌ها و ساعت روز و شب در دنیا به حداقل برسه و حتی از اینی که الان هم هست بهتر بشه. بعد یکی از شاگردها رو صدا کرد و بهش گفت یه نامه بنویسه و این قضیه رو توش توضیح بده، بعد بره تو تمام نقاط دنیا پخش کنه. بعد از اون کشف بزرگ، سالها تمام مردم دنیا تا امروز در خوبی و خوشی زندگی کردند.&lt;/p&gt;

&lt;p&gt;در سال فلان، درست سال قبل از فوت این دانشمند بزرگ مراسم تجلیلی از او در یکی از تالارهای بزرگ کشور برگزار شد. در مراسم پس از معرفی و تجلیل او یک جلسه پرسش و پاسخ برگزار شد. اون بخاطر کهولت سن سه گوشه نشسته بود و حضار توی سالن سوال‌های خودشون رو از شاگردهای استاد می‌پرسیدن. یکی از حضار پرسید:&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;ما به تازگی یک اپلیکیشن خدمات پرداخت موبایلی نوشته‌ایم و در آن اطلاعات پرداخت‌های مشتریانمان را سیو می‌کنیم. این اطلاعات شامل یک سری چیزها به همراه تاریخ و زمان تراکنش آنها است. ما خیلی نکته‌سنج بودیم و از ساعت گرینویچ بجای ساعت محلی استفاده کردیم تا مشکل فاصله زمانی نداشته باشیم، اما اگر به پاییز برسیم و ساعت‌ها تکان بخورند، باید ساعت‌های قبلی را آپدیت کنیم؟ ما می‌خواهیم بتوانیم به اطلاعات قبلی اعتماد کنیم…&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;دانشمند بزرگ که انگار عرق سرد از پیشانی‌اش می‌ریخت و رنگش پریده بود، رو به آن شاگردش که نامه عقب جلو کردن ساعت را نوشته بود کرد و با تمام توان یک پس‌گردنی محکم به او زد. شاگرد که علت را جویا شد توضیح داد:&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;پدرسگ من این همه محاسبات کرده‌ام تا به این دستاورد برسم، آن‌وقت تو به این شکل اشتباه به مردم توضیحش داده‌ای؟ من کی گفته‌ام ساعت گرینویچ عقب جلو می‌شود؟ من گفتم ساعت محلی. یعنی اینکه مثلا آن مثبت سه و نیم که در ایران به ساعت گرینویچ اضافه می‌شود تا ساعتش بدست بیاید، در بهار بشود مثبت چهار و نیم تا آن قضیه نانوایی حل شود. آن‌وقت توی گوساله برداشته‌ای به مردم گفته‌ای که گرینویچ را جابه‌جا کنند؟&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;شاگرد که سرش رو پائین گرفته بود، از اعماق دلش ابراز پشیمانی کرد و قول داد دیگه این اشتباه رو نکنه. سپس نامه جدیدی نوشت و به کل دنیا و مخصوصا برنامه‌نویس‌های برنامه‌های خدمات پرداختی این نامه جدید رو ایمیل کرد تا متوجه بشن ساعت عقب جلو نمیشه، فقط فاصله زمانیه که عقب جلو میشه.&lt;/p&gt;</content><author><name>امیر مومنیان</name></author><category term="timezone" /><category term="tz" /><category term="timestamp" /><category term="تایمزون" /><category term="گرینویچ" /><summary type="html">یک روز سرد پاییزی در ساعت پنج عصر، یک سری جوجه دانشمند بیکار که مشغول یادداشت کردن تغییرات روز و شب بودن به یه نکته عجیب برخوردن. این سوال واسشون پیش اومده بود که چرا تا همین شش ماه پیش ساعت پنج عصر هوا آفتابی بود و خورشید تو آسمون بود، ولی الان خورشید رفته پشت کوه و هوا تاریکه؟</summary></entry><entry><title type="html">گفته‌های آرش خانگلدی از اسپاتیفای</title><link href="http://pullrequest.ir/%DA%AF%D9%81%D8%AA%D9%87-%D9%87%D8%A7%DB%8C-%D8%A2%D8%B1%D8%B4-%D8%AE%D8%A7%D9%86%DA%AF%D9%84%D8%AF%DB%8C-%D8%A7%D8%B2-%D8%A7%D8%B3%D9%BE%D8%A7%D8%AA%DB%8C%D9%81%D8%A7%DB%8C/" rel="alternate" type="text/html" title="گفته‌های آرش خانگلدی از اسپاتیفای" /><published>2018-12-21T00:00:00+00:00</published><updated>2018-12-21T00:00:00+00:00</updated><id>http://pullrequest.ir/%DA%AF%D9%81%D8%AA%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C%20%D8%A2%D8%B1%D8%B4%20%D8%AE%D8%A7%D9%86%DA%AF%D9%84%D8%AF%DB%8C%20%D8%A7%D8%B2%20%D8%A7%D8%B3%D9%BE%D8%A7%D8%AA%DB%8C%D9%81%D8%A7%DB%8C</id><content type="html" xml:base="http://pullrequest.ir/%DA%AF%D9%81%D8%AA%D9%87-%D9%87%D8%A7%DB%8C-%D8%A2%D8%B1%D8%B4-%D8%AE%D8%A7%D9%86%DA%AF%D9%84%D8%AF%DB%8C-%D8%A7%D8%B2-%D8%A7%D8%B3%D9%BE%D8%A7%D8%AA%DB%8C%D9%81%D8%A7%DB%8C/">&lt;p&gt;خوندن صحبت کسایی که توی شرکت‌های بزرگ دنیا کار کردند به ما کمک میکنه که بدونیم ساز و کار این شرکت‌ها چطوریه، بر اساس چه اصولی مدیریت میشن و پروژه‌هاشون رو چطوری جلو میبرند.
از اینجور مصاحبه‌ها تو اینترنت پیدا میشه ولی این یکی فرق داره؛ چون صحبت‌های یه ایرانی هست که مدت‌ها تو ایران بوده و علاوه بر موارد بالا، در مورد نحوه‌ی مهاجرت و تفاوت‌های اونجا با ایران هم صحبت کرده.
پیشنهاد میکنم صحبت‌های آرش رو که خیلی با دقت گفته شده و جزئیات زیادی از شرکت اسپاتیفای داره رو بخونید.&lt;/p&gt;

&lt;h2 id=&quot;پیشگفتار&quot;&gt;پیشگفتار&lt;/h2&gt;

&lt;p&gt;این صحبت‌ها در ۲ جلسه به صورت video conference و یک جلسه حضوری از پاییز ۹۶ تا بهار ۹۷ انجام شده و بعدها قسمت‌هایی برای انسجام مطلب جابه‌جا شده یا بهش اضافه شده. امیدواریم براتون مفید باشه.&lt;br /&gt;
همینطور تا امروز آرش برامون ۲ جلسه در مورد &lt;a href=&quot;https://www.youtube.com/playlist?list=PLT2xIm2X7W7jh6KggjhwTH9s_8XIlSdOs&quot;&gt;SOLID&lt;/a&gt; و &lt;a href=&quot;https://www.youtube.com/playlist?list=PLT2xIm2X7W7jp1OZ_1wVrxeEb-9KHpPDV&quot;&gt;Test&lt;/a&gt; ارائه داشته که میتونید ببینید و پیشنهاد میدم چنل &lt;a href=&quot;https://www.youtube.com/c/irlogcat&quot;&gt;YouTube&lt;/a&gt; یا &lt;a href=&quot;https://www.aparat.com/logcat&quot;&gt;آپارات&lt;/a&gt; یا &lt;a href=&quot;https://t.me/irlogcat&quot;&gt;تلگرام&lt;/a&gt; ما رو دنبال کنید تا از ارائه‌های بعدیش هم با خبر شید.&lt;/p&gt;

&lt;h2 id=&quot;معرفی&quot;&gt;معرفی&lt;/h2&gt;

&lt;p&gt;سلام&lt;br /&gt;
برای اونایی که منو نمیشناسن یه معرفی کوچیک کنم.&lt;br /&gt;
من آرشم، از سال ۹۱-۹۲ اندروید کار میکنم. قبل از این تاریخ توی شرکتی به عنوان وب دولوپر کار میکردم. تازه اندروید اومد بود، یه خورده جذبش شدم و sdk رو دانلود کردم، با Eclipse شروع به کار کردم. یه اپ برای شرکت نوشتم و بعد دوره‌ی اول استارتاپ ویکند رو شرکت کردم. بعد اون یه جورایی به سمت اندروید کشیده شدم. اندروید دولوپر خیلی کم بود، یه سری پروژه سمتم اومد و انجام دادم. کارایی که انجام دادم و معروف بودن بیسفون و نواک بودند. این دو تا پروژه‌‌هایی بود که حداقل یکی دو سال داخلشون بودم. چندتا پروژه کوچیک و بزرگ دیگه هم در مجموع انجام دادم.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://i.ibb.co/BPwTHvG/photo-2018-12-21-16-38-10.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;از ۵ ماه و خورده‌ای پیش با نقش Android engineer اومدم اسپاتیفای. اینجا کلا senior یا junior خیلی معنی نداره، متناسب با contribution که به سورس کد میکنی و متناسب با مسئولیت‌هایی که به عهده میگیری حقوقت بالاتر و پایینتر میاد. کسی senior نیست و مفهوم جالبی هم هست. خیلی از این موضوع خوشم اومد. چون با این بحث در ایران که کی senior یا junior هست موافق نبودم. از نظر خودم ما ها هممون تا آخر عمرمون چیز برای یادگیری داریم و خیلی دوست نداشتم بگم من این عنوان رو دارم یا ندارم.&lt;/p&gt;

&lt;h4 id=&quot;بیشتر-توضیح-میدی-چطور-حقوق-مشخص-میشه&quot;&gt;بیشتر توضیح میدی چطور حقوق مشخص میشه؟&lt;/h4&gt;

&lt;p&gt;بعدا بیشتر توضیح میدم ولی مثلا بستگی به این داره که روی یه سورس کد contribute کنی یا چند تا، بیشتر بخوام توضیح بدم ما تیمی داریم به اسم core، تیم core با ++c یه سری فیچرهای core اسپاتیفای رو میزنن که توی همه اپ‌های وب، ios، اندروید و ماشین مشترک هست. اینا هر روز صبح باید شبیه تیم‌های دیگه feature release بدن و بگن این کد امروز ما هست. هر موقع core آپدیت میشد، ما هم باید gradle رو آپدیت میکردیم. آپدیت گریدل ۲۰ دقیقه طول میکشید و همه شرکت باید منتظر میموند. اومدن اپ رو modularize کردن و الان اپ اندروید ماژول‌های مختلفی داره. اینکه شما توی چند ماژول contribute کنی به عنوان یه اندروید engineer یا حتی بک‌اند یاد بگیری و به بک‌اند دولوپرها کمک کنی، پروژه‌ی خودتو بک‌اندشو بزنی، Machine Learning یاد بگیری یا Data Science و … متناسب با این مشخص میشه تو چه stepای هستی. step یه مقیاسی توی شرکت اسپاتیفای هست که مشخص میکنه آیا فقط تنها به خودت و پروژه‌ی خودت کمک میکنی؟ آیا داری به کل تیمت کمک میکنی (Squad)؟ آیا داری به اعضای چندتا تیمی که با هم به دنبال یک هدف مشترکید کمک میکنی (Tribe)؟ آیا داری به کل شرکت کمک میکنی؟ متناسب با این مشخص میشه stepت چیه، حقوقت متناسب با اون شکل میگیره و به قولی اون درجه‌ی سنیوریتی اونجا مشخص میشه. منتها هرچقدر step بره بالاتر مسئولیت‌هات بیشتر میشه و طبیعتا باید تجربه‌ی این کار رو هم داشته باشی. اگر میخوای یه step بری بالاتر باید خودتو واقعا ثابت کرده باشی.&lt;/p&gt;

&lt;h4 id=&quot;رفتن-به-اسپاتیفای&quot;&gt;رفتن به اسپاتیفای&lt;/h4&gt;

&lt;p&gt;سعی میکنم خلاصه بگم که چی شد اومدم اسپاتیفای.&lt;br /&gt;
نواک یه اپ music streaming هست و کاری که میکنه خیلی خیلی شبیه اسپاتیفای هست. در واقع خیلی جاها ما از اسپاتیفای الهام میگرفتیم، چون اسپاتیفای واقعا جزء شرکت‌های پیشرو توی این زمینه هست. منم اونجا اندروید انجینیر بودم.&lt;br /&gt;
یکی از Recruiterهای اسپاتیفای با من تماس گرفت و گفت اگر دوست داشته باشی میتونیم با هم کار کنیم. منم با خانومم صحبت کردم و گفتم که همچین موقعیتی هست. ما تو فکرمون بود که از ایران بریم ولی جای خاصی توی ذهنمون نبود، بیشتر بصورت ایده و کلی بود.&lt;br /&gt;
۴ مرحله مختلف ازم تست گرفتند. ۳ تاش تو ایران و ریموت بود. و آخریش که خیلی طولانی بود دعوتم کردن دفتر مرکزی در استکهلم، on-site interview که باید بری توی دفتر و اونجا باهات صحبت میکنن. از تست‌ها اونایی که توی ایران بود کاملا فنی و کد نویسی بود.&lt;/p&gt;

&lt;p&gt;اولیش یه تست چهار جوابی خیلی سریع بود. اگر اشتباه نکنم چیزی نزدیک به بیست سوال رو باید خیلی سریع جواب میدادی، اینقدر سریع که فرصت نمیکردی آنلاین چیزی رو چک کنی، یا باید ولش میکردی و جواب نمیدادی یا غلط جواب میدادی که بدتر بود. هر مرحله بهت ایمیل میزنن که توی این مرحله قبول شدی یا نه.&lt;/p&gt;

&lt;p&gt;مرحله بعدی یکی از انجینیرهای اسپاتیفای یه سری سوال فنی ازم پرسید. مثلا در مورد بیس اندروید، چقدر با اکتیویتی‌ها آشنایی؟ چقدر با کامپوننت‌ها آشنایی؟ از چه ابزارهایی استفاده میکنی؟ تو RXJava این رو استفاده کردی؟ تو Dagger اونو استفاده کردی؟ مثلا این رو می‌دونی چطور باید تنظیم کنی؟ از اینجور بحث‌ها، از چیزای خیلی ابتدایی اندروید شروع کرد رفت بالا تا ببینه چقدر میتونم جواب بدم.&lt;br /&gt;
نیم ساعتی به سوال جواب گذشت، بعد گفت یه کد بنویس. آنلاین باید همونجا اسکرینم رو share میکردم و کد مینوشتم. اگه اشتباه نکنم تو یه ساعت میخواست یه اپ خیلی ساده مثل Run Keeper بنویسم که قدم‌ها رو میشماره و حساب میکنه چند دقیقه دوییدید. فقط تفاوتش این بود که ui مهم نبود، مهم این بود که pure چه جور logic مینویسم، و اینکه باید از Thread استفاده میکردم، میخواستند ببینند ipc بلدم؟ بین ترد‌ها میتونم دیتا جابه‌جا کنم؟ که یا باید از RXJava استفاده میکردم یا EventBus و این جور چیزها.&lt;br /&gt;
بعد از این مرحله هم یه google doc با من share کرد و گفت ما تو این داک یه کدی نوشتیم هرچقدر میتونی ازش اشتباه بگیر. یعنی اشتباه داره اشتباهاش رو مشخص کن. که از اشتباه‌های syntax و تایپی، کامنت داشتن-نداشتن، اشتباه Architecture، Unit Test داشتن-نداشتن، اینکه چیزی مثلا NullPointerException تو runtime بگیرم-نگیرم، از هرچیزی که میتونستم باید ایراد میگرفتم.&lt;/p&gt;

&lt;p&gt;مرحله بعدی باز با یه اندروید انجینیر دیگه جلسه داشتم و یه نفر دیگه که نمیدونم برنامه نویس اندروید بود یا نه، اونم تست برنامه نویسی بود. بیشتر میخواستند ببینند تو بازه کوتاه چقدر سریع و با دقت میتونم کد بزنم. یا اگر بهم وقت بدن چقدر میتونم تمیز کد بزنم.&lt;/p&gt;

&lt;p&gt;وقتی هم از این مرحله قبول شدم گفتند باید بیای اینجا.&lt;br /&gt;
وقتی اومدم سوئد یک روز کلا از صبح تا شب فقط مصاحبه بود، تو ۴ تا مصاحبه تقسیم شد. ۲ ساعت اول با ۲ تا از مدیرهای ۲ تا تیم جلسه گذاشتیم برای این که کاندید بودم به یکی از اون ۲ تا تیم اضافه بشم، در واقع مصاحبه فرهنگی بود. اسمش Cultrual Interview بود، خیلی سوال‌های کلی میپرسیدند. ربطی به برنامه نویسی نداشت مثلا چه جوری خودت رو از لحاظ تکنولوژی آپدیت نگه میداری؟ چه بلاگ‌هایی میخونی؟ اگر تو محیط کار این مشکل پیش بیاد چطور حلش میکنی؟ اگه این کار اورژانسی پیش بیاد چکار میکنی؟ اگه وقت نباشه ریفکتور کنی ولی فیچرو لازم داشته باشیم چه جور سعی میکنی هم کد رو تمیز نگه داری هم فیچر رو به موقع برسونی؟ از لحاظ شخصیتی چطور آدمی هستی؟&lt;br /&gt;
بعد یه مصاحبه داشتم با ۲ تا انجینیر اندروید. بهم گفته بودند یه کدی بنویس بیار و هرچی دوست داری استفاده کن؛ هم architectureای که دوست داری هم ابزارهایی که دوست داری. من یه اپ ساده نوشته بودم و باید از کدم دفاع میکردم. تا جایی که میتونستم باید تمیز مینوشتم، دست خودم بود که چقدر وقت بزارم و تمیز بنویسم. باید دفاع میکردم چرا وقتی که با Lint چک بیلد میگیریم این warningها رو درست نکردم؟ یا مثلا چرا این قسمت تست code coverage خوب نبوده؟ یا چرا این logic رو تست نداره؟ باید دفاع میکردم. بعضی چیزهاشم نمیدونستم که باید این کار رو میکردم. همونجا هم یه چیزایی رو گفتند که باید اضافه میکردم و دوباره شروع کردم کد نوشتن.&lt;br /&gt;
یه قسمتی از تست دوباره فرهنگی بود با دو سه نفر از اعضای تیم‌ها نهار خوردیم که فقط ببینند من چه جور آدمی هستم، میتونیم با هم تو یه تیم باشیم یا نه.&lt;br /&gt;
آخرین تست بهش میگفتند Problem Solving (حل مساله) که کاملا الگوریتمی بود. یه تخت سیاه دادن دستمون، یه مسئله‌ای گفتند و باید با pseudocode (شبه‌کد) حلش میکردم و مرتبه زمانی الگوریتمش رو حساب میکردم. مسئله رو یادم نمیاد چی بود. اون قسمتش برای من چالش برانگیزترینش بود چون تو ایران خیلی شبه‌کد نمینویسیم و مرتبه زمانی الگوریتم حساب نمیکنیم. البته بهم گفته بودند که همچین تستی ازت میگیریم و من مجبور شده بودم یه دوره‌ی یادآوری از طراحی الگوریتم و دیتا استراکچر بگذرونم که یادم بیاد چی‌به‌چی بود. عملکرد خیلی خوبی نداشتم تو اون تست چون بر خلاف اینجا تو ایران الگوریتم به عنوان چیزی که باید روش مسلط باشی خیلی مطرح نبود.&lt;/p&gt;

&lt;p&gt;آخر هم بهم ایمیل زدن که قبول شدی و کی میتونی بیای و مراحل اومدن رو شروع کردم. تو نواک هم کار دستم خیلی زیاد بود همه رو تحویل دادم. کم‌کم آماده شدم اومدم اینجا.&lt;/p&gt;

&lt;h4 id=&quot;ورود-به-اسپاتیفای&quot;&gt;ورود به اسپاتیفای&lt;/h4&gt;

&lt;p&gt;وقتی رسیدم تو ۳ مرحله من رو OnBoard کردند. Onboarding فرایندی هست که وقتی شما وارد شرکت بشید شروع میشه برای اینکه یاد بگیری چه جوری با شرکت کار بکنی و فرآیندهای خاص شرکت رو یاد بگیری. برای همه ۳ مرحله Onboarding انجام میشه. مجموعا چیزی حدود ۲ هفته من تحت آموزش بودم؛ همش یه جا نبود تو زمان‌های مختلف بود. تو اون ۲ هفته من یک خط کد هم نمینوشتم چون داشتم یاد میگرفتم.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://i.ibb.co/MDfzLzT/photo-2018-12-21-16-22-54.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;تو مرحله اول یاد گرفتم اسپاتیفای به صورت کلی ساختارش چه جوریه؟ رییس کیه؟ به کی گزارش میدی؟ تیم‌ها چه جوری شکل میگیرن؟ چه جوری دلویر میکنی محصولی که باید دلویر کنی؟ استک کلی پروژه چه جوریه؟ آیا ما رو کلاودیم؟ آیا ما خودمون دیتا سنتر داریم؟ اندروید پروژه کی شروع شد؟ از اینجور چیزا شروع میکنند و بعد بیشتر توضیح میدند. مثلا ما از چه متودولوژی‌هایی استفاده میکنیم؟ چه جوری اجایل رو مدیریت میکنیم که ازش نتیجه بگیریم؟ مثلا در قالب یه سری بازی فکری این که چطور اجایل کار میکنند رو به ما یاد میدند، که خیلی جالب بود ایده‌هاش و اصلا هزینه هم نداشت، صفر بود عملا، فقط لازم بود یه نفر اجایل رو خوب بشناسه.&lt;/p&gt;

&lt;p&gt;بعد Mobile Onboarding بود که مخصوص موبایل انجینیرها هست. طبیعتا بک‌اند آنبوردینگ، دیتا آنبوردینگ، و از اینجور چیزها هم دارند. تو موبایل آنبوردینگ مثلا اینکه چه جور از اندروید استادیو استفاده میکنیم یا از چیز دیگه، gradle رو چه جور بیلد میکنیم، مثلا اگه بخوای یه A/B test بنویسی پلتفورمش چیه؟ اگه بخوای کدت رو Modulraize بکنی پلتفورمش چیه؟ اگه بخوای یه کامپوننت جدید تو اسپاتیفای رجیستر کنی چطوره؟ یه فیچر کلا جدید بخوای بنویسی چه جوری باید این کار رو بکنی؟ کجا باید رجیسترش کنی؟ چه جوری می‌تونی تیمت رو رجیستر کنی به عنوان owner این کد؟ و BestPracticeهای شرکت.&lt;/p&gt;

&lt;p&gt;آخرین مرحله آنبوردینگ IntroDays که کاملا اطلاعات سطح مدیریتی اسپاتیفای بود. مثلا چه جوری پول در میاره؟ چه جوری تبلیغات میکنه؟ چه جوری با هنرمندا قرارداد میبنده؟ یا چه اطلاعاتی میتونید پابلیک بگید چیارو نمیتونید بگید؟ یا اگر نمیدونید چی رو نمیتونید بگید از فلان کس بپرسید. IT چیکار میکنه تو شرکت؟ HR چیکار میکنه؟ اطلاعات کلی شرکت بود.&lt;br /&gt;
خیلی خیلی آدم زیاد هست تو شرکت و اوایلش گیج میشدم، وقتی یه مشکلی پیش میاد باید چیکار کنم؟ از کی بپرسم؟ یه چیز خیلی خوبی که داشت یک آدمی Assign میشه به تازه واردها به اسم buddy (همون رفیق)؛ کسی هست که role شما رو داره، اونم اندروید انجینیر هست ولی سابقه کار طولانی داره؛ مثلا ۳ ساله اندروید انجینیر هست تو شرکت. تو ماه اول قدم به قدم باهاتون میاد هر سوالی داشته باشید میتونید ازش بپرسید. مثلا از کجا آب بخورم؟ تا اینکه شرکت چه جوری پول در میاره؟ من اگه بخوام به این اطلاعات مالی شرکت دسترسی داشته باشم کجا باید برم؟ اگر بخوام کد رو clone کنم کجا باید برم؟ چون روزهای اول حجم اطلاعاتی که میگرید انقدر زیاد هست که آدم گم میشه تو اون اطلاعات. یه خورده طول میکشه بتونه مدیریتش کنه. حداقل برا من اینجوری بود.&lt;/p&gt;

&lt;p&gt;چیزی که برام جالب بود شرکتایی که خارج از ایران کار میکنند، برای همه کارمند‌ها یه دوره آزمایشی دارند. با هر رولی که وارد شرکت بشی حتی رول CEO. این دوره از طرف کشور کلا اعمال میشه. تو سوئد قانون هست؛ همه افرادی که استخدام میشند ۶ ماه دوره آزمایشی دارند. تو کشورهای دیگه هم هست یه خورده کمتر بیشتر. مثلا من هنوز تو دوره‌ آزمایشیمم. تو دوره آزمایشی ممکنه شما انقدر خراب کنی که بگند نمیخوایم باهات کار کنیم. یا خودت به این نتیجه برسی که من نمیخوام اینجا بمونم. ولی بعد از دوره آزمایشی قراردادت اتومات بدون اینکه چیزی امضا کنی تبدیل میشه به کارمند فول تایم شرکت.&lt;br /&gt;
این نحوه ورود من به شرکت بود.&lt;/p&gt;

&lt;h4 id=&quot;اطلاعات-مالی-شرکت-کامل-شفافه&quot;&gt;اطلاعات مالی شرکت کامل شفافه؟&lt;/h4&gt;

&lt;p&gt;بله&lt;/p&gt;

&lt;h4 id=&quot;حقوق-بقیه-رو-میشه-دید&quot;&gt;حقوق بقیه رو میشه دید؟&lt;/h4&gt;

&lt;p&gt;تا حالا دنبالش نرفتم ولی خیلی سخت نباید باشه دیدنش. کلا اینجا اطلاعات مالی خیلی شفافه، نه فقط اسپاتیفای، کلا تو سوئد حتی حساب کتاب‌های دولت هم میتونید چک کنید. چه برسه به یه شرکت چند ۱۰ هزار نفره.&lt;/p&gt;

&lt;h4 id=&quot;ساختار-تیمها&quot;&gt;ساختار تیم‌ها&lt;/h4&gt;

&lt;p&gt;بحث بعدی که درباره‌ی شرکت خیلی جذاب هست، مدل شکل گیری تیم‌ها و structureشون هست. از پایین به بالا توضیح میدم. از مهندس نرم‌افزار تا CEO.&lt;/p&gt;

&lt;p&gt;در لول پایین squad هست، یه تیم متشکل از یه سری آدم که برای هدف مشترک کار میکنند. مثلا من وارد تیمی شدم که کار سرچ انجام میداد. فیچر و پروداکت سرچ دست این تیم بود. (الان تیمم عوض شده) تیم سرچ از من و یه اندروید engineer دیگه، دو تا ios engineer، یه backend developer، یه product owner، یه designer و آدمی به اسم agile coach و کسی که کار chapter lead رو انجام میده تشکیل شده. یعنی این همه آدم فقط داشتن front end سرچ رو مینوشتند.&lt;br /&gt;
ما دو تا تیم سرچ داریم. یه تیم به اسم search experience و یه تیم دیگه به اسم search platform. من تو search experience بودم، ما فقط front end بخش سرچ رو انجام میدادیم. مثلا بخش اندروید دست من بود، باید maintenance میکردم. اگر پروداکت منیجر چیزی میخواست باید انجام میدادم. اگر A/B Test یا … بود باید پیاده میکردم. ورژن‌های قبلی رو باید maintenance میکردم. چون چندین ورژن از قبل هست که کد بیس و مدل برنامه نویسیش فرق داره و قدیمی بوده. ابزارهایی که توش استفاده شده متفاوت بوده و هنوز لایو هستند، در نتیجه باید maintenanceشون بکنیم. و یه سری کارهای دیگه روزمره.&lt;br /&gt;
backend engineer تیم ما از تیم search platform اطلاعات رو میگرفت aggregate میکرد و به front end میداد. برای مثال وقتی یه سرچ توی اسپاتیفای انجام میدید، ۱۰ مرحله اطلاعات توی سرویس‌های مختلف جابه‌جا میشه تا برسه دست کاربر، این ده مرحله تو search platform انجام میشه مثلا خوندن اطلاعات از دیتابیس‌های distributed و رتبه‌بندی کردنشون، ساختن اطلاعات از microserviceها و FlatBuffer و باینری کردن این‌ها، optimization برای حداقل کردن زمان. ۱۰ سرویس مختلف هست که این اطلاعات سرچ رو میسازه. backend engineer ما اطلاعات این ده سرویس مختلف رو aggregate میکرد و تحویل front end میداد. کار ما از اینجا شروع میشد، اطلاعات رو از backend خودمون میگرفتیم و نمایشش میدادیم و ….&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://i.ibb.co/TMJz2Q3/ING-agile-1.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;تیم ما یه رولی داره (توی اسکوادمون) به اسم به product owner یا product manager، آدم کاملا غیر فنی هست که نحوه‌ی رشد و اداره کردن این product رو بر عهده داره. این آدم تصمیم میگیره که توی product چه اتفاقاتی بیوفته. مثلا این A/B Test اجرا شه که ما ببینیم میتونیم concussion یوزرمون رو ببریم بالا یا نه، ببینیم میتونیم session یوزر رو بیشتر بکنیم یا نه. یا مثلا براساس یه سری اطلاعات که شرکت بدست آورده اگر اطلاعات رو به جای افقی، عمودی نشون بدیم بهتره؛ حالا اینو زمان‌بندی میکنیم که این feature یه ماه وقت میگیره و اون میشکونتش به taskهای کوچکتر و ما شروع میکنیم روش کار کردن. یا احتمال داره تیم‌های دیگه به ما feature request بدن و بگن این feature رو احتیاج داریم، پروداکت منیجر هست تصمیم میگیره ما توان انجامشو داریم یا نه و اینکه چقدر طول میکشه بخوایم انجامش بدیم، آیا لازم هست کسی از تیم دیگه بیاد کمکمون برای پیاده سازی این feature یا نه.&lt;br /&gt;
مثلا شرکت تصمیم میگیره تو شش ماه آینده ۱۰۰ میلیون کاربر جدید بگیریم. اینکه چطور این کاربرها گرفته بشه در قالب یه سری اهداف به تیم‌های مختلف اعلام میشه. مثلا برای گرفتن ۱۰۰ میلیون کاربر لازم هست که توی بازار فلان کشور وارد بشیم و یوزرهاشو نگه داریم. برای انجام این کار باید فیچر x این کارو بکنه و فیچر y اینکار. اینو وقتی product owner فهمید میاد با تیم صحبت میکنه که این فیچر رو میخوایم بزنیم. حالا شما باید نیازمندی‌های شرکت رو رفع کنید، بتونی اون چیزی که ازت میخوان رو تحویل بدی، باید زمان‌بندی کنی، بگی من اینکارو میتونم بکنم ولی دو ماه ازم وقت میگیره. اندروید یه تخمین میده ios یه تخمین، back end یه تخمین. زمان تست و … بهش اضافه میکنن و اعلام میکنن این فیچر اینقدر طول میکشه. ممکن هست یه تیم دیگه به یه فیچر شما نیاز داشته باشه. مثلا یه A/B test بکنه یه چیز جدید اضافه کنه. نمونش ویو سرچ دست ما هست ولی اسپاتیفای یه فیچری اضافه کرد به اسم audio assitance، یه دکمه هست تو تولبار بالای سرچ اضافه شده (نمیدونم تو همه کشورها ریلیز شده یا نه) وقتی میزنید میتونید از اسپاتیفای مثل گوگل home سوال کنید، به فرض فلان آهنگ رو پخش کن. توی این مودم برام یه آهنگی رو پخش کن. این assitance باید توی سرچ اضافه میشد. منتها اضافه کردن فقط یه دکمه نبود، چون باید اینو توی پلتفرم‌های مختلف جا بدیم یا اصلا بتونیم توی نسخه‌های مختلف سرچ جا بدیم، یعنی ممکن هست شما بری یه code base رو ادیت کنی که آخرین بار سه سال پیش ادیت شده، چالشش فقط اضافه کردن یه دکمه نبود؛ درگیری برای ما زیاد داشت. باید unit test, end to end test, integration test بنویسی و مطمئن باشی مشکل نداره. طبیعتا code baseای که سه سال پیش نوشته شده نمیتونی توش از rxjava2 استفاده کنی؛ باید اونجا با یه روش دیگه اضافش کنی. خلاصش اینکه تیم چطوری و چه کارهایی رو با چه dead line میتونه انجام بده رو product manager یا product owner مشخص میکنه.&lt;/p&gt;

&lt;p&gt;نقش جالب دیگه که تو همه‌ی تیم‌ها داریم technical owner هست. معمولا قدیمیترین engineer اون تیم و برخلاف product owner کاملا فنی هست، کد مینویسه همه کار میکنه منتها این نقش رو هم برعهده داره. این دو نفر با هم نقشه راه تیم رو در طول زمان‌های مختلف مشخص میکنند. مثلا ممکن هست یه فیچر باحال به ذهنمون بیاد یا یکی بهمون پیشنهاد بده یا اصلا CEO بگه اگر این فیچر اضافه شه خیلی خوب میشه. ولی technical owner بگه ما توانایی انجامشو نداریم یا کار ضروری تری داریم. اینجوری نیست که فقط product owner از دید غیر فنی بگه اینکارو بکنیم یا این کارو نکنیم.&lt;/p&gt;

&lt;p&gt;تیم‌های ما که بهش میگیم Squad معمولا ۱۰ - ۱۲ نفر هستند، یه فیچر دستشونه و باید اونو توسعه بدن یا نگهداری کنند. شرکت چند طبقه هست و به هر طبقه Tribe میگن. ترایب مجموعه‌ای از چندتا squad هست معمولا ۵ - ۶ تا و حدود ۸۰ - ۱۰۰ نفر که برای یه هدف مشخص کار میکنند. برای مثال من توی ترایبی بودم به اسم core experience. این ترایب از ۵ اسکواد مختلف تشکیل شده و کل ux و ui اپ موبایل اسپاتیفای دست ترایب ما هست؛ تقریبا اکثر فیچرهایی که توی اپ میبینید. صفحه home, your library, search, radio, album, artist همه اینارو ترایب ما زده. ما با هم تعامل نسبتا نزدیکی داریم، مثلا تیمی که صفحه artist رو مینویسه ممکنه بیاد از code base شما استفاده کنه یا یه A/B test بخواد ران کنه که سرچ یه تغییراتی بکنه. هر هفته یه جلسه‌ی مشترک داریم. چیزایی که توسعه میدیم رو با هم share میکنیم. اگر چیزی یاد بگیریم داکیومنت میکنیم و به بقیه میدیم.&lt;/p&gt;

&lt;p&gt;بعد از level ترایب یه تیم‌بندی بزرگتری به اسم Alliance داریم، مجموعه‌ای از tribeها هستند که باز یه کار مشترک ولی در سطح بالاتر انجام میدن. مثلا تمام تیم‌های فنی اسپاتیفای توی یه alliance قرار می‌گیرند. مثل تیم موبایل، دسکتاپ، ماشین یا data science. تعداد هم خیلی زیاد هست مثلا alliance ما ۱۵۰۰ نفر هستند. توی alliance معمولا خیلی ارتباط نزدیک معنا نداره. چون بعضی از تیم‌ها اصلا توی یه کشور نیستند. مثلا تیم رادیو توی آمریکا هست و سوئد نیست. ولی خب بفرض من مجبور بودم برای یه A/B test که خودم مینوشتم با یه تیم توی بوستون هماهنگ میشدم که بخاطر محدودیت زمانی که داشتیم کلا دو سه ساعت مشترک میتونیستم کار کنیم. یا اونا بیرون شرکت بودن یا ما. سعی میکنند خیلی مجبور نشید با تیم‌های یه کشور دیگه کار کنید چون زمان از دست میدید.&lt;/p&gt;

&lt;p&gt;سطح بالای alliance میشه خود شرکت، که مثلا ceo, cto و نقش‌های دیگه داخلش هست.&lt;/p&gt;

&lt;p&gt;این نحوه‌ی تیم‌بندی اسپاتیفای هست. سطح اول اسکواد با تیم‌های ۱۰-۱۲ نفره، بالای اون ترایب معمولا شامل ۵-۶ اسوکاد، بالای اون alliance با ۷-۸ ترایب مختلف که معمولا تعداد افرادشون خیلی زیاد میشه.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://i.ibb.co/854KstX/spotifygraphic.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;h4 id=&quot;مدیریت-پروژه&quot;&gt;مدیریت پروژه&lt;/h4&gt;

&lt;p&gt;توی اسپاتیفای یه داکیومنتی share شده بین همه اعضا و با اون هدف گذاری میکنند. این داکیومنت‌ها رو معمولا مدیرهای رده بالا-C level engineer یا خود CEO میسازند. برای مثال یه مفهومی توی اسپاتیفای وجود داره به اسم north star goal (هدف ستاره قطبی). ستاره قطبی یه مفهوم هست، چیزی که باهاش مسیرمون رو پیدا کنیم. اهداف ستاره قطبی رو CEO میسازه. اینا اهدافی هستند که آینده موسیقی یا صنعت رو قراره شکل بدن. خیلی سطح بالا هستند و ربطی به کارهایی که الان میکنیم نداره و شاید اصلا هیچوقت هم بهش نرسیم. فقط با اون اهداف جهت گیری تیم‌ها مشخص میشه. برای مثال یکی از اهداف اسپاتیفای رسیدن به یک بیلیون کاربر فعال هست. این یک بیلیون کاربر فعال عدد بزرگی هست و طبیعتا طول میکشه بخوایم بهش برسیم. ولی کاربرد‌هایی داره، شما میتونی متناسب با این هدف کار خودت رو بسنجی و بفهمی در راستای این هدف میری جلو یا نه. برای مثال ما میخوایم به یک بیلیون کاربر برسیم و هدف x, y, z. متناسب با این اهداف سالیانه رو میسازیم. مثلا برای رسیدن به یک بیلیون امسال باید ۱۰۰ میلیون کاربر بگیریم. حالا هدف امسال میشه ۱۰۰ میلیون کاربر. بعد اهداف امسال رو میشکونیم به فصل‌های مختلف که بهش میگن quarter مثلا q1, q2, q3, q4. مشخص میکنیم تو هر کوارتر برای رسیدن به هدف چیکار میتونیم بکنیم.&lt;/p&gt;

&lt;p&gt;با توجه به اهداف مشخص شده با product owner برای یه فصل برنامه‌ریزی میکنیم، بفرض ۴ ۵ ۶ تا اسپرینت میبندیم. توی اسپرینت ۱ به اینا میرسیم توی ۲ اونا رو انجام میدیم و توی ۳ اینا. به همین ترتیب اسپرینت‌ها رو میچینیم. البته دونه دونه، یعنی برای ۴ تا اسپرینت بعدی برنامه‌ ریزی نمیکینم، برای یه اسپرینت بعدی برنامه‌ میریزیم. منتها تو backlog (از jira استفاده میکنیم) تمام تسک‌هایی که باید توی یه کوارتر بهش برسیم هست. اگر توی این کوارتر بهش رسیدیم که عالی دممون گرم، میریم بیرون شام میخوریم. اگر نرسیدیم یه جلسه میذاریم که چرا نرسیدیم؟ چه مشکلی هست؟ آیا باید آدم بیشتری بگیریم؟ آیا درست برنامه‌ ریزی نکردیم؟&lt;br /&gt;
تسک‌های جیرا رو به این شکل صفر میکنیم و به اونجا میرسونیم که بگیم به اهداف این کوارتر رسیدیم، ایول حالا بریم کوارتر بعدی. این مدلی ما تسک بندی میکنیم.&lt;/p&gt;

&lt;h4 id=&quot;یک-بیلیون-کاربر-فعال-رو-درست-گفتی-فکر-کنم-چند-برابر-جمعیت-زمین-هست&quot;&gt;یک بیلیون کاربر فعال رو درست گفتی؟ فکر کنم چند برابر جمعیت زمین هست!&lt;/h4&gt;

&lt;p&gt;نه درست گفتم! Billion تو فارسی میشه یک میلیارد! :دی&lt;/p&gt;

&lt;p&gt;شکل رسیدن اهداف به تیم‌ها، در قالب یه structure هست که بهش میگن OKR. مفهوم OKR احتمالا تو شرکت‌های دیگه به شکل دیگه وجود داره ولی بنیان گزارش گوگل هست. OKR یه مفهوم دو لبه هست که از لحاظ مدیریتی باید هم از بالا به پایین به این مفهوم برسیم و هم از پایین به بالا. OKR مخفف objectives and key results هست. یعنی شرکت میاد اهدافش رو مشخص میکنه که میشه objectiveهای شرکت، مثلا شرکت میگه ما بفرض میخوایم به ۱۰۰ میلیون یوزر جدید برسیم، این میشه objective یا در کنار یه سری اهداف دیگه. برای رسیدن به این اهداف چیزی میاد که تضمین کننده رسیدن یا عقلانی بودن اهداف میشه، به اسم key result. یعنی اگر به این نتایج برسیم (هر objective معمولا چندتا key result داره) این objectiveمون انجام شده. مثلا شرکت اعلام میکنه session کاربرا رو از ۲ ساعت بکنیم ۲.۵، ما برگردیم بگیم شدنی نیست غیر منطقی هست یا ایول شدنی هست بریم انجامش بدیم. این بحث دو طرفه هست تا objective مشخص بشه. بعد از اینکه هدف قابل دسترس شد، ما به عنوان تیم‌ها میایم key resultهامون رو مشخص میکنیم. یعنی میگیم ما برای اینکه به این session برسیم، تیم سرچ consumption آهنگ‌هارو از ۵ دقیقه به ۷ دقیقه، از ۱۰ دقیقه به ۱۵ میرسونه. پله پله میبره بالا. چجوری؟ مثلا با اجرا کردن این A/B تست و مارکت کردن توی فلان کشور و کار x و y و z. یعنی میگیم ما به عنوان تیم سرچ برای رسیدن به این هدف چیکار میکنیم. تیم‌های دیگه هم key resultهاشون رو اعلام میکنند، key resultها از تیم‌های مختلف جمع میشه تا مشخص شه ما توی کوارتر بعدی یا سال بعد قراره چیکار کنیم تا به این هدف برسیم.&lt;/p&gt;

&lt;h2 id=&quot;به-key-result-نمره-میدید&quot;&gt;به key result نمره میدید؟&lt;/h2&gt;

&lt;p&gt;بله&lt;/p&gt;

&lt;h4 id=&quot;به-اون-تیکه-که-گفتی-قراره-۵-بشه-۷-نمره-میدید&quot;&gt;به اون تیکه که گفتی قراره ۵ بشه ۷ نمره میدید؟&lt;/h4&gt;

&lt;p&gt;آره درجه اولویت داره و یه سری از بقیه مهمتر هستند. مثلا ما تصمیم میگیریم بریم وارد بازار چین بشیم و شرکت میگه این هدف شماره یک هست. متناسب با اون چند هدف دیگه هم اعلام میشه ولی هدف شماره یک مهمترین هست و برا همه درجه اولویتش بالاست. key result که متناسب با اون هدف یا آبجکتیو اعلام میکنی هم رده‌بندی داره و میگی مثلا من برا objective شماره ۱ این key result رو مشخص میکنم برا objective شماره ۲ اینارو و ممکنه به objective شماره ۳ نرسم چون هدف شماره ۳ هست و انقدر هم مهم نیست ولی هدف ۱ و ۲ اولویت بالا داره و باید بهش برسیم.&lt;/p&gt;

&lt;h4 id=&quot;با-توجه-به-اولویتی-که-داره-ضریب-میدید&quot;&gt;با توجه به اولویتی که داره ضریب میدید؟&lt;/h4&gt;

&lt;p&gt;تقریبا درصدی میریم جلو و زمان درصدی تقسیم میشه، مثلا تا آخر ۳ هفته بعد باید به objective شماره یک برسیم، بک‌لاگمون رو نگاه میکنیم، میبینیم این آبجکتیو ۱۰ تا تسک داره که هنوز انجام نشده در نتیجه میایم با برنامه نویس‌ها یا آدم‌هایی که باید پیاده‌سازی کنند صحبت میکنیم و میگیم که چقدر زمان می‌خوای که این رو انجام بدی؟ میگه من این ۱۰ تا تسک رو تو ۲ هفته انجام میدم. برا اون یه هفته باقی مانده برا objective شماره ۲ تصمیم گیری میکنیم، خوب تو این هفته چندتا تسک میتونی انجام بدی؟ میگه مثلا از objective شماره ۲ این ۲ تا رو میتونم انجام بدم. اول باید به objective شماره یک برسی در کنارش باید برای بقیه هم حرکت کنی.&lt;/p&gt;

&lt;h4 id=&quot;okr-چطور-با-اسکرام-هماهنگ-میکنید&quot;&gt;OKR چطور با اسکرام هماهنگ میکنید؟&lt;/h4&gt;

&lt;p&gt;OKR اول از C level manager اعلام میشه و به alliance منیجرها ابلاق میشه (تیم بزرگ که همه تیم‌های فنی توش بودن، همه HR، همه ریکروتر و … همه این‌ها برا خودشون alliance دارند. برای ما تیم دسکتاپ، وب، موبایل و … توشند) اینا پروداکت‌هایی که دستشون هست رو خوب میشناسند، alliance میگه مثلا برای اینکه به ۱۰۰ میلیون کاربر برسیم پروداکت موبایل ۶۰، دسکتاپ ۲۰، اتومبیل ۵ و … میلیون کاربر جدید جذب کنه.&lt;br /&gt;
آبجکتیو که تو alliance مشخص شد، alliance منیجر میاد به ترایب منیجر (ترایب همون چندتا اسکواد کنار هم بود و ترایب منیجر مدیر بالا سر همه اسکوادهایی هست که تو این ترایب کار میکنند) میگه شما به عنوان مدیر ارشد بخش موبایل باید تضمین کنی سال بعد ۶۰ میلیون کاربر بگیریم. حالا ترایب منیجر تقسیم‌بندی میکنه، برای این کار باید این مارکت رو بگیریم، اونکار رو کنیم و …. یا اگر بگن session کاربر افزایش بدیم از ۱ ساعت بکنیم ۱.۵ ساعت، یه تقسیم‌بندی میکنه میگه تیم home شما باید انقدر افزایش بدید، تیم سرچ انقدر، تیم آرتیست انقدر، میشکونتش به اسکوادهای مختلف و اون موقع هست که به تیم ما به عنوان پایینترین سطح هرم مدیریتی محول میشه. مشخص میشه OKR ما برای ۳ ماه بعد یا سال بعد ۱۵ دقیقه افزایش session کاربر توی جستجو هست. حالا ما به عنوان تیم سرچ این توانایی داریم و تصمیم میگیریم این کار رو بکنیم، اون فیچر اضافه کنیم و به این شکل افزایش میدیم. وقتی همه تیم‌ها sessionشون رو افزایش بدن در نهایت کل اسپاتیفای سشنش از ۱ ساعت میشه یه ساعت و نیم چون هر کدوم از تیم‌ها جدا این کار رو میکنه.&lt;/p&gt;

&lt;h4 id=&quot;تو-تیمهایی-که-xp-یا-اسکرام-کار-میکنند-بعد-از-تصویب-okr-کجا-نوبت-اسکرام-و-xp-میشه&quot;&gt;تو تیم‌هایی که XP یا اسکرام کار میکنند، بعد از تصویب OKR کجا نوبت اسکرام و XP میشه؟&lt;/h4&gt;

&lt;p&gt;این رو product owner تصمیم میگیره، با توجه به چیزایی که بهش اعلام شده و آبجکتیوها و توانایی تیم شروع میکنه و فیچرهای ۳ ماه بعد رو مشخص میکنه. مثلا این A/B Test رو ران کنیم یا … توی backlog جیرا میذاره، متناسب با اون اسپرینت میبنده، زمان بندی میکنه، تسک‌ها محول میکنه و …&lt;/p&gt;

&lt;h4 id=&quot;تو-xp-که-اکثرا-تسکها-روزانست-و-تایم-کمتر-و-اسپرینت-نداریم-مشکلی-پیش-میاد-از-کجا-بفهمیم-یا-چه-جوری-زمان-بندی-کنیم-که-این-تسکها-تو-اون-۳-ماه-تموم-شه&quot;&gt;تو xp که اکثرا تسک‌ها روزانست و تایم کمتر و اسپرینت نداریم مشکلی پیش میاد، از کجا بفهمیم یا چه جوری زمان بندی کنیم که این تسک‌ها تو اون ۳ ماه تموم شه؟&lt;/h4&gt;

&lt;p&gt;این یه تعامل هست بین product owner, technical owner و ما برنامه نویس‌ها. product owner میگه من این فیچرو میخوام پیاده‌سازی کنم نیازمندیش (sub task) میشه این کارا. technical owner آدمیه که چند سال تو اسپاتیفای بوده، هم خودش خیلی سابقه کار داره هم تیم رو خوب میشناسه هم برنامه نویس‌هارو، میگه با توجه به تجربم به این تسک میتونیم برسیم یا نه.&lt;br /&gt;
وقتی sub taskها مشخص شد مثلا با من صحبت میکنند، میگن ما این کارارو میخوایم بکنیم، تو اسپرینت اول باید به اینا برسیم تو اسپرینت دوم به اینا و … آیا میتونیم انجام بدیم؟&lt;br /&gt;
من متناسب با برنامه و کارای خودم میگم آره یا نه. ولی ممکنه یه فیچر انقدر مهم باشه که حتی اگر من نتونم انجامش بدم، اسکواد ما مجبور بشه از یه تیم دیگه یک یا دوتا اندروید انجینیر بگیره؛ موقت بگه شما ۳ یا ۴ ماه بیایید توی تیم ما تا این فیچر رو بتونیم پیاده کنیم. این فیچر انقدر برا شرکت مهم باشه که اسکوادهای دیگه حاضر باشند این فداکاری رو بکنند. بگند اندروید انجینیر ما ۲ ماه بره و ما اندروید دولوپ نکنیم ios یا بک‌اند دولوپ کنیم، چون باید به اون فیچر برسیم. هدف‌هایی که خیلی مهم هست هرجور شده باید بهش برسیم حتی اگر شده نیرو از جای دیگه بگیریم.&lt;/p&gt;

&lt;h4 id=&quot;هر-سطح-okr-خودش-رو-داره&quot;&gt;هر سطح OKR خودش رو داره؟&lt;/h4&gt;

&lt;p&gt;دقیقا هر اسکواد و هر ترایب که میشه مجموعه‌ای از OKR اون اسکوادها و هر alliance میشه مجموعه‌ای از OKR اون ترایب‌ها&lt;/p&gt;

&lt;h4 id=&quot;اگر-به-این-اهداف-نرسیم-چی&quot;&gt;اگر به این اهداف نرسیم چی؟&lt;/h4&gt;

&lt;p&gt;یه سری اهداف هرجور شده باید بهش برسیم. کسایی که این اهداف رو مشخص میکنند آدم‌های معقول و عاقلی هستند، میدونند آیا ما اصلا بهش میتونیم برسیم یا نه. اگر هدف انقدر بلند پروازانه باشه که نتونی بهش برسی یعنی اون مدیر واقعا کارش رو بلد نبوده که همچین هدفی تعیین کرده. هرکس باید بتونه تو جایگاه خودش درست تصمیم بگیره؛ اون مدیر کارش اینه که بتونه برنامه‌ریزی درست کنه، مدیری که نتونه تخمین درستی از تیمش داشته باشه که بدرد نمیخوره.&lt;br /&gt;
ولی نهایتا پیش میاد که به هدفی نرسی، وسط کار زلزله اومد برنامه نویس مرد. در نهایت یه جلساتی برگزار میشه وقتی به یه هدفی نرسی یا برسی، وقتی sprint رو میبندیم یا quarter یا سال تموم شه، جلساتی داریم به اسم retrospective، تمام اعضایی که تو اون هدف شرکت داشتند مثلا تمام اعضای سه اسکواد میشینند با هم retrospective اسپرینت قبلی رو برگزار میکنند. آیا ما به همه اهداف رسیدیم؟ اگه رسیدیم دممون گرم. اگه نرسیدیم چرا نرسیدیم؟ چه نیازمندی‌ای داشتیم؟ اشتباه برنامه ریزی کرده بودیم؟ نیرو کم داشتیم؟ بلد نبودیم این code base رو؟ یا مثلا code base جدید به ما داده شد نمیدونستیم چیه؟ هرچی هست دلیلش باید مشخص شه اصلا مهم نیست کی اشتباه کرده، دنبال قاتل بروسلی نمیگردند و فقط میخوان علتش مشخص شه که دیگه تکرار نشه. اگه اشتباه برنامه‌ریزی کردیم، اگه زیاد رو خودمون حساب کردیم و رو توانایی‌هامون بیش از حد معقول حساب باز کردیم باید یاد بگیریم دفعه دیگه این کار رو نکنیم. یا مثلا اگر ما تو این اسپیرینت جای ۲۰ تا تسک ۶۰ تا برداشتیم دفعه دیگه نباید این اشتباه رو بکنیم. یا مثلا اگه engineer با این framework خوب آشنا نیست و نمیدونه باید چیکار کنه براش کلاس بزاریم و بقیه انجینیرها بهش یاد بدن چطور کار کنه، یا نیروی جدید بگیریم. یا ۴ تا pr جدید بود و باید review میکردم کارم سنگین بود نرسیدم در نتیجه از اسپرینت بعد با تیم‌های دیگه صحبت میکنیم اگر قرار pr بدند از قبل باهامون هماهنگ کنند که تو زمان‌بندی حسابش کنیم، یا برای اندروید انجینیر ۱ ساعت اضافه در هفته در نظر بگیریم چون باید pr ریویو کنه. هرچی هست علتش مشخص شه و حلش کنیم. تا جایی که بشه سعی میکنیم یا این اتفاق نیوفته یا اگر افتاد بلافاصله یه retrospective برگزار بشه و یاد بگیریم که چی از این قضیه یاد گرفتیم، چی شد که ما این اشتباه رو کردیم و دیگه این اشتباه رو تکرار نکنیم.&lt;/p&gt;

&lt;h4 id=&quot;گفتی-با-تیم-مارکتینگ-هم-در-ارتباط-هستید-تصور-من-این-بود-که-باید-تو-یه-الاینس-دیگه-باشه&quot;&gt;گفتی با تیم مارکتینگ هم در ارتباط هستید؟ تصور من این بود که باید تو یه الاینس دیگه باشه.&lt;/h4&gt;

&lt;p&gt;همینطوره که میگی ولی الاینس‌ها باید با هم کار کنن که به اهداف شرکت برسیم! تیم مارکتینگ با ترایب خودش هماهنگ میشه، ترایب ما هم به اون‌ها میگه این کارها لازمه انجام بشه و اون‌ها سعی میکنن انجامش بدن! در واقع Tribe Lead ها باهم توافق میکنن! اینجور تصمیم‌ها تو لایه مدیریتی و بین Product Owner/Tribe Lead اتفاق میوفته.&lt;/p&gt;

&lt;p&gt;ما یه سری جلسات بدرد بخور داریم و فکر میکنم برگزار کردنش خیلی راحت هست. برا ماها خیلی میتونه مفید باشه فارغ از اینکه تو چه شرکت و با چه ابعادی کار میکنیم.
ما ۲ تا جلسه داریم که همه افراد تو یه اسپرینت باید توش حضور داشته باشند.&lt;/p&gt;

&lt;p&gt;یکیش جلسه برنامه‌ریزی هست که معمولا روز اول اسپرینت هست، چیزی نزدیک ۳ الی ۴ ساعت از زمان اون اسپرینت به برنامه ریزی برای ۲ هفته آینده میگذرونیم. شما لازم نیست تو کل اون جلسه حضور داشته باشید چون ممکنه برای ios، اندروید و بک‌اند تصمیم بگیریم. تنها افرادی که حتما باید حضور داشته باشند product owner و technical owner هستند، شما میتونی تا آخر بشینی یا فقط بخش مخصوص به خودت رو بری.&lt;/p&gt;

&lt;p&gt;جلسه دیگه همون retrospective هست، مخففش میکنیم retro. یه جلسه یک یا ۲ ساعتس که روز آخر اسپرینت برگزار میشه و حتما همه باید حضور داشته باشند، اول تا آخرش. این جلسه‌ای هست که توش اسپرینت قبلی رو بررسی میکنیم؛ به همه تسک‌ها رسیدیم یا نرسیدیم؟ اگه نرسیدیم چرا نرسیدیم؟ معمولا به همه تسک‌ها میرسیم چون سعی میکنیم موقع‌ای که برنامه‌ریزی میکنیم دیدگاهی عاقلانه و منطقی داشته باشیم. رو توانایی‌های نداشتمون، یا میرم یاد میگیرم و اینا حساب نمیکنیم، رو چیزی که الان داریم حساب میکنیم. من تا حالا فقط یه اسپرینت بود که تسک انجام نشده داشتم. تازه اومده بودم و از همون اول میدونستیم که احتمالا به یه سری از تسکام نمیرسم. چون تازه داشتم یاد میگرفتم چی به چی بود. بعد از اون تقریبا به همه اسپرینت‌ها میرسیدم.&lt;/p&gt;

&lt;p&gt;بلافاصله بعد یه جلسه داریم که بهش میگن demo. باید چیزی که تو این ۲ هفته روش کار کردی رو demo کنی. ممکنه پیور programming باشه و ui هیچ تغییری نداشته باشه، ولی میای demo میکنی مثلا من این رو refactor کردم، جای اینکه از این استفاده کنم از این یکی استفاده میکنم خیلی بهتر شد. یا مثلا unit test coverage رسوندمش به این. تو ui شما هیچی نمیبینی ولی محصولی که دستت هست رو بهبود دادی میای این رو demo میکنی.&lt;/p&gt;

&lt;p&gt;جلسات retro planning و demo در سطح‌های بالاتر برای کل ترایب و الاینس هم هست ولی لازم نیست شما تو اونا بری، معمولا product owner میره اونجا. مثلا رترو‌هایی که تو ترایب برگزار میشه میگه تیم سرچ تو ۲ هفته گذشته کار ۱ ۲ ۳ ۴ رو انجام داد. تیم فلان این کار رو کرد و …. این نشون میده که آیا پروژه داره پیشرفت میکنه یا نه؟ آیا جایی گیر کرده یا نه؟ آیا جایی نیاز به کمک داره یا نه؟&lt;/p&gt;

&lt;p&gt;یک نقش خیلی جالبی هم داریم اینجا به اسم delivery lead، یکی از مدیرهای نسبتا بالا با سابقه طولانی تو اسپاتیفای که تو هر ترایب هست. این آدم مطمئن میشه آیا تیم‌های مختلف با اون OKR که تنظیم شده میرن جلو یا نه؟ ما هر ۲ هفته یک جلسه با این آدم داریم. مثلا از من میپرسه اون تسکی که داشتی روش کار میکردی انجام دادی یا نه؟ (به برد جیرا ما دسترسی داره) خوب انجام دادی عالیه تسک بعدی به موقع بهش مرسی؟ ممکنه من بگم آره میرسم یا بگم تسک بعدی یه هفته بیشتر زمان لازم دارم چون میخوام برم مسافرت این جزو مواقع‌ای هست که ممکنه یه اسپرینت بهم بریزه ولی OK هست. برای اینکه من هم آدم هستم و میخوام برم از زندگیم لذت ببرم. یا ممکنه بهش بگم یه هفته بیشتر زمان لازم دارم چون باید فلان تکنولوژی رو یاد بگیرم باز هم OK هست، چون من دارم برای رسیدن به اون هدف تلاش میکنم. delivery lead کارش این هست که اسکوادهای مختلف به اون آبجکتیوهایی که بهشون اعلام شده و key resultهایی که تعریف کردن برسند. مطمئن شه این اسکوادها سلامت و توانایی لازم برای رسیدن به اون‌ها رو دارن. مثلا آیا لازم هست آدم جدید به این اسکوادها اضافه شه یا نه؟ delivery lead محصول‌‌های که این اسکوادها باید تحویل بدن رو جمع‌ آوری میکنه. دونه به دونه میپرسه این رو انجام دادی؟ هر ۲ هفته تکرار میشه و باهاشون جلسه داره.&lt;/p&gt;

&lt;p&gt;یه جلسه‌ای ۱۵ دقیقه توی تیم ما هست که صبح ساعت ۹:۴۵ برگزار میشه همون Stand-up meeting، یه لیستی از موارد رو معمولا بررسی میکنن. یکی اینکه امروز باگی به ما ریپورت شده یا نه و اگر ریپورت شده درجه‌اش چیه. ما ۵ درجه‌ی اهمیت توی شرکت داریم که بهشون میگن p1 تا p5. اگر باگ p1 به تیم ریپورت بشه، یعنی بخاطر پروژه‌ی شما کدبیس داره کرش میکنه، هرکاری الان دستت داری رو بذار زمین و شروع کن این باگ رو فیکس کن. اگر لازمه یه هفته بمون شرکت این باگ رو درست کن. البته من از وقتی شرکت بودم به پروژه‌ی ما p1 ریپورت نشده ولی با توجه به باگی که بهتون ریپورت شده ممکنه لازم باشه با کسی که ریپورتش کرده صحبت کنی که چیکار کردی کرش کرد، یا یه ورژن جدید براش بسازی که تست بکنه و از اینجور چیزا. البته ممکن هست چند روزی باگ ریپورت نشه.&lt;br /&gt;
بعد از اون کارهای روزمره‌مون چک میشه مثل TeamCity و اینکه که کی باید چیکار کنه. معمولا کارهارو ریپورت میکنیم که مثلا من فلان کد رو میزنم، بک‌اند فلان کد رو میزنه، شاید من بگم امروز حتما این اندپوینت بک‌اند رو لازم دارم اگر میشه اینو زودتر انجام بدید. یه سری هماهنگی‌های داخل تیمی هست. و در آخر هم یه سری بحث‌های مختلف که یکی مثلا بگه امروز نمیتونم بیام یا فردا کار دارم.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://i.ibb.co/nfTxVnT/kylie-minogue.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;h4 id=&quot;ابزارها&quot;&gt;ابزارها&lt;/h4&gt;

&lt;p&gt;ما تو اسپاتیفای از git برای سورس کنترل استفاده میکنیم، بطور دقیق‌تر از github. شرکت یه برنچ enterprise از گیت‌هاب خریده و وقتی میخواید کدی کامیت کنید یا pull requestها رو چک کنید تو گیت‌هاب شرکت میبینید.&lt;/p&gt;

&lt;p&gt;برای issue tracking و چک کردن تسک‌ها از jira استفاده میکنیم.&lt;/p&gt;

&lt;p&gt;از crashlytics برای crash reporting استفاده میکنیم. یکی از منابع دقیق چک کردن تعداد یوزرهای اکتیو هست. برام جالبه که crashlytics استفاده میکنیم نه google analytics.&lt;/p&gt;

&lt;p&gt;برای دولوپمنت از Android studio 3 beta 2 استفاده میکنیم، چون چند وقت پیش پروژه بخاطر حجم زیادش شروع کرد به کند و کند شدن. برای هر سری بیلد پروژه اندروید استودیو باید یه apk از پروژه بسازه و ببره روی emulator یا دستگاه deploy کنه تا بتونید تستش کنید؛ وقتی کد پروژه خیلی زیاد بشه، کامپایل کردن و ساختن اون apk طولانی میشه. برای همین کل کامیونیتی اندروید (جاوا بیشتر) اومدن یه راه حلی ارائه دادن که کدبیس رو modularize کنید، یعنی کدتون رو ماژول‌های مختلف کامپایل شده کنید و وقتی کد میزنید نیاز نباشه همه‌ی برنامه کامپایل شه تا یه apk ساخته شه. اگر دارید روی کلاس یا ماژول جدا کد میزنید فقط همون ماژول کامپایل میشه و بقیه ماژول‌ها byte codeهای آماده جاوا هست و شما فقط قسمت خودتون رو میذارید کنار اون byte codeها و apk میگیرید. این کار رو بهش میگن modularization که الان یه سری شرکت‌های نسبتا بزرگ تا حدی درگیرشن، یا انجامش دادن یا میخوان انجامش بدن. خلاصشو بخوام بگم یه ماژولی که شما میخواید روش کار کنید manifest خودشو داره، کدهای جاوای خودشو داره، اطلاعات ماژول در فایل‌های yaml جدا میذارید، همه چی تو ماژول خودتون تعریف میشه، انگار کلا با یه پروژه دیگه کار میکنید. زمان بیلد از وقتی که build clean میکردیم و گریدل همه چیو بیلد میکرد قبلا حدود ۱۰ دقیقه طول میکشید، ولی با این روش حدود ۱۰ ثانیه شده، به شکل خیلی خیلی محسوسی زمان بیلدمون پایین اومده. شرکت چند وقت پیش نفر ساعت حساب کرده بود یه رقم خیلی زیادی رو داشت عملا مینداخت دور، فقط چون منتظر گریدل میشدیم. به همین دلیل ما پروژه modularize رو شروع کردیم. چون اندروید استودیو ۲ روی کدهایی که ماژولارایز هستند خیلی بد و کند هست به مشکل خوردیم. بچه‌های شرکت یه کانال مستقیم با گوگل داشتند و قبل اینکه اندروید استودیو ۳ ریلیز شه یه سری تست‌ها کردند و دیدن جواب میده و خیلی بهتر میشه. درواقع اندروید استودیو ۳ خیلی بهینه شده برای کدهای ماژولارایز. رفتیم روش و دیدیم خیلی خوب جواب میده و ازش استفاده کردیم. حتی از زمانی که canary (قناری) بود استفاده میکردیم. اما بعضی وقت‌ها پایدار نیست، حتی الان که بتا هست به مشکلایی میخوریم. ممکنه کرش کنه یا اتفاقات عجیب بیوفته. تا الان فقط کد بیس اندروید ۱۵۰ ماژول داره و اگر نمیرفتیم روی ماژولارایز کردن دیگه داستان بود و از همه کارهامون عقب میوفتادیم.&lt;/p&gt;

&lt;p&gt;ابزار دیگه TeamCity هست، پروژه‌ای که شرکت JetBrains نوشته و برای مدیریت تست‌ها هست. باهاش میتونید چک کنید امروز چندتا تستمون fail شده، Integration testing فیل شده دارید یا نه، End-to-End Test فیل شده دارید یا نه. مثلا ایمولاتور اومده لاگین کرده رفته توی فلان صفحه و روی یه آهنگ کیلک کرده ولی اون آهنگ پخش نشده. این یه تست خیلی خیلی مهمه که fail شده و شما باید همون روز چکش کنید. ممکنه یکی یه جای دیگه‌ی کد، یه تغییری داده باشه که الان پلیر کار نکنه. تیم پلیر باید بره End-to-End تست رو چک کنه ببینه اشکال از کد ما بوده یا از اونا، براشون یه باگ ریپورت کنه که اینو درستش کنید چون پلیر کار نمیکنه. برای همین هر روز باید داشبورد TeamCity چک بشه.&lt;/p&gt;

&lt;h4 id=&quot;معماری&quot;&gt;معماری&lt;/h4&gt;

&lt;p&gt;تو شرکت دو معماری نرم‌افزار داریم mvp و mvvm. بسته به اینکه چیکار می‌کنید معمولا یکی از این دو تا استفاده میشه. Flat کلا وجود نداره و اگر شما فلت کار کنید نتیجه میگیرند که کارت رو بلد نیستی و تقریبا باید از شرکت بری. Flat architecture بی‌معنی هست و باید پروژه architect بشه و همه سر اون معماری توافق کنند. من کدی که فلت باشه اصلا بهش دست نمیزنم. mvp مزایای خودش رو داره mvvm هم همینطور. برای کدهایی که معمولا ماها میزنیم، مثلا یه بک‌اند و فرانت‌اند هست که باید به هم وصل شه و یه اطلاعاتی بخونید و چیزایی تو دیتابیس بریزید از mvp استفاده میکنیم، دلیلشم تست پذیری mvp هست. وقتی برای قسمت رندرینگ بخوایم کدی بنویسیم از معماری mvvm استفاده میکنیم. برای اینکه رندر کردن خیلی راحت‌تره، درواقع کارهای ui. جدا کردن بخش logic و سپردن interaction به دست observableها و rxjava توی mvvm خیلی راحت‌تر میشه، برای هابز که کار رندرینگ رو انجام میداد از mvvm استفاده کردیم.&lt;/p&gt;

&lt;p&gt;یه بحثی تو معماری mvp هست به اسم multiple presenter. برای مثال بخوام بگم وقتی وارد شرکت شدم، به پروژه سرچ کمک میکردم. وقتی از بیرون به کدبیس بخش سرچ نگاه کنید، یه لایه ویو داره و یه پرزنتر که لاجیک سرچ اونجا انجام میشه و یه مدل و از اینجور داستان‌ها؛ منتها خودش از بخش‌های مختلفی تشکیل شده. ما کلا دو تا سرچ اصلی توی اسپاتیفای داریم. یکی دکمه‌ی ذره‌بین که میزنید و میری اونجا کاراتون رو میکنید، یکی سرچ قسمت رادیو. بخش رادیو اسپاتیفای هم یه سرچ داره که اون رو هم ما باید مینوشتیم و لاجیکش تا حدی فرق میکرد. وقتی چیزی رو سرچ میکنید و ریسپانس شامل آهنگ‌ها آلبوم‌ها و … میاد، یه قسمتی نوشته see all، اگر روش بزنید صفحه‌ی همه آهنگ‌ها و آلبوم‌ها رو میاره، اونجا هم لاجیک خودشو داره. همین برای رادیو هم وجود داره. این فقط بخش معمولی سرچ بود. شرکت بعد از مدتی تصمیم گرفته بود که محصول جدیدی داخل اسپاتیفای ارائه بده، یه لایه جدید از یوزرهای free که داستانی پشتش داره، کاری با بخش بیزینسش نداریم. فکر کنید شرکت یه پروداکت جدید اضافه کرده بود، خود این پروداکت جدید متناسب با نیازش سرچ رو تغییر داده بود، درواقع ما باید برای هر پروداکت که داخل شرکت تعریف میشد یه سرچ متناسب با اون مینوشتیم. مثلا ممکنه سرچ رادیو ورژن جدید با قبلی هم ui، هم endpointهای بک‌اندش، logic، logging، همه چیش فرق بکنه. یه مفهومی وجود داره توی mvp به اسم multiple presenter که میگه برای هرکدوم از این کارها presenter خودشو بساز و تست‌های خودشو بنویس و لاجیک هرکار رو جدا هندل کن. منتها چون این‌ها یه سری functionality داره که بین هم مشترک هست، طبیعتا از یه سری سوپر کلاس استفاده میشه تا کد duplicate نشه.&lt;br /&gt;
مشکل دیگه که تو کد بیس‌های بزرگ وجود داره پشتیبانی از ورژن‌های مختلفی هست که تا حالا ریلیز کردی. شما حساب کنید این ۶ تا مدل مختلف سرچ تو طول زمان عوض شدن، framework هاشون فرق میکنه، مدل کد بیسش فرق میکنه، اصلا سرچ قبلی تو یه کلاس دیگه وجود داره. مثلا سرچی که اسپاتیفای ۳ سال پیش نوشته هم معماریش فرق داره هم ابزاراش، همه چیش فرق داره ولی چون هنوز تعداد زیادی یوزر دارند و ازش استفاده میکنند و رو ورژن‌های قدیمی اسپاتیفای هستند باید اون رو هم ساپورت کنید. در نتیجه وقتی یه فیچر رکوئستی به ما داده میشه، مثلا اضافه کردن فلان دکمه توی سرچ، در ظاهر یه دکمه کوچیکه اما شما باید برا ۶ مدل مختلف سرچ این رو اضافه کنی و برای ورژن‌های قبلی backward compatibility داشته باشه. یعنی باید بری تو یه کلاس دیگه که ممکنه dependency injection متفاوتی داشته باشه، mvp نباشه و رو چیز دیگه باشه، به اونم اضافه کنی. همینطور برا تمام این‌ها باید تست نوشته شه. یعنی شما نمیتونی اینجا یه کد بزنی بگی من خودم دستی تستش کردم کار میکنه. تو شرکت یه استانداردی وجود داره به اسم end to end testing منتها نه به معنی خود end to end یعنی شما باید تمام لایه‌های تست رو رعایت کنی. وقتی یه کد مینویسی معماریش باید درست باشه، میره تو ریویو و چند نفر میان ریویو میکنند. ممکنه یه سری نظر بدن، معماریش این قسمت اشتباه داره، ممکنه اون قسمتش لیک بکنه، اینجا از این ابزار استفاده کن و …. تمام این ریویوها که تموم شد، شما باید تستت قانون ۸۰٪ کد کاوریج رعایت کنه. یعنی کدت باید ۸۰٪ توسط تست کاور شده باشه. لایه پرزنتر توسط unit test باید ۱۰۰٪ کاور شده باشه. بعد از یونیت تست اگر componentهات تغییر کرده باید integration test براشون بنویسی، یعنی دونه دونه کامپوننت‌ها باید جدا تست بشند قبل از اینکه برند با مستر مرج بشند. مثلا اگر یه باتن رو کلیک میکنی قراره یه انیمیشنی اجرا شه و یه کاری بکنه این رو به عنوان یه کامپوننت integration تست براش بنویسی. تازه تو مرحله بعد اگر back end یا end point جدیدی رو دارید تست میکنید، یا اگر کاری که میکنید خیلی برای یوزر critical هست که معمولا پروداکت منیجر و تیم تعیینش میکنه، باید براش end to end test بنویسی، یعنی یه تستی مینویسی که apk میره رو emulator نصب میشه، دیپلوی میشه، بعد لاگین میکنه، میره اون کاری که شما کردید رو انجام میده، بک‌اند واقع‌ای رو تست میکنه جواب رو میگیره چک میکنه و اگر همه چی کار کرد اون موقع تست pass میشه و میگه شما کارت موفقیت آمیز بود، در غیر این صورت کدت تو مستر مرج نمیشه، چندین بار review میشه هم بخش تستش هم بخش کد نویسیش.&lt;br /&gt;
این جا کد نوشتن یه خرده دردسرهایی داره، معمولا چندتا ورژن رو باید ساپورت بکنی، چندتا ورژن تست بنویسی، بعضی ورژن‌ها اصلا باهم همخونی نداره چون معماریش فرق داره یا ممکنه همه‌چیش فرق داشته باشه.&lt;/p&gt;

&lt;h4 id=&quot;چرا-هنوز-کد-بیس-۳-سال-پیش-باید-تغییر-کنه&quot;&gt;چرا هنوز کد بیس ۳ سال پیش باید تغییر کنه؟&lt;/h4&gt;

&lt;p&gt;برای اینکه تعداد زیادی کاربر ازش استفاده میکنن، در واقع همه بخش های پروژه از یک تکنولوژی استفاده نمیکنن، ممکنه چند سال پیش نوشته شده باشه و از اون موقع ریفکتور و بروز رسانی نشده باشه!&lt;/p&gt;

&lt;h4 id=&quot;مگه-آپدیت-کنه-کلا-آپدیت-نمیشه&quot;&gt;مگه آپدیت کنه کلا آپدیت نمیشه؟&lt;/h4&gt;

&lt;p&gt;نه الزاما! مثلا صفحه Home و Search دست تیم ما هست! و هرکدوم یه مدل و تو یه زمان نوشته شده! مثلا تو تو Home از یه کتابخونه برای فلان کار استفاده شده و تو Search از یه کتابخونه دیگه! اینه که ممکنه مجبور بشی برای یه کار دوتا کد با Stack کاملا متفاوت رو تغییر بدی ولی جفتشون یه کار رو باید بکنن در نهایت&lt;/p&gt;

&lt;h5 id=&quot;تایتل-این-قسمت-رو-نمیدونم-چی-انتخاب-کنم&quot;&gt;تایتل این قسمت رو نمیدونم چی انتخاب کنم&lt;/h5&gt;

&lt;p&gt;از ۶ ماه پیش حتما باید TDD هم بنویسیم. البته نهایتا زمانی که کد رو پوش میکنیم کسی نمیفهمه شما TDD نوشتید یا نه، منتها وقتی با یکی پر پروگمینگ میکنید و همیشه بغل دستتون هست یا یه چیزی رو توضیح میدید مخصوصا اگر ببینند یک لاجیکی تست نشده باشه این نشون میده شما TDD ننوشتید.&lt;br /&gt;
مثلا فکر کنید یه پرزنتری داریم که قرار هست کار شماره ۱-۲-۳ رو بکنه که اینا لیست میشه تو داکیومنتی که داریم. برای اینکه TDD بنویسیم، اولین شروع میکنیم براش تست شماره ۱ رو مینویسیم؛ تست رو اجرا میکنیم و faile میشه، بعد شروع میکنیم حل کردن مشکل. چیکار کنیم که این تست پاس شه؟ کدش رو مینویسیم تا تست pass. و میریم سراغ سناریو ۲ تستش رو مینویسیم و تست faile میشه و شروع میکنیم تست رو حل میکنیم تا آخر. اگر لازم باشه کد رو ریفکتور میکنیم و در نهایت زمانی که کد رو submit میکنیم پرزنترها باید annotation خاصی داشته باشند، برای اینکه بات کد review میاد کلاسها رو چک میکنه و اگر پرزنتیشن لاجیک داشته باشه یعنی این کلاس قرار هست pure جاوا باشه و هیچ قابلیتی از اندروید نباید توش استفاده بشه. این کد باید ۱۰۰٪ تست کاوریج داشته باشه، یعنی به اعضای هر خط کدی که اونجا نوشته شده باید یک تست باشه. هر لاجیکی که هست باید تست شده باشه واگرنه به صورت اتوماتیک پول ریکوست شما ریجکت میشه، اصلا نمیتونید مرج کنید. ۴۳ تست مختلف رو prتون ران میشه، رو هر کامیتی که میکنید اگر رو یه پول ریکوست ۵ تا کامیت هم باشه به اعضای هر ۵ تا تمام تست‌ها روش اجرا میشه. این تست‌ها شامل Static analysis میشه یه سری استانداردها که تعریف شده و با فایل‌های xml مشخص میشه. مثلا بعد از اینکه اسم کلاس رو نوشتید باید یه اسپیس بزارید، زمان تعریف تابع‌ حتما باید پابلیک پرایویت یا پروتکتد بودنشون مشخص باشه. یه سری قانون داره اینارو چک میکنه رو کامیت. بعد مثلا به این میرسیم که این کد آیا تست به اندازه کافی داره؟ رو ورژن ریلیز کانفلیکت نمیخوره؟ وقتی که تست تموم شد شما یه نفر رو پینگ میکنید میگید بیا کد من رو review کن. کد review میشه ممکنه یه سری نظر بده اعمال میکنید و کد مرج میشه میره تو master. هرکسی هم رو fork خودش کار میکنه پول ریکوست میده رو مستر مثل کاری که تو گیت‌هاب رو لایبراری‌های معروف انجام میشه. به اعضای هر ریلیزی هم که قرار هست اتفاق بی‌افته یه برنچ ساخته میشه.&lt;/p&gt;

&lt;h4 id=&quot;rxjava&quot;&gt;rxJava&lt;/h4&gt;

&lt;p&gt;توی شرکت از rxjava خیلی خیلی زیاد استفاده میکنیم، ۲ تا چیزی که تو مصاحبه من خیلی روش تاکید شد، یکی چقدر رو rxjava مسلطم و چقدر best practiceهای خود جاوا رو بلدم. تقریبا برای همه چیز از rxjava استفاده میشه. البته تو پروژه اصلی به خاطر infrastructure هنوز رو rxjava1 هستیم. چون هنوز یه سری چیزا تو rxjava2 ساپورت نمیشه نمیتونیم بریم روش. ولی از بک‌اند بخوای با نتورکینگ چیزی بگیرید، یا io انجام بدید، رو دیسک چیزی بزارید، بین پرزنتر‌ها مسیج رد و بدل کنید، هرکاری که بخواید بکنید با rxjava انجام میشه و خیلی به دردمون میخوره.&lt;br /&gt;
مدل استفاده اینجا از rxjava برای من اوایلش یه مقدار عجیب غریب بود. تجربه قبلی خودم این بود، کدی رو که مینویسید یه observableای هست بعد باهاش یه سری اطلاعات رو subscribe میکنید مثلا map میکنید به یه چیز دیگه، لازم باشه switch map میکنید، لازم باشه compose میکنید، هر کاری که لازم باشه روی زنجیره کارای rxjava انجام میدید. منتها اینجا مدلی که پیاده سازی کردن و باید تبعیت بکنید اینه که هر کدوم از این فانکشن‌ها برای خودش یه کلاس هست. یعنی اگر بخواید ورودی رو بگیرید مپ کنید به یه چیز دیگه، نمیتونید یه rxchain دو - سه تایی پشت هم بنویسید بگید این رو مپ کن به این، بعد سویج مپ کن به اون و …. کاری که باید بکنید اینه که یه کلاس بنویسید بگید ورودیش اینه خروجیش اینه و تابع map رو implement میکنه. مثلا function1 رو ایمپلیمنت میکنه. توی کلاس کد رو مینویسید و کلاس و آبجکت کلاس رو توی rxchain تون پاس میدید بین هم دیگه. نه اینکه یه زنجیره بزرگ از اوپراتورهای rxjava داشته باشید. اولش مفهوم این یه خورده برای من گیج کننده بود، چون پیش میومد مثلا یه زنجیری از rxJava به وجود بیاد که ۱۰ تا اوپراتور داشته باشه و دیباگ کردنش اوایل برای من عجیب بود، مثلا یه باگی ریپورت میشد و لازم بود یه زنجیر rxjava رو چک بکنم و گیج میشدم یهو آبجکت از این کلاس رفت تو اون کلاس، از اون کلاس برگشت پاس داده شد به یه کلاس دیگه، اوایلش مدل متفاوتی برای من بود.&lt;/p&gt;

&lt;h4 id=&quot;di&quot;&gt;DI&lt;/h4&gt;

&lt;p&gt;برای dependency injection تقریبا از یه سال پیش از dagger 2 استفاده میشه. تقریبا الان هر چیز جدیدی که مینویسید باید با دگر ۲ داخلش دیپندسی‌ها اینجک بشه و قبل از اون هم constructor injection بود. به جز constructor تقریبا جای دیگه‌ای حق نداشتید آبجکتی رو new کنید. نمیتونستید توی فانکشن بگید من یه object احتیاج دارم الان اینجا new کنم. اگر همچین کدی مینوشتید پول ریکوستتون با static check که داشتیم failed میشد. چون new کردن آبجکت داخل scope فانکشن با اصول دیپندنسی اینجکشن solid مغایرت داره، اگر میخواید همچین کاری بکنید باید اجازه بگیرید. یعنی یه سری permission خاص بگیرید که به این دلیل لازمه اینجا باشه، اون موقع فقط برای اون pr خاص اجازه صادر میشه. معمولا نمیبینید هرجای کد یه سری آبجکت new شه، اینجا خیلی روی اصول solid تاکید میشه.&lt;/p&gt;

&lt;h4 id=&quot;test&quot;&gt;Test&lt;/h4&gt;

&lt;p&gt;هرم تست اینجا به شکل کامل رعایت میشه، unit test خیلی زیاد داریم، تا جایی که میتونید باید یونیت تست بنویسید. Presenter تو معماری mvp باید ۱۰۰٪ code coverage داشته باشه واگرنه پول ریکوست failed میشه. integration test تا جایی که نیاز باشه. end to end test بنا به نیاز نوشته میشه، چون خیلی زمان گیر هست اجرا کردنشون. critical user journey (مهمترین کاربری های یک اپ، مثلا در مورد اپ اسپاتیفای بخش گوش دادن موسیقی، جستجو، ثبت نام، خرید اشتراک، موارد اینطوری که خیلی حیاتی هست رو میگن بهشون) رو end to end test براش مینویسیم. آخر هم manual test داریم، هر هفته جمعه تمام تیم‌های اسپاتیفای از ساعت ۱۰ تا ۱۱:۳۰ manual test دارند چون هر جمعه ریلیز داریم.&lt;br /&gt;
یه داکیومنتی هر جمعه فرستاده میشه برای تیم‌ها و شما باید این داکیومنت رو امضا بکنی که من پروداکتم رو تست کردم داره کار میکنه یا تست کردم باگ داره ریلیز نکنید. تمام تیم تو اون ۱.۵ ساعت جمع میشند و پروداکتی که دستشون هست رو تست میکنند. چیزای مختلف که اون هفته روش کد نوشته شده یا چیزای قبلی رو تست میکنند. استرس تست یا …. خلاصه ۱.۵ ساعت manual testing هست، تا جایی که میتونید باید چیزای مختلف رو تست کنید که یه وقت باگ نداشته باشه.&lt;/p&gt;

&lt;h4 id=&quot;glue&quot;&gt;GLUE&lt;/h4&gt;

&lt;p&gt;تو این ۶ ماهی که تو شرکت بودم، تا حالا یکبار هم نشده یه فایل xml رو تغییر بدم. یعنی اصلا فایل xml ندیدم، البته توی پروژه‌ها هست ولی نیاز نشده برم استفاده بکنم. از چند سال پیش اسپاتیفای یه مفهومی رو به شکل داخلی معرفی کرد به اسم glue که دقیق یادم نیست مخفف چیه، اگر اشتباه نکنم یه چیزی مثل Global Language for a Unified Experience هس. اومدند تمام کامپوننت‌هایی که تو اسپاتیفای استفاده میشه رو تو یه زبان مشترکی به اسم گلو تعریف کردند. مثلا button, checkbox, recyclerview یا هر چیزی که به عنوان ریسورس تو ویو استفاده میشه مثل background, image, color، هر المنت ui که داریم و میخوایم به کاربر نشون بدیم، یه بار تعریف کردن و شما از اون به بعد از این المان‌های تعریف شده استفاده میکنید و دیگه تو xml نمیگید خوب یه باتن بساز عرضش انقدر باشه طولش انقدر، یا از تم فرگمنت ارث ببر، از تم اکتیوتی ارث ببر، هیچ کدوم از این کارا رو نمیکنید. فقط میگید یه باتن گلو به من بده، خودش میسازه متناظر با استاندارد اسپاتیفای تنظیم و برای شما تو صفحه دیپلوی میکنه. این باعث میشه که شما هر دفعه xml مختلف نسازید و ادیتش نکنید. باعث ui consistency تو تمام پلتفرم‌ها میشه. چون یه تیم پشت گلو هست و کارش اینه که این المان‌ها رو بسازه و بین پلتفرم‌های مختلف سینکش کنه. برای همینه که امکان نداره موقعیتی پیش بیاد که یه باتن تو اندروید یه پیکسل بزرگتر از ios باشه. چون تیمی این کارارو انجام میده براش تست مینویسه نگهداری میکنه maintain میکنه. اگر قرار باشه باتن جدید اضافه شه، شکل جدید اضافه بشه شما نمیتونید این کار رو خودتون بکنید، باید feature request بدید به تیم گلو و بگید من این رو احتیاج دارم. دیزاینر طرح رو بزنه آماده بکنه با کل اسپاتیفای استاندارد بشه و بعد برای پیاده‌سازی تحویل تیم glue بشه. این تیم دیزاینر زیاد لازم داره چون ذاتش دیزاین هست انجینیرهای اندرویدش هم از اینایی هست که فقط دارند با ویو کار میکنند، با xml یا کلاس‌هایی که از ویو اسکتند شده. اصلا لاجیک نمیزنند.&lt;br /&gt;
تیم ما دیزاینر خیلی کم احتیاج داره گاهی یه دیزاینر برای مدت کمی با تیم ما امبد میشه. مثلا برای ریفکتور کردن browse جلسه گذاشت که میخوام این شکلی بکنم این درفت اولیه کار هست چالش داری یا نه؟ نهایی که شد پیاده میکردیم. دیزاین و داکیومنت میداد این باید این شکلی باشه پدینگ و … این باشه. بچه‌های بک‌اند هم با glue انجام میدادن ولی یه سری کامپوننت‌های کاستومایز شده برا یه پلتفورم هست یا یه فیچر خاص هست معمولا اینارو کلاینت انجام میده.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://i.ibb.co/w7jv4Q2/screen3.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;h4 id=&quot;hub&quot;&gt;HUB&lt;/h4&gt;

&lt;p&gt;یه فریمورکی تو اسپاتیفای وجود داره به اسم HUB که بخش iosش بصورت open source رو گیت‌هاب شرکت هست، اندرویدش هنوز open source نشده و شاید به خاطر هزینه نگهداری نکنند.&lt;/p&gt;

&lt;h4 id=&quot;اوپن-سورس-شه-هزینه-نگه-داری-میره-بالا&quot;&gt;اوپن سورس شه هزینه نگه داری میره بالا؟&lt;/h4&gt;

&lt;p&gt;خیلی، چون کدش باید تمیز باشه و مو لای درزش نره. اگر تحت فشار یه کدی رو بزنی میتونی بگی این کامیت رو ۲ هفته دیگه تو اسپرینت بعدی درستش میکنم. ولی اگر open source باشه نمیتونی کد غلط مرج کنی، برای اینکه خیلی راحت ریورسش میکنند و یه سری از نسخه‌های اپلیکیشن ممکنه هک شه. به خاطر همین دردسر داره نگهداری لایبراری‌های open source.&lt;/p&gt;

&lt;p&gt;شرکت یه چالشی داشت برای آپدیت نگهداشتن کابرهای قدیمی که هزینش خیلی زیاد بود. یعنی یه شکل یا ظاهر جدید که قرار بود به اپلیکیشن اضافه شه باید کلی برای کاربرهای قدیمی سرمایه‌گذاری میکردن و یه سری کد برای گوشی‌های قدیمی میزدند «if ورژن کمتر از این بود این کار رو بکن». حالا اگر بخواد یه شکلی توی اپلیکیشن عوض شه شما باید اون if رو بریزید بهم و برای همه ورژن‌ها یه چیزی رو عوض کنید. یا اگه recycleView بخواید داشته باشید و یه سری المان تو لیست نشون بدید باید یه xml میساختید ریسایکلر ویو رو داخلش میذاشتید، بعد adapter میساختید و event handlerهای آداپتر رو هندل میکردید، اگر روی آیتم کلیک شد چیکار کن؟ اگر swipe کرد چیکار کن؟ الی آخر. دردسر نگهداری خیلی زیاد بود، برای همین و همینطور جلوگیری از duplicate شدن کد یه مفهومی تعریف کردن که نمیدونم اولین بار اسپاتیفای داده یا جای دیگه به اسم backend driven ui development-BDD یعنی بک‌اند مشخص بکنه ui تو اپلیکیشن چه شکلی باشه، یه چیزی مابین Hybrid نوشتن و Native هست. اگر یه dump از خروجی json صفحات اسپاتیفای بگیرید، میبینید بک‌اند داره استراکچر رندر شدن توی کلاینت رو ارسال میکنه. یه سری چیزها توافق شده بین ۲ تا تیم، مثلا spotify_button, spotify_card, spotify_view, spotify_listview چیزایی که ممکنه یک دیزاینر بخواد توی برنامه رندر شه. یک تیمی وظیفش اینه که این دیزاین‌هارو تبدیل کنه به کامپوننت‌هایی که توی اندروید، ios، وب و دسکتاپ قراره رندر شه و نگه‌داریشون کنه و کافیه ما از کامپوننت‌های هابز استفاده میکنیم. هابز به ما این قابلیت رو میده که بک‌اند بگه این باتن رو با این رنگ رندر کن. توی تیمی که من کار میکنم تا حالا لازم نشده یه دفعه هم یه باتن توی کدم بنویسم، تنها کاری که میکنم جیسانی که بک‌اند میفرسته رو پاس میدم به هابز و میگم این جیسان رو رندر کن. اون خودش با enum‌هایی که داره iterate میکنه، اگر recyclerview بهت دادم برو این رو برام بذار، اگر recyclerview item از نوع فلان بود لیست رو این جوری بساز، و در نهایت میگید که به من یه ویو لیست HUB بده، و این تو فریم‌ورک بین اندروید، ios، بک‌اند و تمام پلتفرم‌ها expose شده. هرچیزی پایین تولبار (به جز تولبار) رو هابز میتونه رندر کنه و بک‌اند به صورت داینامیک میتونه استراکچر صفحه رو عوض بکنه. خیلی راحت بدرد A/B Test میخوره، مثلا میخوایید بدونید توی یک صفحه اگر کاربر لیست‌های ۲ تایی کنار هم ببینه ux بهتری داره یا یه هدر بزرگ با یه سری لیست؟ خیلی راحت با یه کد واحد سمت کلاینت از سمت بک‌اند میتونیم برای کاربرای مختلف تو یه صفحه چیزای متفاوت رندر کنیم. backward compatibility خوبی هم بهتون میده مثلا اگر یه کمپین تبلیغاتی قرار شد لانچ شه برای یه کاربری که از ۲ سال پیش اسپاتیفایش رو آپدیت نکرده خیلی از کامپوننت‌هایی که اون موقع تعریف کردیم رو میتونیم استفاده کنیم بدون این که کاربر مجبور شه آپدیت کنه. به این مفهوم میگند backend driven ui development - دولوپ ui توسط بک‌اند. یا اگر یه تیمی بیاد یه فیچر جدید رو بخواد امتحان کنه، لازم نیست یه ریلیز بدید که اون فیچر جدید امتحان شه. Ui جدید توسط بک‌اند فرستاده میشه، ایونت هندلرهاش سمت کلاینت از قبل توی هابز نوشته شده که مثلا اگر این دکمه رو زدم اون کار رو بکن، اگر لانگ کلیک کردم اون کار رو بکن و …. خوبیش اینه که اگر به هر دلیلی ریلیزهاتون بلاک شد مثلا گوگل شما رو بلاک کرد گفت ورژن جدید نمیتونید بدید چون یه مشکلی وجود داره، ui تون دیگه قدیمی نمیمونه و میتونه عوض شه.
طبیعتا اگر بخواید چیزای خیلی خیلی کاستومایزی بنویسید حتما باید ریلز بدید ولی تا حد خوبی جلو این قضیه گرفته میشه.&lt;br /&gt;
ما برای همچین چیزی داشتیم فکر میکردیم که چطور میتونیم یه معماری استفاده بکنیم که کارمون رو راحت بکنه، mvvm برای این انتخاب شد چون یکی از قواعدی که باید توش رعایت شه اینه که دولوپر دسترسی مستقیم به ویو نباید داشته باشه. یعنی شما به عنوان کسی که داری مدل یه چیزی رو مینویسی یا viewModel یه چیزی رو مینویسی به خود ویو نباید دسترسی داشته باشی، این برای خودش یه سری چالش میاره. مثلا فکر کن اگر بخوای یه چیزی رو تو این فریمورک تعریف کنی که خارج از توانایی‌های عادی این فریم‌ورک هست عملا هیچ کاری نمیتونی بکنی، چون به ویو دسترسی نداری که مثلا یه انیمشنی روی باتن بزاری. اگه فریم‌ورک ساپورت نکنه نمیتونی، چون اولین کاری که باید انجام بدی view.setanimation یا … هست. در نتیجه با وجود اون دردسرهایی که ایجاد میکرد چون در اسکیل بالا کار خیلی از تیم‌ها و نگهداری خیلی از چیزها رو راحت میکرد تصمیم بر این شد که رو mvvm پیادش کنیم.&lt;/p&gt;

&lt;h4 id=&quot;hermes&quot;&gt;Hermes&lt;/h4&gt;

&lt;p&gt;اگر بخوام یه ذره عمیق‌تر شم، از چند سال پیش یعنی زمانی که HTTP1 بود و هنوز HTTP2 استاندارد نشده بود، شرکت فریمورکی به اسم Hermes نوشت (فکر کنم اوپن سورس هست). هرمس یه فریمورکی رو HTTP1 بود که قابلیت HTTP2 رو بهمون میداد. خیلی شرکت‌ها این رو نوشته بودن چون HTTP1 از یه زمانی به بعد دیگه جوابگو نیاز بعضی از شرکت‌ها نبود و اسپاتیفای هم برای خودش نوشت. اسپاتیفای به نظر من استاد ساختن چرخ از اول هست، چون خیلی چیزارو میبینید از اول برای خودشون نوشتن، برای من عجیبه شاید نیاز بود بنویسند، شاید پروژه‌های دیگه جوابگو کارشون نبوده، ولی خیلی چیزارو از اول نوشتن. حتی الانم که HTTP2 اومده به شکل زیر ساختی وارد پروژه شد ولی ما همچنان رو هرمس هستیم. برای ما فرقی نداره که HTTP1 استفاده میکنیم یا HTTP2 چون پروتکل هرمس برای ما همه‌رو هندل میکنه و یه تیم داره که نگهداریش میکنه. خیلی خوب هست این قضیه چون abstract میشه و دیگه لازم نیست ۱۰۰ تیم مختلف بیان آپدیت بکنند، یه تیم آپدیت میکنه برای تمام پروژه apply میشه.&lt;/p&gt;

&lt;h4 id=&quot;core&quot;&gt;Core&lt;/h4&gt;

&lt;p&gt;توی اسپاتیفای به مفهومی وجود داره به اسم هسته یا core. کور اسپاتیفای یه سری فانکشنالیتی‌هایی هست که بین پلتفرم‌های مختلف share شده. مثلا player یا نتورکینگ که با hermes انجام میدیم. core با ++c نوشته شده، پروژه نسبتا بزرگی هست و فکر کنم یه تیم ۲۰ نفره فقط مسئول نگهداری core هستند که شامل پلیر، هرمس و یه سری چیزای دیگه هس، من دقیقا نمیدونم چیکار میکنند چون امکان نداره آدم همیشه بدونه همه‌ی تیم‌ها چیکار میکنند. خیلی شرکت بزرگه، فقط کار خودت رو بتونی خوب انجام بدی هنر کردی. من به شخصه به تیم core خیلی علاقه دارم چون ++c رو خیلی دوست دارم. اگه یه موقع احساس کردم میخوام یه چیز جدید رو امتحان بکنم یکی از گزینه‌هایی که دوست دارم contribute به core هست. همونطور که گفتم پلیر با core هندل میشه و یه پروتکل کاستوم براش نوشته شده. پلیر هم یه کد نسبتا قدیمی هست چون از خیلی وقت پیش ساپورت میشد، ولی آخریا ساپورت رو تا اندروید ۴.۱ آوردیم. به خاطر پروتکل‌های مختلفی که بین ورژن‌های اندروید ساپورت میشه نمیتونستیم به مدیا پلیر خود اندروید اکتفا کنیم. مجبور بودیم مدیا پلیر خودمون رو بنویسیم که بتونه کدک‌ها و پروتکل‌های خودمون رو ساپورت بکنه. و این بود که مجبور شدند یه مقدار low level و با ++C بنویسند تا بتونند توی پلتفرم‌های مختلف بصورت مشترک استفاده بکننش. چون نمیشد فقط با جاوا بنویسی، اگر اونجوری میخواستیم بنویسیم باید یکی برا جاوا مینوشتیم، یکی برا ios، یکی برا وب، یدونه برا ps ،xbox و …&lt;/p&gt;

&lt;h4 id=&quot;ci--cd&quot;&gt;CI &amp;amp; CD&lt;/h4&gt;

&lt;p&gt;ما الان رو continuous integration هستیم و قرار هست تا آخر ۲۰۱۷ continuous delivery بشیم در حال حاضر مشکلی که وجود داره و دردسر ساز میشه اینه که ما تست‌های premerge و postmerge داریم. یعنی مثلا شرکت ۱۰۰۰۰ تست داره، از این ۱۰۰۰۰ همش قبل از اینکه کد مرج بشه، اجرا نمیشه یه سری بعد از مرج شدن روی کد اجرا میشه. این باعث باگ‌های بدی میشه، برای مثال شما ممکنه کدی بنویسید و تست‌های premerge بگند کدت OK هست و مرج بشه تو مستر. تست‌های postmerge هر چند ساعت یک‌بار اجرا میشند، به خاطر اینکه خیلی تست‌های پر هزینه‌ای هست و طول میکشه بخواد اجرا شه. معمولا هم end to end تست‌ها هستند. بعد از مرج شدن کد و قبل از اینکه تست postmerge روی کد شما اجرا بشه یه نفر دیگه هم یه کدی نوشته برای اون هم تست‌های premerge با موفقیت گذرونده میشه و کدش توی مستر مرج میشه. حالا بعد از ۶-۷ ساعت تست‌های postmerge اجرا میشند و میبینند این دوتا pr با هم inconsistent هستند و نمیتونند با هم اجرا بشند. یا اصلا باعث crash میشه. اون موقع هست که میگند مستر شکسته -master is broken. کد اصلی مستر ممکنه خراب شه و اون موقع معمولا یه هشداری توی شرکت داده میشه و یکی باید بیاد (نویسنده اون ۲ تا کامیتی که باعث شدن مستر بشکنه، اگر خودش نیست جایگزینش اگر جایگزینش نیست مسئول پروژش) و خیلی سریع با هم مستر رو درست کنند. و اگر نه کل پروژه گیر میکنه. این یکی از مشکل‌های عمده ci هست، که همه کامیت‌ها قابل deliver کردن و قابل deploy نیست. به خاطر همین از یه سال پیش شرکت یه تیمی رو تشکیل داد که وظیفش کمک به همه تیم‌هاست که از ci برسند به cd و هر کامیت قابل deploy باشه. یه خورده هم پروژه زمان بری هست، چون کلی از تست‌های شرکت باید تغییر بکنه، خیلی‌هاش اصلا باید زیر ساختش تغییر کنه ولی هم کار جذابیه و هم نتیجه‌اش ارزشمنده.&lt;/p&gt;

&lt;h4 id=&quot;کد-گردی&quot;&gt;کد گردی&lt;/h4&gt;

&lt;ul&gt;
  &lt;li&gt;اسپاتیفای با اینکه قراره بخش‌هایی از پروژه رو نشونمون بدی مشکلی نداره؟&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;بهشون گفتم که میخوام یه چیزایی رو برای آموزش نشون بدم.&lt;br /&gt;
برای فیچرهایی که از ۱-۲ سال پیش شروع شده همه حتما باید از دگر استفاده کنند. این الان کل پروژه هست و این پکیجی هست که کد سرچ توش وجود داره قبلا این پکیج ۲ تا بود، چون ۲ تا ورژن از سرچ وجود داشت. ما با یه مکافاتی قبلی رو ریفکتور کردیم و آوردیم رو فریمورک جدید و قبلی رو پاک کردیم.&lt;br /&gt;
استراکچر اینجوری هست که ما با خودمون توافق کردیم پرزنتر یه جا باشه، کدی که لاگ میکنه یه جا باشه، بخشی که هیستوری سرچ هست یه جا، کال‌بک‌ها تو یه پکیج هست، کاموننت‌ها (ویوهایی که کاستوم کردیم خارج از هابز، توی فریمورک هابز نبودن و بهش اضافه کردیم) و کامندهایی که ساپورت میکنیم تو پروژه رو هم توی یه پکیج گذاشتیم.&lt;br /&gt;
فریمورک هابز برای ما یه سری کارهای جادویی انجام میده، مثلا رندر میکنه یا یه سری کامند که از پیش تعریف شده از سمت بک‌اند ارسال شه رو خودش هندل میکنه. مثلا شما میتونید با کمتر از یه ساعت کد زدن ورژن ساده صفحه سرچ رو یه بار دیگه از اول درست کنید، یعنی یه پرزنتر ساده مینویسید، بعد یه endpointی رو صدا میزنید و جواب رو به هابز تحویل میدید، خود هابز بقیه چیزارو هندل میکنه و میاره بالا، همه کارهایی که بصورت پیشفرض نیازه مثل click, long click, play و یه سری کامند دیگه رو خودش ساپورت میکنه. منتها یه سری کارهارو لازم هست که به صورت کاستومایز شده انجام بدید مثلا اگر توی سرچ رو چیزی کلیک کردید، بسته به این که چی هست کارهای مختلفی باید انجام شه. مثلا اگر آهنگ باشه باید پلی بکنه، یا اگر آلبوم باشه باید بره تو صفحش و تو هیستوری کاربر هم نگهش دارید، این چیزی بود که بصورت پیش فرض ساپورت نمیشد. مثلا برای این مجبور شدیم یه command handler کاستومایز شده بنویسیم و توی هابز خودمون اضافش کنیم، که فلان کامند رو خودم میخوام هندل کنم؛ یا وقتی رو این کلیک شد دیگه هابز هندلش نکنه من خودم هندلش میکنم.&lt;/p&gt;

&lt;h4 id=&quot;فیسبوک-هم-یه-کتاب-خونه-داره-که-دیستریتیو-ui-مینویسی-دیدینش-یا-نه-litho&quot;&gt;فیسبوک هم یه کتاب خونه داره که دیستریتیو ui مینویسی دیدینش یا نه؟ (Litho)&lt;/h4&gt;

&lt;p&gt;ما کتاب‌خونه‌های فیسبوک رو اکثرا نمیتونیم استفاده کنیم به خاطر لایسنسش که یه مقدار سختگیرانست، چند وقت پیش هم react رو عوض کردند و ما تازه تو دسکتاپ شروع کردیم از react استفاده کردن وگرنه قبلا فکر کنم angular مینوشتند.&lt;br /&gt;
این کدی هست که باهاش لاگ‌های مختلفی که تو پروژه انجام میشه رو مینویسیم، ۲ تا پرزنتر مختلف داره یه پرزنتر برای صفحه سرچ و یکی برای صفحه‌ای که با زدن دکمه see all میرید اون تو.
توی کد مدل‌های مختلف ریکوست رو ما به بک‌اند میزنیم، مثلا همین صفحه سرچ ریکوست‌های مختلفی به بک‌اند میزنه، یکیش صفحه سرچ تو حالت عادی هست که میاید یه کوئری میزنید یه جواب میگیرید، ممکنه از صفحه سرچ تو حالت آفلاین استفاده بکنید که ما به هسته ++C ریکوست میزنیم و اون هم تو مجموعه ریکوست‌ها قرار میگیره، یا صفحه see all هم یه مدل ریکوست میزنیم.&lt;br /&gt;
شرکت یه محصول جدیدی تعریف کرد که خوبه در موردش صحبت کنیم. اسپاتیفای بعد از یه مدتی بررسی و نتیجه‌گیری، بصورت عمومی اعلام کرد که ما یادگرفتیم چطور کاربر پرمیوم بسازیم، یعنی کاربر معمولی رو تبدیل کنیم به کاربر پریمیوم و حتی یاد گرفتیم چطور کاربر پرمیوم رو پرمیوم نگه داریم. در نتیجه خوب داریم پول در میاریم. فقط مشکلی که داریم اینه که نمیتونیم به اندازه کافی کاربر جدید بگیریم و مجبور شدند سراغ کشورهایی که بهشون بازارهای نوظهور (emerging market) میگند مثل چین، هند، اندونزی یا کشورهایی مثل مکزیک، برزیل برند. با توجه به محدودیت‌هایی که این کشورها دارند، اپ فعلی اسپاتیفای اصلا براشون مناسب نیست. این بود که یه ماموریت جدیدی تو شرکت تعریف شد که یه اپی بنویسیم (داخل خود اپ اسپاتیفای) که برای این مدل کشورها طراحی بشه، یکسال کار کردند و این محصول الان ریلز شده. کلا یه محصول دیگه داخل اپ هست. یعنی وقتی کاربر وارد اپ میشه کلا میره تو یه سری پکیج دیگه. مثلا نویگیشن باتن ۳ تا بود، صفحه اصلی استراکچرش عوض شد، بک‌اندهایی که باهاش صحبت میکردیم عوض شد، قابلیت‌های سرچ تغییر کرد، صفحه browse رو با سرچ یکی کردیم. خلاصه بسته به اینکه چه مدل کاربری هستید، تعداد زیادی ریکوست‌های مختلف به بک‌اند زده میشه.
برای همین وقتی شما یه پروداکتی توی شرکت دستتون باشه، روی همون تعداد زیادی A/B Test داره انجام میشه یا در واقع پروداکت‌های مختلفی رو در قالب یه پروداکت مشخص دارید به مردم ارائه میدید (مثل همین اپی که برای بازارهای نوظهور درست شده و توی همون اپ اسپاتیفای هست)، یعنی معمولا سرچ رو یه سری کاربر به یه شکل میبینند یه سری دیگه به یه شکل دیگه و همه اینا جزو زیر مجموعه تیم شما هست. اگه قرار باشه یه چیزی عوض شه یا یه پارامتری به صورت کلی به بک‌اند ارسال بشه یا یه uiیی اضافه شه، معمولا شما مجبورید کل این پروداکت‌ها ریفکتور کنید. در نتیجه معمولا حجم کاری تو یه فیچر، از چیزی که به نظر میاد بیشتره.&lt;br /&gt;
این پکیح rx ما هست، این پکیج مجموعه کارهایی هست که ما با rx java انجام میدیدم.&lt;/p&gt;

&lt;h4 id=&quot;اگر-برای-صفحاتی-که-ab-test-داریند-تسک-بیاد-رو-کدومش-انجام-میدید&quot;&gt;اگر برای صفحاتی که A/B test داریند تسک بیاد رو کدومش انجام میدید؟&lt;/h4&gt;

&lt;p&gt;باید بری همه رو ریفکتور کنی&lt;/p&gt;

&lt;h4 id=&quot;یعنی-جفتش-تو-apk-هست-و-سرور-میگه-کدوم-رو-لود-کنه&quot;&gt;یعنی جفتش تو apk هست و سرور میگه کدوم رو لود کنه؟&lt;/h4&gt;

&lt;p&gt;تو سرچ حتی چالش برانگیزتر بود. صفحه اصلی یه معماری و یه سری فریمورک استفاده میکرد دکمه see all رو که بزنی میره تو یه فرگمنت دیگه تو اون کلا یه چیز دیگه بود. مثلا اگر رو یه ترک کلیک کنی تو صفحه اصلی سرچ و اون صفحه باید یه کار رو بکنه، نمیشه تو یکیش پلی کنه تو اون یکی یه کار دیگه. ۲ تا چیز رو باید همزمان maintain میکردی. یا بدتر تو هر کدوم از این فرگمنت‌ها ۴ تا A/B test وجود داشته باشه باید اونا رو هم حتی ساپورت بکنی بعضی وقت‌ها وقعا چالشی میشد ساپورت کردن چندتا ورژن از یه چیزی. به این مفهوم که چندتا ورژن مختلف و چندتا معماری و سبک کد زدن مختلف توی کدبیس باشه میگن شما Technical debt دارید (بدهکاری فنی)، یعنی شما هزینه نگهداری یه کد قدیمی رو میدید و این رو اگر توی طول زمان درست نکنید به صورت تصاعدی بالا میره و تکنیکال دبت رو توی سطح معینی نگه دارید.&lt;/p&gt;

&lt;h4 id=&quot;کی-باید-درستش-کنیم&quot;&gt;کی باید درستش کنیم؟&lt;/h4&gt;

&lt;p&gt;معمولا اینجوری میشه، برای سه ماه بعد میخوای برنامه‌ریزی کنی و یه ab تست گنده‌ای روی پروژه ران بشه، میپرسن چقدر پیاده سازیش طول میکشه؟ که شما میگی دو ماه. میگن چرا دو ماه؟‌ میگید چون این تکنیکال دبت داره. میگن خیلی خب ab تست رو نگهدارید و اول تکنیکال دبت درست کنید. سه ماه زمان میذارید، کلی کد ریفکتور میکنید، تست‌های قدیمی رو حذف میکنید، معماریشو عوض میکنید و باید از اول بنویسید.&lt;/p&gt;

&lt;h4 id=&quot;این-رو-پروداکت-اونر-میگه-یا-تکنیکال-لید&quot;&gt;این رو پروداکت اونر میگه یا تکنیکال لید؟&lt;/h4&gt;

&lt;p&gt;بستگی داره، ممکنه حتی از بالاتر بیاد.&lt;/p&gt;

&lt;h4 id=&quot;همه-اینا-که-میگی-توی-پکیج-سرچ-و-برای-سرچ-بود&quot;&gt;همه اینا که میگی توی پکیج سرچ و برای سرچ بود؟&lt;/h4&gt;

&lt;p&gt;آره خارج از سرچ نیست، هر فیچر همه اینارو برای خودش جداگونه داره&lt;/p&gt;

&lt;h4 id=&quot;همه-تیمها-همین-شکل-پکیجبندی-میکنند-یا-فرق-داره&quot;&gt;همه تیم‌ها همین شکل پکیج‌بندی میکنند یا فرق داره؟&lt;/h4&gt;

&lt;p&gt;کم و بیش همینجوری هست، مخصوصا اسکوادهای که تو یک ترایب باشند، چون با هم جلسه زیاد داریم و با هم زیاد کار میکنیم. برای همین احتمالا کدهای یه اسکواد تو نیویورک رو ببینید خیلی متفاوت هستند. البته معمولا اگر تیم‌ها با هم قرار باشه کار کنند، یه داکیونتی رو با هم رد و بدل میکنند به اسم «چطور میخوایم با هم کار کنیم؟» اگر قرار باشه از تیم شما برای ما پول ریکوست بیاد و ما ریویو بکنیم این باید حداقل از ۲ هفته قبل اطلاع رسانی بشه که ما بتونیم براش برنامه ریزی کنیم یا اگر باگی پیش بیاد که شما کدش رو ادیت کردید خودتون باید رفعش بکنید. یه سری قرارداد میبندیم که ما قرار هست اینجوری با هم کار بکنیم.&lt;/p&gt;

&lt;p&gt;خلاصه rx java تو تیم ما خیلی زیاد استفاده میشه مثلا توی فرگمنت سرچ ما بلافاصله یه subscription میسازیم و observableش رو وصل میکنیم به اون EditTextی که اون بالا هست، به محض این که شما شروع میکنید به تایپ کردن، اون EditText یه سری متن emit میکنه. ما میایم یه دونه observable از این استرینگ ها میگیریم و این رو با یه observable دیگه به اسم session state که session رو مانیتور میکنه (الان آفلاین شدم یا الان آنلاین شدم) combine میکنیم و search params ازش در میاریم. داخلش پارامترهای جستجو هست مثل آفلاینم یا الان آنلاینم تو چه وضعیتی هستم، کوئری چیه. بعد برای اینکه بتونیم یه ریکوئستی بسازیم، معمولا میاییم این ۲ تا پارامتر رو میگیریم و تحویل یه کلاس دیگه میدیم به اسم SearchRequestPerformer قبلا تو کلاس SearchRequestCreator بودیم. SearchRequestPerformer پارامترهای میگیره و یه سری چک انجام بده، آیا کوئری که داریم بهش میدیم، خالی هست یا نه؟ اگه خالی نیست این رو flatmap کن به یه کلاس دیگه و … پارامترها رو میسازه و در نهایت تحویل SearchRequestRunner میده. اتفاقی که اینجا میافته، عملا این هست که ما اومدیم به جای اینکه یه زنجیره‌ی بزرگ از اوپراتورهای rx java داشته باشیم، برای اینکه خیلی راحت بتونیم براشون تست بنویسیم (چون این کلاس‌ها باید ۱۰۰٪ تست کاوریج میداشتند) اومدیم هرکدوم از کارایی که قرار بوده سرچ بکنه رو شکوندیم به کلاس‌‌های کوچیک، یه کلاس میاد یه observable میگیره باهاش یه پارام هولدر میسازه، یدونه فقط پارامترهایی که باید برای بک‌اند بسازه رو نگه میداره، وقتی ساخت تحویل یه کلاس دیگه میده فقط چک میکنه که پارامترهاش ولید هست یا نه، وقتی که چک کرد ولید هست تحویل یه کلاس دیگه میده این چک میکنه که سرچ الان آفلاینه یا آنلاین و مثلا تو کدوم استیت هست، مثلا برای صفحه see all دارم سرچ میکنم یا مثلا کسی با پارامتر خاصی من رو لانچ کرده یا نه، این رو که آماده کرد تحویل یه کلاس دیگه میده که فقط تایپ ریزالور هست چک میکنه که این دیوایس چه فیچری ساپورت میکنه آیا من میتونم مثلا از Protobuf استفاده کنم یا مجبورم از Gson استفاده کنم، و برای ارسال این دیتا به بک‌اند یه سری چیزارو چک میکنه. این rx chain رو شکوندیم به کارای خیلی کوچیک، یعنی وقتی نگاه میکنید، ما تعداد خیلی زیادی کلاس داریم که هرکدومش یه کار خیلی کوچیک رو میکنه.&lt;/p&gt;

&lt;h4 id=&quot;یعنی-الان-لاجیکی-که-هر-اوپراتور-rx-java-میخواد-اجرا-کنه-رو-تبدیل-به-یه-کلاس-کردید&quot;&gt;یعنی الان لاجیکی که هر اوپراتور rx java میخواد اجرا کنه رو تبدیل به یه کلاس کردید؟&lt;/h4&gt;

&lt;p&gt;یه جورایی آره، در واقع rx chain ما به این شکل هست هرکسی کارش رو میگیره تحویل اپوراتور بعدی میده&lt;/p&gt;

&lt;h4 id=&quot;جنس-این-کلاس-چیه--یه-کلاس-معمولی-جاواست-همشون-&quot;&gt;جنس این کلاس چیه ؟ یه کلاس معمولی جاواست همشون ؟&lt;/h4&gt;

&lt;p&gt;آره همشون POJO هستند و به همین خاطر هست که میشه ۱۰۰٪ براشون تست نوشت.&lt;br /&gt;
اومدیم در واقع این کارارو شکوندیم به یه سری کار خیلی کوچیک که هرکدوم یه کار خیلی کوچیک رو انجام میده و براش تست متناسب با خودش رو نوشتیم. یعنی شما امکان نداره حالتی پیدا کنید که تستی براش نوشه نشده باشه، چون کار خیلی کمی رو داره انجام میده.&lt;/p&gt;

&lt;p&gt;مدل کد نوشتنمون تو شرکت معمولا به این شکل هست، اول میریم فرگمنت و پرزنتر رو میسازیم، بعد سنارویوهایی که قرار هست پرزنتر هندل کنه رو با TDD تستش رو مینویسیم و پیاده سازی میکنیم، دونه به دونه میریم جلو. این یه شمای کلی بود از این فیچری که ما تو سرچ پیاده سازیش کرده بودیم. حالا همونطور که گفتم برای هرکدوم از اینا باید دونه به دونه تست بنویسیم، یعنی بنویسیم که این کلاس کاری که باید انجام بده رو انجام میده یا نه، مثلا این تستی هست که برای پرزنترمون نوشتیم، تستها معمولا اینجوری شروع میشه که یه annotation دارن که این فیچر برای کدوم تیم هست. با Robolectric اجرا میشن. یه سری پارامتر رو به صورت پیشفرض با static final و … آماده کردیم، به جز اون چیزی که اتفاق می‌افته شما توی کلاس‌ها نباید هیچ موقع آبجکتی رو new کنید، هرچیزی که یه کلاس لازم داره رو باید همیشه با dagger و بصورت constructor injection بهش پاس بدید، چون dependency injection باعث میشه تست نوشتن خیلی راحت بشه.&lt;br /&gt;
تعداد زیادی آبجکت داریم که کنار همشون خورده mock، علتش اینه که ما میاییم یه کلاسی رو میسازیم توی حالت تست، تمام آبجکت‌هایی که لازم داره رو mock میکنیم و دونه دونه توش اینجکت میکنیم، یعنی یه کلاس رو با تمام چیزایی که لازم داره به صورت ماک شده میاریم بالا. مثلا کلاسی که میخوایم تست کنیم یه کلاس دیگه رو برای هندل کردن یه باتن نیاز داره، این کلاس رو mock میکنیم و از طریق استراکچر given when then بهش دیتای ماک میدم. این استراکچر اینجوریه:&lt;br /&gt;
Given یعنی در شرایط فلان&lt;br /&gt;
When اگر این اتفاق افتاد&lt;br /&gt;
Then این کار رو انجام بده&lt;br /&gt;
مثلا وقتی رو این دکمه کلیک کردم و منتظر برگشت یک استرینگ از یه فانکشن بودم، این استرینگ رو برگردون به فانکشن بده. این آبجکت‌های ماکی که داشتیم رو تنظیم میکنم میگم تو این شرایط اگر این رو کلیک کردم این کار رو بکن، اگر این کار کردم این کار بکن و سناریوهایی که واقعا توی اپ داره اتفاق میافته رو تنظیم میکنم و دونه دونه شروع میکنم چک کردن فانکشن‌ها که تو پرزنتر هست، مینویسم اگر این اتفاق افتاد با توجه به این ماک‌ها من منتظرم این جواب رو بگیریم، آیا میگیرم یا نه، اگر گرفتم فانکشن داره درست کار میکنه اگر نگرفتم یه چیزی این وسط خراب شده.&lt;/p&gt;

&lt;p&gt;برای سناریوهای مختلف باید یونیت تست بنویسیم. مثلا تعداد خط کد پرزنتر ما ۴۳۴خط هست ولی تعداد خط کلاس تست پرزنتر ۴۴۵ خط هست. بیشتر از ۱۰۰٪ کد کاوریج داره. یعنی احتمالا یه سری سناریو، دیپریکیت شده.&lt;/p&gt;

&lt;h4 id=&quot;مثلا-برای-یه-خط-۲-تا-تست-نوشتید&quot;&gt;مثلا برای یه خط ۲ تا تست نوشتید؟&lt;/h4&gt;

&lt;p&gt;نه نمیشه برای این که یک نفر کدت رو ریویو میکنه&lt;/p&gt;

&lt;h4 id=&quot;منظورم-اینه-که-یه-متد-که-نوشتید-فقط-یه-حالت-تست-مینویسید-یا-چندتا&quot;&gt;منظورم اینه که یه متد که نوشتید فقط یه حالت تست مینویسید یا چندتا؟&lt;/h4&gt;

&lt;p&gt;یک متد باید یک کار رو بکنه، در نتیجه وقتی که برای یه متد ۲ تا تست مینویسی، یعنی متدت یه ایرادی داره. طبق اصول solid باید single responsibility داشته باشه. ولی بعضی جاها ممکنه پیش بیاد، اصلا نمیشه کاریش کرد. ممکنه این فانکشن ذاتا side effect داشته باشه و هیچ کاریش نمیشه کرد ولی به صورت کلی باید اون رو رعایت کنیم.&lt;br /&gt;
حالا فکر کنید یک المان ui رو ادیت کردید، برای این که تستتون یا پول ریکوستتون قابل مرج شدن باشه، باید برای اون کامپوننت ui که تغییر دادید integration test بنویسید. یعنی یدونه کامپوننت رو از شرایط واقعی مجزا میکنید، تست‌هایی که لازم هست رو روش اجرا میکنید، بدون این که مهم باشه در سایر المان‌های اطراف اتفاقی می‌افته یا نه، یعنی در دنیا واقعی نمیخوایم تستش کنیم، فقط خود اون کامپوننت رو تنها میخوایم تست کنیم. مثلا رو یه باتن که کلیک میکنید، میخواید یه انیمیشنی روش اجرا بشه، این رو براش یه کامپوننت تست مینویسید، چطور؟ ما یه ابزار داخلی داریم که باهاش اینتگریشن تست‌ها رو مینویسیم، (اسم فریمورک Caset هست) فکر نمیکنم اوپن سورس شده باشه و فکر کنم که هیچ وقت هم نمیشه، چون خیلی هکی هست و همه چیزش با هک کردن یه سری چیز روی robolectric نوشته شده. مثلا این کلاس اینتگریشن تستی هست که برای صفحه اصلی سرچ وجود داره، یدونه فرگمنت میسازه، فرگمنتی که میخوای توش یه تستی رو انجام بدی، مثلا من فرگمنتم رو کانفیگ میکنم با این شرایط میارم بالا، بهش میگم من یه کاربر free میخوام، یعنی زمانی که این تست رو ران میکنی، یه کاربر free بساز و اینجکت کن تو محیط برنامه و برنامه رو توی حالت پروداکشن بیارش بالا، یه سری فلگ override میکنم برای این کاربر، مثلا تستی که اینجا نوشتم، اسمش اینه testWithSearchResult، دارم تست میکنم که سرچ وقتی که موفقیت آمیز هست، result که من منتظرش هستم باید داشته باشه. چه جوری این کار رو انجام میدم؟ میام یه محیط کانفیگ میکنم، این تست یه جورایی BDD هست یعنی یه جورایی مبتنی بر یه رفتار مشخصی هست. حالا یه محیطی رو کانفیگ میکنم میگم اگر کاربر تو این فرگمنت اومد بالا:&lt;br /&gt;
when زمانی که من روی اون TextFiled فکوس کردم، کوئری که اون بالا تعریف کردم رو بذار توش، یه مدت زمانی منتظر باش&lt;br /&gt;
then اول چک کن که ریزالت‌ها لود شدن یا نه، که این یه فانکشنی هست که به شما برمیگردونه که ریزالت‌ها لود شدند یا نه، آخر سر چک میکنم که get number of show all تعداد آیتم‌های شو آل من بیشتر از ۰ باشه.&lt;br /&gt;
این یه تست خیلی عمومی بود، بسته به سناریویی که میخوایم تست بکنیم، دقیقتر از این تست میکنیم. مثلا برای وقتی که چک میکنیم ریزالت وجود داره، تعداد تاپ ریزالت‌ها، ریکوردها یا آرتیست‌ها رو میگیریم. ما برای اون کوئری مشخص، اینجا مشخص کردیم که قرار هست بک‌اند ۰ تا تاپ ریزالت برگردونه ۴ تا آرتیست ۴ تا آلبوم الی آخر. کامپوننت این فرگمنت باید عین سناریویی که من منتظرش بودم رندر بشه، اگر رندر شد یعنی تست موفقیت آمیز بوده و اگر نشد یا یه مشکلی تو بک‌اند وجود داره یا تو فرانت‌اند، این تست همیشه هر ۶ ساعت یک بار روی کد بیس اجرا میشه، فارغ از اینکه کامیت جدیدی وجود داشته باشه یا نه، به ما کمک میکنه که مثلا اگر بک‌اند اشتباه کرد و به جای ۴ تا آرتیست ۳ تا برگردوند، تست fail میشه. ما سریع متوجه میشیم و براش تیکت مینویسیم و حلش میکنیم. یا مثلا اگر یکی اومد کد مارو ویرایش کرد، این تست ران میشه و متوجه میشیم مثلا کامپوننت ما بعد ویرایش درست رندر میشه یا نه.&lt;/p&gt;

&lt;h4 id=&quot;بکاند-رو-تست-میکنید-یا-بکاند-ماک-هست&quot;&gt;بک‌اند رو تست میکنید یا بک‌اند ماک هست؟&lt;/h4&gt;

&lt;p&gt;هم میتونه بک‌اند ماک شده رو تست کنه، هم بک‌اند واقعی بستگی به کانفیگ داره.&lt;/p&gt;

&lt;h4 id=&quot;بکاند-همیشه-دیتا-ثابت-میده-برای-این-تستها-از-کجا-میفهمیم-که-بکاند-خرابه-یا-مثلا-یه-آرتیست-به-دیتابیس-اضافه-شده&quot;&gt;بک‌اند همیشه دیتا ثابت میده برای این تست‌ها؟ از کجا میفهمیم که بک‌اند خرابه یا مثلا یه آرتیست به دیتابیس اضافه شده؟&lt;/h4&gt;

&lt;p&gt;این رو دیگه باید چکش کنیم و ببینیم اشتباه از کجا هست ولی این فلگ‌ها که اورراید میشه معمولا برای این هست که همیشه تا حد امکان یه ریسپانس مشخص رو بگیره.&lt;br /&gt;
اگه کامپوننت ui رو ادیت بکنید، باید یه دونه اینترگریشن تست مناسب باهاش رو هم بنویسید. بعد از این مرحله، یه مرحله بالاتر هم تو هرم تست وجود داره به اسم end to end testing، تست‌هایی هستند که با espresso مینویسیم و رو دیوایس واقعی اجرا میشند و همیشه با بک‌اند واقعی کار میکنند.&lt;/p&gt;

&lt;h4 id=&quot;این-هرمی-که-گفتی-یونیت-تست-مشخص-هست-اون-بالا-بالایی-هم-که-end-to-end-test-هست-مشخصه-که-با-اسپرسو-کل-یه-عملکرد-برنامه-تست-میشه-مثلا-یوزر-چه-کارایی-میتونه-انجام-بده-حالا-این-وسط-اینترگریشن-تست-میشه-اکتیویتی-با-فرگمنت-چه-جوری-محدودش-رو-مشخص-میکنید&quot;&gt;این هرمی که گفتی یونیت تست مشخص هست، اون بالا بالایی هم که end to end test هست مشخصه که با اسپرسو کل یه عملکرد برنامه تست میشه مثلا یوزر چه کارایی میتونه انجام بده. حالا این وسط اینترگریشن تست میشه اکتیویتی با فرگمنت؟ چه جوری محدودش رو مشخص میکنید؟&lt;/h4&gt;

&lt;p&gt;هر چقدر به سمت بالا هرم تست حرکت بکنی هزینه نگهداری و اجرا کردنش خیلی میره بالا. یعنی ما هر دفعه که end to end تست ران میکنیم، end to end تست میاد یه apk رو برمیداره میبره رو یه دونه دیوایس نصب میکنه، login میکنه و …، هزینه اجرا این تست خیلی زیاده و وقتی ما بخوایم اندتواند تست بخش سرچ رو ران کنیم، نیم ساعت طول میکشه. اما اینترگریشن تست‌هامون کمتر از ۱ دقیقه و یونیت تست کمتر از ۱۰ ثانیه طول میکشه. در نتیجه اگر قرار باشه یه اندتواند تست بنویسید باید حواستون باشه که آیا واقعا لازمه؟ چون تا جایی که میتونید، همه چیو باید با یونیت تست و اینتگریشن تست کاور بکنید. معمولا end to end تست رو برای جایی مینویسیم که سناریو فوق‌العاده حیاتی و critical هست، مثلا لاگین هیچ موقع نباید fail بشه، اگر بشه خیلی افتضاح هست، کاربر جدید نمیتونه استفاده بکنه. یا مثلا توی سرچ این که ریزالت‌ها یکبار لود شه و باتن‌ها کار بکنه رو حتما باید تست کنیم. برای این که هر جمعه ساعت ۱۰ تا ۱۱ صبح regression test داریم. تمام اعضای تیم جمع میشن و نفری یه گوشی رندوم با یه کاربر رندوم برمیدارن و شروع به تست کردن یکی از فیچرهای شرکت میکنند، توی رگریشن تست همیشه همه اعضا از پروداکت اونر، مدیر، دیزاینر، برنامه نویس همه جمع میشند و تست میکنند، خوبیش هم اینه که اپ از زوایای مختلف تست میشه و اینجوری نیست که فقط از زاویه دید برنامه نویس تست شه. ریگریشن تست رو هفته‌ای یکبار اجرا میکنیم ولی end to end تست رو هر ۶ ساعت یکبار، اینتگریشن تست روی تک‌تک کامیت‌ها تست میکنیم یعنی مطمئن میشیم چیزی که میخوایم واقعا رندر میشه یا نه.&lt;/p&gt;

&lt;h4 id=&quot;چندتا-از-هر-کدوم-دارید&quot;&gt;چندتا از هر کدوم دارید؟&lt;/h4&gt;

&lt;p&gt;برای هرکدوم ۲۰-۳۰ تا تست رو در نظر بگیر، تو یه کلاس منظورم هست، البته باید زمان بیلد شدن گریدل رو هم بهش اضافه کرد ولی اون خارج از دست ماست تا حد زیادی و ثابت هست. تعداد کلاس هم متناظر با تعداد کلاس‌های که بیزنس لاجیک هست، تو یه پکیج شاید ۴۰-۵۰ تا کلاس هست، برای اینتگریشن تست حدود ۵-۱۰ تا کلاس و اندتواند ۱ دونه کلاس.&lt;/p&gt;

&lt;h4 id=&quot;گوگل-جدیدا-توی-داکیومنت-اندروید-یه-بخشی-نوشته-که-مثلا-end-to-end-تست-۲۰-درصد-باشه-یونیت-تست-۶۰-درصد-و--ولی-کلا-یه-سری-مثالها-گفتن-اینترگریشن-تست-رو-با-اسپرسو-بنویسید-خیلیها-اصلا-اسپرسو-تو-اینتگریشن-استفاده-نمیکنند-یا-همش-روبوالکتریک-استفاده-میکنند-و--من-نمیفهمم-مثلا-اشکال-داره-اسپرسو-تو-اینتگریشن-استفاده-شه-یا-چون-نیاز-نمیشه-کسی-استفاده-نمیکنه&quot;&gt;گوگل جدیدا توی داکیومنت اندروید، یه بخشی نوشته، که مثلا end to end تست ۲۰ درصد باشه، یونیت تست ۶۰ درصد و … ولی کلا یه سری مثال‌ها گفتن اینترگریشن تست رو با اسپرسو بنویسید، خیلی‌ها اصلا اسپرسو تو اینتگریشن استفاده نمیکنند یا همش روبوالکتریک استفاده میکنند و … من نمیفهمم مثلا اشکال داره اسپرسو تو اینتگریشن استفاده شه؟ یا چون نیاز نمیشه کسی استفاده نمیکنه؟&lt;/h4&gt;

&lt;p&gt;اسپرسو یه قابلیت خوبی که به شما میده اینه که میتونید رو دیوایس واقعی اجراش کنید که میشه همون end to end تست، میتونی تو لول انتگریشن هم ازش استفاده کنی. ولی روبو الکتریک روی دیوایس واقعی کار نمیکنه و اندروید رو امولیت میکنه.&lt;br /&gt;
اندتواند تست هم معمولا با توافق تیم مشخص میشه «این سناریو خیلی مهم هست پس end to end تست بنویسیم». همه هم میگند تا جایی که میتونید هرم تست رو پایین نگه دارید ولی اینکه درصدش چقدر باشه سناریو چطور باشه تیم به تیم فرق داره. یه سختی دیگه هم که end to end تست داره اینه که باید براش ci یا cd تعریف کنید. مثلا jenkins راه بندازید، اتومیت کنید که اینا کار اندروید دولوپر نیست، اینا یه دوآپس خوب میخواد که این محیط‌ها رو خوب بشناسه، از یه برنامه نویس عادی اندروید نمیشه انتظار داشت که هم کد خوب بنویسه، هم یونیت تست بنویسه، هم end to end تست بنویسه. همه اینا رو باهم از یه تیم کوچیک نمیشه انتظار داشت. اگر بخوای انتظار داشته باشی، سرعت کارت خیلی میاد پایین. ما خیلی از کارامون تو شرکت دلیگیت شده به یه تیم دیگه. مثلا خود تیم ما باتن نمینویسه و دلیگیت شده به تیم دیگه. هر تیمی داره یه کار کوچیکی انجام میده.&lt;/p&gt;

&lt;h4 id=&quot;تیمی-که-تست-مینویسه-یه-تیم-دیگست-یا-خودتی&quot;&gt;تیمی که تست مینویسه یه تیم دیگست یا خودتی؟&lt;/h4&gt;

&lt;p&gt;نه خودمم. تست رو خود دولوپر باید بنویسه&lt;/p&gt;

&lt;h4 id=&quot;تیمی-هم-دارید-که-تست-دستی-انجام-بده&quot;&gt;تیمی هم دارید که تست دستی انجام بده؟&lt;/h4&gt;

&lt;p&gt;نه همون ریگریشن هست که هر جمعه همه باهم تست میکنیم. یه نفر با نقش qa داریم ولی اون یه نفر نمیرسه همه چیز رو تست کنه، معمولا qa داشبورد تست رو maintain میکنه، مثلا صبح به صبح که میگیم این تست fail شد، معمولا اون آدم میره چک میکنه چرا fail شده، اگر سوادش رو داشته باشه ممکنه حلش بکنه اگر نه اساین میکنه به یه دولوپر.&lt;br /&gt;
ما کلا ۲ تا ویو تو سرچ نوشتیم، جمعا یدونه اون تولبار اون بالا که کاستومایز شدست و تولبار خود اندروید نیست، یکی هم وقتی که سرچ میکنید و نتیجه خالی باشه اون empty view میاد رو هم خودمون نوشتیم. بقیه چیزایی که تو سرچ نوشتیم لاجیک هست یا تست. ویو نمینویسیم. معمولا یه چیزی هم داریم به اسم ویو بایندر چون لایبراری که استفاده کردیم mvvm بوده، ویو بایندر واسطی هست بین ما و اون لایبراری که با توافق ما و اون تیم نوشته شده. مثلا ما بخوایم یه انیمیشنی اجرا بکنیم به ویو بایندر میگیم با اون لایبراری صحبت میکنه، خیلی چیز خاصی نیست.&lt;br /&gt;
بقیه کلاس‌ها هم یا پرزنتر هست یا ماژول‌های دگر یا کامپوننت یا فرگمنت‌ها و اینطور چیزها. این کد بیس یکی از تیم‌هایی هست که داره اونجا کار میکنه.&lt;/p&gt;

&lt;p&gt;کد review مکانیزم خاصی؟ هرکسی میتونه کد کس دیگه‌ای رو ریویو کنه؟&lt;/p&gt;

&lt;p&gt;تمام کلاس‌هایی که نوشته میشه یه annotation داره که برا چه فیچری هست شما اگر کدی رو کامیت بکنی که مثلا یکی از کلاس‌های فیچر ما ادیت شده باشه ما به صورت اتوماتیک پینگ میشیم تو اون کد ریویو. ولی الزامی نداره ما حتما تایید کنیم چون طرف ممکنه یه خط کامنت نوشته باشه. اگر بخوان یه آدم خاص ریویو بکنه پینگش میکنند ولی به صورت کلی هر تیم یه استاندارد داره که خود تیم مشخص میکنه. مثلا استاندارد تیم ما اینه که حتما اینتگریشن تست ۱۰۰٪ هست یا naming convention مشخص داریم comment style مشخص داریم اینارو کسی که با کد ما کار میکنه باید رعایت کنه. اگر یه فیچر رو برای یه تیم دیگه ادیت بکنی یه ایمیلی برات میاد و میگه این داکیومنت این تیم هست و باید بخونی و میگه آیا اینا رو رعایت کردی یا نه؟ چون نمیشه همه چیز رو تو استاتیک آنالایز چک کرد.&lt;/p&gt;

&lt;h4 id=&quot;ساختار-پروژه-رو-کی-تعیین-میکنه&quot;&gt;ساختار پروژه رو کی تعیین میکنه؟&lt;/h4&gt;

&lt;p&gt;تو طول زمان عوض شده ولی به صورت کلی هر تیم مسئول حفظ و نگهداری سلامت فیچر خودشه. کس دیگه‌ای نمیاد بهت بگه اینجوری کار کن مثلا از این استفاده کن خوبه یا بده. تماما به اختیار خود تیم هست و تو تیم تصمیم گیری میشه که چه شکلی باشه. این که به صورت کلی پروژه چه شکلی باشه معمولا انجینیرهای قدیمیتر تو لول‌های بالاتر، مثلا یه نفر لید ترایب هست که اون جهت گیری فنی ترایب رو مشخص میکنه. معمولا هرچی لول بره بالاتر ضریب نفوذ روی پروژه به شکل high level افزایش پیدا میکنه. مثلا این که ما نمیتونیم از یه سری لایبراری‌ها استفاده بکنیم دلیل اینه ترایب لیدمون نمیتونه اجازه بده این لایسنس رو تو پروژمون داشته باشیم.&lt;/p&gt;

&lt;h3 id=&quot;سوالهای-بچهها&quot;&gt;سوال‌های بچه‌ها&lt;/h3&gt;

&lt;h4 id=&quot;یه-جا-گفتی-اگر-به-چندتا-بخش-پروژه-کمک-کنی-مثل-بک-اند-دیتا-ساینس-و--استیتت-میره-بالاتر-و-وظایف-بیشتری-انجام-میدی-آیا-توی-فیلد-خاص-خودت-پیشرفت-کنی-بهتر-نیست-و-برای-شرکت-ارزشمندتر-نیست-تا-اینکه-سعی-کنی-توی-چندتا-فیلد-تلاش-کنی&quot;&gt;یه جا گفتی اگر به چندتا بخش پروژه کمک کنی مثل بک اند، دیتا ساینس و … استیتت میره بالاتر و وظایف بیشتری انجام میدی، آیا توی فیلد خاص خودت پیشرفت کنی بهتر نیست و برای شرکت ارزشمندتر نیست تا اینکه سعی کنی توی چندتا فیلد تلاش کنی؟&lt;/h4&gt;

&lt;p&gt;این سوال خوبیه که یه کار رو خیلی خوب انجام بدی بهتره یا چندتا کارو انجام بدی؟ دو مدل کلی برنامه‌نویس داریم. برنامه‌نویس T شکل و اگر اشتباه نکنم I شکل.&lt;br /&gt;
برنامه‌نویس T شکل برنامه‌نویسایی هستند که مثل حرف انگلیسی T بالاش یه خط داره که به یه خط دیگه عمود هست، یعنی شما توی دو جهت دارید حرکت میکنید. مثلا ممکنه یه سری زبان‌های مختلف رو یاد بگیرید. این برنامه‌نویسا معمولا کسایی هستند که برای کارایی مثل مدیریت پروژه خیلی خوبن، کسایی هستند که معمولا میتونن بین تیم‌ها مشترک باشند و آدم‌های ارزشمندی هستند.&lt;br /&gt;
در برابر اینا برنامه‌نویسای I شکل یه خط دارند، معمولا اینا آدم‌هایی هستند که توی یه زبون خیلی خیلی عمیق میشن. اینا آدم‌های کار راه اندازی هستند، یعنی کسایی هستند که وقتی هیشکی نمیتونه یه چیزی رو درست بکنه، اینا میان درست میکنن. سطح کاریشون هم خیلی بالاست و گرون قیمت هستند.&lt;br /&gt;
اینکه شما کدوم یکی از اینا بشی دست خودت هست، انتخاب خودت هست چه مدلی پیشرفت بکنی. توی همه‌ی شرکت‌ها به جفتشون نیاز هست. بعضی وقتا واقعا پیش میاد آدم از کاری که میکنه حوصلش سر میره، نیاز داره یه چیز جدیدتری رو امتحان کنه، مثلا شما وقتی دو - سه سال روی یه codebase کار کنی به همه چیزش تسلط داری. خب اون کدبیس چالش جدیدی برات ایجاد نمیکنه. خب اون موقع هست که شما یا باید بگی من از این شرکت برم به شرکت دیگه یا مثلا اگر شرکت امکانش رو داشته باشه بگه بیا برو توی یه تیم دیگه، برو یه زبان دیگه بنویس برو یه چیز دیگه یاد بگیر. چون این آدم آدم ارزشمندی برای شرکت هست، سه چهار سال دانش این آدم توی این شرکت بوده و خیلی حیف هست بذاریم بره. مثلا یا حقوقش رو بیشتر بکنن یا یه چیزی بهش میدن که توی شرکت بمونه. معمولا توی شرکت‌های بزرگ سعی میکنن همچین امکانی رو به دولوپر‌ها بدن که اگر بخوان بتونن یه چالش جدیدی داشته باشن برای انجام دادن. من بشخصه ترجیح میدم T شکل باشم.&lt;/p&gt;

&lt;h4 id=&quot;چطور-میشه-یه-تست-خوب-نوشت-اگر-کتابی-هست-معرفی-کن-اصن-یه-تست-خوب-به-چی-میگید&quot;&gt;چطور میشه یه تست خوب نوشت؟ اگر کتابی هست معرفی کن؟ اصن یه تست خوب به چی میگید؟&lt;/h4&gt;

&lt;p&gt;یه تست زمانی میتونه یه تست خوب باشه که فانکشنالیتی خوبی رو تست کنه، یعنی شما در درجه اول باید کدی بنویسید که تمیز باشه تا بتونید تست خوبی بنویسید. مثلا یکی از مباحثی که توی شرکت سعی میکنند بهش زیاد رفرنس بدن یا زیاد استفاده کنند میگن فانکشن شما تا حد ممکن (البته بعضی وقتا نمیشه) نباید side effect داشته باشه. فانکشن زمانی ساید افکت داره که به جز ورودی و خروجی که میگیره و داره، یه سری کارهای دیگه هم بکنه. کدی که ساید افکت داشته باشه تست نوشتن براش سخت هست. چون تست نوشتن برای ساید افکت سخته. چند وقت پیش Dan Lew یه مقاله خیلی خوبی نوشته بود در مورد اینکه testability چه جوریه و چه فانکشنالیتی ساید افکت داره و نداره و تست نوشتن برای اینا چه فرقی داره. ولی خلاصشو بخوام بگم اگر شما یه فانکشن خیلی ساده بنویسید که دو تا عدد رو بگیره با هم جمع کنه و خروجی رو برگردونه، تست نوشتن براش خیلی ساده هست ولی حالا اگر به همین فانکشن یه خط اضافه بشه که این دو تا عدد رو بگیره جمع کنه و برگردونه ولی یه پرینت هم بکنه یه چیزی هم توی لاگ کت بیرون بده این میشه ساید افکت این میشه یه فانکشنالیتی دیگه توی اون فانکشن که شما برای اینم باید تست بنویسید، معمولا وقتی pure logic فانکشنالیتون ساید افکت نداشته باشه هم کدتون تمیز تره و هم تست نوشتن براش خیلی کم دردسر تره.&lt;br /&gt;
اینجا ممکنه یه کدی بنویسی، یه پول ریکوئستی بزنی، ولی پول ریکوئستت ممکنه مثلا سه چهار روز طول بکشه با مستر مرج بشه. چون آدم‌های مختلف میان ریویو میکنن و بعضا در اکثر مواقع نظرات خیلی خوبی میدن. چون شما وقتی یه کدی رو مینویسی فقط از دیدگاه خودت نوشتی ولی وقتی چندنفر دیگه میان منتقد کد شما میشن ممکن هست یه سری دیدگاه‌هایی رو به شما بدن که شما اون لحظه نداشتی و داشتی به چیزهای دیگه فکر میکردی باعث میشه کدی که مرج میشه توی مستر خیلی تر و تمیز باشه. اگر لول ساید افکت رو خیلی پایین نگه دارید یونیت تست‌های خوبی میتونید بنویسید، البته Integration test و End-to-end test خیلی ربطی به تمیز بودن کد نداره. ولی این خلاصه‌ی چیزی بود که من میتونستم بگم چطور تست بنویسیم. کتاب خاصی یادم نمیاد بذارید eBookهامو نگاه کنم بهتون میگم چیز خاصی خوندم یا نه. من بیشتر یادم میاد در مورد تست مقاله خوندم مثلا power mockito یا mockito رو مجبور شدم داکیومنتشو زیر و رو کنم. ولی اگر کتاب مناسب هم بهم رفرنس دادن یا خودم داشته باشم نگاه میکنم بهتون میگم.&lt;/p&gt;

&lt;h4 id=&quot;منظور-از-ساید-افکت-اینه-که-روی-ورودیها-تغییر-ایجاد-نشه&quot;&gt;منظور از ساید افکت اینه که روی ورودی‌ها تغییر ایجاد نشه؟&lt;/h4&gt;

&lt;p&gt;کنار بحث ساید افکت و اینکه یه فانکشن باید فقط همون کاری که اسمش میگه رو انجام میده، این حرفی که میگی خیلی درسته. و معمولا آبجکت‌هایی که توی کلاس ساخته میشه (اینجکت میشه یا توسط کلاس دیگه به عنوان ورودی داده میشه) معمولا final هستند همشون، یعنی اکثر ورودی‌هایی که یه فانکشن داره یه انوتیشن final کنارش نوشته شده که اینا تغییر پذیر نباشن و وسط کار نتونید ورودی رو تغییر بدید که ساید افکت ایجاد بشه. معمولا اکثر مواقع بالای توابع notNull@ وجود داره که بگه خروجی که بهت میدم نال نیست. یعنی توی ران تایم میتونه خیالت راحت باشه و اگر مشکلی باشه من توی کامپایل تایم حل میکنم.&lt;/p&gt;

&lt;h4 id=&quot;امکانش-هست-حقوقتو-بگی-یا-اینکه-بگی-هزینه-زندگیت-اونجا-چقدر-هست&quot;&gt;امکانش هست حقوقتو بگی یا اینکه بگی هزینه زندگیت اونجا چقدر هست؟&lt;/h4&gt;

&lt;p&gt;خب این سوال واقعا خیلی مرتبط با اندروید و توسعه‌ی نرم‌افزار نیس و بحث حقوق یه مقدار شخصی هست. اگر یکی دوست داشته باشه منابع آنلاین زیادی هستند که داخلش بتونید متوسط حقوق برنامه‌نویسا یا هزینه‌ی زندگی رو پیدا کنید. خیلی پیدا کردنش کار سختی نیست. فقط من یه نکته بگم اگر کسی مثلا علاقه داره که بره خارج از ایران کار یا زندگی بکنه. این تصمیم تمام ابعاد زندگیش رو تحت تاثیر قرار میده و تصمیمی نیست که فقط بحث کاری باشه. اصلا بهش به شکل بحث کاری نگاه نکنید.&lt;/p&gt;

&lt;h4 id=&quot;اگر-ممکنه-در-مورد-بخشهای-دیگه-هم-از-لحاظ-فنی-بگو&quot;&gt;اگر ممکنه در مورد بخش‌های دیگه هم از لحاظ فنی بگو؟&lt;/h4&gt;

&lt;p&gt;خب اینو کوتاه میگم، چون اگر قرار باشه همه بحث‌های فنی اسپاتیفای رو بگم باید چند روز توضیح بدم. چیزی که من میدونم اینه که درصد خیلی زیادی از بک‌اند ما با جاوا نوشته شده و از این به بعد هر چیزی هم قرار باشه نوشته بشه با جاوا نوشته میشه. این تصمیم رو سطوح بالا شرکت گرفتند و علتش هزینه نگهداری کد و اینجور چیزاس. به غیر از بخش کوچیکی که با پایتون، سی پلاس پلاس و گو نوشته شده و متناسب با نیازش تصمیم گرفته شده که زبون دیگه‌ای استفاده بشه. به همین دلیل معمولا اندروید انجینیرها رو خیلی تشویق میکنند اگر دوست دارند بک‌اند یاد بگیرند و بک‌اند هم بزنن. برای اینکه خیلی کار سختی نیست ماها که جاوا بلدیم، بیایم best practiceهای زبان رو بخونیم، یکی دو تا کورس ببینیم و یکی دو تا کتاب بخونیم تا کد بزنیم. و حتی بعد یه مدت به اصطلاح تاثیر گذار کد بزنیم.&lt;br /&gt;
ترجیح میدم بیشتر از این در مورد چیزهای فنی بخش‌های دیگه نگم،چون خودمم اطلاع ندارم.&lt;/p&gt;

&lt;h4 id=&quot;اونجا-چه-کتابهایی-برای-خوندن-توصیه-میشه&quot;&gt;اونجا چه کتاب‌هایی برای خوندن توصیه میشه؟&lt;/h4&gt;

&lt;p&gt;از کتاب‌هایی که اینجا روش تاکید میشه کتاب‌های Martin Fowler هست که اگر اشتباه نکنم یکیش مثلا Enterprise architecture هست، کتاب Effective Java و کتاب Clean Code هم جزء کتاب‌هایی هستند که توی شرکت بهشون زیاد رفرنس داده میشه. چندتا کتاب دیگه هم هست که اسماشون الان در خاطرم نیست.&lt;/p&gt;

&lt;h4 id=&quot;شرایط-و-محیط-کار-چطوره-چه-امکاناتی-دارید&quot;&gt;شرایط و محیط کار چطوره؟ چه امکاناتی دارید؟&lt;/h4&gt;

&lt;p&gt;ساعت ورود و خروج به شرکت به اون صورت نداریم. تنها مساله‌ای که وجود داره بین تیم‌های مختلف قرارداد میشه که صبح چه ساعتی stand up meeting داشته باشن.&lt;br /&gt;
یکی از خوبیا شرکت اینه خیلی انعطاف‌پذیر هست که از خونه کار کنی یا داخل شرکت کار کنی، البته تا زمانی که ثابت کرده باشی داخل خونه کار کردنتم به شرکت ضرر نمیزنه. در واقع این بصورت کلی مدل کاریمون و رفت و آمدمون هست: ساعت نداریم هر موقع میخوایم میتونیم بریم و بیایم ولی آدم‌ها هم سعی میکنند واقعا متعهد به کار باشند.&lt;br /&gt;
بحث امکانات هم مثل شرکت‌های خوب هست، مثلا در رابطه با غذا به حساب شرکت میتونی غذا بخوری یا اتاق بازی یا از اینجور چیزا داریم. البته میگم اینا بحث‌های فرعی هست و خیلی ربطی به توسعه‌ی نرم‌افزار نداره.&lt;/p&gt;

&lt;h4 id=&quot;شرکت-و-محیط-کار-چطور-هست&quot;&gt;شرکت و محیط کار چطور هست؟&lt;/h4&gt;

&lt;p&gt;دفترمون اخیرا عوض شد اومدیم یه دفتر جدید. شرکت تو استکهلم شعبه‌های مختلف داشت همشون هم برنامه‌نویسی نبودند، یه دفتر جدید ساختند ۱۲ طبقه وسط شهر و خیلی خیلی ساختمون تحسین برانگیزی هست. اون دفتر قبلی هم که من از اینجا رفتم توش جا خوردم، این دفتر جدید هم که رفتیم توش قشنگ یه دور دیگه جا خوردیم. خیلی خیلی خوب درآوردند علتش هم اینه که پروداکتیویتی آدم‌ها خیلی براشون مهمه، بینهایت برای این که شما احساس راحتی بکنید هزینه میکنند. هزینه‌هایی که شاید به چشم هم نیاد ولی وقتی میشنوی تعجب میکنی. طبقه ۱۲ کلا کافه تریا هست و خیلی بزرگ. چندتا گیمینگ روم داره، پینگ پونگ، بیلیارد، یخچال پر غذا، اتاق ماساژ، اتاق VR، اتاق کاردستی که لوازم تحریر و خیاطی توش هست برای ساختن مثلا یه چیز فیزیکی، به درد اجایل کوچ‌ها میخوره. هر طبقه برای خودش آشپزخونه داره، محیط کار جدا هست، یه چیزی که خیلی به درد میخوره میزایی هست که حالت ایستاده میشند، بغلش ۲ تا دکمه داره میاد بالا و میره پایین. معمولا بعد از اینکه نهار میخورند همه سنگین میشند ۱-۲ ساعت ایستاده کار میکنند و اصلا حالت خواب آلودگی برات پیش نمیاد، به نظرم اینجا هم با هزینه معقول میشه انجام داد و برداشت خیلی خوبی کرد از نیروها. چون نهار که میخوری چایی یا قهوه اونقدر تاثیر نداره ولی وقتی ایستاده کار میکنی قشنگ خون تو بدنت میچرخه و حالت خواب آلودگی تقریبا صفر میشه.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://i.ibb.co/qnqCfb8/urban-escape1.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;h4 id=&quot;یه-جا-کار-میکردیم-بعد-از-نهار-نیم-ساعت-خواب-اجباری-بود-تا-سر-حال-شی&quot;&gt;یه جا کار میکردیم بعد از نهار نیم ساعت خواب اجباری بود تا سر حال شی.&lt;/h4&gt;

&lt;p&gt;ایده خوبی زده بوده.&lt;br /&gt;
پروداکتیویتی براشون خیلی مهم هست معیار کار آدما اون ارزش آفرینی هست که میکنند نه اون ساعت کاری. ساعت کار کلا وجود نداره، ولی محیط کاری که ایجاد میکنند خیلی حس تعلق ایجاد میکنه و آدم خیلی با جون دل تو شرکت کار میکنه، حتی خیلی وقت‌ها اضافه بر زمانی که باید بمونه میمونه چون جای با حالی هست برای کار کردن. مثلا تا ساعت ۷ شب کار میکنی میری یه دست PS میزنی، یه شام بیرون میخوری دوباره یه چیزی به ذهنت میاد میای تو شرکت. این محیط فرهنگی که تو شرکت‌ها ایجاد کردند خیلی قابل تحسین هست و گرنه همه جا آدم با استعداد و پشتکار هست ولی اگر بتونی از این آدما بهره وری بکنی هنر مدیریتی هست که اونور وجود داره.&lt;/p&gt;

&lt;h4 id=&quot;چه-اپهایی-دارید&quot;&gt;چه اپ‌هایی دارید؟&lt;/h4&gt;

&lt;p&gt;بطور کلی اسپاتیفای ۶ تا اپ مختلف داره که از این ۶ تا ۴ تاش اپ اصلی اسپاتیفای هست. یه مفهوم جالب‌تری که توی اسپاتیفای وجود داره وقتی شما کاربر رایگان اسپاتیفای هستید از یه اپ استفاده میکنید و وقتی پریمیموم میشید از یه اپ دیگه استفاده میکنید. البته به چشم یوزر این چیز متفاوتی نیست همه چیز داخل یه اپ هست ولی داخل اپ دو تا پروژه‌ی مختلف وجود داره که شما وقتی پرمیموم میشید بین این دو تا سوییچ میشید. و اتفاق جالبیه، مراحل اینکه از یه پروژه میرید به یه پروژه، داخل کد بیس بامزه هست. ممکنه یه سری از این اپ‌هارو دیده باشید. مثلا یه اپ دیگه داریم به اسم اسپاتیفای زیرو که برای کشور‌هایی هست که یه مقدار سرعت اینترنتشون پایینه یا گوشی‌های ضعیف‌تری دارند مثل هند پاکستان و یه سری کشور‌های آفریقایی، یه اپ دولوپ شده فقط برای اون کشورها که خیلی resource efficient هست، مدل برنامه‌نویسیش فرق داره و ابزارهایی که استفاده میکنند فرق داره. درکل یه سری اپ‌های دیگه هم هست.&lt;/p&gt;

&lt;h4 id=&quot;job-title-شما-چیه&quot;&gt;job title شما چیه؟&lt;/h4&gt;

&lt;p&gt;Software engineer&lt;/p&gt;

&lt;h4 id=&quot;چه-جاب-تایتلهای-مختلفی-دارید&quot;&gt;چه جاب تایتل‌های مختلفی دارید؟&lt;/h4&gt;

&lt;p&gt;برمیگرده به فرهنگ شرکت‌ها، تو شرکت ما اگر engineer باشی همه Software engineer هستند هیچ فرقی بین lead, senior و … نیست. یه فریمورکی هست نه به معنای برنامه‌نویسی یه فریمورک هست که رو کاغذه، متناسب با تاثیرگذاریت تو شرکت یه step فارغ از این که چند سال تجربه داشته باشی، قبلا چه کارایی کردی بهت اساین میشه. وارد شرکت که میشی استپت همیشه یک هست، با استپ یک وارد میشی بعد از ۶ ماه دوباره چک میشه. استپ یک یعنی کسی که میتونه کارهای خودش رو هندل کنه و گیر نمی‌افته. استپ ۲ یعنی کسی که به اسکواد خودش داره کمک میکنه و ارزش آفرینی میکنه. استپ ۳ یعنی کسی که در لول ترایب داره کار میکنه. استپ ۴ یعنی برای کمپانی داره ارزش آفرینی میکنه، که استپ ۴ ما در کل شرکت ۲ یا ۳ تا داریم. یه انجینیر داریم خیلی قدیمیه حدود ۶۰ سالشه و فکر کنم یکی از کانتریبیوترهای اصلی rx java هم هست اون استپ ۳ هست. مفهوم سنیور و جونیور نداریم خیلی راحت میتونی با همه صحبت کنی و نظر همه رو به چالش بکشی.&lt;/p&gt;

&lt;h4 id=&quot;ایرانی-دیگه-هم-هست&quot;&gt;ایرانی دیگه هم هست؟&lt;/h4&gt;

&lt;p&gt;آره تو استکهلم ۳ نفر تو آمریکا هم هستند ولی همشون کسایی بودند که برای درس رفتند و بعد ویزای کار گرفتند.&lt;/p&gt;

&lt;h4 id=&quot;مدرک-تاثیر-داره&quot;&gt;مدرک تاثیر داره؟&lt;/h4&gt;

&lt;p&gt;مدرک تحصیلی تاثیر نداره البته نه که نداشته باشه مثلا اگر علوم انسانی خونده باشی ممکنه یه مقدار به چالش بکشند ببینند چی بلدی، ولی مثلا برای گوگل خیلی مهم هست.&lt;/p&gt;

&lt;h4 id=&quot;چند-سال-سابقه-برنامه-نویسی-داری&quot;&gt;چند سال سابقه برنامه نویسی داری؟&lt;/h4&gt;

&lt;p&gt;از ۸۸ برنامه نویسی حرفه‌ای کار میکردم از ۹۱ اندروید. اندروید دولوپر شدنم سر استارت اپ ویکند بود. قبل از اندروید هم اپ Symbian میزدم.&lt;/p&gt;

&lt;h4 id=&quot;زندگی-چطور-هست&quot;&gt;زندگی چطور هست؟&lt;/h4&gt;

&lt;p&gt;استکهلم یه مقدار زندگی کردن توش سخته یا باید با سرما و تاریکی خیلی مشکلی نداشته باشی یا اینکه اذیت میشی. جای خیلی قشنگی هست ولی چالش‌های خودش رو داره مثلا خورشید ساعت ۸:۳۰ صبح طلوع میکنه ساعت ۳ هم غروب میکنه. ما مشکلی نداشتیم پوست کلفت بودیم ولی بعضی‌ها نمیتونند تحمل کنند. هفته اول پاییز قشنگ احساس میکردیم. یهو هم روز کوتاه میشه هم ساعت هارو یه ساعت میکشند جلو، آخر هفته هم بود مونده بودیم خونه ۴ عصر هم خورشید غروب کرد تا شب بال بال میزدیم. معمولا آخر هفته حتما باید یه برنامه بچینی، تو خونه بمونی دپرس میشی.&lt;br /&gt;
از اونور هم تو تابستون روز خیلی طولانیه، تا ساعت ۱۱:۳۰ شب آسمون روشن هست و ساعت ۳ هم دوباره خورشید طلوع میکنه، ۵ ساعت کلا شبه.&lt;/p&gt;

&lt;h4 id=&quot;همه-شرکتها-اینجوریند&quot;&gt;همه شرکت‌ها اینجوریند؟&lt;/h4&gt;

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

&lt;h4 id=&quot;اون-بازیای-که-گفتی-رو-میتونی-توضیح-بدی&quot;&gt;اون بازی‌ای که گفتی رو میتونی توضیح بدی؟&lt;/h4&gt;

&lt;p&gt;بازی هدفش این بود که زیاد کار کردن رو در برابر درست کار کردن نشون بده. آدم‌ها تقسیم شدند به تیم‌ها مختلف ۳ یا ۴ نفره. به هر تیم ۱۰۰ تا توپ پینگ پنگ دادن تیمی که میتونست بیشترین تعداد توپ رو بزاره تو ظرف برنده میشد. منتهی یه سری قانون داشت مثلا یه توپ باید بین تمام اعضای تیم به گردش در بیاد بعد بره تو سبد، یک نفر در لحظه بیشتر از یه توپ نمیتونه برداره، توپ‌ها با قاشق باید برداشته میشد و …. شما میتونستید خیلی سریع کار کنید یا باهوش کار کنید و یه فرمولی پیدا کنید که از بقیه تیم‌ها سریعتر توپ‌ها رو بزارید تو ظرف. در واقع خلاقیت آدم‌ها رو به چالش میکشیدند. تیمی هم که برنده میشد راه حلش رو به اشتراک میذاشت. مهم این بود که به آدم‌ها بفهمونند با سریعتر کار کردن یا استرس ممکنه به نتیجه نرسی، اگر قبلش فکر کنید ممکنه بهتر به نتیجه برسید. یه سری بازی اینطوری بود که هزینش فقط خوندن یه کتاب اجایل کوچ و ۴۰۰ تا توپ پینگ پنگ بود.&lt;br /&gt;
اونجا این شکلیه که یه بخشی از فرایند آن‌بردینگ با اجایل کوچ جلسه داری و از دیدگاه‌های مختلف آموزش میدن، از دیدگاه فنی، از دیدگاه اجایل کوچ، از دیدگاه تیم‌لید، از جنبه‌های مختف سعی میکنند آدم رو جا بندازن و بگند چه انتظاری از جنبه‌های مختلف از فرد میره. یکی از کارهای مهمی که اجایل کوچ‌ها انجام میدند بررسی سلامت تیم از نگاه تیم بودن هست مثلا اگر بعد از مدتی بچه‌ها صبح‌ها جلسه رو نمیان یا جلسه به جای ۱۰ دقیقه ۴۵ دقیقه طول میکشه اینا coordination انجام میدن، آدم‌ها رو سر جای خودشون نگه میدارن جوری که استفاده حداکثری ازشون بشه. مثلا تو رترواسپکتیو چک میکنند به کارهای اسپرینت رسیدیم یا نه؟ یا در مجموع تو ۲ هفته گذشته خوشحال بودید یا نه؟ راضی بودید از کار کردن یا نه؟ یا میگند دو هفته گذشته خودتون رو در قالب یه حیون بکشید، مثلا لاک پشت ۲ هفته گذشته خیلی کند بودیم؛ خرچنگ انگار چندتا دست داشتم و کلی کار مختلف میکردم. یه جورایی با خلاقیت کمک میکنند محیط کار رو بهتر بکنند چطوری میتونیم بهتر کار بکنیم چه عاملایی حذف و اضافه شه اجایل کوچ‌ها بخش عمده‌ای از کارشون کوردینیشن آدم‌هاست.&lt;/p&gt;

&lt;h4 id=&quot;چه-ابزارهایی-استفاده-میکنید&quot;&gt;چه ابزارهایی استفاده میکنید؟&lt;/h4&gt;

&lt;p&gt;تمام شرکت رو slack هست تیمای مختلف کانال مختلف دارن خیلی کم از stack overflow و … استفاده میکنیم چون سعی میکنیم با هم صحبت کنیم، تیم‌ها کانالای مختلف دارند مثلا rxJava unit test Android و … کانال مخصوص خودش رو داره و اکثر سوال‌ها اون تو پرسیده میشه. ارتباط اصلی شرکت معمولا رو ایمیل هست. شرکت یه اپ پرایویت فیسبوک رو خریده https://spotify.facebook.com سوشال نتورک شرکت هست مثلا بخوایم یه gif بزاریم یا این جور چیزا. تیم ما از جیرا استفاده میکنند ولی تیم‌هایی هست که از ترلو و … استفاده میکنند. جیرا هم کلی کاستومایز شده معمولا اجایل کوچ‌ها این کار رو میکنند. یه باتی داریم که معمولا pr سامبیت میشه میاد تست‌های مختلف روش اجرا میکنه. jenkins نیست، فکر کنم خودشون نوشتند. داکیومنت‌ها رو گوگل درایو هست، Confluence داریم ولی من از گوگل درایو استفاده میکنم. یه معماری مبتنی بر Redux داریم که یه خورده دستکاریش کردن برای جاهایی که Event base هست. کلا قرار نیست بریم رو Kotlin چون تمام ریسورس‌هایی که میخوایم بیشتر و پخته‌تر رو جاوا هست. برنامه نویس‌های اندروید و بک‌اند رو هم شیفت میدند که فول استک بشند تا جایی که میتونند، چون مایکرو سرویس‌ها هم رو جاوا هست راحت‌تره. (من از quarter قبل شروع کردم بک‌اند بزنم و احتمالا کوارتر بعد بیشتر بک‌اند میزنم.) در نتیجه کاتلین با قاطعیت رد شد هیچ کس نمیخواست بره سراغش ولی شرکت‌هایی هستند که رفتند خوشحال هم هستند. Hangouts خیلی زیاد استفاده میشه همه جلسات و ارتباطات با هنگوات هست. گوگل کلندر خیلی زیاد استفاده میشه و خیلی جدی گرفته میشه.&lt;/p&gt;

&lt;h4 id=&quot;یه-جا-گفتی-رو-کلاودیم-دیتا-سنتر-داریم-یا--بیشتر-بگو&quot;&gt;یه جا گفتی رو کلاودیم دیتا سنتر داریم یا … بیشتر بگو&lt;/h4&gt;

&lt;p&gt;اسپاتیفای الان یه دونه دیتا سنتر تو لندن داره قبلا بیشتر بود تو اروپا آمریکا و … بعد دیدن هزینه نگهداریش خیلی زیاده و ما زاتا یه شرکت موسیقی هستیم و نمیخوایم به اون سمت بریم و درگیر اون لول از نگهداری بشیم. مثلا تجهیزات سخت افزاری داشته باشیم و رفتیم رو گوگل کلاود و خیلی هم به نفعمون شد. یه دونه تو لندن هست به خاطر یه سری مشکلات با گوگل کلاود که قرار هست اونم تو ۳ ماه آینده کلا خاموشش کنند.&lt;/p&gt;

&lt;h4 id=&quot;اونجا-که-گفتی-بعد-از-اینکه-وارد-اپ-میشی-کلا-۲-قسمت-میشه-رو-میشه-توضیح-بدی&quot;&gt;اونجا که گفتی بعد از اینکه وارد اپ میشی کلا ۲ قسمت میشه رو میشه توضیح بدی&lt;/h4&gt;

&lt;p&gt;وقتی وارد اپ میشی ۲ تا چیز قبل از لود شدن هر کدی فچ میشه یکی user policy که تا وقتی نیاد شما اون پراگرس بار رو میبینی حتی اگر اطلاعات صفحه هوم اومده باشه یه چیز دیگه داریم به اسم aba که فریم ورک a/b test هست و یه سری configuration میفرسته. مثلا ممکنه قرار باشه ۴ تا تب تو نویگیشن داشته باشی جای ۵ تا، ممکنه اون توی aba باشه ولی به aba معمولا ۰.۷ ثانیه فرصت میدیم اگر از سمت بکند اومد که اومد اگر نیومد با یوزر پالیسی میریم جلو. بسته به این که کدوم یکی برای شما بیاد یه کلاس‌هایی لود میشه به صورت داینامیک که اون تصمیم میگیره بری تو اپ فعلی یا بری توی اپ قدیمی. برای من خیلی جالب بود که پکیج‌هایی که داری انتخاب میکنی متناسب با چیزی که ران تایم هست انتخاب بشه، یعنی الان من این پکیج رو لود کنم یا این یکی رو. مثلا وقتی بخوای core برنامه رو راه بندازی که با ndk کامپایل شده و شما فقط باید run کنیش بسته به این که چه پکیجی رو داری چیز متفاوتی برات لود میشه&lt;/p&gt;

&lt;h4 id=&quot;حجم-اپ-چقدر-هست&quot;&gt;حجم اپ چقدر هست؟&lt;/h4&gt;

&lt;p&gt;فکر کنم ۴۰ مگ یا همچین چیزی ولی برای کشورهایی که نت داغونی دارن یه اپ دیگه نوشته شد به اسم اسپاتیفای تاینی و همه چیزش فرق داره هیچ چیش با اپ ما یکی نیست. کلا ۲ مگ حجم هست. فقط رندر میکنه چون هیچ لاجیکی توش وجود نداره. از لحاظ ظاهری تقریباً مو نمیزنه با اپ فعلی خیلی شبیه ولی یه تیم دیگه نوشته و یه اده آدمند که تخصصشون فقط تو بهینه سازی، کم کردن حجم کد و … هست در این حد که تو apk حتی یه دونه کلاس اضافه نره. من کدوشون رو کم دیدم ولی اصلا استانداردهای کارشون فرق داره و یه جور دیگه کد میزنند و من از کاری که میکنند سر در نمیارم.&lt;/p&gt;

&lt;h4 id=&quot;اپ-خودتون-انگار-۱۸-مگه&quot;&gt;اپ خودتون انگار ۱۸ مگه&lt;/h4&gt;

&lt;p&gt;اپ دیباگمون ۴۰ مگ هست. این اسپاتیفای تاینی هست. ایمیج میدونم اصلا استفاده نشده از فونت استفاده کردند، انیمیشن نداره حجمش کم شده زمان لود شدن ویوها خیلی اومده پایین و…&lt;/p&gt;

&lt;h4 id=&quot;یه-اپ-اندروید-اسپاتیفای-هست-که-آیکونش-سبز-کمرنگ-هست-و-بلافاصله-میگه-این-یکی-رو-نصب-کن-داستانش-چیه&quot;&gt;یه اپ اندروید اسپاتیفای هست که آیکونش سبز کمرنگ هست و بلافاصله میگه این یکی رو نصب کن، داستانش چیه؟&lt;/h4&gt;

&lt;p&gt;یه اتفاق چند سال پیش رخ داده بود که بهش میگند insedence (اتفاق) یکی یه ایمیلی فرستاده بود و ایمیلش یه چیزی شبیه daniel@spotify.com بوده که ceo شرکت هست و گفته بچه‌ها این رو براتون میفرستم تستش کنید. یه لینکی بوده با این لینک عملا کلی از اطلاعات شرکت رو دراورده، من دقیقا نمیدونم چه اتفاقی افتاده ولی مجبور شدند در عرض یه هفته کل پکیج برنامه رو عوض کردند برای اینکه طرف دسترسی نداشته باشه به اونجا. ممکنه key store و پسورد رو در آورده باشه.&lt;/p&gt;

&lt;h4 id=&quot;دیتابیستون-چیه&quot;&gt;دیتابیستون چیه؟&lt;/h4&gt;

&lt;p&gt;نمیدونم چون ما از یه apiای استفاده میکنیم که یه تیم دیگه داره maintain میکنه. ولی میدونم هم رو فایل سیستم مینویسیم هم یه دیتابیسی هست که نمیدونم چیه و هم بسته به کاری که بخوای ممکنه رو کلاود بنویسند. تنظیمات ستینگ میدونم مثلا رو کلاود هست. ما با یه سریع انوتیشن میگیم چی میخوایم مثلا این پرامری کی هست و … ولی نمیدونم اون پشت چیه&lt;br /&gt;
بعضی تیم‌ها هم هستند که اصلا فیچر ندارند مثلا android infrostrucher اون تیم فیچر نداره ریپازیتوری رو داره مین تین میکنه. مثلا یه تیم داریم client build ریلیز کردن با اون تیمه زمان بیلد اگر بره بالا اون تیم گزارش میده که چرا؟ اون تیم بود که گفت باید ماژولارایز کنیم کد بیس رو و اگر نه یه ۲ سال دیگه با همین سرعت بخوایم کد جنریت بکنیم ۲۰ دقیقه باید منتظر باشیم که گریدل دونه دونه سینک کنه.&lt;/p&gt;

&lt;h4 id=&quot;چندتا-تیم-دارید&quot;&gt;چندتا تیم دارید؟&lt;/h4&gt;

&lt;p&gt;اون ترایبی که ما کار میکنیم ۸ اسکواد مختلفه ولی کلا نمیدونم چندتا تیم داریم از اینا ۴ تاش تو استکهلمند ۴ تا تو گوتنبرگ&lt;/p&gt;

&lt;h4 id=&quot;چه-جوری-آپدیت-میدید&quot;&gt;چه جوری آپدیت میدید؟&lt;/h4&gt;

&lt;p&gt;هر هفته جمعه پوش میکنیم تو استور و هر هفته باید ریلیز کنیم. هر تیمی باید جمعه فیچرهای خودش رو ساین آف کنه، یعنی کدم رو تست کردم OK هست. یه داکیومنتی شیر میشه بین همه، تست میکنن اگر OK بود داکیومنت رو ساین میکنن بعد تیم ریلیز میفهمه همه چی OK هست.&lt;/p&gt;

&lt;p&gt;آخر هفته ریلیز میکنید به باگ بخورید چی؟&lt;/p&gt;

&lt;p&gt;یه تیمی داریم که on call هست و همیشه کار میکنه ولی اگر نتونی اپ خودت رو هم تست کنی خیلی اوضاع خرابه دیگه&lt;/p&gt;

&lt;h4 id=&quot;مثلا-تست-میکنی-ردیفه-ولی-ریلیز-که-میکنی-میبینی-۲-درصد-کرش-داره-مثلا-firebase-رو-آپدیت-کردم-این-به-کرش-میخوره&quot;&gt;مثلا تست میکنی ردیفه ولی ریلیز که میکنی میبینی ۲ درصد کرش داره مثلا Firebase رو آپدیت کردم این به کرش میخوره&lt;/h4&gt;

&lt;p&gt;این اتفاق نباید رخ بده&lt;/p&gt;

&lt;h4 id=&quot;برا-شما-نباید-برای-ما-میشه--&quot;&gt;برا شما نباید برای ما میشه : )&lt;/h4&gt;

&lt;p&gt;وقتی آپدیت میدید relese note چیه؟ باگ فیکسه یا فیچر هدف داریه&lt;/p&gt;

&lt;p&gt;تیمی که داره ریلیز میکنه اصلا براش مهم نیست که شما چی داری ریلیز میکنی متنی هم که زیر آپدیت‌ها هست همش ثابته امیدواریم از این تجربه اسپاتیفای لذت ببرید و … در نتیجه شما باید همواره هر باگی هست فیکس بکنید چون برای هفته بعد میره بالا. ۲ تا ویدیو هم داده بود قبلا که چطور کار میکنند اسپاتیفای کالچر یا همچین چیزی تو vimeo دیده بودم.(https://vimeo.com/85490944) تو اون میگه از نظر اسپاتیفای ریلیز کردن مثل یه قطار هست اگر به این رسیدی، رسیدی اگر نرسیدی باید صبر کنی با قطار بعدی، تو این کوارتر هم قرار هست ریلیز هر ۳ روز یکبار بشه و قرار هست تو ۲۰۱۸ به هر روز ریلیز و هر کامیت قابل ریلیز کردن بشه حتی اگر ریلیز ندیم.&lt;/p&gt;

&lt;p&gt;این سیاست منطقش چیه؟&lt;/p&gt;

&lt;p&gt;اول که اونجا مشکل محدودیت حجم اینترنت و … نداریم که به چشم بیاد. ولی از لحاظ کیفی میخوان به اونجا برسن که هرچی میذاری رو ریپازیتوریت انقدر خوب باشه که بشه ریلیز کرد. الان استاندارد شرکت بالاست یعنی هر چیزی بزاری بالا تو یه هفته میتونی مطمئن باشی که میشه ریلیزش کرد ولی میخوان به جایی برسند که هرچی میذاری همون لحظه اگر بره دست ۳۰۰ میلیون کاربر بدون مشکل کار بکنه cd هست دیگه.&lt;/p&gt;

&lt;p&gt;الان چندتا لایه کلی دارید توی کدتون؟ که فولی ماژولند؟&lt;/p&gt;

&lt;p&gt;اگه بخوام کلی بگم مثلا صفحه براوز رو کلا یه ماژولش کردیم تو کد بیس اصلی بود کنار بقیه فرگمنت‌ها ولی چون داشتیم از اول مینوشتیمش یه ماژولش کردیم همه فرگمنت لاجیک و تست رفت توش، فیچرها مثلا ماژول شدن، Search, Home, Your Library, Core&lt;/p&gt;

&lt;p&gt;بعد توی اون دوباره خودش ماژولارایز نیست؟&lt;/p&gt;

&lt;p&gt;نه پکیج بندی کردی ولی یه ماژول هست دیگه اگر circular dependency به وجود بیاد باید بریم اون یکی رو هم ماژولارایز کنیم. کسی که ماژولارایز میکنه باید دیپندنسی رو هم خودش solve بکنه مگر اینکه بخوای پلیر کل برنامه رو ماژولارایز بکنی که باید یه تیم براش بزاری.&lt;/p&gt;

&lt;h4 id=&quot;شده-کسی-اخراج-بشه-دلیلش-چی-بوده&quot;&gt;شده کسی اخراج بشه؟ دلیلش چی بوده؟&lt;/h4&gt;

&lt;p&gt;تا حالا ندیدیم ولی شاید به خاطر مسائل اخلاقی و این‌ها کسی اخراج بشه، پروسه استخدام از لحاظ فنی انقدری خوب هست که پیش نیاد.&lt;/p&gt;

&lt;h4 id=&quot;پاداش-یا-جریمه-دارید&quot;&gt;پاداش یا جریمه دارید؟&lt;/h4&gt;

&lt;p&gt;کسی رو تا الان ندیدم جریمه بکنن، محیط و آدم‌های شرکت‌خیلی حرفه‌ای‌تر از این حرف‌ها هست که جریمه و کسر از حقوق و این‌ها داشته باشیم، نهایتا کسی ناراضی باشه با شرکت خداحافظی میکنه، پروموشن هم برای Exceeding Expectation هست. یعنی از خواسته‌ها و مسئولیت‌هات فراتر عمل کنی. یه مقدار روی حقوق هست.&lt;/p&gt;

&lt;h4 id=&quot;stepها-رو-کی-تعیین-میکنه&quot;&gt;step‌ها رو کی تعیین میکنه؟&lt;/h4&gt;

&lt;p&gt;یه فریمورک هست که مطابق با اون بهت یه درجه‌ی ارشدیت داده میشه و برای اینکه درجه بالاتری بگیری باید یه سری تاثیرات رفتاری و تکنیکی از خودت نشون بدی&lt;/p&gt;

&lt;h4 id=&quot;چه-third-partyهایی-استفاده-میکنید&quot;&gt;چه third partyهایی استفاده میکنید؟&lt;/h4&gt;

&lt;p&gt;مطمئن نیستم لیست کاملش چیه، ولی مثلا رتروفیت، okhttp Stetho&lt;/p&gt;

&lt;h4 id=&quot;مگه-نتورک-تو-core-نبود&quot;&gt;مگه نتورک تو core نبود؟&lt;/h4&gt;

&lt;p&gt;یه سری چیزهارو داریم دیپریکیت میکنیم، میریم روی okhttp و gRPC&lt;/p&gt;

&lt;h4 id=&quot;جالب-بود-که-کد-رو-تونستی-بهمون-نشون-بدی-تو-شرکت-مکانیزمی-هست-از-دزدیدن-کد-جلوگیری-کنه-مثلا-دسترسی-بسته-شه-یا-&quot;&gt;جالب بود که کد رو تونستی بهمون نشون بدی، تو شرکت مکانیزمی هست از دزدیدن کد جلوگیری کنه؟ مثلا دسترسی بسته شه یا …&lt;/h4&gt;

&lt;p&gt;اعتماد، اگر بهم اعتماد نداریم دلیلی برای کار باهم وجود نداره! و صد البته یه سری بند و قانون هم تو قرارداد هست&lt;/p&gt;

&lt;p&gt;با تشکر از آرش عباس و بهداد در تکمیل این مطلب&lt;/p&gt;</content><author><name>behdad</name></author><category term="spotify" /><category term="اسپاتیفای" /><summary type="html">خوندن صحبت کسایی که توی شرکت‌های بزرگ دنیا کار کردند به ما کمک میکنه که بدونیم ساز و کار این شرکت‌ها چطوریه، بر اساس چه اصولی مدیریت میشن و پروژه‌هاشون رو چطوری جلو میبرند. از اینجور مصاحبه‌ها تو اینترنت پیدا میشه ولی این یکی فرق داره؛ چون صحبت‌های یه ایرانی هست که مدت‌ها تو ایران بوده و علاوه بر موارد بالا، در مورد نحوه‌ی مهاجرت و تفاوت‌های اونجا با ایران هم صحبت کرده. پیشنهاد میکنم صحبت‌های آرش رو که خیلی با دقت گفته شده و جزئیات زیادی از شرکت اسپاتیفای داره رو بخونید.</summary></entry><entry><title type="html">با alias سریع‌تر کد بزنید!</title><link href="http://pullrequest.ir/%D8%A8%D8%A7-alias-%D8%B3%D8%B1%DB%8C%D8%B9-%D8%AA%D8%B1-%DA%A9%D8%AF-%D8%A8%D8%B2%D9%86%DB%8C%D8%AF!/" rel="alternate" type="text/html" title="با alias سریع‌تر کد بزنید!" /><published>2018-10-31T00:00:00+00:00</published><updated>2018-10-31T00:00:00+00:00</updated><id>http://pullrequest.ir/%D8%A8%D8%A7-alias-%D8%B3%D8%B1%DB%8C%D8%B9%E2%80%8C%D8%AA%D8%B1-%DA%A9%D8%AF-%D8%A8%D8%B2%D9%86%DB%8C%D8%AF!</id><content type="html" xml:base="http://pullrequest.ir/%D8%A8%D8%A7-alias-%D8%B3%D8%B1%DB%8C%D8%B9-%D8%AA%D8%B1-%DA%A9%D8%AF-%D8%A8%D8%B2%D9%86%DB%8C%D8%AF!/">&lt;p&gt;دستورات سریع لینوکسی برای برنامه‌نویس‌ها&lt;/p&gt;

&lt;h1 id=&quot;مقدمه&quot;&gt;مقدمه&lt;/h1&gt;

&lt;p&gt;البته که دوست دارم یه متن بلند بنویسم! اما همزمان که دارم این مطلب رو مینویسم، دارم روی یه مطلب (چند نسخه‌ای) کار میکنم در باره‌ی برنامه‌نویسی وب. مثل همیشه، از صفر تا صدش، برای اونایی که تا حالا حتی برنامه‌نویسی هم نکردن! کار عجیبیه، کلی چیز باید بخونم و انجام بدم و یاد بگیرم. بگذریم…&lt;/p&gt;

&lt;p&gt;این مطلب من، قرار نیست خیلی طولانی باشه و پیشبینی میکنم که به مرور بروز رسانی بشه. داستانش هم از این قراره که، من علاقه ندارم کدها رو چندبار بنویسم. مد نظرم اینه که یه سری «کلید» برای خودم داشته باشم و جاهای مختلف ازشون استفاده کنم.&lt;/p&gt;

&lt;h1 id=&quot;لینوکس&quot;&gt;لینوکس&lt;/h1&gt;

&lt;p&gt;لینوکس یه هسته‌ی سیستم‌عامله. یعنی دستورات و فرایندهایی که یه سیستم‌عامل نیاز داره رو براش فراهم میکنه و یه راه ارتباطی بین سخت‌افزار و سیستم‌عامله. ضمنا، لینوکس متن بازه، یعنی میشه هرچیزی رو توش تغییر داد و شخصی‌سازی کرد.&lt;/p&gt;

&lt;p&gt;سیستم‌عامل‌های زیادی هم وجود دارن که مبتنی بر لینوکس هستن، یعنی، از هسته‌ی لینوکس استفاده میکنن و یه جورایی «توزیعی» یا Distributionای از لینوکس هستن (بین کاربرهای لینوکسی، به Distro هم معروفن). &lt;a href=&quot;https://goo.gl/vVJpgK&quot;&gt;من اینجا سعی کردم در مورد سیستم‌عامل‌های لینوکس بیشتر توضیح بدم.&lt;/a&gt;&lt;/p&gt;

&lt;h1 id=&quot;شِل-یا-shell&quot;&gt;شِل یا Shell&lt;/h1&gt;

&lt;p&gt;خیلی ساده، شِل یا «تِرمینال» یه برنامه هست که دستورات رو از کاربر میگیره و اونا رو به سیستم‌عامل و در نهایت خروجی رو نمایش میده. شِلِ لینوکس یکی از مهمترین اجزای لینوکس به حساب میاد و یکی از محیط‌های مورد علاقه‌ی برنامه‌نویس‌هاست.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://files.virgool.io/upload/users/3181/posts/dxfys8enofv3/6inx1hftqjn6.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;اینجا من تصمیم دارم که روی یه سری از اصول این نرم‌افزار کار کنم و در نهایت یه سری از دستورات به درد بخور که خودمم استفاده میکنم رو بگم. ضمنا، اگر شما هم دستوراتی رو دارید، بهم بگید که اینجا آپدیت کنم.&lt;/p&gt;

&lt;p&gt;برای باز کردن نرم‌افزار تِرمینال، میتونید توی سیستم‌عامل لینوکسی دکمه‌ی Ctrl + Alt + T رو بزنید، یا دکمه‌ی CMD + Space رو توی سیستم‌عامل مک بزنید و دنبال Terminal بگردید.&lt;/p&gt;

&lt;h1 id=&quot;دستورات-پایه&quot;&gt;دستورات پایه&lt;/h1&gt;

&lt;p&gt;این دستورات رو بدون علامت $ اجرا کنید. $ یک نشانست و به این معنیه که دستور داره با مجوز یک «کاربر» و نه یک «مدیر» اجرا میشه. نشانه‌ی یک مدیر، علامت # هست.&lt;/p&gt;

&lt;h2 id=&quot;۱pwd&quot;&gt;۱. pwd&lt;/h2&gt;

&lt;p&gt;این دستور به شما آدرس جایی که توش هستید رو میگه. وقتی ترمینال باز میشه، معمولا از پوشه‌ی Home شروع به کار میکنه. ضمنا، این آدرس‌ها Absolute هستن، یعنی از پوشه‌ی ریشه یا Root شروع میشن.&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ pwd
/home/aien
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;۲ls&quot;&gt;۲. ls&lt;/h2&gt;

&lt;p&gt;این دستور به شما محتویات پوشه‌ای که توش هستید رو میگه. اگر به آخرش &lt;code class=&quot;highlighter-rouge&quot;&gt;-a&lt;/code&gt; هم اضافه کنید، میتونید فایل‌های مخفی رو هم ببینید.&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ ls -a
.                Downloads      .gtk-bookmarks  .node-gyp            .rdm                                                       .vscode
..               .dropbox       .gtkrc-2.0      .npm                 .rediscli\_history                                          Web
...
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;۳-cd&quot;&gt;۳. cd&lt;/h2&gt;

&lt;p&gt;این دستور به شما این امکان رو میده که جای خودتون رو عوض کنید. مثلا از پوشه‌ای که توش هستید، برید به یه پوشه‌ی دیگه.&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ pwd
/home/aien/
$ cd /home/aien/Bilder
$ pwd
/home/aien/Bilder
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;۴mkdir-و-rmdir&quot;&gt;۴. mkdir و rmdir&lt;/h2&gt;

&lt;p&gt;این دستور به شما آدرس جایی که توش هستید رو میگه. وقتی ترمینال باز میشه، معمولا از پوشه‌ی Home شروع به کار میکنه. ضمنا، این آدرس‌ها Absolute هستن، یعنی از پوشه‌ی ریشه یا Root شروع میشن.&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ mkdir sample
$ cd sample
$ pwd
/home/aien/Bolder/sample
$ cd ..
$ pwd
/home/aien/Bilder
$ rmdir sample
$ ls
...
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;۵touch&quot;&gt;۵. touch&lt;/h2&gt;

&lt;p&gt;این دستور به شما امکان ساخت فایل‌ها رو میده.&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ touch file.txt
$ ls
...
file.txt
...
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;۶rm&quot;&gt;۶. rm&lt;/h2&gt;

&lt;p&gt;این دستور به شما امکان حذف فایل‌ها و تو بعضی شرایط، فولدرها رو میده.&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ rm file.txt
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;۷cp&quot;&gt;۷. cp&lt;/h2&gt;

&lt;p&gt;این دستور به شما امکان کپی کردن فایل‌ها رو میده. این دستور، دوتا ورودی دریافت میکنه، اولی آدرس جایی هست که فایل قرار داره و دومی آدرس جایی هست که فایل باید اونجا بره.&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ touch file.txt
$ pwd
/home/aien/Bilder
$ cp ./file.txt /home/aien/Musik
$ cd /home/aien/Musik
$ pwd
/home/aien/Musik
$ ls
...
file.txt
...
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;۸mv&quot;&gt;۸. mv&lt;/h2&gt;

&lt;p&gt;این دستور به شما امکان جابه‌جا کردن فایل‌ها رو میده و مثل دستور کپی عمل میکنه.&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ pwd
/home/aien/Musik
$ mv file.txt /home/aien/Videos
$ ls
...
...
$ cd ../Videos
$ pwd
/home/aien/Videos
$ ls
...
file.txt
...
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;۹rm&quot;&gt;۹. rm&lt;/h2&gt;

&lt;p&gt;این دستور به شما امکان حذف فایل‌ها و تو بعضی شرایط، فولدرها رو میده.&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ rm file.txt
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h1 id=&quot;دستورات-حرفهایتر&quot;&gt;دستورات حرفه‌ای‌تر&lt;/h1&gt;

&lt;h2 id=&quot;۱nano&quot;&gt;۱. nano&lt;/h2&gt;

&lt;p&gt;این دستور به شما امکان نوشتن داخل یک فایل رو میده. اگر اون فایل وجود نداشته باشه، اون رو ایجاد میکنه. بعد از اینکه داخل فایل نوشتید، کافیه Ctrl + X رو بزنید، Y رو بزنید و از برنامه خارج بشید. نوشته‌ها ذخیره شدن!&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ nano file.txt
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;۲cat&quot;&gt;۲. cat&lt;/h2&gt;

&lt;p&gt;این دستور به شما امکان نمایش محتوای یک فایل رو میده.&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ cat file.txt
In yek file nemune ast!
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h1 id=&quot;دستورalias&quot;&gt;دستور alias&lt;/h1&gt;

&lt;p&gt;دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;alias&lt;/code&gt; کمک میکنه تا دستور یا دستوراتی رو با اسامی دیگه صدا بزنیم و اجرا کنیم. شاید با خودتون بگید آخه چه کاربردی داره وقتی میتونم خودم دستور رو تایپ کنم؟&lt;/p&gt;

&lt;p&gt;موضوع اینه که گاهی نیاز هست دستوراتی رو اجرا کنیم که نسبتا پیچیده هستن و فقط تو بعضی چیزهای کوچیک فرق میکنن.&lt;/p&gt;

&lt;p&gt;برای شروع، دستور زیر رو تایپ کنید:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ alias
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;یه لیست طولانی از دستورات رو خواهید گرفت:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;-='cd -'
...
l='ls -lah'
...
serve='http-server -o -a localhost .'
which-command=whence
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;آخر این لیست، دستور هست که نوشته &lt;code class=&quot;highlighter-rouge&quot;&gt;l='ls -lah'&lt;/code&gt;. اگر شما این دستور رو تو ترمینال بنویسید، یعنی بنویسید &lt;code class=&quot;highlighter-rouge&quot;&gt;l&lt;/code&gt;، مثل این میمونه که به ترمینال گفتید دستور&lt;code class=&quot;highlighter-rouge&quot;&gt;ls -lah&lt;/code&gt; رو اجرا کنه.&lt;/p&gt;

&lt;p&gt;حالا برای نمونه، دستور زیر رو بزنید:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ alias p=&quot;pwd&quot;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;از این به بعد اگر من دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;p&lt;/code&gt; رو بزنم، انگار دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;pwd&lt;/code&gt; رو زدم، پس آدرس جایی که هستم رو میگیرم:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ alias p=&quot;pwd&quot;
$ p
/home/aien
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;حالا فرض کنید که توی سیستمتون، نرم‌افزار Apache رو داشتید. برای دستکاری فایل اصلیش، لازم بود که مثلا nano رو با کل آدرس اون فایل وارد کنید. چی میشد اگر مینوشتید:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ alias a=&quot;nano /etc/httpd/conf/httpd.conf&quot;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;اونوقت به جای هربار تیاپ کردن دستور، فقط a رو اجرا میکردید و فایل رو دستکاری…&lt;/p&gt;

&lt;h2 id=&quot;چطور-دستورات-alias-رو-دائمی-کنیم&quot;&gt;چطور دستورات alias رو دائمی کنیم&lt;/h2&gt;

&lt;p&gt;اگر تو یه ترمینال، یه دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;alias&lt;/code&gt; رو وارد کنید، بعد از بستن اون ترمینال، دستورتون هم از بین میره و دفعه‌ی بعدی دوباره باید دوباره تعریفش کنید. راهکارش اینه که از فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;.bashrc&lt;/code&gt; استفاده کنید. خیلی ساده، دستور زیر رو بزنید:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ nano ~/.bashrc
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;این دستور، فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;.bashrc&lt;/code&gt; که توی پوشه‌ی Home شما هست رو باز میکنه. حالا دستور زیر رو به بالای این فایل اضافه کنید:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;alias p=&quot;pwd&quot;
alias bashrc=&quot;nano ~/.bashrc&quot;
...
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;با این کار، هربار که دستور p رو بزنید، به جاش دستور pwd اجرا میشه. برای حذفش هم، کافیه دوباره اون رو از فایلتون حذف کنید (دستور زیر رو تو ترمینال بزنید تا فایلش باز بشه).&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ bashrc
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h1 id=&quot;دستورات-پر-کاربرد&quot;&gt;دستورات پر کاربرد&lt;/h1&gt;

&lt;p&gt;یه لیست از دستورات پر کاربرد هست که &lt;a href=&quot;https://goo.gl/2Z5Wn5&quot;&gt;توی سایت خودم گذاشتم. میتونید به اونجا سر بزنید و دستورات بروز شده رو ببینید.&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;موفق باشید&lt;/p&gt;</content><author><name>آیین سعیدی</name></author><category term="linux" /><category term="command-line" /><category term="cli" /><category term="alias" /><category term="bash" /><category term="script" /><category term="shell" /><summary type="html">دستورات سریع لینوکسی برای برنامه‌نویس‌ها</summary></entry><entry><title type="html">داکر، داکر کامپز، کانتینرها و اتوماسیون</title><link href="http://pullrequest.ir/%D8%AF%D8%A7%DA%A9%D8%B1-%DA%A9%D8%A7%D9%86%D8%AA%DB%8C%D9%86%D8%B1-%D9%88-%D8%A7%D8%AA%D9%88%D9%85%D8%A7%D8%B3%DB%8C%D9%88%D9%86/" rel="alternate" type="text/html" title="داکر، داکر کامپز، کانتینرها و اتوماسیون" /><published>2018-07-22T00:00:00+00:00</published><updated>2018-07-22T00:00:00+00:00</updated><id>http://pullrequest.ir/%D8%AF%D8%A7%DA%A9%D8%B1-%DA%A9%D8%A7%D9%86%D8%AA%DB%8C%D9%86%D8%B1-%D9%88-%D8%A7%D8%AA%D9%88%D9%85%D8%A7%D8%B3%DB%8C%D9%88%D9%86</id><content type="html" xml:base="http://pullrequest.ir/%D8%AF%D8%A7%DA%A9%D8%B1-%DA%A9%D8%A7%D9%86%D8%AA%DB%8C%D9%86%D8%B1-%D9%88-%D8%A7%D8%AA%D9%88%D9%85%D8%A7%D8%B3%DB%8C%D9%88%D9%86/">&lt;p&gt;داکر چی هست؟ داکر کامپز چیکار میکنه و چجوری میتونیم پروژمون رو اتوماسیون کنیم؟&lt;/p&gt;

&lt;h1 id=&quot;داکر-کانتینر-و-اتوماسیون&quot;&gt;داکر، کانتینر و اتوماسیون&lt;/h1&gt;

&lt;p&gt;&lt;img src=&quot;https://files.virgool.io/upload/users/3181/posts/b1mi525hzvoe/1p7yoldghfgz.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;مقدمه&quot;&gt;مقدمه&lt;/h1&gt;

&lt;p&gt;بالاخره بعد از یه مدت طولانی که از داون شدن سایتم میگذره، تونستم دوباره وصلش کنم و کانفیگای سمت سرور رو دوباره فیکس کنم. شاید جالب باشه ولی سرور من جای خلوتیه و چیز زیادی توش نیست و وب‌سایت خودم تنها برنامه‌ایه که توش اجرا میشه، اما نکته‌ی جالب اینه که موقع دیپلوی باهاش خیلی مشکل دارم. بگذریم، همین مشکلات باعث شد که به نوشتن این مطلب فکر کنم و تا جایی که میتونم در مورد داکر توضیح بدم.&lt;/p&gt;

&lt;p&gt;خواهش من مثل همیشه، انه که ان مطلب رو بخونید، ازش لذت ببرید و برای دوستاتون هم بفرستید و اگر جایی اشکالی دیدید، بهم خبر بدید. ضمنا، حقوق نویسنده رو هم فراموش نکنید و اگر جایی از این مطلب استفاده میکنید، اسم نویسنده اصلی (من، آیین) رو توش درج کنید.&lt;/p&gt;

&lt;p&gt;سپاس&lt;/p&gt;

&lt;h1 id=&quot;داکر-docker-چی-هست&quot;&gt;داکر (Docker) چی هست؟&lt;/h1&gt;

&lt;p&gt;اول از همه، داکر اسم شرکتی هست که واژه کانتِینِر یا Container رو روانه‌ی دنیای آی‌تی کرده. البته که قبلا هم از این واژه استفاده‌های گسترده‌ای میشده، اما داکر باعث شده که واژه کانتِینِر معنی مشخص‌تر و دقیق‌تری پیدا کنه.&lt;/p&gt;

&lt;p&gt;خود نرم‌افزار داکر، یه سرویس برای مدیریت کانتینرها یا Container Service Manager هست. کلیدواژه‌هایی که میشه برای داکر استفاده کرد، &lt;strong&gt;توسعه‌دادن، دیپلوی کردن و اجرا کردن&lt;/strong&gt; هستن. در واقع داکر هدفش اینه که وقتی برنامه‌نویس‌ها، نرم‌افزاری رو می‌نویسن، اون رو به کانتینرها منتقل و به سادگی اون رو هر جایی اجرا کنن.&lt;/p&gt;

&lt;h2 id=&quot;پلتفرم-سَکو-کانتینر-چی-هست&quot;&gt;پلتفرم (سَکو؟!) کانتینر چی هست؟&lt;/h2&gt;

&lt;p&gt;پلتفرم کانتینر یا Container Platform یه سرویس کامل برای سازمان‌ها و شرکت‌هاست که بتونن باهاش مشکلات مختلفی رو حل کنن. مهمترین ویژگی کانتینرها اینه که تمام نرم‌افزارهایی که برنامه لازم داره رو، توی خودشون نگه‌میدارن. اما یکم در مورد کانتینرها عمیق بشم…&lt;/p&gt;

&lt;p&gt;کانتینر یه پراسِس (Process) داکر هست که فقط روی لینوکس یا ویندوز اجرا میشه (ظاهرا برای مک هم هست ولی من جایی ندیدم) و داخل خودش هرچیزی که برای اجرا شدن نیاز داشته‌باشه رو داره. در واقع یه کانتینر &lt;strong&gt;یکمی شبیه به ماشین‌مجازی یا Virtual Machine هست&lt;/strong&gt; با این تفاوت که &lt;strong&gt;هسته‌ی سیستم‌عامل میزبان یا Host رو به اشتراک میذاره.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://files.virgool.io/upload/users/3181/posts/b1mi525hzvoe/nyajlhjigsvr.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;عکس بالا، اساسی‌ترین تفاوت کانتینرها با ماشین‌های مجازی رو نشون میده. چارت سمت راست کانتینر و سمت چپ، ماشین مجازی. زیر ساخت‌ها یا Infrastructures شبیه به هم، داکر از سیستم‌عامل میزبان و ماشین مجازی از Hypervisor که یه لایه هست تا برنامه‌های مورد نیاز سیستم‌عامل داخل ماشین رو فراهم کنه، استفاده میکنه. تو ماشین مجازی شما به یه سیستم‌عامل مهمان احتیاج دارید، مثلا توی سیستم‌عامل لینوکستون، ویندوز نصب میکنید، اما داکر اینطور نیست و از موتور خودش استفاده میکنه تا با سیستم‌عامل میزبان ارتباط برقرار کنه. تو ماشین مجازی شما سیستم‌عامل رو نصب میکنید که برنامه‌های لازم رو بتونید فراهم کنید. این قدم تو کانتینر از بین رفته (و دقیقا چیزیه که سرعت کانتینر رو به نسبت ماشین‌مجازی خیلی بیشتر می‌کنه). در نهایت کتابخونه‌ها و برنامه‌های لازم اجرا میشن و شما میتونید سیستمتون رو بالا بیارید.&lt;/p&gt;

&lt;p&gt;این رو اضافه میکنم، فرض کنید داکر همون نرم‌افزار Oracle VirtualBox یا VMWare هست و کانتینرها، همون سیستم‌عامل‌هایی که توشون نصب می‌کنیم.&lt;/p&gt;

&lt;h1 id=&quot;containerization-vs-virtualization&quot;&gt;Containerization vs Virtualization&lt;/h1&gt;

&lt;p&gt;قبل از اینکه وارد این مبحث بشم، یه نگاهی به ترمینولوژی داکر داشته باشیم:&lt;/p&gt;

&lt;p&gt;موتور داکر یا &lt;strong&gt;Docker Engine&lt;/strong&gt;قسمتی از داکر که وظیفه‌ی ایجاد و اجرای کانتینرها رو دارههاب داکر یا &lt;strong&gt;Docker Hub&lt;/strong&gt;سرویسی از داکر برای به اشتراک‌گذاری کانتینرها با دیگرانداکر کامپوز یا &lt;strong&gt;Docker Compose&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;ابزاری که باهاش برنامه‌های چند کانتینری تعریف میکنیم. این ابزار از فایلهای Yaml استفاده میکنه تا فایل‌ها و تنظیمات رو کانفیگ کنه و کانتینر رو آماده اجرا کنه.&lt;/p&gt;

&lt;p&gt;در کل استفاده از این ابزار سه مرحله داره:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;محیط برنامه رو با یه Dockerfile تعریف میکنیم تا همه‌جا بشه ازش استفاده کرد.&lt;/li&gt;
  &lt;li&gt;سرویس‌هایی که لازم هست برای اجرای این کانتینر رو تو فایل docker-compose.yml میذاریم تا با فایل Dockerfile یه جا اجرا بشن.&lt;/li&gt;
  &lt;li&gt;دستور docker-compuse up رو اجرا میکنیم و تموم میشه!&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;داکر ایمِج یا &lt;strong&gt;Docker Image&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;تو داکر، همه‌چیز بر اساس ایمِج‌ها ساخته شده!&lt;/p&gt;

&lt;p&gt;داکر فایل یا &lt;strong&gt;Docker file&lt;/strong&gt;دستوراتی که برای ساخت ایمِج لازم هست اینجا تعریف میشه.&lt;/p&gt;

&lt;h2 id=&quot;حالا-کانتِینِریزِیشن-در-مقابل-ویرچوالیزِیشن-یا-مجازیسازی-چی-هست&quot;&gt;حالا کانتِینِریزِیشن در مقابل ویرچوالیزِیشن یا مجازی‌سازی چی هست؟&lt;/h2&gt;

&lt;p&gt;هرچه‌قدر که زمان میگذره، تکنولوژی داکر بین حرفه‌ای‌های IT محبوبیت بیشتری پیدا می‌کنه، که باعث میشه برای برنامه‌نویس‌ها دونستن حداقل مبانی کانتینر‌ها به یک «باید» تبدیل بشه.&lt;/p&gt;

&lt;p&gt;صنعت IT هرروز درحال تغییر و پیشرفته و «سرعت و بهینه‌سازی» تبدیل به اساس این صنعت شدن. تکنولوژی‌ها سعی کردن روش‌های بهتری رو برای اتوماسیون ارائه بدن تا پروسه ساخت و تولید برنامه‌ها روراحتتر و سریع‌تر کنن.&lt;/p&gt;

&lt;p&gt;نمیدونم که آیا با Industry 4.0 آشنایی دارید یا نه، اما مجازی‌سازی یا ویرچوالیزیشن (Virtualization) سعی کرده تا این نسخه از صنعت IT رو بهینه‌تر و قابل‌حمل‌تر یا Portable کنه. با این‌حال، تکنولوژی مجازی‌سازی نقاط ضعف جدی رو داره، مثل کاهش محسوس پرفورمنس نرم‌افزارها که بخاطر وزن زیاد و ساختار سنگین VMها یا Virtual Machineها اتفاق میوفته. یا مثلا غیرقابل حمل بودن برنامه‌ها و کارایی پایین در مدیریت منابع سیستم و چیزهای دیگه از این دسته.&lt;/p&gt;

&lt;p&gt;اینجاست که صنعت IT رفته سراغ تکنولوژی داکر و کانتینریزیشن! دقیق‌تر میگم، موتور داکر برای کانتینریزیشن ساخته شده که مراحل &lt;strong&gt;بسته‌بندی، حمل و گسترش&lt;/strong&gt; برنامه‌ها رو بسیار ساده کرده.&lt;/p&gt;

&lt;h1 id=&quot;شکافت-هستهی-اتم&quot;&gt;شکافت هسته‌ی اتم!&lt;/h1&gt;

&lt;p&gt;برای یادگیری و راه‌اندازی داکر، نیازی نیست فیزیک کوانتوم بلد باشید یا بتونید حداقل یکی از &lt;a href=&quot;https://curiosity.com/topics/the-millennium-problems-are-seven-math-problems-worth-dollar1-million-each-curiosity/&quot;&gt;سوالای میلنیوم ریاضی&lt;/a&gt; رو حل کنید! فقط کافیه یکمی با محیط ترمینال و cli دوست باشید و یک تکست‌ادیتور هم کنار دستتون باشه، و خب قطعا داشتن یکمی دانش برنامه‌نویسی هم میتونه به کارتون بیاد!&lt;/p&gt;

&lt;h2 id=&quot;نصب-و-راهاندازی-داکر&quot;&gt;نصب و راه‌اندازی داکر&lt;/h2&gt;

&lt;p&gt;گرفتن تمام ابزارهای مورد نیازتون برای داکر میتونه کمی خسته‌کننده به نظر برسه. اما توصیه‌ی من اینه که قبل از نصب داکر، حتما &lt;a href=&quot;https://code.visualstudio.com/&quot;&gt;نرم‌افزار vscode رو دانلود کنید&lt;/a&gt; و در نهایت &lt;a href=&quot;https://www.docker.com/community-edition#/linux&quot;&gt;داکر رو برای سیستم‌عامل خودتون دریافت کنید.&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;بعد از نصب داکر، دستور زیر رو اجرا کنید تا مطمئن بشیم همه‌چیز درست انجام شده:&lt;/p&gt;

&lt;p&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;$ docker run hello-world&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;که در پاسخش باید نتیجه‌ی زیر رو دریافت کنید:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;Hello from Docker.
This message shows that your installation appears to be working correctly.
...
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;بازی-با-busybox&quot;&gt;بازی با BusyBox&lt;/h2&gt;

&lt;p&gt;حالا که داکر نصب شده، بریم و یکم دستامون رو کثیف کنیم. برای اینکار یه کانتینر BusyBox (یه نرم‌افزار که یسری از ابزارهای Unix رو توی یه فایل به شما میده) رو نصب میکنیم تا طعم دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;docker run&lt;/code&gt; رو بچشیم.&lt;/p&gt;

&lt;p&gt;برای شروع، دستور زیر رو اجرا کنید:&lt;/p&gt;

&lt;p&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;$ docker pull busybox&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;دقت داشته باشید که ممکن هست به ارور &lt;code class=&quot;highlighter-rouge&quot;&gt;permission denied&lt;/code&gt; برخورد کنید. بهترین راه اینه که خودتون رو توی گروه docker اضافه کنید تا ازش پیشگری بشه.&lt;/p&gt;

&lt;p&gt;دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;pull&lt;/code&gt; ایمِج BusyBox رو از &lt;a href=&quot;https://hub.docker.com/explore/&quot;&gt;رجیستری داکر (Docker Registry) یا همون داکرهاب (Docker Hub)&lt;/a&gt; دریافت و اون روی روی سیستممون ذخیره میکنه. ضمنا شما میتونید دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;docker images&lt;/code&gt; رو اجرا کنید تا ببینید چه ایمِج‌هایی روی سیستمتون نصب شدن.&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;REPOSITORY                           TAG                 IMAGE ID            CREATED             SIZE
nexus.ida-analytics.de/ida/moira     latest              e3503776559a        6 days ago          387MB
nexus.ida-analytics.de/ida/grafana   latest              a1192aa71c7f        7 days ago          387MB
nexus.ida-analytics.de/ida/grafana                 6145fb02ee49        7 days ago          387MB
nexus.ida-analytics.de/ida/moira                   1323d422a434        7 days ago          387MB
busybox                              latest              8c811b4aec35        7 weeks ago         1.15MB 
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;docker-run&quot;&gt;Docker Run&lt;/h2&gt;

&lt;p&gt;عالی شد! حالا وقتش شده که یه کانتینر داکر، مبتنی بر ایمِجی که گرفتیم رو اجرا کنیم. برای اینکار از دستور زیر استفاده میکنیم:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ docker run busybox
$
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;چی شد؟! چرا هیچ اتفاقی رخ نداد؟! خب، واقعیت اینه که کلی اتفاقات اینجا افتاده که با چشم غیر مسلح قابل رویت نیست :دی. وقتی که شما دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;run&lt;/code&gt; رو صدا میزنید، داکر ایمِجی که گفتید رو پیدا میکنه (اینجا میشه Busybox)، یه کانتینر براش میسازه و یه دستور رو توی کانتینر اجرا میکنه. اگر دقت کنید، تو دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;docker run busybox&lt;/code&gt; ما هیچ دستور اضافی رو فراهم نکردیم. بنابراین کانتینر ساخته شده، بالا اومده، یه دستور خالی رو اجرا کرده و خارج شده.&lt;/p&gt;

&lt;p&gt;دستور بالا رو میشه اینطور هم نوشت:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ docker run busybox echo &quot;Salam Donya!!&quot;
Salam Donya!!
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;اینجا داکر، دستور echo رو اجرا کرده و در نهایت بسته شده. حالا فکر کنید میخواستید همه‌ی اینا رو با ماشین‌مجازی اجرا کنید! چقدر باید صبر می‌کردید؟&lt;/p&gt;

&lt;p&gt;حالا وقتش شده که دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;docker ps&lt;/code&gt; رو اجرا کنیم.&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;از اونجایی که هیچ کانتینری در حال اجرا نیست، ما هم یه لیست خالی رو دریافت کردیم. حالا یکم دستور رو دقیق‌تر میکنیم:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ docker ps -a
CONTAINER ID        IMAGE                                       COMMAND                CREATED             STATUS                      PORTS               NAMES
2059d101f971        busybox                                     &quot;echo Hallo&quot;           15 minutes ago      Exited (0) 15 minutes ago                       hopeful_nightingale
45f36d883bd4        busybox                                     &quot;sh&quot;                   15 minutes ago      Exited (0) 15 minutes ago                       kind_mcnulty
375b34dfa64c        nexus.ida-analytics.de/ida/moira:latest     &quot;/bin/moira&quot;           6 days ago          Exited (137) 6 days ago                         moira
45ba50ce36f9        nexus.ida-analytics.de/ida/grafana:latest   &quot;/bin/start_grafana&quot;   6 days ago          Exited (0) 6 days ago                           grafana
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;همون‌طور که مشخصه، پارامتر &lt;code class=&quot;highlighter-rouge&quot;&gt;-a&lt;/code&gt; دستور داده که لیست تمام کانتینرها، فاقد از وضعیتشون (که اینجا &lt;code class=&quot;highlighter-rouge&quot;&gt;exited&lt;/code&gt; هست) برگردونده بشه.&lt;/p&gt;

&lt;p&gt;شاید براتون سوال بشه که چطور میشه دستورات بیشتری رو توی کانتینر اجرا کرد؟ خیلی آسون. اگر با دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;ssh&lt;/code&gt; آشنایی داشته باشید، میخوایم اینجا یه کاری مشابه اون رو انجام بدیم:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ docker run -it busybox sh
/ # ls
bin   dev   etc   home  proc  root  sys   tmp   usr   var
/ # pwd
/
/ # uptime
 22:30:58 up  3:26,  0 users,  load average: 1.54, 1.46, 1.48
/ #
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;اجرا کردن دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;run&lt;/code&gt; با پارامتر &lt;code class=&quot;highlighter-rouge&quot;&gt;-it&lt;/code&gt; باعث میشه که ما به داخل کانتینر (در واقع با ساخت یه سِشِن tty) بریم و دستوراتی که میخوایم رو اونجا اجرا کنیم.&lt;/p&gt;

&lt;p&gt;قبل از اینکه به مرحله‌ی بعدی برم، بهتون این نکته رو هم میگم که چطور میشه کانتینرها رو حذف کرد. بالاتر دیدیم که با اجرا کردن دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;docker ps -a&lt;/code&gt; میتونیم لیست تمام کانتینرهامون رو بدست بیاریم. برای حذف یه کانتینر کافیه که &lt;code class=&quot;highlighter-rouge&quot;&gt;CONTAINER ID&lt;/code&gt; او کانتینر رو برداریم و بعد دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;docker rm CONTAINER_ID&lt;/code&gt; رو اجرا کنیم. که در پاسخش باید آی‌دی کانتینر دوباره به شما نمایش داده بشه.&lt;/p&gt;

&lt;p&gt;دستور زیر هم هست:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ docker rm $(docker ps -a -q -f status=exited)
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;اجرا کردن این دستور، تمام کانتینرهایی که وضعیت &lt;code class=&quot;highlighter-rouge&quot;&gt;exited&lt;/code&gt; دارن رو پاک میکنه.&lt;/p&gt;

&lt;h1 id=&quot;وباَپ-تو-داکر&quot;&gt;وب‌اَپ تو داکر&lt;/h1&gt;

&lt;p&gt;تا اینجا فهمیدیم که دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;docker run&lt;/code&gt; تا حدودی چطور کار میکنه، همزمان یکمی هم با کانتینرها بازی کردیم و با ترمینولوژی داکر بیشتر آشنا شدیم. حالا وقتش شده که بریم سراغ مسائل اساسی، و ببینیم که چطور میشه یه وب‌اَپ رو تو داکر دیپلوی یا Deploy کرد.&lt;/p&gt;

&lt;h2 id=&quot;سایتهای-استاتیک&quot;&gt;سایت‌های استاتیک&lt;/h2&gt;

&lt;p&gt;بذارید قدم‌های کوچک برداریم. اولین چیزی که میریم سراغش، دیپلوی کردن یه سایت استاتیک خیلی ساده هست. یه ایمِج رو از داکر‌هاب دریافت یا pull میکنیم و اجراش میکنیم تا ببینیم چقدر راه‌اندازی سایت‌های استاتیک کار آسونیه.&lt;/p&gt;

&lt;p&gt;ایمِجی که برای اینکار استفاده میکنیم، یه ایمِج از قبل آماده شدست:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ docker run prakhar1989/static-site
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;از اونجایی که این ایمِج به صورت لوکال یا محلی تو سیستم ما نیست، داکر اون رو از رجیستری دریافت میکنه و بعد ایمِج رو اجرا میکنه. اگر همه‌چیز خوب پیش بره، شما پیام &lt;code class=&quot;highlighter-rouge&quot;&gt;Nginx is running...&lt;/code&gt; رو خواهید دید. حالا که سرور راه‌افتاده، چطور میشه بهش دسترسی داشت؟ چطوری میشه فهمید تو چه پورتی اجرا شده؟&lt;/p&gt;

&lt;p&gt;خب تو این حالت، داکر هیچ پورتی رو نمایش یا اصطلاحا اِکسپوز (Expose) نمیکنه، برای همین لازم هست که مجددا دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;docker run&lt;/code&gt; رو اجرا کنیم تا پورت‌ها رو نمایش بدیم. همزمان هم باید کاری کنیم که ترمینال روی این حالت قفل نشه و ما بتونیم از ترمینال، بدون بستن سرور خارج بشیم. به این حالت میگن Detached Mode یا حالت جدا شده!&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ docker run -d -P --name static-site prakhar1989/static-site
531b38e65151ba7ee133aff085d4c3e31d9ab349d0fed2b48b91cf28d53ca685
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;تو دستور بالا، &lt;code class=&quot;highlighter-rouge&quot;&gt;-d&lt;/code&gt; حالت detached mode رو اجرا و &lt;code class=&quot;highlighter-rouge&quot;&gt;-P&lt;/code&gt; پورت‌هارو باز میکنه. &lt;code class=&quot;highlighter-rouge&quot;&gt;--name&lt;/code&gt; هم اسمی رو برای کانتینر درنظر میگیره. حالا میتونیم پورت‌های باز شده رو پیدا کنیم:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ docker port static-site
443/tcp -&amp;gt; 0.0.0.0:32768
80/tcp -&amp;gt; 0.0.0.0:32769
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;حالا، &lt;a href=&quot;http://localhost:32769/&quot;&gt;http://localhost:32769&lt;/a&gt; رو باز کنید و نتیجه رو ببینید.&lt;/p&gt;

&lt;p&gt;همچنین میتونید یه آدرس پورت دلخواه هم به ایمِجتون بدید:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ docker run -p 8888:80 prakhar1989/static-site
Nginx is running...
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;این دستور میگه که: به پورت ۸۸۸۸ سیستم هاست یا میزبان، هرچیزی که تو پورت ۸۰ ایمِج بود رو اختصاص بده. برای اینکه کانتینر رو متوقف کنید، دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;docker stop&lt;/code&gt; رو به همراه آی‌دی کانتینر اجرا کنید.&lt;/p&gt;

&lt;p&gt;مطمئن هستم که شما هم موافقید این کار واقعا آسون بود! فکر کنید شما یه سرور دارید و میخواید سایتتون رو روش راه‌اندازی کنید، کل کار اینه که داکر رو نصب کنید و دستورات بالا رو وارد کنید!&lt;/p&gt;

&lt;p&gt;ولی خب، این برای ما کافی نیست، چون ما دوست داریم بیشتر بدونیم :) برای همین باید یاد بگیریم چطور داکر ایمِج خودمون رو بسازیم…&lt;/p&gt;

&lt;h2 id=&quot;داکر-ایمِجها&quot;&gt;داکر ایمِج‌ها&lt;/h2&gt;

&lt;p&gt;ما با ایمِج‌ها تا حدودی آشنا شدیم، ولی تو این بخش میخوام عمیق‌تر شیرجه‌ بزنیم تو ایمِج‌ها و ببینیم اصلا ایمِج‌های داکر چی هستن… کاری که انجام دادیم این بود که ایمِج busybox رو از رجیستری &lt;strong&gt;دریافت یا pull کردیم،&lt;/strong&gt; و به داکر گفتیم که یه کانتینر &lt;strong&gt;مبتنی بر اون ایمِج&lt;/strong&gt; برامون بسازه. اول بیاید یه لیستی از ایمِج‌هامون رو بگیریم:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ docker images
REPOSITORY                           TAG                 IMAGE ID            CREATED             SIZE
nexus.ida-analytics.de/ida/moira     latest              e3503776559a        7 days ago          387MB
nexus.ida-analytics.de/ida/grafana   latest              a1192aa71c7f        7 days ago          387MB
nexus.ida-analytics.de/ida/grafana                 6145fb02ee49        7 days ago          387MB
nexus.ida-analytics.de/ida/moira                   1323d422a434        7 days ago          387MB
busybox                              latest              8c811b4aec35        7 weeks ago         1.15MB
prakhar1989/static-site              latest              f01030e1dcf3        2 years ago         134MB 
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;این لیست، لیست همه‌ی ایمِج‌هایی هست که من روی این سیستمم نصب دارم و از رجیستری‌های مختلف دریافت کردم. TAG به یک نسخه‌ی مشخص از ایمِج اشاره می‌کنه و IMAGE ID به آی‌دی منحصر به فرد اون ایمِج.&lt;/p&gt;

&lt;p&gt;برای سادگی فهم، ایمِج‌ها رو به چشم ریپازیتوری‌های گیت ببینید. ایمِج‌ها میتونن کامیت بشن و ورژن‌های مختلفی داشته باشن، در حالت عادی هم، داکر نسخه latest رو دریافت میکنه که مشابه شاخه یا branch اصلی یا main تو گیت هست. مثلا میخوایم یه نسخه از اوبونتو رو دریافت کنیم:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ docker pull ubuntu:12.04
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;برای اینکه از یه ایمِج استفاده کنید، یا میتونید اون رو از رجیستری داکر یا همون داکر هاب دریافت کنید یا یه ایمِج برای خودتون بسازید.&lt;/p&gt;

&lt;p&gt;مهم‌ترین چیزی که باید موقع انتخاب ایمِج‌ها تو ذهن داشته باشید، تفاوت بین ایمِج‌های پایه یا base و ایمِج‌های مبتنی یا child هستن:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;ایمِج‌های پایه یا &lt;strong&gt;Base images:&lt;/strong&gt; ایمِج‌هایی هستند که بر هیچ ایمِج دیگه‌ای مبتنی نیستن، که معمولا (و نه همیشه) سیستم‌عامل هستن، و&lt;/li&gt;
  &lt;li&gt;ایمِج‌های مبتنی یا &lt;strong&gt;Child images:&lt;/strong&gt; که مشخصا مبتنی بر ایمج‌های پایه هستن.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;و دو جور ایمِج رسمی و عیر رسمی هم داریم:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;ایمِج رسمی یا &lt;strong&gt;Official image:&lt;/strong&gt; که توسط خود گروه داکر پشتیبانی و نگهداری میشن. معمولا تک‌کلمه‌ای هستن مثل ubuntu، busybox و hello-world. و&lt;/li&gt;
  &lt;li&gt;ایمِج‌های عیر رسمی یا &lt;strong&gt;Unofficial image:&lt;/strong&gt; که توسط کاربرهایی مثل من و شما ساخته میشن و بر اساس ایمِج‌های اصلی هستن که معمولا شکل نمایششون &lt;code class=&quot;highlighter-rouge&quot;&gt;user-name/image-name&lt;/code&gt; هست.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&quot;اولین-ایمِج-ما&quot;&gt;اولین ایمِج ما&lt;/h2&gt;

&lt;p&gt;حالا که درک بهتری از ایمِح‌های داکر داریم، وقتش شده که یه ایمِج برای خودمون بسازیم. برای اینکار، یه برنامه‌ی ساخته شده با &lt;a href=&quot;https://www.saidi27.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%86%DA%A9%D8%B3%D8%AA-%D8%AC%DB%8C-%D8%A7%D8%B3-%D8%B1%DB%8C%D8%AF%D8%A7%DA%A9%D8%B3-%D8%AA%D8%A7%D9%86%DA%A9-%D9%88-%DA%A9%D8%A7%D9%86%D9%81%DB%8C%DA%AF-%D9%87%D8%A7&quot;&gt;ری‌اکت‌جی‌اس&lt;/a&gt; رو اصطلاحا داکرایز یا Dockerize میکنیم:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ npm i -g create-react-app
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;اول که باید نصاب ری‌اکت رو نصب کنیم، و بعد پروژه رو میسازیم:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ create-react-app our-awesome-app
$ cd our-awesome-app
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;از اینجا به بعد هر کار خواستید با پروژه بکنید… اما در نهایت یه فایل به اسم &lt;code class=&quot;highlighter-rouge&quot;&gt;Dockerfile&lt;/code&gt; تو پوشه‌ی اصلی پروژه بسازید و اون رو بازش کنید و محتوای زیر رو بهش اضافه کنید:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;FROM node:9.6.1

RUN mkdir /usr/src/app
WORKDIR /usr/src/app

ENV PATH /usr/src/app/node_modules/.bin:$PATH

COPY package.json /usr/src/app/package.json
RUN npm i --silent
RUN npm i react-scripts -g --silent

CMD \[&quot;npm&quot;, &quot;start&quot;\]
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;و یه فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;.dockerignore&lt;/code&gt; بسازید (به . اول اسمش دقت کنید) و توش محتوای زیر رو بریزید:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;node_modules
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;و در نهایت ایمِج رو بسازید:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ docker build -t our-awesome-app .
...
Successfully built 8ab82c09e422
Successfully tagged our-awesome-app:latest
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;و بعد از اتمام ساخت، کانتینر مربوط به ایمِجتون رو ایجاد و اجرا کنید:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ docker run -it \
  -v ${PWD}:/usr/src/app \
  -v /usr/src/app/node_modules \
  -p 3000:3000 \
  --rm \
  our-awesome-app
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;به همین سادگی! شما پروژتون رو داکرایز کردید :) حالا میتونید &lt;a href=&quot;http://localhost:3000/&quot;&gt;http://localhost:3000&lt;/a&gt; رو باز کنید و ببینید پروژتون رو.&lt;/p&gt;

&lt;h1 id=&quot;داکر-کامپُز-docker-compose&quot;&gt;داکر کامپُز (Docker Compose)&lt;/h1&gt;

&lt;p&gt;تا اینجا با خود داکر سر و کله زدیم و تا حدودی اکوسیستمش رو شناختیم. منتهی همچنان ابزارهایی هستند که یادگیریشون برامون خیلی پر کاربرد خواهد بود. چندتا از این ابزارهای خوب:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;https://docs.docker.com/machine/&quot;&gt;Docker Machine&lt;/a&gt; که کمک میکنه هاست‌های داکر روی کامپیوترتون، کلاد یا فضاهای ابری و حتی دیتا‌سنترتون بسازید،&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://docs.docker.com/compose/&quot;&gt;Docker Compose&lt;/a&gt; ابزاری برای ساخت اپلیکیشن‌های چند کانتینری داکر (چندتا کانتینر رو در کنار هم قرار میده) و&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://docs.docker.com/swarm/&quot;&gt;Docker Swarm&lt;/a&gt; که ابزاری برای ساخت کلاسترها یا خوشه‌های کانتینریه.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;تو این بخش میخوایم بریم سراغ داکر کامپُز و ببینیم که چطور میشه اپلیکیشن‌های داکر مبتنی بر چند کانتینر ساخت.&lt;/p&gt;

&lt;p&gt;اینطور فرض کنید که یه کانتینر مسئول اجرای کدهای PHP، Go، JavaScript و زبان‌های دیگست، یه کانتینر دیتابیس MySql و MongoDb رو داره، یه کانتینر وب‌سرور Apache یا NginX و…&lt;/p&gt;

&lt;p&gt;گذشته‌ی داکر کامپُز جالبه، تقریبا چهار سال پیش (سال ۲۰۱۴) شرکتی به اسم OrchardUp ابزاری رو به اسم Fig به بازار عرضه کرد. هدف از ساخت Fig این بود که بشه محیط برنامه‌نویسی یا Development Environment مبتنی بر داکر ساخت و اونها رو ایزوله کرد، تا فضای کاری برنامه‌نویس‌ها مشابه به هم بشه.&lt;/p&gt;

&lt;p&gt;تا اینجا، داکر یه ابزاری بود برای ساخت پروسه‌ها یا Application Processes. بعد از این، داکر APIهای مختلفی رو ارائه داد که بشه پوشه‌ها رو بین کانتینرها به اشتراک گذاشت و پورتی رو از هاست به کانتینر فوروارد کرد، لاگ‌ها رو نمایش داد و غیره. ولی با همه‌ی اینها، داکر فقط یه چیز بود: ابزاری برای ساخت پروسه‌ها!&lt;/p&gt;

&lt;p&gt;با اینکه داکر این امکان رو میده تا بشه کانتینرهای مختلف رو با هم اورکِسترِیت یا Orchestrate کرد (به زبان ساده یعنی هماهنگی بینشون ایجاد کرد تا منظم و درست کار کنن)، همچنان با این کانتینرها به شکل «یک موجودیت» یا Single Entity برخورد نمیکنه. یعنی مهندس نرم‌افزار باید همه‌چیز رو خودش مدیریت کنه. اینجاست که حضور ابزاری مثل Fig خیلی بدرد خورد! از این به بعد مهندسین باید به این شکل بهش نگاه میکردن: «یک برنامه‌ی داکر رو اجرا کنیم که کلاستری از کانتینرها رو مدیریت میکنه» و نه اینکه صرفا یه کانتینر رو اجرا کنیم.&lt;/p&gt;

&lt;p&gt;مشخص شد که خیلی از بروبچه‌ها و مهندسینی که از داکر استفاده میکردن با این تعریف موافق بودن. برای همین هم وقتی که Fig در حال محبوب شدن بود، شرکت داکر اون رو خرید و اسمش رو به Docker Compose تغییر داد.&lt;/p&gt;

&lt;p&gt;خب، حالا اصلا کامپُز برای چی استفاده میشه؟ کامپُز یه ابزاره که کمک میکنه برنامه‌هایی رو با چند کانتینر اورکستریت کنیم. این ابزاری فایلی رو ایجاد میکنه به اسم &lt;code class=&quot;highlighter-rouge&quot;&gt;docker-compose.yml&lt;/code&gt; که کل دستوراتی رو که لازم هست رو در خودش داره و اونها رو فقط با یه دستور اجرا میکنه.&lt;/p&gt;

&lt;p&gt;بذارید با هم برنامه‌ای رو که بالاتر با داکر ساختیم، اینبار با داکر کامپُز اجرا کنیم. برای اینکار فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;docker-compose.yml&lt;/code&gt; تو پوشه‌ی اصلی برنامه بسازید و محتوای زیر رو توش قرار بدید:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;version: '3.5'

services:

  our-awesome-app:
    container_name: our-awesome-app
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      \- '.:/usr/src/app'
      \- '/usr/src/app/node_modules'
    ports:
      \- '3000:3000'
    environment:
      \- NODE_ENV=development
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;حالا &lt;a href=&quot;https://docs.docker.com/compose/install/&quot;&gt;کامپُز رو نصب کنیم&lt;/a&gt;…&lt;/p&gt;

&lt;p&gt;بعد از نصب کامپُز، دستور زیر رو اجرا کنید:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ docker-compose up -d --build
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;ساختار داکر کامپُز
——————&lt;/p&gt;

&lt;p&gt;اصلی‌ترین دلیل ساخت داکر کامپُز، ایجاد برنامه‌ها بر اساس معماری مایکروسرویس بود، یا درواقع کانتینرها و روابط بینشون. اما داکر کامپًز ویژگی‌های دیگه‌ای هم داره:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;ساخت یک ایمِج داکر (درصورتی که یک فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;Dockerfile&lt;/code&gt; معتبر تو پوشه‌ی اصلی موجود باشه) با دستور:&lt;br /&gt;
&lt;code class=&quot;highlighter-rouge&quot;&gt;docker-compose build&lt;/code&gt;&lt;/li&gt;
  &lt;li&gt;مقیاس‌بندی کانتینرها با دستور:&lt;br /&gt;
&lt;code class=&quot;highlighter-rouge&quot;&gt;docker-compose scale SERVICE=3&lt;/code&gt;&lt;/li&gt;
  &lt;li&gt;نجات‌دادن یا درواقع اجرای مجدد کانتینرها در صورت پَنیک با دستور:&lt;br /&gt;
&lt;code class=&quot;highlighter-rouge&quot;&gt;docker-compose up --no-recreate&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;یکی از مهم‌ترین دستورات داکر کامپُز، &lt;code class=&quot;highlighter-rouge&quot;&gt;docker-compose up&lt;/code&gt; هست که اول دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;docker-compose build&lt;/code&gt; و بعد &lt;code class=&quot;highlighter-rouge&quot;&gt;docker-compose run&lt;/code&gt; رو اجرا می‌کنه.&lt;/p&gt;

&lt;h2 id=&quot;جریان-کار-یا-workflow-در-داکر-کامپُز&quot;&gt;جریان کار یا Workflow در داکر کامپُز&lt;/h2&gt;

&lt;p&gt;جریان کار تو داکر کامپُز سادست:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;هر سرویس رو تو یه داکر فایل تعریف می‌کنیم (یک روش)،&lt;/li&gt;
  &lt;li&gt;سرویس‌ها و روابطشون رو تو فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;docker-dompose.yml&lt;/code&gt; تعریف می‌کنیم و&lt;/li&gt;
  &lt;li&gt;دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;docker-compose up&lt;/code&gt; رو اجرا می‌کنیم تا سیستم بالا بیاد.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;اما برای اینکه بهتر متوجه بشیم، میریم که چندتا اپ مختلف بسازیم تا روش‌ها دیگه برای استفاده از داکر کامپُز رو یاد بگیریم&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://www.saidi27.com/blog/%D8%AF%D8%A7%DA%A9%D8%B1-%DA%A9%D8%A7%D9%86%D8%AA%DB%8C%D9%86%D8%B1-%D9%88-%D8%A7%D8%AA%D9%88%D9%85%D8%A7%D8%B3%DB%8C%D9%88%D9%86&quot;&gt;ادامه‌ی مطلب رو میتونید از سایت خودم بخونید…&lt;/a&gt;&lt;/p&gt;</content><author><name>آیین سعیدی</name></author><category term="docker" /><category term="docker-compose" /><category term="container" /><category term="javascript" /><category term="automation" /><summary type="html">داکر چی هست؟ داکر کامپز چیکار میکنه و چجوری میتونیم پروژمون رو اتوماسیون کنیم؟</summary></entry><entry><title type="html">گریزی بر گولنگ goroutines / race condition</title><link href="http://pullrequest.ir/Golang-%D9%85%D8%A7%D9%84%D8%AA%DB%8C-%D8%AA%D8%B1%D8%AF%DB%8C%D9%86%DA%AF/" rel="alternate" type="text/html" title="گریزی بر گولنگ goroutines /  race condition" /><published>2018-06-03T00:00:00+00:00</published><updated>2018-06-03T00:00:00+00:00</updated><id>http://pullrequest.ir/Golang-%D9%85%D8%A7%D9%84%D8%AA%DB%8C-%D8%AA%D8%B1%D8%AF%DB%8C%D9%86%DA%AF</id><content type="html" xml:base="http://pullrequest.ir/Golang-%D9%85%D8%A7%D9%84%D8%AA%DB%8C-%D8%AA%D8%B1%D8%AF%DB%8C%D9%86%DA%AF/">&lt;p&gt;&lt;img src=&quot;https://files.virgool.io/upload/users/3676/posts/jxcaqbot9swh/hvid0cqa4bve.jpeg&quot; alt=&quot;Go&quot; title=&quot;Go&quot; /&gt;&lt;/p&gt;

&lt;p&gt;گو روتینها (شبه مالتی تریدینگ) در زبان جالب go یکی از ویژگیهاییه که اون رو محبوب کرده و برای مقاصد زیادی هم کاربرد داره و استفاده ازش هم خیلی راحته
در این خُردمقاله فقط اشاره ای مختصر به روتینها میکنم ولی این مبحث خیلی جذابه و جای بحث زیادی داره که از حجم این مقاله و علم بنده بر نمیاد کامل شرح داده بشه. به صورت کلی هرگاه ما یک ترد(نه به معنای ترد در پردازنده که در زبانهای C++ و … پیاده میشه) ایجاد میکنیم دستوراتی که داخل ترد نوشته شده در یک ترد دیگه اجرا خواهد شد که ممکنه همزمان/موازی با ترد اصلیمون اجرا بشوند یا غیر همزمان اجرا بشوند.
ساختار نوشتن go به صورت زیره که در تابع main برنامه اجرا میشه ، ( برای نوشتن برنامه های اجرایی mainرو داریم نه همه جا! )&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;package&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;main&lt;/span&gt;

&lt;span class=&quot;n&quot;&gt;func&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;main&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
 &lt;span class=&quot;p&quot;&gt;//&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;Put&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;your&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;code&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;here&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;...&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;err&quot;&gt;اگر&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;عبارت&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;go&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;رو&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;قبل&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;از&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;یک&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;تابع&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;قرار&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;بدیم&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;اون&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;رو&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;در&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;یک&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;ترد&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;جدا&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;اجرا&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;میکنه&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;package&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;main&lt;/span&gt;

&lt;span class=&quot;n&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
 &lt;span class=&quot;s2&quot;&gt;&quot;fmt&quot;&lt;/span&gt;
 &lt;span class=&quot;s2&quot;&gt;&quot;time&quot;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;

&lt;span class=&quot;n&quot;&gt;func&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;main&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;fmt&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;Println&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;1:Salam Virgool!&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
 &lt;span class=&quot;n&quot;&gt;go&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;func&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;fmt&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;Println&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;2:Hello Virgool!&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}()&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;fmt&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;Println&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;3:Hola Virgool!&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
 
 &lt;span class=&quot;p&quot;&gt;//&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;Sleep&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;prevent&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;closing&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;time&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;Sleep&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;m&quot;&gt;5000&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;به جای sleep میتونستیم از fmt.Scanln برای جلوگیری از بسته شدن برنامه استفاده کنیم
خروجی های متفاوتی برای کد بالا میتونیم انتظار داشته باشیم:&lt;/p&gt;
&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;1:Salam Virgool!
3:Hola Virgool!
2:Hello Virgool!
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;1:Salam Virgool!
2:Hello Virgool!
3:Hola Virgool!
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;پس میتونیتم از این نتیجه بگیریم که اجرای تابع برای چاپ عبارت شماره 2 به ترتیب کدی که نوشتیم ممکنه باشه یا با تاخیر و غیر همزمان باشه!
روتینها کجا به کار میان؟
خیلی جاها مثل نوشتن یک روتین برای انجام کارهای زمانبری چون دانلود فایل یا اتصال به شبکه یا اجرای الگوریتمهای زمانبر به طور موازی و انواع و اقسام کار با IO&lt;/p&gt;

&lt;p&gt;جهنم race conditions
چرا جهنم؟
چون باگهایی که به صورت ریس کاندیشن (شرایط مسابقه) پیش میان همیشه یک خطا در روند اجرایی برنامه رو بوجود نمیارن که بتونیم با خوندن چند خط بالا پایین برنامه اونها رو دیباگ کنیم.
یعنی یکبار این باگ هست و یکبار نیست ،یا بدتر هر بار یه چیزی نشون بده :(
چطور این باگ بوجود میاد؟
به رفتار این تیکه کد دقت کنید:&lt;/p&gt;
&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;package&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;main&lt;/span&gt;

&lt;span class=&quot;n&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
 &lt;span class=&quot;s2&quot;&gt;&quot;fmt&quot;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;

&lt;span class=&quot;n&quot;&gt;func&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;main&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
 &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;:=&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;6&lt;/span&gt;

 &lt;span class=&quot;n&quot;&gt;go&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;func&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
 &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;5&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}()&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;*=&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;3&lt;/span&gt;
  &lt;span class=&quot;n&quot;&gt;fmt&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;Println&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;Press Enter:&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; 
  &lt;span class=&quot;n&quot;&gt;fmt&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;Scanln&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; 
    &lt;span class=&quot;n&quot;&gt;fmt&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;Printf&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;i = %d &lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\n&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;از کد بالا میشه انتظار رفتارهای متفاوتی داشت که اگر چیزی که تو ذهن برنامه نویسه یکی از این رفتار باشه اون موقع است که باگهای بدی بوجود میاد&lt;/p&gt;
&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;(6+5)=11 * 3 = 33 =&amp;gt; i = 33
(6*3)=18 * 5= 23 =&amp;gt; i = 23
(6*3)=18 =&amp;gt; i = 18
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;حالا چطور اون چیزی که مد نظرمونه در مورد ترتیب روند اجرای دستورات رو اجباری کنیم؟
با استفاده از کانالها Channels  ما میتونیم از شرایط و مقادیر یک روتین باخبر بشیم&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;package&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;main&lt;/span&gt;

&lt;span class=&quot;n&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
 &lt;span class=&quot;s2&quot;&gt;&quot;fmt&quot;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;

&lt;span class=&quot;n&quot;&gt;func&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;main&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
 &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;:=&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;6&lt;/span&gt;

 &lt;span class=&quot;n&quot;&gt;MyChannel&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;:=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;make&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;chan&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;bool&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
 &lt;span class=&quot;n&quot;&gt;go&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;func&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
 &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;5&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;MyChannel&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;&amp;lt;-&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;true&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}()&lt;/span&gt;
 &lt;span class=&quot;p&quot;&gt;//&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;wait&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;routine&lt;/span&gt;
 &lt;span class=&quot;p&quot;&gt;&amp;lt;-&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;MyChannel&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;*=&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;3&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;fmt&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;Println&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;Press Enter:&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;fmt&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;Scanln&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;fmt&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;Printf&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;i = %d &lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\n&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;میایم قبل از اجرای روتین یک کانال به نام MyChannel میسازیم و بعدش منتظر میمونیم که اون تموم بشه و کار رو ترد اصلی انجام بده که نتیجه همیشه 33 خواهد شد
چون به ترتیب عبارت اولمون
(6+5)=11 * 3 = 33 =&amp;gt; i = 33
برنامه اجرا میشه!&lt;/p&gt;

&lt;p&gt;ساده بود نه؟ :)&lt;/p&gt;</content><author><name>محمود اسکندری</name></author><category term="golang" /><category term="گولنگ" /><category term="مالتی_تردینگ" /><category term="race_condition" /><summary type="html"></summary></entry><entry><title type="html">از سیر تا پیاز ری‌اکت، نکست و ریداکس!</title><link href="http://pullrequest.ir/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D9%86%DA%A9%D8%B3%D8%AA-%D8%AC%DB%8C-%D8%A7%D8%B3-%D9%88-%D8%B1%DB%8C%D8%AF%D8%A7%DA%A9%D8%B3/" rel="alternate" type="text/html" title="از سیر تا پیاز ری‌اکت، نکست و ریداکس!" /><published>2018-05-22T00:00:00+00:00</published><updated>2018-05-22T00:00:00+00:00</updated><id>http://pullrequest.ir/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B1%DB%8C%E2%80%8C%D8%A7%DA%A9%D8%AA-%D9%86%DA%A9%D8%B3%D8%AA%E2%80%8C%D8%AC%DB%8C%E2%80%8C%D8%A7%D8%B3-%D9%88-%D8%B1%DB%8C%D8%AF%D8%A7%DA%A9%D8%B3</id><content type="html" xml:base="http://pullrequest.ir/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D9%86%DA%A9%D8%B3%D8%AA-%D8%AC%DB%8C-%D8%A7%D8%B3-%D9%88-%D8%B1%DB%8C%D8%AF%D8%A7%DA%A9%D8%B3/">&lt;p&gt;عمیق‌تر در مورد جاوااسکریپت، ری‌اکت و نکست‌جی‌اس بدونیم&lt;/p&gt;

&lt;h1 id=&quot;نکستجیاس-و-ریداکستانک-از-مبتدی-تا-پیشرفته&quot;&gt;نکست‌جی‌اس و ریداکس‌تانک، از مبتدی تا پیشرفته&lt;/h1&gt;

&lt;p&gt;&lt;img src=&quot;https://files.virgool.io/upload/users/3181/posts/uzcgpsjoceof/wbnq800rbiov.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;مقدمه&quot;&gt;مقدمه&lt;/h1&gt;

&lt;p&gt;خیلی از دوستان من با موضوعات مختلفی خصوصا در زمینه جاوا‌اسکریپت دچار مشکل شدن. بعضی از مفاهیم رو نفهمیدن و یا نمیدونستن از کجا باید شروع کنن. برای همین تصمیم گرفتم که این مطلب رو بنویسم. قصد دارم اینجا برای سطوح مبتدی تا پیشرفته در مورد ری‌اکت و نکست‌جی‌اس و همچنین ریداکس توضیح بدم. و سعی میکنم این مطلب رو تا حد امکان گسترده کنم تا تمامی مواردی که برای یک برنامه‌نویس خوب شدن لازم هست رو پوشش بدم.&lt;/p&gt;

&lt;p&gt;اما اساسا چرا این مطلب رو نوشتم؟ خب، اول از همه اینکه بتونم هر آنچه که بلد هستم رو یک‌جا نگه دارم و بعدا هم ازش استفاده کنم. دوم اینکه همچین آموزشی رو تقریبا هیچ‌کجای وب، و خصوصا تو سایت‌های ایرانی پیدا نکردم.&lt;/p&gt;

&lt;p&gt;متنی که اینجا نوشته شده، حاصل چند سال تلاش من برای یادگیری، و تقریبا یک ماه برای خلاصه‌کردن تمام اون اطلاعات بود تا بتونم یک مرجع کامل رو بسازم، سعی کردم خط به خط کدها رو توضیح بدم و ریپازیتوری گیت رو باهاش سینک و همگام نگه‌دارم. از اینکه این مطالب به دست دیگران هم برسه و کمک به چند نفر بکنه واقعا خوشحال میشم، اما تنها خواهش من از خوانندگان و شما، اینه که اگر این مطلب رو جایی به اشتراک میذارید، منبع اون رو هم ذکر کنید.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://goo.gl/Fy2S8J&quot;&gt;همچنین مطلب کامل رو در سایت خودم میتونید پیدا کنید و در مورد ری‌اکت و نکست‌جی‌اس بیشتر مطالعه کنید.&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;سپاس.&lt;/p&gt;

&lt;h1 id=&quot;جاوااسکریپت-و-اکمااسکریپت-ecmascript&quot;&gt;جاوا‌اسکریپت و اکما‌اسکریپت (ECMAScript)&lt;/h1&gt;

&lt;p&gt;اولین چیزی که لازم هست بدونید، اینه که جاوا‌اسکریپت توسط شرکت نِت‌اِسکیِپ (شرکت قدیمی موزیلا فایرفاکس) ساخته و به سازمان اِکما داده شد تا اون رو استانداردسازی کنن. اِکما سازمانیه که وظیفش استانداردسازی اطلاعاته.&lt;/p&gt;

&lt;p&gt;اونچه که در نهایت از جاوا‌اسکریپت توسط سازمان اِکما ارائه شد، اِکما‌اِسکریپت بود. ساده‌تر بگم، اِکما‌اِسکریپت یک استاندارد هست، در حالی که جاوا‌اسکریپت محبوب‌ترین پیاده‌سازی از اون استاندارد به حساب میاد. جاوا‌اِسکریپت، اِکما‌اِسکریپت رو پیاده‌سازی میکنه و بر پایه اون ساخته میشه.&lt;/p&gt;

&lt;p&gt;حالا سوالی که مطرح میشه، اینه که &lt;strong&gt;“ES” چیه&lt;/strong&gt;؟&lt;/p&gt;

&lt;p&gt;ای‌اِس، مخفف اِکما‌اِسکریپته (&lt;strong&gt;E&lt;/strong&gt;CMA&lt;strong&gt;S&lt;/strong&gt;cript)، هرجایی که ای‌اِس رو در کنار یک عدد دیدید، مثل ای‌اس۶، یادتون باشه که داره به یک نسخه از اِکما‌اِسکریپت یا در واقع یک نسخه از استاندارد اشاره میشه.&lt;/p&gt;

&lt;h1 id=&quot;ایاِس-es&quot;&gt;ای‌اِس (ES)&lt;/h1&gt;

&lt;p&gt;ای‌اِس تا به اینجا ۸ نسخه مختلف رو ارائه کرده، &lt;strong&gt;ای‌اِس۱، ۲، ۳ و ۴&lt;/strong&gt; بین سال‌های ۱۹۹۷ تا ۱۹۹۹ ارائه شدن و دیگه ازشون پشتیبانی نمیشه. (ما هم کاری بهشون نداریم).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;ای‌اِس۵&lt;/strong&gt; تقریبا ۱۰ سال بعد از اس‌اس۴ یعنی اواخر سال ۲۰۰۹ (تاریخ دقیق رو نمیدونم) ارائه داده شد.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;ای‌اِس۶&lt;/strong&gt; در سال ۲۰۱۵ منتشر شد که برای راحتی کار، بهش ای‌اس۲۰۱۵ هم میگن. در واقع چون ای‌اس۶ در سال ۲۰۱۵ ارائه شده، بهش ای‌اِس۲۰۱۵ میگن!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;ای‌اِس۷/ای‌اس۲۰۱۶&lt;/strong&gt; که مطمئنا میتونید پیشبینی کنید در سال ۲۰۱۶ منتشر شد.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;ای‌اس۸/ای‌اس۲۰۱۷&lt;/strong&gt; هم، در سال ۲۰۱۷ منتشر شد.&lt;/p&gt;

&lt;h2 id=&quot;چرا-ورژنهای-مختلف-از-ایاس-منتشر-شدن&quot;&gt;چرا ورژن‌های مختلف از ای‌اس منتشر شدن؟&lt;/h2&gt;

&lt;p&gt;دلیلش اینه که هر وِرژِن، ویژگی‌های جدیدی رو ارائه کرده که با زمان خودش هم‌خوانی داشته باشه. فقط باید چند نکته رو به خاطر داشته‌باشید:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;پیشبینی میشه که هر سال یک نسخه جدید از اِکما‌اِسکریپت ارائه بشه،&lt;/li&gt;
  &lt;li&gt;اولین نسخه‌های اِکما‌اِسکریپت با عدد نسخه‌بندی میشدن، مثل ای‌اِس۱، ای‌اِس۲ و…&lt;/li&gt;
  &lt;li&gt;نسخه‌های جدید که از سال ۲۰۱۵ شروع شدن، به شکل &lt;strong&gt;ای‌اس[سال انتشار]&lt;/strong&gt; نام‌گذاری میشن.&lt;/li&gt;
  &lt;li&gt;اکما یک استاندارده، جاوا‌اسکریپت محبوب‌ترین پیاده‌سازی از اون استاندارد هست.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2 id=&quot;چرا-ایاس۶&quot;&gt;چرا ای‌اس۶؟&lt;/h2&gt;

&lt;p&gt;نسخه ۶‌ام از اِکما‌اِسکریپت، ویژگی‌های خیلی خوبی رو به زبان جاوا‌اسکریپت اضافه کرد، و همین، یکی از دلایلی شد که ری‌اَکت به طور پیش‌فرض ازش پشتیبانی میکنه. مثلا مفاهیمی مثل «کلاس‌ها» و «ماژول‌ها»، که برای زبان‌های شئ‌گرا اجباری هستند، بهش اضافه شدن. از جمله ویژگی‌های دیگش، اضافه شدن دستورات &lt;code class=&quot;highlighter-rouge&quot;&gt;for&lt;/code&gt;، جِنِراتور‌های شبیه به زبان پایتون، توابع فِلِشی (Arrow Function)، کالِکشِن‌ها، پرامِس‌ها (Promise) و غیره بوده.&lt;/p&gt;

&lt;p&gt;متاسفانه هنوز مرورگرها پشتیبانی از ای‌اِس۶ رو کامل نکردن و ای‌اِس۶ به خودی خود تو مرورگرها پشتیبانی نمیشه. اینجاست که مفاهیم تِرَنس‌پایلِرها (transpiler) خودشون رو نشون میدن که بعد از توضیح توابع فِلِشی (برای راحتی کار میگم اَرو فانکشِن) بهشون میپردازم.&lt;/p&gt;

&lt;h2 id=&quot;arrow-functions&quot;&gt;Arrow Functions&lt;/h2&gt;

&lt;p&gt;یکی از ویژگی‌های خیلی خوبی که توی ای‌اِس۶ وجود داره، استفاده از اَرو فانکشن‌هاست. به اسمش دقت نکنید، مفهومش خیلی سادست. ارو فانکشن‌ها، در واقع همون توابع قدیمی جاوااسکریپت هستند (با ویژگی‌های جدید‌تر که اینجا بهشون کاری نداریم) که تو ای‌اس۶ به شکل دیگه‌ای تعریف میشن و موقع تِرَنس‌پایل (یکمی پایینتر توضیح میدم در این مورد) به شکل توابع جاوااسکریپت درمیان، مثلا:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;x&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;x&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;m&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;n&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;m&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;+&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;n&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;nx&quot;&gt;data&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;json&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;then&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;result&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;result&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;})&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;بعد از تِرَنس‌پایل تبدیل میشن به:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;x&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;

&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;m&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;n&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;m&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;n&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;

&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;json&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;().&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;then&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;result&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;result&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;ترنسپایلر-transpiler&quot;&gt;ترنس‌پایلر (transpiler)&lt;/h2&gt;

&lt;p&gt;حتما تا به حال واژه‌های «کامپایلِر» و «مفسر» به گوشتون خورده. تِرَنس‌پایلِرها در واقع نوعی کامپایلر هستند با یک تفاوت اصلی:&lt;/p&gt;

&lt;p&gt;کامپایلرها معمولا زبان رو به یک نسخه قابل اجرا برای ماشین تبدیل می‌کنن، مثلا زبان سی، کدهای باینری یا همون صفر و یک میسازه، یا جاوا بایت‌کد رو تولید میکنه.&lt;/p&gt;

&lt;p&gt;این درحالیه که ترنس‌پایلرها، یک سورس‌کد رو به یک سورس‌کد دیگه تبدیل می‌کنن (یا مثلا به یک زبان دیگه که مستقیم برای ماشین قابل درک نیست و باید دوباره کامپایل، اینتِرپرِت یا همون تفسیر بشه). مثلا کافی‌اسکریپت (CoffeeScript) که از خودش جاوا‌اسکریپت تولید میکنه، یا &lt;strong&gt;بابِل (Babel) که ای‌اس۶ رو به ای‌اس۵ (قابل پشتیبانی برای مرورگرها) تبدیل می‌کنه.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;بابِل یا بِیبِل (Babel) یک ترنس‌پایلر برای ای‌اس۶ هست که اون رو به ای‌اس۵ تبدیل میکنه. ای‌اس۵ توسط مرورگرها خیلی خوب پشتیبانی میشه و در حقیقت، ای‌اس۵ همون جاوا‌اسکریپتیه که عموما باهاش آشنایی دارن.&lt;/p&gt;

&lt;h2 id=&quot;بابِل-بِیبِل-babel&quot;&gt;بابِل، بِیبِل…؟ (Babel)&lt;/h2&gt;

&lt;p&gt;بابل یک تِرَنس‌پایلِر برای جاوا‌اسکریپته. بابل رو اکثرا بخاطر توانایی خوبش تو تبدیل ای‌اس۶ به ای‌اس۵ میشناسن.&lt;/p&gt;

&lt;p&gt;به عنوان مثال این کد که با ای‌اس۶ نوشته شده:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;let&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;\&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;\&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;];&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;input&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;item&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;item&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;));&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;// \[2, 3, 4\]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;توسط بابل تبدیل میشه به کد ای‌اس۵:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;\&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;\&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;];&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;input&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;item&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;item&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}));&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;// \[2, 3, 4\]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;که تقریبا همه‌جا قابل اجراست. بابل خیلی خوب از &lt;a href=&quot;https://www.saidi27.com/glossary/polyfill-(%D9%BE%D9%84%DB%8C%E2%80%8C%D9%81%DB%8C%D9%84)&quot;&gt;پُلی‌فیل‌های&lt;/a&gt; جاوا‌اسکریپت پشتیبانی میکنه و باعث میشه که کد جاوا‌اسکریپت ساخته شده برای مرورگرهای قدیمی هم قابل پشتیبانی باشه. به همین خاطر، بابل باعث میشه شما از تمام ویژگی‌های ای‌اس۶ استفاده کنید بدون اینکه پشتیبانی از نسخه‌های قدیمی مرورگرها رو از دست بدید (مفهوم پُلی‌فیل اینجا معلوم میشه).&lt;/p&gt;

&lt;h1 id=&quot;فرانتاند-و-مفاهیم-اِسپیاِی-spa&quot;&gt;فرانت‌اند و مفاهیم اِس‌پی‌اِی (SPA)&lt;/h1&gt;

&lt;p&gt;اطلاعاتی که ما در اینترنت میبینیم، مجموعه‌ای از کدهای HTML، JavaScript و CSS هستن. قدیم‌ها، زمانی که خیلی از برنامه‌نویس‌ها از PHP (هنوز هم استفاده میکنن) برای نوشتن صفحات وب استفاده می‌کردن و جِی‌اِس مثل امروز محبوب نبود، هر صفحه از سایت باید بصورت جداگانه نوشته می‌شد. و زمانی که کاربر روی یک لینک کلیک میکرد، کل صفحه از اول رِندِر (Render) می‌شد. این فرایند برای کاربر، خسته‌کننده و طاقت‌فرسا بود و حتی گاهی بخاطر زمان زیادی که باید برای بارگذاری صفحه صرف میکرد، از ادامه کارش پشیمون میشد.&lt;/p&gt;

&lt;p&gt;کم‌کم تکنیک‌هایی مثل اِی‌جَکس (AJAX) استفاده شدن، که مثلا وقتی صفحه در حال بارگذاری بود، شروع میکرد یک نماد کوچک لودینگ و بارگذاری (بهش معمولا میگن اِسپینِر یا spinner) رو نشون دادن و کاربر رو متوجه میکرد که اطلاعات در حال ارسال و دریافتن.&lt;/p&gt;

&lt;p&gt;این ایده، که اطلاعات تو یک صفحه بارگذاری بشن و کاربر مدام مجبور به عوض کردن صفحه‌ها نشه (مگر در مواقع لازم) باعث ایجاد تعریف جدیدی از وب‌اَپلیکِیشِن‌ها شد، اِس‌پی‌اِی (SPA) یا Single Page Application راهش رو به لغت‌نامه‌ی برنامه‌نویس‌ها باز کرد!&lt;/p&gt;

&lt;p&gt;SPA هدفش ایجاد یک تجربه کاربری بهتر برای کاربرهاست. در حقیقت، SPA کار رو برای برنامه‌نویس سخت‌تر و برای کاربر راحتتر کرد. تو یک اپلیکیشن SPA ایده‌آل، کاربر شما متوجه عوض شدن صفحه‌ها نمیشه و احساس میکنه که همه‌چیز در حال رخ‌دادن تو یک صفحست.&lt;/p&gt;

&lt;p&gt;اما داستان سمت برنامه‌نویس کمی فرق می‌کنه. کاربر زمانی میتونه اطلاعات رو تو مرورگرش ببینه، که کد‌های HTML ساخته شده باشن، و این یعنی برنامه‌نویس باید با هر درخواست کاربر، یا کلا صفحه رو از اول بارگذاری کنه (که دیگه SPA نیست) یا اینکه اون قسمتی از سایت رو که مرتبط با کاربر هست یا نیاز به تغییر داره رو مجددا با داده‌های جدید که از سمت سرور اومدن بارگذاری کنه.&lt;/p&gt;

&lt;p&gt;اینجاست که سایت شما، تا حدود زیادی از سمت سرور خودش جدا میشه و مفهوم جدیدی به عنوان &lt;strong&gt;فرانت‌اِند (Front End)&lt;/strong&gt; رو تعریف می‌کنه. فرانت‌اند و بَک‌اِند، در زمان‌های دور وجود نداشتن یا خیلی به هم نزدیک بودن. شما یک سایت رو کامل می‌نوشتید و مثلا تو یک صفحه PHP، همزمان از HTML و JavaScript استفاده می‌کردید. هر زمان که کاربر درخواست صفحه‌ی جدیدی رو میداد، شما یک اسکریپت جدید رو بارگذاری و صفحه‌های مربوطه رو از نو بازنویسی می‌کردید.&lt;/p&gt;

&lt;p&gt;زمانی که تعاریف فرانت‌اند و بَک‌اند ایجاد شدند، طراحی سایت شکل جدیدی به خودش گرفت. فرانت‌اند یجورایی بیشتر نماد &lt;strong&gt;طراحی سایت&lt;/strong&gt; شد و بَک‌اند بیشتر نماد &lt;strong&gt;منطق کاری (Business Logic)&lt;/strong&gt;. کدها سمت بک‌اند نوشته می‌شن و اطلاعات رو موقع نیاز به فرانت‌اند ارسال می‌کنن. از اینجا به بعد، برنامه‌نویس فرانت نیازی نداره که نگران SQL و دستورات مربوط به ارتباط با پایگاه داده و دریافت محصولات از اون باشه، یا حتی نگران فرایند عضویت و ورود به سایت. فرانت‌اند خودش رو بیشتر با بهبود تجربه کاربری درگیر کرد. لازم هست که بگم، این یک مفهوم کلی و جداسازی کلی بک‌اند و فرانت‌اند هست. اینکه وظیفه‌ی برنامه‌نویس چی باشه، نسبت به هر پروژه قابل تغییر هست و امرو، خیلی از برنامه‌نویس‌ها به هرد شاخه بَک و فرانت تسلط دارن.&lt;/p&gt;

&lt;p&gt;اینجا بود که مارس ۲۰۱۳، فیسبوک اولین نسخه از کتاب‌خونه ری‌اَکت رو ارائه داد…&lt;/p&gt;

&lt;h1 id=&quot;ریاکت-react&quot;&gt;ری‌اکت (React)&lt;/h1&gt;

&lt;p&gt;ری‌اَکت یا ری‌اَکت‌جِی‌اِس، یک کتابخونست برای ساختن روابط کاربری. ری‌اکت به برنامه‌نویس این اجازه رو میده، که بتونه وب‌اپلیکیشن‌های بزرگی رو بسازه که از اطلاعات مختلفی استفاده می‌کنن و میتونن تو یک صفحه تغییر کنن، بدون اینکه صفحه رو مجدد لود کنن (مفهوم SPA). هدف اصلی سازندگان ری‌اکت، سرعت، سادگی و مقیاس‌پذیری بوده.&lt;/p&gt;

&lt;p&gt;ری‌اکت صرفا تلاش میکنه تا رابط کاربری رو از راه Virtual-DOM تغییر بده. اینکه این ساز.کار به چه صورتی هست رو فعلا تشریح نمیکنم اما، اگر با معماری MVC آشنا باشید، ری‌اکت اون قسمت “V” رو به خودش اختصاص میده و میتونه با بقیه کتابخونه‌های جی‌اس خودش رو وفق بده.&lt;/p&gt;

&lt;p&gt;یکی دیگه از اَشکال ری‌اکت، ری‌اَکت‌نِیتیو هست که کمک میکنه، نرم‌افزارهای (اکثرا موبایل) نِیتیو یا سازگار با سیستم‌عامل توسط ری‌اکت ساخته بشن. ضمنا ری‌اکت از جی‌اس‌اکس (JSX) برای نمایش و ساخت المان‌ها استفاده میکنه که توضیح میدم در این مورد.&lt;/p&gt;

&lt;h2 id=&quot;جیاساکس-jsx&quot;&gt;جی‌اس‌اکس (JSX)&lt;/h2&gt;

&lt;p&gt;جِی‌اِس‌اِکس، یک زبان مشابه با HTML یا XML که کمک میکنه، تیکه‌های سایت (Component) جدای از هم ساخته بشن و به شکل یک شئ جاوا‌اسکریپت در بیان.&lt;/p&gt;

&lt;p&gt;ساده‌تر بگم، با JSX میشه ساختارهای مشابه به HTML رو ساخت. مثال:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;nav&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;ul&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;nav&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;#&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Home&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/a&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;#&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;About&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/a&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;#&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Clients&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/a&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;#&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Contact&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Us&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/a&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/ul&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;اینجا، &lt;code class=&quot;highlighter-rouge&quot;&gt;nav&lt;/code&gt; به عنوان یک کامپونِنت (Component) شناخته میشه. و شما میتونید جاهای مختلف برنامه، ازش استفاده کنید (یکبار بنویسید و چندبار استفاده کنید).&lt;/p&gt;

&lt;p&gt;این استفاده از JSX یکی دیگه از ویژگی‌های ری‌اکت به حساب میاد! اینکه شما برنامتون رو به &lt;strong&gt;تیکه‌های کوچکتری تقسیم می‌کنید و میتونید در جاهای مختلفی ازش استفاده کنید.&lt;/strong&gt;&lt;/p&gt;

&lt;h2 id=&quot;کمی-بیشتر-در-مورد-ریاکت&quot;&gt;کمی بیشتر در مورد ری‌اکت&lt;/h2&gt;

&lt;p&gt;دنیای ری‌اکت جالبه. فرض کنید که یک کامپوننت رو ساختیم، مثلا یه لیست از محصولات. بعد کاربر روی یکی از محصولات کلیک میکنه، صفحه محصول باز میشه و کاربر محصول رو میبینه. کاری که ری‌اکت انجام داده چیه؟ ری‌اکت متوجه میشه که کدوم قسمت‌های سایت باید تغییر کنن و فقط اونها رو تغییر میده! پس اول شناسایی میکنه که چه چیزی تغییر کرده، و بعد تغییرات رو اعمال میکنه. ری‌اکت، به جای اینکه کل صفحه رو از اول بازسازی کنه، فقط قسمت‌هایی که تغییر کردند یا به نوعی وضعیتشون تغییر کرده رو با داده‌های جدید پر می‌کنه و اونها رو از نو میسازه و خیلی هم سریع این کار رو انجام میده!&lt;/p&gt;

&lt;h2 id=&quot;نصب-و-شروع-کار-با-ریاکت&quot;&gt;نصب و شروع کار با ری‌اکت&lt;/h2&gt;

&lt;p&gt;تصمیم ندارم اینجا به طور عمیق وارد ری‌اکت بشم و کد منبع ری‌اکت رو تشریح کنم، هدفم اینه که فضای کلی برای ورود به نکست‌جی‌اس رو ایجاد و شما رو با ساختار کلی و نحوه کار با ری‌اکت آشنا کنم. پس پیش میریم برای نصب ری‌اکت‌جی‌اس و یک آشنایی کلی با این کتابخونه.&lt;/p&gt;

&lt;h3 id=&quot;نصاب-ریاکت&quot;&gt;نصاب ری‌اکت&lt;/h3&gt;

&lt;p&gt;نصاب ری‌اکت، که توسط فیسبوک ساخته شده، تو مخازن npm موجوده و میتونید اون رو به صورت عمومی توی سیستم‌عاملتو بریزید:&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;npm &lt;span class=&quot;nb&quot;&gt;install&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-g&lt;/span&gt; create-react-app

&lt;span class=&quot;se&quot;&gt;\#&lt;/span&gt; ساخت نرم‌افزار
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;create-react-app my-app-name

&lt;span class=&quot;se&quot;&gt;\#&lt;/span&gt; نصب وابسته‌ها &lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;Dependencies&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;cd &lt;/span&gt;my-app-name
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;npm &lt;span class=&quot;nb&quot;&gt;install&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;مطمئن باشید که حتما &lt;a href=&quot;https://www.npmjs.com/get-npm&quot;&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;npm&lt;/code&gt; رو روی کامپیوترتون نصب کردید&lt;/a&gt;. یکی از مهم‌ترین ویژگی‌های &lt;code class=&quot;highlighter-rouge&quot;&gt;create-react-app&lt;/code&gt; اینه که تمام ابزارهای لازم رو از قبل برای شما فراهم کرده. مثلا از قبل Babel برای شما نصب شده و نیازی نیست که خودتون رو درگیر نصب و راه‌اندازیش بکنید. حالا میریم سراغ یک توضیح در مورد ساختار این کتابخونه.&lt;/p&gt;

&lt;h3 id=&quot;ساختار-پوشهها&quot;&gt;ساختار پوشه‌ها&lt;/h3&gt;

&lt;p&gt;اگر داخل پوشه &lt;code class=&quot;highlighter-rouge&quot;&gt;public&lt;/code&gt; رو ببینید، متوجه حضور فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;index.html&lt;/code&gt; میشید. این فایل در حقیقت نقطه شروع برنامست و حتما باید وجود داشته باشه، این یکی از بایدهای برنامه‌های ساخته شده با &lt;code class=&quot;highlighter-rouge&quot;&gt;create-react-app&lt;/code&gt; هست. یه نگاهی به داخل این فایل میندازیم:&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;cp&quot;&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;html&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;lang=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;en&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;meta&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;charset=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;utf-8&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;meta&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;name=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;viewport&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;content=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;meta&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;name=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;theme-color&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;content=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;#000000&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;c&quot;&gt;&amp;lt;!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    --&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;link&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;rel=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;manifest&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;href=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;%PUBLIC_URL%/manifest.json&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;link&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;rel=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;shortcut icon&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;href=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;%PUBLIC_URL%/favicon.ico&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;c&quot;&gt;&amp;lt;!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the \`public\` folder during the build.
      Only files inside the \`public\` folder can be referenced from the HTML.

      Unlike &quot;/favicon.ico&quot; or &quot;favicon.ico&quot;, &quot;%PUBLIC_URL%/favicon.ico&quot; will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running \`npm run build\`.
    --&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;title&amp;gt;&lt;/span&gt;React App&lt;span class=&quot;nt&quot;&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;noscript&amp;gt;&lt;/span&gt;
      You need to enable JavaScript to run this app.
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;/noscript&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;id=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;root&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;c&quot;&gt;&amp;lt;!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the &amp;lt;body&amp;gt; tag.

      To begin the development, run \`npm start\` or \`yarn start\`.
      To create a production bundle, use \`npm run build\` or \`yarn build\`.
    --&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;همینطور که میبینید، این فایل چیز خاصی رو داخل خودش نداره. به جز خط ۲۸ام. که اِلِمانی تعریف شده با آی‌دی &lt;code class=&quot;highlighter-rouge&quot;&gt;root&lt;/code&gt;، این رو تا اینجا توی ذهنتون داشته باشید. اتفاقی که از اینجا به بعد رخ میده، توی فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;src/index.js&lt;/code&gt; قرار داره. بذارید یه نگاهی هم به این فایل بندازیم:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'react'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ReactDOM&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'react-dom'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'./index.css'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'./App'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;registerServiceWorker&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'./registerServiceWorker'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;nx&quot;&gt;ReactDOM&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getElementById&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'root'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;));&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;registerServiceWorker&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;این فایل هم یکی از فایل‌هایی هست که حتما باید وجود داشته باشه. دلیلش اینه که تو تتظیمات &lt;code class=&quot;highlighter-rouge&quot;&gt;create-react-app&lt;/code&gt; این دو فایل به عنوان نقاط شروع برنامه تعریف شدند. خود &lt;code class=&quot;highlighter-rouge&quot;&gt;create-react-app&lt;/code&gt; این دو فایل رو به هم متصل میکنه و زمانی رو که شما لازم هست خودتون بذارید تا تنظیمات رو انجام بدید، براتون ذخیره می‌کنه. میریم سراغ بررسی این فایل:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;اول از همه، این کد با استاندارد ای‌اس۶ نوشته شده. اگر قرار بود از استاندارد ای‌اس۵ (یا به اصطلاح Common JS) پیروی کنیم، باید مینوشتیم: &lt;code class=&quot;highlighter-rouge&quot;&gt;var React = require(&quot;react&quot;);&lt;/code&gt; تا کلاس ری‌اکت رو به پروژه اضافه کنیم. بعدا به این خواهیم پرداخت که این خط چه کارهایی انجام میده. فعلا بریم سراغ خط بعد.&lt;/li&gt;
  &lt;li&gt;تو خط دوم، شئیی به نام &lt;code class=&quot;highlighter-rouge&quot;&gt;ReactDOM&lt;/code&gt; فراخوانی شده. برای اطلاعاتون، قبل از نسخه ۰.۱۴ ری‌اکت، کتابخونه‌های &lt;code class=&quot;highlighter-rouge&quot;&gt;react&lt;/code&gt; و &lt;code class=&quot;highlighter-rouge&quot;&gt;react-dom&lt;/code&gt; یکی بودن. تنها وظیفه‌ای که ReactDOM به عهده داره، اینه که با اِی‌پی‌آی‌های &lt;code class=&quot;highlighter-rouge&quot;&gt;render&lt;/code&gt; یا &lt;code class=&quot;highlighter-rouge&quot;&gt;ReactDOM.render&lt;/code&gt; یک اِلِمان جِی‌اِس‌اِکس رو، داخل یک اِلِمان دیگه (اینجا &lt;code class=&quot;highlighter-rouge&quot;&gt;document.getElementById('root')&lt;/code&gt;) نمایش بده.&lt;/li&gt;
  &lt;li&gt;خط سوم، خیلی ساده اِستایل‌های موجود در فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;index.css&lt;/code&gt; رو، برای تمام اِلِمان‌هایی که اینجا قرار هست رِندِر بشن، اعمال میکنه.&lt;/li&gt;
  &lt;li&gt;خط چهارم یک کامپوننت رو، اینجا به اسم &lt;code class=&quot;highlighter-rouge&quot;&gt;app&lt;/code&gt;، از &lt;strong&gt;یک کلاس ری‌اکت&lt;/strong&gt; فراخوانی کرد و بعد تو خط هفتم، به ReactDOM گفت که این کامپوننت رو داخل اِلِمان root رِندِر کنه. اما بریم سراغ &lt;strong&gt;کلاس ری‌اکت&lt;/strong&gt; و ببینیم اصلا حرفش چی هست.&lt;/li&gt;
&lt;/ol&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'react'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;logo&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'./logo.svg'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'./App.css'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;kd&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
      &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;App&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;header&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;App-header&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
          &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;img&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;logo&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;App-logo&quot;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;alt&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;logo&quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
          &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;h1&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;App-title&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Welcome&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;to&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/h1&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;        &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/header&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;        &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;p&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;App-intro&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
          &lt;span class=&quot;nx&quot;&gt;To&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;get&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;started&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;edit&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;code&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;js&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/code&amp;gt; and save to reload&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;.
&lt;/span&gt;        &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/p&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;      &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/div&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;    &lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;خب، طبق معمول خط اول، کلاس‌های ری‌اکت (&lt;code class=&quot;highlighter-rouge&quot;&gt;React&lt;/code&gt;) و کامپوننت (&lt;code class=&quot;highlighter-rouge&quot;&gt;Component&lt;/code&gt;) رو از کتابخونه ری‌اکت فراخوانی کرده. اما تفاوت براکت‌ها &lt;code class=&quot;highlighter-rouge&quot;&gt;{}&lt;/code&gt; برای کامپوننت و ری‌اکت که براکت نداره چیه؟ این یکی از ویژگی‌های ای‌اس۶ هست که به این صورته:&lt;/p&gt;

&lt;p&gt;فرض کنید کلاسی رو به شکل زیر تعریف کردیم:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;YeClassJadid1&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;cm&quot;&gt;/*...*/&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;YeClassJadid2&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;cm&quot;&gt;/*...*/&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;YeClassJadid3&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;cm&quot;&gt;/*...*/&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;YeClassJadid4&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;YeClassDige&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;cm&quot;&gt;/*...*/&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;اشیائی که تعریف شدن همشون ویژگی کلاس بودن رو دارن، اما تفاوتشون به این صورته که، کلاس اول (&lt;code class=&quot;highlighter-rouge&quot;&gt;YeClassJadid1&lt;/code&gt;)، فقط تو همون فایلی که تعریف شده، یا اسکوپی (Scope) که تعریف شده قابل خونده شدنه و جاهای دیگه قابل استفاده نیست. کلاس دوم (&lt;code class=&quot;highlighter-rouge&quot;&gt;YeClassJadid2&lt;/code&gt;) رو شما میتونید جاهای دیگه، با استفاده از روش &lt;code class=&quot;highlighter-rouge&quot;&gt;import { YeClassJadid2 } from &quot;path/to/the/file&quot;&lt;/code&gt; فراخوانی کنید. دلیلش هم اینه که کلاس دوم، به طور پیش‌فرض کلاس اصلی این ماژول یا فایل نیست. اما، کلاس سوم &lt;code class=&quot;highlighter-rouge&quot;&gt;YeClassJadid3&lt;/code&gt; به طور پیش‌فرض، کلاس اصلی تعریف شده (&lt;code class=&quot;highlighter-rouge&quot;&gt;default&lt;/code&gt;) و زمانی که بخواد فراخوانی بشه، میتونه به صورت &lt;code class=&quot;highlighter-rouge&quot;&gt;import YeClassJadid3 from &quot;path/to/the/file&quot;&lt;/code&gt; یا حتی &lt;code class=&quot;highlighter-rouge&quot;&gt;import YeEsmeDige from &quot;path/to/the/file&quot;&lt;/code&gt; فراخوانی بشه. و در نهایت هم، کلاس چهارم &lt;code class=&quot;highlighter-rouge&quot;&gt;YeClassJadid4&lt;/code&gt; مثل کلاس‌های قبلی، اما با ارث‌بری از کلاس &lt;code class=&quot;highlighter-rouge&quot;&gt;YeClassDige&lt;/code&gt; خارج یا اِکسپورت میشه.&lt;/p&gt;

&lt;p&gt;نکته‌ای که گفتنش حائز اهمیته، اینه که هر ماژول، یا هر فایل، فقط یک کلاس رو میتونه به صورت &lt;code class=&quot;highlighter-rouge&quot;&gt;default&lt;/code&gt; خارج کنه! تو مثال بالا، یکی از کلاس‌های &lt;code class=&quot;highlighter-rouge&quot;&gt;YeClassJadid3&lt;/code&gt; یا &lt;code class=&quot;highlighter-rouge&quot;&gt;YeClassJadid4&lt;/code&gt; میتونن خاصیت &lt;code class=&quot;highlighter-rouge&quot;&gt;default&lt;/code&gt; رو داشته باشن!&lt;/p&gt;

&lt;p&gt;باز هم میگم، هدفم این نیست که عمیق وارد ری‌اکت بشم و فقط میخوام شما رو با این محیط آشنا کنم. برنامه اینه که شما وارد نِکست‌جِی‌اِس بشید و من اونجا بیشتر درمورد خود ری‌اکت می‌نویسم. تا اینجا هم خوب پیش اومدیم، بریم سراغ کامپوننت‌ها و یه کامپوننت بسازیم.&lt;/p&gt;

&lt;h3 id=&quot;ساخت-کامپوننت&quot;&gt;ساخت کامپوننت&lt;/h3&gt;

&lt;p&gt;برای اینکه بهتر متوجه بشید کامپوننت‌ها چی هستند، صفحات وب رو به تیکه‌های کوچیک تقسیم کنید. مثلا نوار بالای صفحه یه کامپوننت جدا، لیست محصولات یه کامپوننت جدا و همینطور ادامه بدید…&lt;/p&gt;

&lt;p&gt;📷&lt;/p&gt;

&lt;p&gt;اول، کل صفحه یک کامپوننت هست، بعد هر تیکه‌ای از صفحه تقسیم به کامپوننت‌های کوچک‌تر میشه و پیش میره. این موضوع رو با ساخت یک کامپوننت راحتت درک میکنید. برای شروع، داخل پوشه &lt;code class=&quot;highlighter-rouge&quot;&gt;src&lt;/code&gt; یک پوشه دیگه به اسم &lt;code class=&quot;highlighter-rouge&quot;&gt;components&lt;/code&gt; یا هر اسم دیگه‌ای که دوست دارید ایجاد کنید. اینکه پوشه‌ها چطور باشن، دست خودتونه، اما یادتون باشه که یک‌سری استاندارد یا کانوِنشِن (Convention) برای اینکار هست که مدیریت کد رو راحتتر میکنه. در نهایت داخل این پوشه، یک فایل به اسم &lt;code class=&quot;highlighter-rouge&quot;&gt;MyComponent.js&lt;/code&gt; بسازید و داخلش این کد رو قرار بدید:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;react&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ThisIsAComponent&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
            &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;ul&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
                &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Item&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/li&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Item&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/li&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Item&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/li&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Item&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;4&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/li&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Item&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/li&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;            &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/ul&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;        &lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;کامپوننتی که ساختیم خیلی سادست، یه لیست با ۵تا آیتم. که باید، حتما داخل تابع &lt;code class=&quot;highlighter-rouge&quot;&gt;render&lt;/code&gt; قرار بگیرن، و این تابع هم، فقط باید یک اِلِمان رو، یا چند اِلِمانی که داخل یک المان والد جمع شدند رو برگردونه. حالا باید این کامپوننت رو داخل &lt;code class=&quot;highlighter-rouge&quot;&gt;App.js&lt;/code&gt; فراخوانی کنیم. کار خیلی ساده‌ایه. &lt;code class=&quot;highlighter-rouge&quot;&gt;App.js&lt;/code&gt; رو باز کنید و اون رو به شکل زیر تغییر بدید:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'react'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;logo&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'./logo.svg'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'./App.css'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ThisIsAComponent&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;./components/MyComponent&quot;&lt;/span&gt;

&lt;span class=&quot;kd&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
      &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;App&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;header&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;App-header&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
          &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;img&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;logo&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;App-logo&quot;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;alt&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;logo&quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
          &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;h1&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;App-title&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Welcome&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;to&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/h1&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;        &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/header&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;        &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;p&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;App-intro&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
          &lt;span class=&quot;nx&quot;&gt;To&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;get&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;started&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;edit&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;code&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;js&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/code&amp;gt; and save to reload&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;.
&lt;/span&gt;        &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/p&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;        
        &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;ThisIsAComponent&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/div&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;    &lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;خب، کامپوننت رو ساختیم و اون رو به کامپوننت اصلی اضافه کردیم. حالا دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;npm start&lt;/code&gt; رو اجرا کنید و بعد داخل مرورگر به آدرس &lt;a href=&quot;http://localhost:3000/&quot;&gt;localhost:3000&lt;/a&gt; برید و نتیجه رو ببینید. بعد از اینکه تموم شد، میتونید سرور رو ببندید و برید سراغ مرحله بعد.&lt;/p&gt;

&lt;h3 id=&quot;گریزی-به-state&quot;&gt;گریزی به state&lt;/h3&gt;

&lt;p&gt;فرض کنید که قرار بود دکمه‌ای وجود داشته باشه، تا با کلیک کردن روش، کامپوننت ما یا حتی یک بخشی از کامپوننت نمایش داده بشه و یا مخفی بشه، یکی از این دو حالت ساده! اینجا لازم هست که کمی در مورد مفهوم استِیت (state) توضیح بدم. کامپوننت‌های شما، همینطور که تا اینجا دیدید، کار خاصی رو به خودی خودشون انجام نمیدن، چون در حقیقت اِلِمانهای HTML هستند، یا حتی شاید لازم باشه در طول زمان تغییراتی رو پیدا کنن. ملموس‌ترین نوع تغییر، زمانی رخ میده که شما اطلاعاتی رو از جایی (از یک سرور) دریافت میکنید و می‌خواید به کاربر نشون بدید، اما تو مدت زمانی که اطلاعات در حال دریافت هستند، علاقه دارید تا یک اسپینر (spinner) رو نمایش بدید، تا به کاربر بگید که اطلاعات در حال بارگزاری هستن. یه سناریوی دیگه اینکه، با کلیک روی یک چِک‌باکس (checkbox) یک فیلد مخفی شده رو نمایش بدید و مثال‌های دیگه. اینجاست که استیت به کمک شما میاد.&lt;/p&gt;

&lt;p&gt;استیت در حقیقت محل ذخیره‌ي آخرین تغییرات و حالات کامپوننته. مثلا شما بهش میگید که کامپوننت من در حالت عادی، نمایش داده میشه، اما من میخوام، زمانی که کاربر روی یک دکمه کلیک میکنه، کامپوننتم رو مخفی کنم. اینجا، نمایش داده شدن یا مخفی شدن، جز حالات یا استیت کامپوننت به حساب میاد. &lt;strong&gt;ری‌اکت، زمانی که استیت تغییر میکنه، کامپوننت رو مجدد بارگزاری یا رِندِر میکنه&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;برای اینکه با استیت هم کار کنیم و بهتر درکش کنیم، به تریتیب زیر، به کامپوننت &lt;code class=&quot;highlighter-rouge&quot;&gt;ThisIsAComponent&lt;/code&gt; استیت میدیم،&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;حالت دیفالت یا اولیه رو برای کامپوننت تعریف میکنیم&lt;/li&gt;
  &lt;li&gt;توسط یک ایونت (Event) حالت یا همون استیت رو تغییر میدیم.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;کامپوننت رو به شکل زیر بازنویسی میکنیم:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;react&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ThisIsAComponent&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;kd&quot;&gt;constructor&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;k&quot;&gt;super&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;

        &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;isHidden&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

    &lt;span class=&quot;nx&quot;&gt;toggleState&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;setState&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;isHidden&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;isHidden&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;})&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

    &lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
            &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
                &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;button&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;onClick&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;toggleState&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;bind&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Change&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/button&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;ul&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;hidden&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;isHidden&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
                    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Item&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/li&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Item&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/li&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Item&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/li&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Item&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;4&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/li&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Item&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/li&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/ul&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;            &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/div&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;        &lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;کارهایی که انجام شده، به همراه توضیحاتشون به ترتیب زیر هستن:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;constructor&lt;/code&gt; به کامپوننت اضافه شده. این تابع که در حقیقت از &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes&quot;&gt;تعاریف کلاس در جاوا‌اسکریپت&lt;/a&gt; برگرفته شده، کارهای متفاوتی رو میتونه انجام بده. اما یادتون باشه، &lt;strong&gt;هر موقع که میدونستید کامپوننتتون قرار هست حالات مختلفی رو برای نمایش داشته باشه، حالت اولیش (Initial State) رو اینجا تعریف کنید.&lt;/strong&gt; مهمترین نکته اینه که به محض تعریف کردن &lt;code class=&quot;highlighter-rouge&quot;&gt;constructor&lt;/code&gt;، تابع &lt;code class=&quot;highlighter-rouge&quot;&gt;super()&lt;/code&gt; فراخوانی بشه. اگر فراموش کنید که &lt;code class=&quot;highlighter-rouge&quot;&gt;super()&lt;/code&gt; رو بلافاصله فراخوانی کنید، &lt;code class=&quot;highlighter-rouge&quot;&gt;this&lt;/code&gt; که در حقیقت همون کامپوننت شماست و اطلاعات کامپوننت رو توی خودش داره، خالی خواهد موند و در نتیجه امکان استفاده از اِستِیت و بقیه ویژگی کامپوننت‌ها رو نخواهید داشت.&lt;/li&gt;
  &lt;li&gt;قدم بعدی، داخل &lt;code class=&quot;highlighter-rouge&quot;&gt;construct&lt;/code&gt; و زیر &lt;code class=&quot;highlighter-rouge&quot;&gt;super()&lt;/code&gt;، استیت اولیه یا همون Default رو تعریف کردم. شکل تعریفش هم یه شئ ساده بوده که داخلش فقط از &lt;code class=&quot;highlighter-rouge&quot;&gt;isHidden: false&lt;/code&gt; استفاده کردم تا بگم، در حالت عادی نمایش داده نمیشه (اینکه چطور و چه چیزی از این حالت استفاده میکنه و تغییر میکنه رو پایین‌تر توضیح میدم)&lt;/li&gt;
  &lt;li&gt;یک تابعی رو تعریف کردم با اسم دلخواه &lt;code class=&quot;highlighter-rouge&quot;&gt;toggleState&lt;/code&gt; که قرار هست موقع کلیک کردن دکمه، فراخوانی بشه. کاری هم که انجام میده، خیلی ساده، استیت رو تغییر میده. کد نوشته شده شاید شما رو یکم سردرگم کنه. تعریف کد به این شکله: &lt;code class=&quot;highlighter-rouge&quot;&gt;isHidden: !this.state.isHidden&lt;/code&gt; و یعنی، مقدار جدید &lt;code class=&quot;highlighter-rouge&quot;&gt;isHidden&lt;/code&gt; برابر خواهد بود با هر آنچه که &lt;code class=&quot;highlighter-rouge&quot;&gt;this.state.isHidden&lt;/code&gt; بوده، اما چون یک &lt;code class=&quot;highlighter-rouge&quot;&gt;!&lt;/code&gt; هم اولش آوردم، یعنی اون مقدار رو بر عکسش کن. پس اگر &lt;code class=&quot;highlighter-rouge&quot;&gt;this.state.isHidden&lt;/code&gt; برابر با &lt;code class=&quot;highlighter-rouge&quot;&gt;false&lt;/code&gt; بود، مقدار جدیدش برابر با &lt;code class=&quot;highlighter-rouge&quot;&gt;true&lt;/code&gt; میشه و برعکس.&lt;/li&gt;
  &lt;li&gt;چون یک دکمه هم به کامپوننت اضافه کردم، باید کل اِلِمان‌ها رو داخل یک اِلِمان اصلی و والد جا بدم. برای همین هم، تمام المان‌ها رو داخل یک &lt;code class=&quot;highlighter-rouge&quot;&gt;div&lt;/code&gt; گذاشتم.&lt;/li&gt;
  &lt;li&gt;زمانی که کاربر روی دکمه کلیک میکنه، رویداد (Event) &lt;code class=&quot;highlighter-rouge&quot;&gt;onClick&lt;/code&gt; اتفاق میوفته. اینجا بهش گفتم، زمانی که این رویداد اتفاق افتاد، تابع &lt;code class=&quot;highlighter-rouge&quot;&gt;toggleState&lt;/code&gt; رو صدا بزنه. ضمنا از &lt;code class=&quot;highlighter-rouge&quot;&gt;bind&lt;/code&gt; هم استفاده کردم، چون دکمه‌ها در حالت عادی، رویدادها رو انجام نمیدن و بایند (Bind) موظف هست تا حالت اصلی شئی که بهش پاس داده میشه رو حفظ و برای تابع مربوطه ارسالش کنه. در این مورد بعدا بیشتر توضیح میدم.&lt;/li&gt;
  &lt;li&gt;و در نهایت، به المان &lt;code class=&quot;highlighter-rouge&quot;&gt;ul&lt;/code&gt; گفتم، تا مخفی بودن یا نبودنش رو از &lt;code class=&quot;highlighter-rouge&quot;&gt;this.state.isHidden&lt;/code&gt; بگیره. حالا، هر موقع که &lt;code class=&quot;highlighter-rouge&quot;&gt;isHidden&lt;/code&gt; تغییر کنه، المان &lt;code class=&quot;highlighter-rouge&quot;&gt;ul&lt;/code&gt; مجددا رِندِر میشه.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;برنامه رو تست کنید و ببینید که کارکردش چطوره. کارتون که تموم شد، میریم تا یکم دیگه با تئوری دست و پنجه نرم کنیم.&lt;/p&gt;

&lt;h2 id=&quot;درک-مفاهیم-ریاکت&quot;&gt;درک مفاهیم ری‌اکت&lt;/h2&gt;

&lt;p&gt;مهم‌ترین تفاوت کتاب‌خونه ری‌اکت با فرِیم‌وُرک‌هایی مثل انگولار، اینه که ری‌اکت فقط برای فرانت‌اند ساخته شده. در مورد ری‌اکت، چیزهای خیلی زیادی برای گفتن وجود داره. اما دوتا از ویژگی‌های اصلی ری‌اکت، داشتن مفاهیمی مثل Properties یا به طور خلاصه Prop و همچنین State هست که قبل‌تر کمی با مفهوم State آشنا شدیم. اینجا تصمیم دارم در مورد این دو و همچنین چرخه زندگی کامپوننت‌ها بیشتر توضیح بدم.&lt;/p&gt;

&lt;h3 id=&quot;props&quot;&gt;Props&lt;/h3&gt;

&lt;p&gt;پراپ‌ها در واقع راهی برای ارتباط بین کامپوننت‌ها و جز ویژگی‌های اونها هستند (هرجا که شما کلاس &lt;code class=&quot;highlighter-rouge&quot;&gt;React.Component&lt;/code&gt; رو استفاده یا همون &lt;code class=&quot;highlighter-rouge&quot;&gt;extend&lt;/code&gt; کنید، میتونید ازشون بهره‌ ببرید). مهم‌ترین ویژگی پراپ‌ها، اینه که از سمت کامپوننت والد به فرزند منتقل میشن و اصطلاحا uni-directional (یک‌طرفه) هستن. زمانی هم وجود داره که شما مثل استِیت، پراپ‌های اولیه رو تعریف میکنید تا کامپوننت شما با اطلاعات اولیه (و نه حالات اولیه)، شروع به کار کنه. پراپ‌ها به شما کمک میکنن تا اطلاعات رو بین کامپوننت‌ها جابجا کنید، و زمانی که کاربر بخواد مستقیما روی خود کامپوننت تغییری اعمال کنه، باید از استیت استفاده بشه. بذارید با یک مثال ساده از پراپ استفاده کنیم:&lt;/p&gt;

&lt;p&gt;فرض کنید که توی کامپوننت &lt;code class=&quot;highlighter-rouge&quot;&gt;ThisIsAComponent&lt;/code&gt; از یک تگ هدر &lt;code class=&quot;highlighter-rouge&quot;&gt;h1&lt;/code&gt; استفاده میکردیم و قرار بود مقدار داخلش رو توسط کامپوننت والد تغییر بدیم. کد جدیدمون به این شکل میشد (فقط تابع رِندِر رو گذاشتم و مابقی کد دست‌نخورده باقی مونده):&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
            &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
                &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;h1&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/h1&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;button&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;onClick&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;toggleState&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;bind&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Change&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/button&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;ul&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;hidden&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;isHidden&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
                    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Item&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/li&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Item&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/li&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Item&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/li&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Item&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;4&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/li&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Item&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/li&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/ul&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;            &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/div&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;        &lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;حالا باید مقداری رو برای &lt;code class=&quot;highlighter-rouge&quot;&gt;title&lt;/code&gt; از کامپوننت والد، یعنی &lt;code class=&quot;highlighter-rouge&quot;&gt;App&lt;/code&gt; در نظر بگیرم. کار آسونیه و به شکل زیر تغییری رو تو &lt;code class=&quot;highlighter-rouge&quot;&gt;App.js&lt;/code&gt; ایجاد میکنم:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;p&quot;&gt;...&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;ThisIsAComponent&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;This is a new title&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;...&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;state&quot;&gt;State&lt;/h3&gt;

&lt;p&gt;پراپ‌ها نباید تغییر کنن (به اصطلاح باید Immutable باشن)، برای همین از استیت استفاده میشه. در حالت عادی، کامپوننت‌ها استیت ندارن و از این جهت اصطلاحا بهشون Stateless گفته میشه. کامپوننت‌هایی که استیت پیدا میکنن، بهشون Stateful میگن.&lt;/p&gt;

&lt;p&gt;کاربرد استیت برای اینه که کامپوننت بتونه اطلاعاتی که در هر بازسازی دریافت میکنه رو حفظ کنه. زمانی که شما از &lt;code class=&quot;highlighter-rouge&quot;&gt;this.setState()&lt;/code&gt; استفاده میکنید، وضعیت کامپوننت بروزرسانی و مجددا بازسازی میشه. تمام این فرایند بازسازی توسط ری‌اکت اتفاق می‌افته و خیلی هم سریعه.&lt;/p&gt;

&lt;p&gt;پراپ و استیت خیلی شبیه به هم هستند و تقریبا کار مشابهی رو انجام میدن، اما برای کارهای متفاوتی ازشون استفاده میشه. این امکام وجود داره تا خیلی از کامپوننت‌های شما Stateless باشن.&lt;/p&gt;

&lt;h3 id=&quot;چرخه-زندگی-کامپوننتها-component-lifecycle&quot;&gt;چرخه زندگی کامپوننت‌ها (Component Lifecycle)&lt;/h3&gt;

&lt;p&gt;کامپوننت‌ها به شما کمک میکنن تا یو‌آی (UI) رو به تیکه‌های کوچکتر تقسیم کنید. در حالت کلی، شما کامپوننت‌ها رو به شکل کلاس‌های جاوااسکریپت تعریف میکنید:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Greeting&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;h1&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Hello&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/h1&amp;gt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;;
&lt;/span&gt;  &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;اما کامپوننت‌ها صرفا جهت نمایش ساخته نمیشن و کارهای بیشتری میشه باهاشون انجام داد. اصطلاحا هر کامپوننتی برای خودش یک چرخه‌زندگی بخصوص یا Lifecycle داره که چندتا از پر کاربردترین‌ها رو توضیح میدم:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;constructor()&lt;/code&gt; که دقیقا قبل از بارگذاری کامپوننت توسط ری‌اکت خونده میشه. بهترین استفادش، تعریف &lt;code class=&quot;highlighter-rouge&quot;&gt;state&lt;/code&gt; اولیه کامپوننت هست. اگر کامپوننت stateless باشه، نیازی به تعریف این تابع نیست.&lt;/li&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;componentWillMount()&lt;/code&gt; دقیقا قبل از بارگذاری خونده میشه. و قبل از تابع &lt;code class=&quot;highlighter-rouge&quot;&gt;render()&lt;/code&gt; اتفاق میوفته. به همین خاطر تعریف استیت تو این تابع پیشنهاد نمیشه. این تابع سمت سرور کارهاش رو انجام میده و اصطلاحا server-side هست. (در این مورد تو بخش &lt;a href=&quot;https://virgool.io/d/uzcgpsjoceof/edit#universal-isomorphic-apps&quot;&gt;Isomorphism&lt;/a&gt; توضیح میدم)&lt;/li&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;componentDidMount()&lt;/code&gt; بعد از اینکه کامپوننت بارگذاری شد، خونده میشه. این تابع بهترین جا برای ارسال درخواست‌ها به سرور شماست و اگر استیت رو تو این تابع با استفاده از تابع &lt;code class=&quot;highlighter-rouge&quot;&gt;this.setState()&lt;/code&gt; تغییر بدید، باعث میشید که باز دوباره تابع &lt;code class=&quot;highlighter-rouge&quot;&gt;render()&lt;/code&gt; فراخوانی بشه&lt;/li&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;componentWillReceiveProps(nextProps)&lt;/code&gt; زمانی فراخوانی میشه، که شما از طریق کامپوننت والد، پراپ‌های کامپوننت فرزند رو تغییر بدید و بخواید استیت جدید رو بر اساس پراپ‌های جدید تنظیم کنید. برای اینکار میتونید آرگومان‌های &lt;code class=&quot;highlighter-rouge&quot;&gt;nextProps&lt;/code&gt; و &lt;code class=&quot;highlighter-rouge&quot;&gt;this.props&lt;/code&gt; رو با هم مقایسه کرده و تغییرات رو ایجاد کنید. (مقایسه رو حتما انجام بدید!)&lt;/li&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;componentWillUpdate(nextProps, nextState)&lt;/code&gt; قبل از بارگذاری مجدد رخ میده، اگر پراپ‌ها و استیت‌های کامپوننت تغییری کرده باشن.&lt;/li&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;componentDidUpdate(prevProps, prevState)&lt;/code&gt; بلافاصله بعد از بارگذاری مجدد اتفاق میوفته و به شما این امکان رو میده تا المان‌ها رو دستکاری کنید.&lt;/li&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;componentDidCatch(error, info)&lt;/code&gt; برای مدیریت اِرورها و خطاها تو UI استفاده میشه.&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://reactjs.org/docs/react-component.html&quot;&gt;مطالعه بیشتر…&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3 id=&quot;جمعبندی&quot;&gt;جمع‌بندی&lt;/h3&gt;

&lt;p&gt;پراپها استفاده میشن تا اطلاعات از کامپوننت والد به کامپوننت فرزند یا حتی داخل کامپوننت فرزند منتقل بشن. پراپ‌ها تغییرناپذیر یا به اصطلاح Immutable هستند و نباید در هر رندر تغییر کنند.&lt;/p&gt;

&lt;p&gt;استیت برای این استفاده میشه تا اطلاعات رو تغییر بدیم، یا اطلاعات تغییر یافته رو نمایش بدیم و اصطلاحا تغییر پذیر یا Mutable هستند. مثلا کاربر چیزی رو در سایت سرچ میکنه و بلافاصله زیرش تعدادی از نزدیک‌ترین نتایج جست‌وجو نمایش داده میشه.&lt;/p&gt;

&lt;h1 id=&quot;مفهوم-isomorphic-یا-universal&quot;&gt;مفهوم Isomorphic یا Universal&lt;/h1&gt;

&lt;p&gt;زمانهای قدیم، قبل از موقعی که NodeJS بین برنامه‌نویس‌ها محبوب بشه، جاوااسکریپت زبانی بود که باهاش تغییراتی رو تو صفحه‌های وب ایجاد میکردن تا صفحه‌ها از حالت مرده و استاتیک خارج بشن. تا اون موقع زبان جاوااسکریپت، زبانی بود که تو مرورگر کاربر اجرا میشد و به اصطلاح Client Side یا سمت کاربر بود. بعد از ظهور NodeJS جاوااسکریپت این قابلیت رو پیدا کرد که تو محیط سمت سرور هم اجرا بشه و بعد از اون جاوااسکریپت به یک زبان Server Side هم تبدیل شد.&lt;/p&gt;

&lt;p&gt;ایزومورفیزم (Isomorphism) از ریاضیات گرفته شده و «هم‌سان» معنی میشه. چون واژه ایزومورفیک برای برنامه‌نویس‌ها کمی مشکل‌ساز میتونه باشه، به جاش از واژه یونیورسال (Universal) هم استفاده میکنن.&lt;/p&gt;

&lt;p&gt;ایزوموفیک در شاخه وب، به معنی ساخته شدن صفحه سمت سرور یا سمت کاربر هست و در حالت کلی به NodeJS و خود JavaScript اشاره میکنه. برای اینکه تعریف رو ساده‌تر کنم، اینطور در نظر بگیرید که، کدی که سمت سرور ساخته شده، به صورت HTML به کاربر ارسال میشه و کاربر میتونه تو کد صفحهش اون رو ببینه. اما کدی که سمت کاربر ساخته میشه، تو کدهای صفحه قابل مشاهده نیست. اینجا لازم هست که به این نکته اشاره کنم، که منظور از سرور، الزاما بک‌اند نیست، و اونچه که مد نظر هست، ابزاریه که وظیفه تبادل ارتباطات رو به عهده داره.&lt;/p&gt;

&lt;p&gt;دلایل مختلفی وجود دارن که برنامه‌نویس‌ها به اپ‌های ایزومورف علاقه‌مندند:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;بهبود سئو،&lt;/li&gt;
  &lt;li&gt;پرفورمنس بهتر،&lt;/li&gt;
  &lt;li&gt;و نگهداری راحت‌تر.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;یکی از مضوعاتی که خیلی در این مورد مهم هست، اینه که کد‌های ایزومورفیک که سمت کاربر ساخته شدن، توسط موتورهای جست‌وجو به خوبی خونده نمیشن، برای همین هم اپ‌های SPA معمولا با این ساختار دچار مشکل میشن و لازم هست تا کدشون سمت سرور ساخته بشه. (سرور رو الزاما با کامپیوتر سرور اشتباه نگیرید!)&lt;/p&gt;

&lt;h1 id=&quot;promise-و-درک-ناهمگامسازی-asynchronous&quot;&gt;Promise و درک ناهم‌گام‌سازی (Asynchronous)&lt;/h1&gt;

&lt;p&gt;بیاید با هم یه دنیای جالبی رو تجسم کنیم، تو این دنیای ما، هنوز گوگل وجود نداره و شما رئیس یک شرکت «پاسخ به سوالات» هستید. نحوه کار به این شکله که کاربر سوال خودش رو بسته‌بندی میکنه (Data Package) و اون رو به یک پست‌چی میده، پست‌چی این بسته رو میاره برای شرکت شما (Request) و شما بسته رو باز میکنید، به سوال جواب میدید و اون رو به پست‌چی میدید و ایشون هم برای کاربر جواب رو میبره (Response). پروسه تا اینجا واضحه فقط چند شرط وجود داره:&lt;/p&gt;

&lt;p&gt;از اونجایی که شرکت ما خیلی خاصه :دی،&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;کاربر زمانی که بسته رو به پست‌چی میده، باید دم در خونه صبر کنه تا پست‌چی برگرده (و از کار و زندگیش هم می‌افته)&lt;/li&gt;
  &lt;li&gt;پستچی تا زمانی که شما پاسخ رو بسته‌بندی نکردید و بهش تحویل ندادید پیش شما میمونه.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;این روش ارتباط، روش هم‌گام یا اصطلاحا Synchronous نام داره و همون روش قدیمیه کار با اینترنته، کد PHP مینوشتیم و با هربار کلیک رو دکمه، کاربر باید منتظر صفحه جدید میموند و نمیتونست کارهای دیگه توی سایت رو انجام بده.&lt;/p&gt;

&lt;p&gt;حالا شرکتمون رو کمی پیشرفته‌تر میکنیم، فرایند همون شکل قبلی رو داره اما:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;زمانی که کاربر درخواستش رو بسته‌بندی کرد و به پست‌چی داد، برمی‌گرده خونش و کارهاش رو انجام میده&lt;/li&gt;
  &lt;li&gt;شما فقط یک پست‌چی ندارید و پست‌چی‌ها میتونن از کاربر درخواست‌های مختلفی رو بگیرن و برای شما بیارن&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;این نوع ارتباط، ارتباط نا‌هم‌گام یا Asynchronous نام داره و خیلی تو وب‌اپ‌های SPA پر کاربرده و AJAX یکی از معروف‌ترین تکنیک‌ها برای برقراری این نوع ارتباطهاست. تو نسخه‌های جدید جی‌اس، برای اینکه کاربر رو منتظر نذاریم بعد از اینکه درخواستش رو ارسال کرد، &lt;strong&gt;بهش قول میدیم که در آینده جوابی رو برای درخواستش ارسال میکنیم&lt;/strong&gt;، و کاربر میتونه به کارش ادامه بده و ماهم پردازشمون رو انجام میدیم. اینجاست که پرامِس (پرامیس؟) یا همون Promiseها خودشون رو نشون میدن.&lt;/p&gt;

&lt;p&gt;قبل از معرفی شدن پرامس‌ها، تو جاوااسکریپت از Callbackها استفاده میشد، کال‌بک‌ها توابعی بودن که مثلا به عنوان آرگومان یک تابع دیگه تعریف میشدن، تا هنگام بُروز یک رویداد خاص (Event) کار خاصی رو هم انجام بدن. مشکل اینجا بود که ایده‌ی کال‌بک‌ها، هرچقدر هم که قشنگ بوده، تو پردازش‌های پیچیده مدیریت کد رو خیلی سخت میکرده و به اصطلاح، برنامه‌نویس رو وارد جهنم کالبَک‌ها یا همون Callback-Hell میکرده. برای همین پرامس‌ها ساخته شدند تا جایگزینی برای کال‌بک‌ها باشن.&lt;/p&gt;

&lt;p&gt;پرامس‌ها یا جوابی رو برمیگردونن یا اینکه دلیلی رو برای عدم انجام موفقیت‌آمیز اون فرایند ارائه میدن. از اینجا میشه گفت که پرامس‌ها ساختار مشابهی مثل &lt;code class=&quot;highlighter-rouge&quot;&gt;try/catch&lt;/code&gt; دارن و از همه مهمتر، سه وضعیت کلی رو شامل میشن:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;Pending&lt;/strong&gt;: که یعنی در حال انجام کاری هستند،&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;fulfilled&lt;/strong&gt;: که یعنی کارشون رو به خوبی انجام دادن و&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;rejected&lt;/strong&gt;: که یعنی از پس کاری که بهشون داده شده بر نیومدن.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;یه مثال ساده برای اینکه با نمونه‌ای از یک پرامس آشنا بشید به این شکله:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;fetch&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;url&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;then&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;process&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;then&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;save&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;catch&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;handleErrors&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;اینجا، تابع &lt;code class=&quot;highlighter-rouge&quot;&gt;process&lt;/code&gt; صبر میکنه تا کار تابع &lt;code class=&quot;highlighter-rouge&quot;&gt;fetch&lt;/code&gt; تموم بشه، بعد تابع &lt;code class=&quot;highlighter-rouge&quot;&gt;save&lt;/code&gt; منتظر &lt;code class=&quot;highlighter-rouge&quot;&gt;process&lt;/code&gt; میمونه و اگر هرکدوم از این توابع جایی به مشکل خوردند، تابه &lt;code class=&quot;highlighter-rouge&quot;&gt;handleErrors&lt;/code&gt; وظیفش رو انجام میده.&lt;/p&gt;

&lt;p&gt;اگر هرکدوم از این توابع، پرامس باشن، میتونن ساختار مشابهی رو برای خودشون بگیرن، در واقع این قابلیت رو به شما میدن تا بتونید پرامس‌ها رو تودرتو کنید.&lt;/p&gt;

&lt;h2 id=&quot;استفاده-از-fetch&quot;&gt;استفاده از fetch&lt;/h2&gt;

&lt;p&gt;حالا که متوجه مفهوم ایزومورفیک و همچنین درخواست‌های نا‌همگام شدید، بریم تا با یه مثال تو پروژمون به درک بیشتری ازشون برسیم.&lt;/p&gt;

&lt;p&gt;قدم اول، نصب کتابخونه &lt;code class=&quot;highlighter-rouge&quot;&gt;isomorphic-fetch&lt;/code&gt; از مخازن npm هست. &lt;code class=&quot;highlighter-rouge&quot;&gt;fetch&lt;/code&gt; یکی از کتابخونه‌های مورد علاقه‌ی من که در کنارش کتابخونه &lt;code class=&quot;highlighter-rouge&quot;&gt;axios&lt;/code&gt; وجود داره. تفاوت عمده این دو کتابخونه، تو پردازش اطلاعات هست و اکسیوس برای ای‌اس۶ آمادگی بیشتری داره، منتهی من طبق عادت پیش میرم و از فِچ (fetch) استفاده میکنم.&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;npm &lt;span class=&quot;nb&quot;&gt;install&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;--save&lt;/span&gt; isomorphic-fetch
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;کتابخونه رو نصب کنید، اینکه واژه ایزومورفیک اولش استفاده شده، نشون میده که این کتابخونه رو، هم میشه سمت سرور و هم سمت کاربر استفاده کرد. حالا، کامپوننت &lt;code class=&quot;highlighter-rouge&quot;&gt;ThisIsAComponent&lt;/code&gt; رو یکمی تغییر میدیم. در نهایت کدمون باید به شکل زیر بشه:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;react&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;fetch&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;isomorphic-fetch&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ThisIsAComponent&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;kd&quot;&gt;constructor&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;k&quot;&gt;super&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;

        &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;done&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;items&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;\&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;\&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

    &lt;span class=&quot;nx&quot;&gt;fetchData&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;setState&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;done&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;

        &lt;span class=&quot;nx&quot;&gt;fetch&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'http://jsonplaceholder.typicode.com/posts'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;then&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;data&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;nx&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;json&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
            &lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;then&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;res&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;setState&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;done&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;items&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;res&lt;/span&gt;
                &lt;span class=&quot;p&quot;&gt;})&lt;/span&gt;
            &lt;span class=&quot;p&quot;&gt;})&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;})&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;catch&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;error&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;nx&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;error&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;})&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

    &lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
            &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
                &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;h1&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/h1&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;button&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;onClick&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;fetchData&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;bind&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Get&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Data&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/button&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;p&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;hidden&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;done&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Loading&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/p&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
                    &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                        &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;items&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;item&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                            &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
                                &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;item&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/p&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;                            &lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
                        &lt;span class=&quot;p&quot;&gt;})&lt;/span&gt;
                    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
                &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/div&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;            &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/div&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;        &lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;خط به خط بریم جلو ببینیم چه اتفاقی افتاده:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;اول، از کتابخونه &lt;code class=&quot;highlighter-rouge&quot;&gt;isomorphic-fetch&lt;/code&gt; شئ &lt;code class=&quot;highlighter-rouge&quot;&gt;fetch&lt;/code&gt; رو فراخوانی کردم.&lt;/li&gt;
  &lt;li&gt;تو تابع constructor، استیت اولیه رو تغییر دادم و به جای &lt;code class=&quot;highlighter-rouge&quot;&gt;isHidden&lt;/code&gt; که اول داشتیم، &lt;code class=&quot;highlighter-rouge&quot;&gt;done&lt;/code&gt; رو، که وظیفه نگهداری از وضعیت بارگذاری آیتم‌ها رو به عهده داره و &lt;code class=&quot;highlighter-rouge&quot;&gt;items&lt;/code&gt; که نگهدارنده آیتم‌های دریافت شده از سرور هستند رو ساختم.&lt;/li&gt;
  &lt;li&gt;تابع &lt;code class=&quot;highlighter-rouge&quot;&gt;toggleState&lt;/code&gt; رو پاک کردم و به جاش از &lt;code class=&quot;highlighter-rouge&quot;&gt;fetchData&lt;/code&gt; استفاده کردم. اسمش رو هم خودم انتخاب کردم. داخل این تابع اتفاقات جالبی میوفته.&lt;br /&gt;
زمانی که این تابع خونده میشه (یا در واقع رو دکمه‌ای کلیک میشه که باید این تابع رو اجرا کنه) وضعیت &lt;code class=&quot;highlighter-rouge&quot;&gt;done&lt;/code&gt; به &lt;code class=&quot;highlighter-rouge&quot;&gt;false&lt;/code&gt; تغییر پیدا میکنه. چون در حقیقت آیتمی دریافت و کار ما هم تموم نشده.&lt;br /&gt;
قدم بعدی، از &lt;code class=&quot;highlighter-rouge&quot;&gt;fetch&lt;/code&gt; استفاده کردم تا از یک آدرس پیش‌فرض، یک‌سری اطلاعات الکی رو دریافت کنم. نکته مهم اینه که &lt;code class=&quot;highlighter-rouge&quot;&gt;fetch&lt;/code&gt; یک پرامس هست و وضعیتش رو میشه کنترل کرد. برای همین، تو خط پایینش گفتم، هر موقع که دریافت اطلاعات تموم شد، از اطلاعات دریافت شده که اسمشون رو &lt;code class=&quot;highlighter-rouge&quot;&gt;data&lt;/code&gt; گذاشتم استفاده کن و…&lt;/li&gt;
  &lt;li&gt;یکی از مهم‌ترین تفاوت‌های &lt;code class=&quot;highlighter-rouge&quot;&gt;fetch&lt;/code&gt; و &lt;code class=&quot;highlighter-rouge&quot;&gt;axios&lt;/code&gt; تو این مرحلست، پاسخی که &lt;code class=&quot;highlighter-rouge&quot;&gt;fetch&lt;/code&gt; به شما برمیگردونه، یک پاسخ خام هست و باید تبدیل به دیتای قابل خوندن بشه. &lt;code class=&quot;highlighter-rouge&quot;&gt;fetch&lt;/code&gt; این کار رو با برگردوندن یک پرامس انجام میده (برای نوشتن توابع از &lt;a href=&quot;https://virgool.io/d/uzcgpsjoceof/edit#arrow-functions&quot;&gt;Arrow Functionها&lt;/a&gt; استفاده کردم). پس گفتم، زمانی که جواب رو از سرور گرفتی، اون رو به &lt;code class=&quot;highlighter-rouge&quot;&gt;json&lt;/code&gt; تبدیل کن (که خود تابع &lt;code class=&quot;highlighter-rouge&quot;&gt;json&lt;/code&gt; یک پرامس برمیگردونه) و بعد از اینکه عمل تبدیل به &lt;code class=&quot;highlighter-rouge&quot;&gt;json&lt;/code&gt; درست انجام شد، از حاصلش استفاده کن تا دوباره استیت رو تغییر بدی.&lt;br /&gt;
&lt;code class=&quot;highlighter-rouge&quot;&gt;done&lt;/code&gt; رو هم برابر با &lt;code class=&quot;highlighter-rouge&quot;&gt;true&lt;/code&gt; کردم تا نشون بدم عمل دریافت اطلاعات کامل شده. در نهایت نتیجه حاصل از دریافت اطلاعات، یا همون آیتم‌های مورد نظرم رو، که حالا تبدیل به &lt;code class=&quot;highlighter-rouge&quot;&gt;json&lt;/code&gt; شدند، داخل &lt;code class=&quot;highlighter-rouge&quot;&gt;items&lt;/code&gt; استیت ذخیره کردم.&lt;br /&gt;
اینکار باعث میشه که ری‌اکت، یکبار دیگه کامپوننت‌هایی که از این استیت استفاده میکنن رو بارگذاری کنه. در نهایت هم بررسی میکنه که آیا اشکالی وجود داشته تو کل این فرایند یا نه.&lt;/li&gt;
  &lt;li&gt;آخر سر، تو تابع &lt;code class=&quot;highlighter-rouge&quot;&gt;render&lt;/code&gt; دکمه Get Data رو به تابع &lt;code class=&quot;highlighter-rouge&quot;&gt;fetchData&lt;/code&gt; وصل کردم. یک تگ &lt;code class=&quot;highlighter-rouge&quot;&gt;p&lt;/code&gt; هم اضافه کردم که بهش گفتم، وضعیت &lt;code class=&quot;highlighter-rouge&quot;&gt;hidden&lt;/code&gt; بودنش رو از &lt;code class=&quot;highlighter-rouge&quot;&gt;done&lt;/code&gt; موجود تو استیت بگیره. (هر موقع که بارگذاری تموم شده بود، این المان محو میشه و هرموقع بارگذاری در حال انجام بود، این المان نمایش داده میشه)&lt;/li&gt;
  &lt;li&gt;داخل المان &lt;code class=&quot;highlighter-rouge&quot;&gt;div&lt;/code&gt; که به جای &lt;code class=&quot;highlighter-rouge&quot;&gt;ul&lt;/code&gt; نشسته، با استفاده از تابع &lt;code class=&quot;highlighter-rouge&quot;&gt;map()&lt;/code&gt; که شکل جدیدی از &lt;code class=&quot;highlighter-rouge&quot;&gt;forEach&lt;/code&gt; هست، آیتم‌ها رو نمایش دادم. (پایین‌تر درمورد &lt;code class=&quot;highlighter-rouge&quot;&gt;map&lt;/code&gt; توضیحات بیشتری میدم)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href=&quot;https://goo.gl/Fy2S8J&quot;&gt;ادامه مطلب در سایت خودم…&lt;/a&gt;&lt;/p&gt;</content><author><name>آیین سعیدی</name></author><category term="reactjs" /><category term="nextjs" /><category term="redux" /><category term="redux-thunk" /><summary type="html">عمیق‌تر در مورد جاوااسکریپت، ری‌اکت و نکست‌جی‌اس بدونیم</summary></entry><entry><title type="html">مروری بر MySQL Triggers</title><link href="http://pullrequest.ir/MySQL-Triggers/" rel="alternate" type="text/html" title="مروری بر MySQL Triggers" /><published>2018-05-21T00:00:00+00:00</published><updated>2018-05-21T00:00:00+00:00</updated><id>http://pullrequest.ir/MySQL-Triggers</id><content type="html" xml:base="http://pullrequest.ir/MySQL-Triggers/">&lt;p&gt;&lt;img src=&quot;https://files.virgool.io/upload/users/3676/posts/hohqrcxydcrt/ek4abnc9bhed.png&quot; alt=&quot;MySQL&quot; title=&quot;MySQL&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Trigger:&lt;/p&gt;

&lt;p&gt;تریگرها به مجموعه‌ای از توابع/دستوراتی اطلاق میشه که با انجام کاری اجرا میشوند ، یعنی اگر تریگری داشته باشیم برای اجرا قبل از Insert در جدول X این تریگر هنگامیکه بخواهیم یک داده رو با کوئری Insert وارد جدولمون کنیم اجرا خواهد شد.
کار با تریگرها ساده ولی کاربردی هستند.
یک مثال کاربردی:
فرض میکنیم برای یک فروشگاه اینترنتی دیتابیسی رو میخواهیم طراحی کنیم که دارای 2 جدول برای ذخیره‌ی مشتری و اعتبارپنلش و دیگری برای نگهداری اطلاعات هر خرید مشتری باشد.
عملی که رخ میدهد به شرح زیر است:
هنگامیکه مشتری اقدام به خرید نمود مبلغ هر خرید از اعتبار کاربری مشتری کسر شود.&lt;/p&gt;

&lt;p&gt;Customers&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;id: شناسه مشتری&lt;/li&gt;
  &lt;li&gt;name:نام مشتری&lt;/li&gt;
  &lt;li&gt;credit:اعتبار مشتری&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;CREATE TABLE `customers` ( 
	 `id` INT UNSIGNED NOT NULL AUTO_INCREMENT ,
	`name` VARCHAR(20) NOT NULL , 
	`credit` INT NOT NULL , 
	 PRIMARY KEY (`id`)
);
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Baskets&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;id:شناسه خرید&lt;/li&gt;
  &lt;li&gt;customer_id:شناسه خریدار/مشتری&lt;/li&gt;
  &lt;li&gt;amount: قیمت سبد خرید&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;CREATE TABLE `baskets` ( 
	`id` INT UNSIGNED NOT NULL AUTO_INCREMENT ,
	`customer_id` INT UNSIGNED NOT NULL ,
	`amount` INT UNSIGNED NOT NULL ,
	PRIMARY KEY (`id`)
);
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;(برای خلاصه سازی از مابقی جزئیات همچون ریلیشن ها فاکتور میگیریم)
حالا یک تریگر مینویسیم که بعد از ثبت هر خرید مبلغ خرید amount را از اعتبار حساب مشتری credit کم کند.
برای تست یک مشتری به صورت زیر تعریف میکنیم:&lt;/p&gt;
&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;INSERT INTO `customers` (`id`, `name`, `credit`) VALUES (NULL, 'Mahmoud', '1000000');
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;اگر از تریگر استفاده نمیکردیم میبایست بعد از درج هر خرید به صورت دستی کوئری زیر را اجرا میکردیم&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;UPDATE `customers` 
    SET `customers`.`credit`=`customers`.`credit` -  $BasketAmount
    WHERE `customers`.`id` = $CustomerId;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;حال این کوئری رو در تریگر After Insert جدول خریدها قرار میدهیم که بعد از اعمال هر خرید خودکار این کار را انجام دهد:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;CREATE TRIGGER `MyExampleName` AFTER INSERT ON `baskets`
FOR EACH ROW BEGIN
    UPDATE `customers` 
        SET `customers`.`credit`=`customers`.`credit` - NEW.`amount` 
        WHERE `customers`.`id` = NEW.`customer_id`;
END
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;دستور بالا تریگری رو تعریف میکنه که بعد از ورود داده در جدول baskets کوئری Update میگیره روی جدول مشتریها و با&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;`customers`.`credit`=`customers`.`credit` - NEW.`amount`
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;مبلغ خرید رو از حساب مشتری کم میکنه و برای پیدا کردن مشتری از کاندیشن&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt; WHERE `customers`.`id` = NEW.`customer_id`;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;استفاده میکنیم که مشتری مربوط به خریدمون رو پیدا کنه و کوئری رو روش اجرا کنه.&lt;/p&gt;

&lt;p&gt;اگر بخواهیم از دستورات چند خطی و یا چند دستور در تریگر استفاده کنیم نیاز هست که از BEGIN  و END برای مشخص کردن ابتدا و انتهای دستورات استفاده کنیم در غیر اینصورت استفاده از اونها برای کوئریهای تک دستوری الزامی نیست.
با  NEW.نام ستون  میتونیم داخل تریگیر به مقادیر ستونهای اون رکوردی که تریگر داره روش اجرا میشه میتونیم دسترسی پیدا کنیم.
البته در تریگرهای آپدیت هم به NEW و هم به OLD دسترسی داریم که مقادیر قدیم و جدید هر ستون رو بر میگردونن و در تریگر حذف هم فقط به OLD.نام_ستون دسترسی داریم.
به طور کلی&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;CREATE TRIGGER `نام دلخواه` AFTER INSERT ON `نام جدول`
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;برای ساخت یک تریگر از اسلوب فوق استفاده میکنیم که برای تعیین زمان/نوع تریگر میتونیم از:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;AFTER INSERT&lt;/li&gt;
  &lt;li&gt;BEFORE INSERT&lt;/li&gt;
  &lt;li&gt;AFTER UPDATE&lt;/li&gt;
  &lt;li&gt;BEFORE UPDATE&lt;/li&gt;
  &lt;li&gt;AFTER DELETE&lt;/li&gt;
  &lt;li&gt;BEFORE DELETE&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;که از اسامی آنها مشخص هست برای چه رخدادی تعریف میشوند و واضح هستش نیازی به ترجمه هم نداره!
دستورات شرطی مثل تعریف متغیرهای DECLARE و دستورات شرطی IF THEN/ELSE و حلقه ها و سایر دستورات برنامه نویسی یا کوئری نویسی رو میشه داخل تریگر اجرا کرد.&lt;/p&gt;

&lt;p&gt;اگر موقع ثبت کوئری ساخت تریگر دچار مشکل شدید به خاطر این هستش که جدا کننده‌ی زبانSQL پیشفرض سمی‌کالن هستش که با سمیکالن داخل دستورات دچار تداخل میشه که برای جلوگیری از این اتفاق باید Delimiter کوئری رو از حالت پیشفرض به یک چیز دیگه مثلاً $$ تغییر بدید.
مثل:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;DELIMITER $$;
Trigger Query 
$$
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;که سیمکالن با این روش دور میخوره و خطا نمیده.&lt;/p&gt;

&lt;p&gt;منتظر فیدبکهاتون هستم.&lt;/p&gt;</content><author><name>محمود اسکندری</name></author><category term="mysql" /><category term="database" /><category term="دیتابیس" /><summary type="html"></summary></entry><entry><title type="html">ری‌اکت برای تازه‌کارها - بخش یک</title><link href="http://pullrequest.ir/%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87-%DA%A9%D8%A7%D8%B1%D9%87%D8%A7-%D8%A8%D8%AE%D8%B4-%DB%8C%DA%A9/" rel="alternate" type="text/html" title="ری‌اکت برای تازه‌کارها - بخش یک" /><published>2018-04-25T00:00:00+00:00</published><updated>2018-04-25T00:00:00+00:00</updated><id>http://pullrequest.ir/%D8%B1%DB%8C%E2%80%8C%D8%A7%DA%A9%D8%AA%20%D8%A8%D8%B1%D8%A7%DB%8C%20%D8%AA%D8%A7%D8%B2%D9%87%E2%80%8C%DA%A9%D8%A7%D8%B1%D9%87%D8%A7%20-%20%D8%A8%D8%AE%D8%B4%20%DB%8C%DA%A9</id><content type="html" xml:base="http://pullrequest.ir/%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87-%DA%A9%D8%A7%D8%B1%D9%87%D8%A7-%D8%A8%D8%AE%D8%B4-%DB%8C%DA%A9/">&lt;p&gt;اگر در یک سال اخیر در مورد تکنولوژی‌های وب مطالعه کردید، پس احتمالا با فریم‌ورک &lt;a href=&quot;https://reactjs.org&quot;&gt;React&lt;/a&gt; در حد خوبی آشنایی دارید. یکی از شکایت‌هایی که تازه واردان در مورد ری‌اکت می‌کنند اینه که «چرا اینقدر شروع و ساخت یک پروژه باهاش دنگ و فنگ داره؟» که خب البته راه‌های زیادی برای فائق اومدن بر این پیچیدگی‌ها ارائه شده.&lt;/p&gt;

&lt;p&gt;اولین راه استفاده از یک CDN هست. شما می‌تونید فقط لینک یک تگ &lt;code class=&quot;highlighter-rouge&quot;&gt;&amp;lt;script&amp;gt;&lt;/code&gt; رو توی فایل HTML تون کپی کنید و بعدش از ری‌اکت استفاده کنید.&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;script &lt;/span&gt;&lt;span class=&quot;na&quot;&gt;src=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;script &lt;/span&gt;&lt;span class=&quot;na&quot;&gt;src=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;script &lt;/span&gt;&lt;span class=&quot;na&quot;&gt;src=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;خب البته انگار یک تگ نیست :)) حقیقتا سه تا تگ هست.&lt;/p&gt;
&lt;ol&gt;
  &lt;li&gt;اولین تگ، برای وارد کردن خود react.&lt;/li&gt;
  &lt;li&gt;دومی react-dom که رندر کردن کدهامون توی مرورگر بهش نیاز داریم.&lt;/li&gt;
  &lt;li&gt;سومی هم &lt;a href=&quot;https://babeljs.io&quot;&gt;Babel&lt;/a&gt; هست. babel یک ترنسپایلر (&lt;em&gt;transpiler&lt;/em&gt;) هست که وظیفه داره کد ES6 و ES7 ما رو به ES5 قابل فهم برای مرورگر تبدیل کنه. با استفاده از Babel ما می‌تونی کدمون رو با آخرین استانداردها (از جمله استانداردهای React مثل JSX) بنویسیم و نگران این نباشیم که مرورگرهای قدیمی نمی‌تونن اون رو اجرا کنن.&lt;/li&gt;
&lt;/ol&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;h1&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;wrapper&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Hello&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Pullrequest&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;ir&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;!&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/h1&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;  &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;


&lt;span class=&quot;nx&quot;&gt;ReactDOM&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
  &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getElementById&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'root'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/script&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;حالا می‌تونیم کدهای ری‌اکتمون رو مثل مثال بالا توی یک تگ اسکریپت (که البته باید ویژگی typeاش رو برابر با «text/babel» قرار بدیم)  بنویسیم و برنامه رو اجرا کنیم:&lt;/p&gt;
&lt;p data-height=&quot;294&quot; data-theme-id=&quot;dark&quot; data-slug-hash=&quot;zjBWXZ&quot; data-default-tab=&quot;js,result&quot; data-user=&quot;mehrad77&quot; data-embed-version=&quot;2&quot; data-pen-title=&quot;استفاده از ری‌اکت با سی‌دی‌ان&quot; class=&quot;codepen&quot;&gt;See the Pen &lt;a href=&quot;https://codepen.io/mehrad77/pen/zjBWXZ/&quot;&gt;استفاده از ری‌اکت با سی‌دی‌ان&lt;/a&gt; by Mehrad (&lt;a href=&quot;https://codepen.io/mehrad77&quot;&gt;@mehrad77&lt;/a&gt;) on &lt;a href=&quot;https://codepen.io&quot;&gt;CodePen&lt;/a&gt;.&lt;/p&gt;
&lt;script async=&quot;&quot; src=&quot;https://static.codepen.io/assets/embed/ei.js&quot;&gt;&lt;/script&gt;

&lt;p&gt;اما خب اینجوری کلی از امکاناتی که کار با ری‌اکت رو راحت‌تر و کارامد می‌کنه رو از دست می‌دید و خوب نیست که یک پروژه بزرگ رو به این شکل پیش ببریم.&lt;/p&gt;

&lt;p&gt;راه مناسب‌تر استفاده از ابزارهایی مثل &lt;a href=&quot;https://webpack.js.org&quot;&gt;Webpack&lt;/a&gt; و &lt;a href=&quot;https://www.npmjs.com&quot;&gt;NPM&lt;/a&gt; هست تا خیلی شیک و راحت بتونید از همه‌ی امکانات پیشرفته و کارآمدی که ازشون حرف زدیم استفاده کنید، اما باز برگشتیم سر خونه اول :) راه اندازی و استفاده از &lt;a href=&quot;https://webpack.js.org&quot;&gt;وب‌پک&lt;/a&gt; برای یک تازه کار واقعا کار آسونی نیست.&lt;/p&gt;

&lt;p&gt;من می‌خوام در این مجموعه نوشته، راهکاری بهتون معرفی کنم که بتونیم این سختی نصب و تنظیم Webpack / Babel  / NPM / React رو آسون کنیم. اسم این ابزار &lt;a href=&quot;https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html&quot;&gt;create-react-app&lt;/a&gt; است.&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;نوشته‌ای که مشفول خواندن آن هستید برداشتی آزاد از نوشته‌ای از &lt;a href=&quot;https://medium.com/in-the-weeds/learning-react-with-create-react-app-part-1-a12e1833fdc&quot;&gt;براندون ریچی&lt;/a&gt; است.  می‌تونید برای خواندن مقاله به زبان اصلی، به پیوند مراجعه کنید.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h1 id=&quot;مخاطبین-این-آموزش&quot;&gt;مخاطبین این آموزش&lt;/h1&gt;

&lt;p&gt;این مقاله آموزشی به درد افرادی می‌خوره که  با نصب و استفاده nodejs / npm آشنایی نسبی و  پیش‌زمینه‌ای در Javascript و CSS دارند. همچنین اگر شما با ری‌اکت آشنایی دارید، احتمالا چیز زیادی از (حداقل این قسمت) این آموزش یاد نخواهید گرفت.&lt;/p&gt;

&lt;p&gt;اگر nodejs یا npm را روی دستگاه نصب ندارید می‌تونید روش‌های نصب و استفاده رو از https://nodejs.org دنبال کنید.
اگر جاوااسکریپت بلد نیستید هم می‌تونید از طریق &lt;a href=&quot;https://sokanacademy.com/courses/javascript/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA&quot;&gt;دوره آموزشی جاوااسکریپت سایت سکان آکادمی&lt;/a&gt;، کلیات این زبان رو فرا بگیرید.&lt;/p&gt;

&lt;p&gt;برای بهره وری از ری‌اکت در بهتری حالت بهتره که به &lt;a href=&quot;https://medium.com/quick-code/the-best-tutorials-to-learn-ecmascript-es6-for-beginners-55fe602382cd&quot;&gt;استاندارد ES6 هم مسلط باشید&lt;/a&gt;، هرچند که من هر جا نیاز باشه اشاره‌ای بهش خواهم کرد، اما اگه با ES6 آشنا نباشید ممکنه گیج بشید.&lt;/p&gt;

&lt;h1 id=&quot;وبپک&quot;&gt;وب‌پک&lt;/h1&gt;
&lt;p&gt;وب پک (webpack) یک &lt;a href=&quot;https://medium.freecodecamp.org/javascript-modules-part-2-module-bundling-5020383cf306&quot;&gt;ماژول باندلر&lt;/a&gt; قدرتمند برای برنامه های مدرن جاوا اسکریپته. وقتی وب‌پک برنامه شما را پردازش می کنه، یک گراف وابستگی از هر ماژولی که برنامه شما نیاز دارد، می‌سازه، سپس تمام اون‌ها را توی فایل‌های باندل کوچکی قرار می‌ده که توسط مرورگر لود می‌شن. وب‌پک کارهایی دیگه‌ای مثل ترنسپایل کردن ماژول‌ها، بسته بندی ماژول‌ها، Minify کردنشون و … رو هم انجام می‌ده.
برای آشنایی بیشتر با وب‌پک می‌تونید ویدیوی زیر رو مشاهده کنید:&lt;/p&gt;
&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube-nocookie.com/embed/nfmvexyoHXE?rel=0&quot; frameborder=&quot;0&quot; allow=&quot;autoplay; encrypted-media&quot; allowfullscreen=&quot;&quot;&gt;&lt;/iframe&gt;

&lt;h2 id=&quot;حالا-create-react-app-چیه&quot;&gt;حالا create-react-app چیه؟&lt;/h2&gt;
&lt;p&gt;ابزار create-react-app &lt;strong&gt;( که از حالا به بعد به شکل خلاصه بهش می‌گم &lt;em&gt;CRA&lt;/em&gt;)&lt;/strong&gt; راه‌حلی برای آسون کردنِ پیچیدگی شروع ساخت یک پروژه ری‌اکته. مجموعه‌ای از پیش‌آماده  از ابزارهایی مثل &lt;a href=&quot;https://webpack.js.org&quot;&gt;Webpack&lt;/a&gt; و &lt;a href=&quot;https://babeljs.io&quot;&gt;Babel&lt;/a&gt; و &lt;a href=&quot;https://reactjs.org&quot;&gt;React&lt;/a&gt; است که کمک می‌کنه با یک دستور، یک محیط فوق‌العاده و آماده داشته باشید که بتونید شروع به استفاده از ری‌اکت کنید و وقتتون رو صرف تنظیم و نصب این ابزارها نکنید.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://image.ibb.co/hn9cEH/twt_react3.jpg&quot; alt=&quot;اگه می‌خواهید پیچیدگی توصیف شده رو درک کنید، این توییت کمکتون می‌کنه&quot; /&gt;&lt;/p&gt;

&lt;p&gt;البته این آماده سازی و قبول کردن مسئولیت تمام تنظیمات پروژه باعث نمی‌شه که CRA فقط به درد تازه‌کارها بخوره. در حقیقت CRA یک دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;eject&lt;/code&gt; داره که باعث می‌شه هر وقت که دیگه نیازی به تنظیمات اولیه نداشتید پروژه رو از دستش بگیرید و CRA رو از برنامه‌تون خارج کنید تا هر جور که دلتون خواست ادامه بدید.&lt;/p&gt;

&lt;h1 id=&quot;نصب-cra&quot;&gt;نصب CRA&lt;/h1&gt;
&lt;p&gt;با در نظر گرفتن اینکه شما از قبل npm را نصب کرده‌اید، می‌توانید با دستور زیر این ابزار رو نصب کنیم:&lt;/p&gt;
&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;npm &lt;span class=&quot;nb&quot;&gt;install&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-g&lt;/span&gt; create-react-app
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;یا اگه به جای npm از &lt;a href=&quot;https://medium.com/@nikjohn/facebooks-yarn-vs-npm-is-yarn-really-better-1890b3ea6515&quot;&gt;yarn&lt;/a&gt; استفاده می‌کنید (که &lt;a href=&quot;https://www.sitepoint.com/yarn-vs-npm/&quot;&gt;پیشنهاد&lt;/a&gt; می‌کنم این کار رو کنید)، می‌تونید با دستور زیر به شکل گلوبال این ابزار رو نصب کنید:&lt;/p&gt;
&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;yarn global add create-react-app
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;برای اینکه امتحان کنیم که به شکل درست نصب شد یا نه، می‌تونیم از دستور زیر استفاده کنیم:&lt;/p&gt;
&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;create-react-app &lt;span class=&quot;nt&quot;&gt;--version&lt;/span&gt;
	create-react-app version: 1.4.3
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h1 id=&quot;ساخت-یک-پروژه-ریاکت-با-آن&quot;&gt;ساخت یک پروژه ری‌اکت با آن&lt;/h1&gt;
&lt;p&gt;اگر نام پروژه شما hello-world باشد، ساخت یک پروژه به سادگی زیر است:&lt;/p&gt;
&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;create-react-app hello-world

&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;...&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt;

Success! Created hello-world at .../dev/create-react-app/hello-world
Inside that directory, you can run several commands:
yarn start
    Starts the development server.
yarn build
    Bundles the app into static files &lt;span class=&quot;k&quot;&gt;for &lt;/span&gt;production.
yarn &lt;span class=&quot;nb&quot;&gt;test
    &lt;/span&gt;Starts the &lt;span class=&quot;nb&quot;&gt;test &lt;/span&gt;runner.
yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you &lt;span class=&quot;k&quot;&gt;do &lt;/span&gt;this, you can’t go back!
We suggest that you begin by typing:
&lt;span class=&quot;nb&quot;&gt;cd &lt;/span&gt;hello-world
  yarn start
Happy hacking!
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;راهنمایی که در انتها چاپ می‌شه خیلی مهمه. چهار دستور مهمی که توی این ابزار استفاده می‌شه عبارت است از start، build، test و eject. 
با اینکه در خروجی نصب توضیحات مناسبی ارائه شده اما بیایید یه بار دیگه اون‌ها رو مرور کنیم:&lt;/p&gt;

&lt;h1 id=&quot;yarn-start&quot;&gt;&lt;strong&gt;yarn start&lt;/strong&gt;&lt;/h1&gt;
&lt;p&gt;این دستور باعث می‌شه این ابزار یک وب‌سرور کوچولو راه‌اندازی کنه که پروژه‌تون رو توی مرورگر بهتون نشون بده. این دستور یک وب سرور مخصوص توسعه محلی توی آدرس http://localhost:3000 براتون می‌سازه که می‌تونید شمای پروژه رو ببینید و با هر تغیری که توی کدتون بدید، به شکل خودکار سرور رو ریفرش کنه. 
&lt;img src=&quot;https://cdn-images-1.medium.com/max/800/1*Qcry5pCXIy2KeNRsq3w7Bg.png&quot; alt=&quot;صفحه پیشفرضی که احتمالا خواهید دید&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;yarn-build&quot;&gt;&lt;strong&gt;yarn build&lt;/strong&gt;&lt;/h1&gt;
&lt;p&gt;در توضیحات نوشته «Bundles the app into static files for production». اگر با تا به حال با ابزارهایی مثل &lt;a href=&quot;https://gulpjs.com&quot;&gt;گالپ&lt;/a&gt; یا وب‌پک کار کرده باشید و با فرایند آشنا باشید، احتمالا می‌دونید که اینها چه معنایی داره . این دستور تمام جاواسکریپت‌هایی (و چیزهایی دیگه‌ای) که توی برنامه‌تون نوشتید رو می‌گیره، تبدیلشون می‌کنه به زبونی که مرورگر بتونه اجراشون کنه و سپس، در &lt;strong&gt;یک فایل&lt;/strong&gt; اون‌ها رو فشرده می‌کنه این کار باعث می‌شه که بر خلاف نسخه‌ای که برای توسعه روی کامپیوتر خودتون اجرا می‌کنید، نسخه build بسیار فشرده و کم‌حجم بشه که بتونید با خیال راحت اون رو توی هاستتون بارگذاری، و برنامه رو آنلاین کنید!&lt;/p&gt;
&lt;h1 id=&quot;yarn-test&quot;&gt;&lt;strong&gt;yarn test&lt;/strong&gt;&lt;/h1&gt;
&lt;p&gt;بزارید یه خبر خیلی خوب بهتون بدم! از نسخه 0.3.0 به بعد، این ابزار کتاب‌خونه تست‌نویسی &lt;a href=&quot;https://facebook.github.io/jest/&quot;&gt;Jest&lt;/a&gt; رو هم به ابزارهایی که نصب و تنظیم می‌کنه اضافه کرده تا دیگه حتی برای برای تست نوشتن هم نیاز به نصب و تنظیم چیز اضافه‌ای نداشته باشید. با این دستور می‌تونید تست‌هاتون رو اجرا کنید و نتیجه رو ببینید.
همین الان به مجموعه فایل‌هایی که دارید نگاه کنید، احتمالا چیزی شبیه به این خواهید دید:
&lt;img src=&quot;https://cdn-images-1.medium.com/max/800/1*g-MbFVvZbj_nBRSrogEOgg.png&quot; alt=&quot;یک پروژه ساخته شده با این ابزار&quot; /&gt;&lt;/p&gt;

&lt;p&gt;اگر دقت کنید یک فایل جاواسکریپت با نام &lt;code class=&quot;highlighter-rouge&quot;&gt;App.js&lt;/code&gt; و یک فایل تست با نام &lt;code class=&quot;highlighter-rouge&quot;&gt;App.test.js&lt;/code&gt; توی پروژه وجود دارن. پس با اجرای دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;yarn test&lt;/code&gt;، احتمالا خروجی مثل خروجی زیر بگیرید:
&lt;img src=&quot;https://image.ibb.co/bAL3eH/test.png&quot; alt=&quot;اجرای دستور تست&quot; /&gt;&lt;/p&gt;

&lt;p&gt;همونطور که دیدید، دستور test، تست‌های برنامه رو شناسایی و اجرا کرد. شما می‌تونید با استفاده از Jest هر تستی که می‌خواهید رو برای کد‌های برنامه تون بنویسید. یه رازی رو بهتون می‌گم و این رو از من به نصیحت داشته باشید، اگه خودتون می‌خواستید همه این‌ها رو سر هم کنین واقعا عذاب الیمی می‌کشیدید :) پس قدر این راحتی رو بدونید و برای همه‌ی کامپوننت‌هاتون تست بنویسید :)&lt;/p&gt;

&lt;p&gt;#&lt;strong&gt;yarn eject&lt;/strong&gt;
«این ابزار و وابستگی‌های آن را حدف می‌کند و فایل‌های پیکربندی و اسکریپت را در دایرکتوری برنامه قرار می‌دهد. اگر این کار را بکنی، راه برگشتی وجود ندارد!». خب، توضیح مناسبی بود.
اونچه که این دستور انجام می‌ده اینه که برنامه شما رو از چارچوب  &lt;strong&gt;create-react-app&lt;/strong&gt; بیرون میاره و به یک چارچوب وب‌پک استاندارد  تبدیل می‌کنه. این کار به این به شما این امکان را می‌ده که در صورت نیاز بتونید ابزارهایی رو حذف/اضافه کنید و دست‌‌کاری‌های پیشرفته‌ای رو که مي‌خواهید، انجام بدید. می‌تونید بهش به این شکل نگاه کنید که میاد و داربست‌های CRA رو بر می‌داره و برنامه شما رو در کنترل خودتون می‌زاره.
البته با توجه به گستردگی و پوشش فوق‌العاده‌ای که مستندات CRA برای اکثر ابزارها ارائه داده، شما تقریبا (مگر در مواردی واقعا خاص) نیازی به خروج از این چارچوب ندارید.&lt;/p&gt;

&lt;h1 id=&quot;آشنایی-با-ساختار-برنامه&quot;&gt;آشنایی با ساختار برنامه&lt;/h1&gt;
&lt;p&gt;خب، بیایید دوباره ساختار پروژه رو نگاه کنیم:
&lt;img src=&quot;https://cdn-images-1.medium.com/max/800/1*g-MbFVvZbj_nBRSrogEOgg.png&quot; alt=&quot;ساختار پیشفرض&quot; /&gt;&lt;/p&gt;

&lt;p&gt;ابزار CRA برای شما یک فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;README.md&lt;/code&gt; ساخته که توش راهنمایی جامع از کل برنامه رو ارائه داده. هر وقت به مشکلی برخوردید یا جایی از ابزار براتون مبهم بود می‌تونید به این فایل مارک‌داون مراجعه کنید. در پوشه &lt;code class=&quot;highlighter-rouge&quot;&gt;public/&lt;/code&gt; فایل‌های استاتیک برنامه مثل &lt;code class=&quot;highlighter-rouge&quot;&gt;favicon.ico&lt;/code&gt; یا &lt;code class=&quot;highlighter-rouge&quot;&gt;index.html&lt;/code&gt; (که کد ری‌اکت ما در این فایل رندر می‌شه) رو می‌بینید.&lt;/p&gt;

&lt;p&gt;بزارید داخل فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;index.html&lt;/code&gt; رو یه نگاهی بندازیم:&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;cp&quot;&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;html&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;lang=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;en&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;meta&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;charset=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;utf-8&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;meta&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;name=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;viewport&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;content=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;meta&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;name=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;theme-color&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;content=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;#000000&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;

    &lt;span class=&quot;nt&quot;&gt;&amp;lt;link&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;rel=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;manifest&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;href=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;%PUBLIC_URL%/manifest.json&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;link&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;rel=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;shortcut icon&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;href=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;%PUBLIC_URL%/favicon.ico&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
   
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;title&amp;gt;&lt;/span&gt;React App&lt;span class=&quot;nt&quot;&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;noscript&amp;gt;&lt;/span&gt;
      You need to enable JavaScript to run this app.
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;/noscript&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;id=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;root&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
   
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;مهم‌ترین جزء&lt;/strong&gt; این کد HTML، برچسب &lt;code class=&quot;highlighter-rouge&quot;&gt;&amp;lt;div id=”root”&amp;gt;&lt;/code&gt; هست. داخل این برچسب هست که قراره کد ری‌اکت ما Render بشه. 
به جز این‌ها ما فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;package.json&lt;/code&gt; رو داریم که وابستگی‌ها و اطلاعات کلی برنامه‌مون اونجا قرار داره. توی پوشه &lt;code class=&quot;highlighter-rouge&quot;&gt;node_modules/&lt;/code&gt; هم تمامی وابستگی‌هایی که برنامه ما بهشون نیاز داره قرار داده شدن که با دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;yarn install&lt;/code&gt; نصبشون کردیم. تقریبا هیچوقت نیاز نیست در محتوای این دایرکتوری دست ببرید.&lt;/p&gt;

&lt;p&gt;اما مهم‌ترین دایرکتوری برای ما، دایرکتوری &lt;code class=&quot;highlighter-rouge&quot;&gt;src/&lt;/code&gt; هست. اکثر کدهای جاوااسکریپت ما قراره که توی این پوشه قرار داده بشن که محتواش رو جلوتر بررسی می‌کنیم.&lt;/p&gt;

&lt;p&gt;فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;index.js&lt;/code&gt; حاوی فرخوان &lt;code class=&quot;highlighter-rouge&quot;&gt;Render&lt;/code&gt; برنامه ما از &lt;code class=&quot;highlighter-rouge&quot;&gt;ReactDOM&lt;/code&gt; هست که فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;App.js&lt;/code&gt; ما رو می‌خونه ( که درش کدهای اصلی برنامه‌مون قرار داره). و همچنین به &lt;code class=&quot;highlighter-rouge&quot;&gt;ReactDOM&lt;/code&gt; می‌گه کجا این‌ها رو نشون بده. ( اون &lt;code class=&quot;highlighter-rouge&quot;&gt;&amp;lt;div id=”root”&amp;gt;&lt;/code&gt; رو که یادتونه؟) &lt;code class=&quot;highlighter-rouge&quot;&gt;index.css&lt;/code&gt; هم استایل‌های کلی رو نگه‌داری می‌کنه.
و اما &lt;code class=&quot;highlighter-rouge&quot;&gt;App.js&lt;/code&gt;، نخستین کامپوننت ری‌اکت ما هست که جلوتر باهاش کار داریم. &lt;code class=&quot;highlighter-rouge&quot;&gt;App.css&lt;/code&gt; استایل‌های مربوط به این کامپوننت به خصوص را شامل می‌شه و تصویر &lt;code class=&quot;highlighter-rouge&quot;&gt;logo.svg&lt;/code&gt; هم فقط لوگوی ری‌اکته، نه چیزی بیشتر. &lt;code class=&quot;highlighter-rouge&quot;&gt;App.test.js&lt;/code&gt; هم که قبلا در موردش صحبت کردیم یک فایل تست نمونه برای کامپوننت &lt;code class=&quot;highlighter-rouge&quot;&gt;App.js&lt;/code&gt; هست.&lt;/p&gt;

&lt;h1 id=&quot;ساخت-نخستین-کامپوننت&quot;&gt;ساخت نخستین کامپوننت&lt;/h1&gt;
&lt;p&gt;حالا شروع کنیم به کد زدن. اول توی دایرکتوری پروژه توی ترمینال دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;yarn start&lt;/code&gt; یا &lt;code class=&quot;highlighter-rouge&quot;&gt;npm start&lt;/code&gt; رو بزنید تا وب‌سرور توسعه ما شروع به کار کنه و توی مرورگر بتونم نتیجه پروژه‌مون رو ببینیم.. حالا بیایید یه کار باحال کنیم. تمام محتوای &lt;code class=&quot;highlighter-rouge&quot;&gt;App.js&lt;/code&gt; و &lt;code class=&quot;highlighter-rouge&quot;&gt;App.css&lt;/code&gt; رو پاک کنید تا از اول بنویسیمشون! پس این دو فایل رو باز کنید و محتواشون رو خالی کنید.
 وقتی از استاندارد ES6 استفاده می‌کنید، دو راه وجود داره تا کامپوننت بسازید. از طریق &lt;strong&gt;فانکشن‌ها&lt;/strong&gt; یا از طریق &lt;strong&gt;کلاس‌های ES6&lt;/strong&gt;. در این قسمت ما کامپوننتمون رو با استفاده فانکشنم می‌سازیم و در قسمت بعد اون رو با class بازنویسی می‌کنیم تا تفاوت‌هاشون رو متوجه شیم.&lt;/p&gt;

&lt;p&gt;هر دو روش نیازمند این هستند که خود کتابخونه ری‌اکت رو وارد کامپوننتمون کنیم. پس داخل فایل کامپوننتمون (در &lt;code class=&quot;highlighter-rouge&quot;&gt;src/App.js&lt;/code&gt;) این خط رو اضافه کنید:&lt;/p&gt;
&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;import React from &lt;span class=&quot;s1&quot;&gt;'react'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;و تمام! ما هرچیزی که از ری‌اکت نیاز داریم برای ساخت کامپوننت‌ها رو در دسترس داریم! دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;import&lt;/code&gt; کتابخونه ری‌اکت که قبلا با دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;yarn install&lt;/code&gt; به شکل خودکار توی پوشه &lt;code class=&quot;highlighter-rouge&quot;&gt;node_modulse&lt;/code&gt; نصب کرده بودیم رو در متغیر &lt;code class=&quot;highlighter-rouge&quot;&gt;React&lt;/code&gt; در دسترس ما قرار می‌ده.
حالا فانکشن کامپوننت رو بنویسیم:&lt;/p&gt;
&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
	&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
		&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;wrapper&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Hello&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;World&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;!&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/div&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;	&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;blockquote&gt;
  &lt;p&gt;با همین ۵ خط ما تا خرخره توی ES6 فرو رفتیم :) اگه با سینتکس ES6 آشنا نیستید پیشنهاد می‌کنم بیش از ادامه دادن به آموزش در موردش مطالعه کنید و ویژگی‌هاش رو یاد بگیرید.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;ما ابتدا با دستور const، کامپوننتمون با نام App رو داخل یک ثابت تعریف کردیم (از اونجایی که قرار نیست در حین اجرای اپلیکیشن اون رو تغیر بدیم، پس تعریف یک ثابت کار خوبیه). تعریف کامپوننت رو با استفاده از یک &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions&quot;&gt;Arrow Function&lt;/a&gt; انجام دادیم که از ویژگی‌های خوب ES6 هست. فانکشن ما هیچ آرگومانی نمی‌گیره. هر کامپوننتی که به شکل فانکشن تعریف می‌کنیم باید حتما یک JSX رو به ما با دستور return برگردونه.  و یادتون باشه که همیشه محتوای JSX تون رو داخل &lt;strong&gt;پرانتز&lt;/strong&gt; قرار بدید. پرانتز فقط هنگامی که جی‌اس‌اکس چند خطی داشته باشید الزامی هست، اما این تمرین خوبیه که همیشه ازش استفاده کنید تا از اشتباهاتی که ممکنه پیش بیاد جلوگیری کنید.  همچنین با استفاده از &lt;code class=&quot;highlighter-rouge&quot;&gt;className=&quot;App&quot;&lt;/code&gt; یک کلاس CSS به کامپوننتمون می‌دیم. نکته مهم اینه که از اونجایی که class توی زبان جاوا‌اسکریپت یک واژه رزرو شده‌ست، همیشه برای تعین کلاس باید از واژه className استفاده کنیم.&lt;/p&gt;

&lt;h1 id=&quot;این-jsx-که-میگی-چی-هست-اصلا&quot;&gt;این JSX که می‌گی، چی هست اصلا؟&lt;/h1&gt;
&lt;blockquote&gt;
  &lt;p&gt;اگه می‌دونید JSX چیه می‌تونید این بخش رو رد کنید، اگر نه این خلاصه رو بخونید تا درک بهتری داشته باشید.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;جی‌اس‌اکس (JSX) یک زبان الگویی (templating) است که خیلی به HTML شباهت داره. این زبان به شما این امکان رو می‌ده که برای کامپوننت‌هاتون الگوهایی رو بنویسی که خیلی شبیه HTML هستند اما یک سری تفاوت‌ها داره. اول اینکه شما می‌تونید توی الگوهاتون هر جایی که خواستید از با استفاده از آکولاد (از این‌ها: {}) از جاواسکریپت استفاده کنید. دوم اینکه، برخی از کلمه‌ها در جاوااسکریپت از قبل رزرو شدن و جزو خود زبان هستند، (مثل class) بنابراین از یک سری مشخصه‌های دیگه (مثل className) به جای اون‌ها استفاده می‌کنیم.&lt;/p&gt;

&lt;p&gt;علاوه بر این، وقتی که شما دارید توی دستور return تون یک JSX بر می‌گردونید، شما فقط باید &lt;strong&gt;یکدونه&lt;/strong&gt; المان رو بگردونید. برای مثال اگر این کار رو بکنید:
&lt;img src=&quot;https://image.ibb.co/gYqr1x/must_wrap.png&quot; alt=&quot;یک کار اشتباه&quot; /&gt;&lt;/p&gt;

&lt;p&gt;خطای زیر رو دریافت می‌کنید:
&lt;img src=&quot;https://image.ibb.co/mXDpoc/must_wrap_error.png&quot; alt=&quot;داداش داری اشتباه می‌زنی.&quot; /&gt;&lt;/p&gt;

&lt;p&gt;که برای رفع این مشکل می‌تونید کل JSXتون رو داخل یک &lt;code class=&quot;highlighter-rouge&quot;&gt;&amp;lt;div&amp;gt;&lt;/code&gt; مادر قرار بدید:
&lt;img src=&quot;https://image.ibb.co/jaWygx/now_wrapped.png&quot; alt=&quot;مشکل حل شد.&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;ادامه-کار&quot;&gt;ادامه کار&lt;/h1&gt;
&lt;p&gt;خب برگردیم که ادامه ساخت کامپوننتمون. الان اگه به خروجی مرورگر نگاه کنید هنوز هم نمی‌تونید کامپوننتمون رو ببینید.
در ES6 باید یک کار دیگه هم بکنیم تا بتونیم این امکان رو به باقی فایل‌ها بدیم تا بتونن به داخل فایل ما دسترسی داشته باشن و اون کار &lt;strong&gt;اکسپورت&lt;/strong&gt; (&lt;strong&gt;export&lt;/strong&gt;)‌ هست!&lt;/p&gt;

&lt;p&gt;در انتهای فایل خط زیر را اضافه کنید:&lt;/p&gt;
&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;با این خط کامپوننتمون رو که توی ثابت App ساخته بدویم استخراج می‌کنیم. حالا اگه فایل رو سیو کنید و برگردید به مرورگرتون می‌تونید کامپوننتمون رو ببینیم که صحیح و سالم داره نشون داده می‌شه.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://image.ibb.co/jSkv1x/hello_world.png&quot; alt=&quot;اولین کامپوننت صحیح و سالممون!&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;افزودن-css-به-کامپوننتمون&quot;&gt;افزودن CSS به کامپوننتمون&lt;/h1&gt;
&lt;p&gt;کامپوننتمون خیلی ساده و سفیده. پس بیایید فایل CSSای که توی پروژه‌مون وجود داره (در آدرس: &lt;code class=&quot;highlighter-rouge&quot;&gt;src/App.js&lt;/code&gt;) رو بهش وصل کنیم و چند خطی CSS بنویسیم. 
برای وارد کردن فایل CSS به پروژه‌مون باید با دستور &lt;code class=&quot;highlighter-rouge&quot;&gt;import&lt;/code&gt; به شکل زیر این کار رو انجام بدیم.&lt;/p&gt;
&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'./App.css'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;حالا وارد فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;src/App.css&lt;/code&gt; بشید و کلاس زیر را وارد کنید:&lt;/p&gt;
&lt;div class=&quot;language-css highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nc&quot;&gt;.wrapper&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
	&lt;span class=&quot;nl&quot;&gt;border&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;2px&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;solid&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;black&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;nl&quot;&gt;text-align&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;center&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;nl&quot;&gt;background&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;#f5f5f5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;nl&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;#333&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;nl&quot;&gt;margin&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;20px&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;nl&quot;&gt;padding&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;20px&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;با ذخیره کردن فایل و چک کردن صفحه مرورگر وب‌سرور توسعه‌ام می‌تونیم صفحه خوشگل و با سی‌اس‌اس‌مون رو به شکل زیر ببینیم:
&lt;img src=&quot;https://image.ibb.co/bEha1x/hello_world2.png&quot; alt=&quot;برای شروع همچین بدم نیست :)&quot; /&gt;&lt;/p&gt;

&lt;p&gt;خب!‌ پس ما الان مراحل ساخت یک کامپوننت ساده رو فهیدیم و اون رو پیاده‌سازی کردیم. بیایید در انتها ببینیم که این کامپوننتمون داخل فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;index.js&lt;/code&gt; چجوری داره نمایش داده می‌شه.
فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;src/index.js&lt;/code&gt; رو باز کنید و داخلش رو نگاه کنید:&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'react'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ReactDOM&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'react-dom'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'./index.css'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'./App'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;registerServiceWorker&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'./registerServiceWorker'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;nx&quot;&gt;ReactDOM&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getElementById&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'root'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;));&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;registerServiceWorker&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;ol&gt;
  &lt;li&gt;خُب در خط اول، &lt;strong&gt;import React&lt;/strong&gt; رو  قبلا توضیح دادیم.&lt;/li&gt;
  &lt;li&gt;در خط دوم ما &lt;code class=&quot;highlighter-rouge&quot;&gt;import ReactDOM&lt;/code&gt; رو داریم. به طور خلاصه &lt;code class=&quot;highlighter-rouge&quot;&gt;react-dom&lt;/code&gt;  بخش از React است مسئول تبدیل و نمایش کامپوننت‌های React از &lt;a href=&quot;http://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/&quot;&gt;دام‌مجازی&lt;/a&gt; به &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction&quot;&gt;دام‌اصلی&lt;/a&gt; هست. توی این مورد خاص ما از تابع  &lt;code class=&quot;highlighter-rouge&quot;&gt;render()‍&lt;/code&gt;  این کتاب‌خونه استفاده کردیم.&lt;/li&gt;
  &lt;li&gt;در خط سوم هم فایل CSS اصلی ما اومده که سی‌اس‌اس های مادر رو می‌تونم  توش قرار بدیم.&lt;/li&gt;
  &lt;li&gt;در این خط (&lt;code class=&quot;highlighter-rouge&quot;&gt;import App&lt;/code&gt;) ما کامپوننتی که نوشتیم رو فرا می‌خوانیم.  این دستور در واقع فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;App.js&lt;/code&gt; که ما دقایقی پیش ساختیم رو وارد می‌کنه که به شکل پیش‌فرض اگر پسوند فایل ما &lt;code class=&quot;highlighter-rouge&quot;&gt;.js&lt;/code&gt; باشه، نیازی به ذکرش نیست و می‌تونیم فقط اسم بدون پسوند رو بنویسیم و خود ES6 متوجه این می‌شه که فایل با پسوند &lt;code class=&quot;highlighter-rouge&quot;&gt;.js&lt;/code&gt; رو وارد کنه. همچنین «./» ابتدای آدرس باعث می‌شه که جاواسکریپت متوجه شه این فایل در همین پوشه که &lt;code class=&quot;highlighter-rouge&quot;&gt;index.js&lt;/code&gt; وجود داره هست و یک ماژول npm رو وارد نکنه.&lt;/li&gt;
  &lt;li&gt;خط بعد هم فراخوان فایلی‌ست که به شکل پیشفرض در CRA وجود داره و وظیفه‌اش ساخت یک نسخه PWA یا همان &lt;a href=&quot;https://en.wikipedia.org/wiki/Progressive_Web_Apps&quot;&gt;&lt;strong&gt;Progressive Web Apps&lt;/strong&gt;&lt;/a&gt; از برنامه شماست که البته فعلا لازم نیست در موردش نگران باشید. می‌تونید بزارید سرجاش باشه تا در انتهای یادگیری ری‌اکت، سری بهش بزنیم و بررسیش کنیم.&lt;/li&gt;
  &lt;li&gt;و در انتها ما تابع &lt;code class=&quot;highlighter-rouge&quot;&gt;ReactDOM.render&lt;/code&gt; رو داریم که وظیفه نمایش برنامه ری‌اکت ما رو داره.  این فانکنش دو آرگومان می‌گیره که اولیش کامپوننتی هست که می‌خواهیم بارگذاری بشه، و دومین آرگومان، مکانی است که اون آرگومان باید نمایش داده بشه. که ما برای آرگومان اول، کامپوننت App ای که نوشتیم رو قرار دادیم و در آرگومان دوم هم به همان &lt;code class=&quot;highlighter-rouge&quot;&gt;&amp;lt;div id=”root”&amp;gt;&lt;/code&gt; ،که قبلا در فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;index.html&lt;/code&gt; بهش اشاره کردیم.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;img src=&quot;https://image.ibb.co/eDKVJc/giphy.gif&quot; alt=&quot;ری‌اکت دوشواری نداره!&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;جمعبندی&quot;&gt;جمع‌بندی&lt;/h1&gt;
&lt;p&gt;تبریک! حالا شما یک &lt;em&gt;فانکشنال کامپوننت&lt;/em&gt; ساختید! در مورد webpack و babel هم همه چیز بدون اینکه بفهمیم تمام شد و بدون هیچ دردسری راه‌انداری شدند! این یک روش بسیار خوب و تمیز برای شروع کار با react است. ما در آموزش بعدی ساخت کامپوننت با استفاده از classهای ES6  و مفهوم state ها رو یاد می‌گیریم.&lt;/p&gt;

&lt;p&gt;قسمت دوم: به زودی…&lt;/p&gt;</content><author><name>مهراد روستا</name></author><category term="javascript" /><category term="react" /><category term="react-for-beginners" /><summary type="html">اگر در یک سال اخیر در مورد تکنولوژی‌های وب مطالعه کردید، پس احتمالا با فریم‌ورک React در حد خوبی آشنایی دارید. یکی از شکایت‌هایی که تازه واردان در مورد ری‌اکت می‌کنند اینه که «چرا اینقدر شروع و ساخت یک پروژه باهاش دنگ و فنگ داره؟» که خب البته راه‌های زیادی برای فائق اومدن بر این پیچیدگی‌ها ارائه شده.</summary></entry><entry><title type="html">چگونه برای زبان PHP اکستنشن بنویسم؟</title><link href="http://pullrequest.ir/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B2%D8%A8%D8%A7%D9%86-php-%D8%A7%DA%A9%D8%B3%D8%AA%D9%86%D8%B4%D9%86-%D8%A8%D9%86%D9%88%DB%8C%D8%B3%DB%8C%D9%85/" rel="alternate" type="text/html" title="چگونه برای زبان PHP اکستنشن بنویسم؟" /><published>2017-11-18T00:00:00+00:00</published><updated>2017-11-18T00:00:00+00:00</updated><id>http://pullrequest.ir/%DA%86%DA%AF%D9%88%D9%86%D9%87%20%D8%A8%D8%B1%D8%A7%DB%8C%20%D8%B2%D8%A8%D8%A7%D9%86%20php%20%D8%A7%DA%A9%D8%B3%D8%AA%D9%86%D8%B4%D9%86%20%D8%A8%D9%86%D9%88%DB%8C%D8%B3%DB%8C%D9%85</id><content type="html" xml:base="http://pullrequest.ir/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B2%D8%A8%D8%A7%D9%86-php-%D8%A7%DA%A9%D8%B3%D8%AA%D9%86%D8%B4%D9%86-%D8%A8%D9%86%D9%88%DB%8C%D8%B3%DB%8C%D9%85/">&lt;p&gt;خیلی باحاله، وقتی ما میتونیم برای زبانی که داخلش برنامه نویسی میکردیم هم اکستنشن بنویسیم و این بهمون علاوه برخیلی از امکانات وامتیازات فنی یه حس قدرت میده که بتونیم برای php اکستنشن بنویسم.&lt;/p&gt;

&lt;p&gt;برای نوشتن اکستنشن در php یه راه قدیمی و سخت هست که از آشنایی با zend-engine میگذره و همچنین برنامه نویسی به زبان C که یه کم دنگ و فنگ داره و ممکنه حتی خیلی از تازه کارها از این کار منصرف بشن!
اما راهی که میخوام در ادامه بگم زبان &lt;a href=&quot;https://zephir-lang.com&quot;&gt;Zephir&lt;/a&gt;   هستش که به آسونی میتونید باهاش آشنا بشید و فلسفه ی ساختن این زبان آسون کردن ساخت اکستنشن برای برنامه نویسانphp هستش و تا حد زیادی توابع و سینتکس این زبان شبیه به خود php بامزه ی ماست!&lt;/p&gt;

&lt;p&gt;شمای کلی کارش هم به صورت زیره&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://image.ibb.co/gqghQ6/scheme.png&quot; alt=&quot;Architect&quot; title=&quot;Architect&quot; /&gt;&lt;/p&gt;

&lt;p&gt;برنامه نوشته شده به زبان zephir شما پس از بررسی و بهینه سازی به یک اکستنشن C برای php تبدیل میشه و بعد از اون هم به یک اکستنشن بومی یا همون نیتیو خودمون تبدیل میشه.&lt;/p&gt;

&lt;h1 id=&quot;نصب-کامپایلر&quot;&gt;نصب کامپایلر&lt;/h1&gt;

&lt;p&gt;از اونجایی که گیک ها روی لینوکس کار میکنند پس راه نصب zephir رو روی لینوکس 
که از سایت مرجع عیناً برداشتم رو اینجا میذارم. میتونید از بخش &lt;a href=&quot;https://docs.zephir-lang.com/en/latest/install.html&quot;&gt;Installation&lt;/a&gt; کمک بگیرید و پیش نیازها   رو نصب کنید، و در ویندوز هم میتونید با یه مشقتی سر کانفیگ کردن ویژوال استودیو خروجی بگیرید.&lt;/p&gt;

&lt;p&gt;پیشنیازهای سیستم:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;gcc &amp;gt;= 4.x/clang &amp;gt;= 3.x&lt;/li&gt;
  &lt;li&gt;re2c 0.13 or later&lt;/li&gt;
  &lt;li&gt;gnu make 3.81 or later&lt;/li&gt;
  &lt;li&gt;autoconf 2.31 or later&lt;/li&gt;
  &lt;li&gt;automake 1.14 or later&lt;/li&gt;
  &lt;li&gt;libpcre3&lt;/li&gt;
  &lt;li&gt;php development headers and tools &lt;br /&gt;
نترسید! اینا کلاً چیز خاصی نیستن و اگر مثلا از ابونتوی آخرین نسخه استفاده میکنید اکثرش رو خواهید داشت.
اول به سیستم یه آپدیت میدیم تا حالش جا بیاد که مشکلی برامون ایجاد نکنه سر برنامه های قدیمیش و Repoهاش هم به روز بشه!&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ sudo apt-get update
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;em&gt;نکته! همین دستورات رو در توزیع های Redhat مثل CentOs میتونید بزنید کافیه که به جای apt-get از دستور yum استفاده کنید.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;خوب حالا بسته به ورژنphpتون که من اینجا 7.0 رو دارم کامپایلر زبان و پیشنیازهاش رو نصب میکنیم.&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ sudo apt-get install git gcc make php7.0 php7.0-json php7.0-dev libpcre3-dev re2c
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;em&gt;البته اینو تذکر بدم که قبلش باید php رو روی سیستمتون داشته باشید این دستورات مربوط به نصب صرفاً رفقای زِفیر هستش&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;بعد از نصب پیشنیازها حالا نوبت به کلون کردن زفیر از گیتهاب هستش:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ git clone https://github.com/phalcon/zephir
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;بعدشم که باید کامپایلر رو از روی سورسش نصب کنید. با دستور اول وارد پوشه ی سورس کامپایلر میشید و با دستور بعدی میگیم بهش که نصب شو!&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ cd zephir
$ ./install -c
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;امیدوارم هیچ ارور زبون نفهمی ندیده باشید و این مراحل رو به آسونی پشت سر گذاشته باشید. حالا چک کنیم ببینیم زفیر نصب شده!&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ zephir help
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;خوب اگر راهنمای استفاده چاپ شد که بهتون تبریک میگم شما الان یه اکستشن نویس زبان محبوبphp هستی :)&lt;/p&gt;

&lt;p&gt;در ضمن اگر از Docker استفاده میکنید میتونید به راحتی از &lt;a href=&quot;https://hub.docker.com/r/phalconphp/zephir/&quot;&gt;اینجا&lt;/a&gt;
داکیومنت ایمیجش رو ببینید و یا با دستور زیر پول کنید:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;docker pull phalconphp/zephir
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h1 id=&quot;آشنایی-اولیه-با-سینتکس-و-ساخت-یه-پروژه-ی-نمونه-یا-همون-hello-world&quot;&gt;آشنایی اولیه با سینتکس و ساخت یه پروژه ی نمونه یا همون Hello World:&lt;/h1&gt;

&lt;p&gt;تفاوت عمده ی زفیر با php در نگارش چندتا چیز ساده است:&lt;/p&gt;

&lt;p&gt;1)  تعریف متغیر قبل از استفاده از اون، یعنی اگر میخوایم از متغیر &lt;code class=&quot;highlighter-rouge&quot;&gt;i&lt;/code&gt; استفاده کنیم باید ازقبل مثلاً به صورت &lt;code class=&quot;highlighter-rouge&quot;&gt;int i;&lt;/code&gt; تعریفش کنیم.&lt;/p&gt;

&lt;p&gt;2)  موقع مقدار دهی به متغیرها باید از &lt;code class=&quot;highlighter-rouge&quot;&gt;let&lt;/code&gt; استفاده کنیم، یعنی اگر متغیر &lt;code class=&quot;highlighter-rouge&quot;&gt;i&lt;/code&gt; رو بخوایم برابر 0 قرار بدیم باید بنویسیم &lt;code class=&quot;highlighter-rouge&quot;&gt;let i =0;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;3) موقع تعریف متغیرها دیگه خبری از دلار &lt;code class=&quot;highlighter-rouge&quot;&gt;$&lt;/code&gt; معروف نیست و باید به رسم C نامگذاریها رو انجام بدید&lt;/p&gt;

&lt;p&gt;4)  اگر متغیری رو تعریف کنیم و ازش استفاده نکنیم کامپایلر بهمون اخطار میده&lt;/p&gt;

&lt;p&gt;5) فایلهای این زبان برنامه نویسی با پسوند &lt;code class=&quot;highlighter-rouge&quot;&gt;.zep&lt;/code&gt; ذخیره میشن!&lt;/p&gt;

&lt;p&gt;&lt;em&gt;البته که تفاوتهای دیگه ای هم هست ولی موارد بالا اصلی ترین اختلافات هست و برای مطالعه ی بیشتر به سایت اصلیش برید!&lt;/em&gt;&lt;/p&gt;

&lt;h2 id=&quot;برنامه-hello-world&quot;&gt;برنامه hello world&lt;/h2&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ zephir init Test
$ cd Test
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;دستور بالا رو اجرا میکنیم تا فایلهای ابتدایی یه پروژه ایجاد بشن و اون Test که نوشتیم اسم فضای برنامه است و هر اسمی میتونه باشه! بعدش که فولدر برنامه رو با این دستور ساختید به همین نام فضای برنامه یه پوشه داخل اون هست  یعنی &lt;code class=&quot;highlighter-rouge&quot;&gt;Test/Test&lt;/code&gt; برای این مثالی که زدم.
بعدش یه فایل همنام کلاسی که میخوام بسازم در اینجا &lt;code class=&quot;highlighter-rouge&quot;&gt;hello.zep&lt;/code&gt; و داخلش مینویسیم:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;namespace Test;
class Hello
{
    public static function say()
    {
        echo &quot;Hello World!&quot;;
    }
}
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;تو یه پوشه بالاتر از این یعنی همون فولدر اصلی اکستنشن یه فایل هست به نام &lt;code class=&quot;highlighter-rouge&quot;&gt;config.json&lt;/code&gt;  اگر برنامتون نیاز به اکستنشن خاصی داره و یا دوست دارید تنظیماتش رو عوض کنید میتونید بازش کنید و تغییرش بدید.&lt;/p&gt;

&lt;h2 id=&quot;کامپایل-برنامه&quot;&gt;کامپایل برنامه&lt;/h2&gt;

&lt;p&gt;در پوشه ی ریشه اکستنش کافیه این کامند رو بزنید:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;$ zephir build
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;و صبر کنید تا کامپایل اکستنشن تموم بشه، وقتی که تموم شد یه فایل با نام &lt;code class=&quot;highlighter-rouge&quot;&gt;test.so&lt;/code&gt; داخل فولدر اکستنشهای php میسازه که اگر نمیدونید کجاست میتونید داخل &lt;code class=&quot;highlighter-rouge&quot;&gt;phpinfo();&lt;/code&gt; دنبال کافیگ &lt;code class=&quot;highlighter-rouge&quot;&gt;extension_dir&lt;/code&gt; بگردید.( اگر نمیخواید فایل خروجی رو کپی کنید مهم نیست بدونید اون فایل کجا ریخته میشه!) ولی باید فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;php.ini&lt;/code&gt; رو باز کنید و( تهش یا قسمتی که مربوط به اکستنشن هاست برای اینکه بعدا نخواهید دنبال چیزی بگردید )باید اکستنشنی که بیلد کردید رو اعلام کنید.&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;extension=test.so
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;بعد از اینکه سیو کردید نوبت اینه اگر لازمه وبسرورتون رو ریستارت کنید تا تغییرات اعمال بشه.
تمام مراحلی که در این قسمت گفته شد فقط برای اولین دفعه ای که اکستنشن رو تعریف میکنید لازمه به جز ریستارت کردن وبسرور که باید بعد از هر بار بیلد اعمال بشه و اگر یه گیک باشید میدونید که با یه &lt;code class=&quot;highlighter-rouge&quot;&gt;bash&lt;/code&gt; هر دو دستور رو با هم ران کنید :)&lt;/p&gt;

&lt;p&gt;بعد از بیلد کردن و تعریف اکستنشنمون برای php حالا وقتشه بریم و از ران کردنش لذت ببریم. یه فایل &lt;code class=&quot;highlighter-rouge&quot;&gt;php&lt;/code&gt; بسازید و داخلش بنویسید:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;cp&quot;&gt;&amp;lt;?php&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;echo&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Test\Hello&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;::&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;say&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;();&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;//Hello World&lt;/span&gt;

&lt;span class=&quot;cp&quot;&gt;?&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;اون کلاسهایی که در اکستنشن نوشتید همه جا در دسترس هستش و بدون استفاده از &lt;code class=&quot;highlighter-rouge&quot;&gt;autoloader&lt;/code&gt; یا… در همه جای برنامه کار میکنه!&lt;/p&gt;

&lt;p&gt;زفیر برای این ابداع نشده که جای C یا php رو بگیره بلکه اومده تلفیقی از مزایای این دو رو ارائه بده، فریم ورک &lt;a href=&quot;https://phalconphp.com/en/&quot;&gt;Phalconphp&lt;/a&gt; این زبان رو برای توسعه فریم ورکش ساخته که کل فریم ورک فالکن به صورت  کامپایل شده هست از سرعت و امکانات خوبی برخوردار هستش، که طبق یه سری تستهای نه چندان تخصصی خودم با ابزار &lt;code class=&quot;highlighter-rouge&quot;&gt;apache abs &lt;/code&gt;تا 20 برابر سرعت بالاتری نسبت به فریم ورکی مثل لاراول داشت!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;مزایای Zephir:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;افزایش سرعت اجرای برنامه ، اما نه در مواقعی که الگوریتم نیاز به IO یا Memory زیاد داره!&lt;/li&gt;
  &lt;li&gt;کامپایل شدن که درنهایت باعث مخفی شدن کدهای شما خواهد شد بدون نیاز به انکد کردن کدها و دردسرهای ناشی از اونها&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;امیدوارم براتون مفید باشه منتظر فیدبک های شما هستم&lt;/p&gt;</content><author><name>محمود اسکندری</name></author><category term="php" /><category term="zephir" /><category term="پی" /><category term="اچ" /><category term="پی" /><category term="اکستنشن" /><summary type="html">خیلی باحاله، وقتی ما میتونیم برای زبانی که داخلش برنامه نویسی میکردیم هم اکستنشن بنویسیم و این بهمون علاوه برخیلی از امکانات وامتیازات فنی یه حس قدرت میده که بتونیم برای php اکستنشن بنویسم.</summary></entry><entry><title type="html">به پیشرفت جامعه متن باز کمک کنید، تیشرت مجانی بگیرید!</title><link href="http://pullrequest.ir/%D8%A8%D9%87-%D9%BE%DB%8C%D8%B4%D8%B1%D9%81%D8%AA-%D8%AC%D8%A7%D9%85%D8%B9%D9%87-%D9%85%D8%AA%D9%86-%D8%A8%D8%A7%D8%B2-%DA%A9%D9%85%DA%A9-%DA%A9%D9%86%DB%8C%D8%AF-%D8%AA%DB%8C%D8%B4%D8%B1%D8%AA-%D9%85%D8%AC%D8%A7%D9%86%DB%8C-%D8%A8%DA%AF%DB%8C%D8%B1%DB%8C%D8%AF/" rel="alternate" type="text/html" title="به پیشرفت جامعه متن باز کمک کنید، تیشرت مجانی بگیرید!" /><published>2017-10-06T00:00:00+00:00</published><updated>2017-10-06T00:00:00+00:00</updated><id>http://pullrequest.ir/%D8%A8%D9%87%20%D9%BE%DB%8C%D8%B4%D8%B1%D9%81%D8%AA%20%D8%AC%D8%A7%D9%85%D8%B9%D9%87%20%D9%85%D8%AA%D9%86%20%D8%A8%D8%A7%D8%B2%20%DA%A9%D9%85%DA%A9%20%DA%A9%D9%86%DB%8C%D8%AF%D8%8C%20%D8%AA%DB%8C%D8%B4%D8%B1%D8%AA%20%D9%85%D8%AC%D8%A7%D9%86%DB%8C%20%D8%A8%DA%AF%DB%8C%D8%B1%DB%8C%D8%AF</id><content type="html" xml:base="http://pullrequest.ir/%D8%A8%D9%87-%D9%BE%DB%8C%D8%B4%D8%B1%D9%81%D8%AA-%D8%AC%D8%A7%D9%85%D8%B9%D9%87-%D9%85%D8%AA%D9%86-%D8%A8%D8%A7%D8%B2-%DA%A9%D9%85%DA%A9-%DA%A9%D9%86%DB%8C%D8%AF-%D8%AA%DB%8C%D8%B4%D8%B1%D8%AA-%D9%85%D8%AC%D8%A7%D9%86%DB%8C-%D8%A8%DA%AF%DB%8C%D8%B1%DB%8C%D8%AF/">&lt;p&gt;سلام خدمت همه دوستان اوپن سورسی! 😊 چند روزه ک رویدادی (نمیدونم رویداد بهش بگیم درست تره یا جشنواره!) به اسم هکتوبرفست توسط شرکت DigitalOcean شروع شده که تا آخر اکتبر ادامه داره. میخوام توی این پست براتون دربارش توضیح بدم، آخر سر اگه تیشرت گرفتید بگید دمش گرم چه پست خفنی گذاشته بود!! 😁&lt;/p&gt;

&lt;h1 id=&quot;hacktoberfest-چیه-دیگه&quot;&gt;Hacktoberfest چیه دیگه؟!&lt;/h1&gt;

&lt;p&gt;همونطور که بالاتر گفتم، هکتوبرفست یه دوره یکماهست که از اول اکتبر شروع میشه و تا آخر اکتبر ادامه داره. توی این جشن (خودشون بهش میگن سلبریشن!) میان میگن هرکی طی این یکماه توی پروژه های متن باز نرم افزاری توی گیتهاب (همون ریپازیتوری ها) مشارکت کنه و 4 تا پول ریکوئست موفق بفرسته که از طرف owner اون ریپازیتوری قبول و مرج بشه، براش یه تیشرت و کلی استیکر باحال از اینا که میچسبونن رو در لپتاپ، میفرستیم!&lt;/p&gt;

&lt;h1 id=&quot;شرایطش-چیه&quot;&gt;شرایطش چیه؟&lt;/h1&gt;

&lt;p&gt;هیچی! فقط توی چهارتا ریپازیتوری توی گیتهاب مشارکت کنید و پول ریکوئست بفرستید. الان که این مطلبو میخونید یعنی من اولیشو فرستادم و مرج شده و فقط سه تا دیگه تا تیشرت اصل آمریکایی دیجیتال اوشنی فاصله دارم! 😁😎&lt;/p&gt;

&lt;h1 id=&quot;بابا-ما-که-ایرانیم&quot;&gt;بابا ما که ایرانیم!&lt;/h1&gt;

&lt;p&gt;از اونجا که شرکت دیجیتال اوشن یه شرکت آمریکاییه و به ایرانی ها سرویس نمیده طبق معمول، اولین چیزی که به ذهن هممون میرسه اینه که برای ما چیزی نمیفرستن، اونم چی، از آمریکاااای ترامپی! 🇺🇸&lt;/p&gt;

&lt;p&gt;منم اولش همینو گفتم اما یکی از بچه ها توی گروه ویو (مهران رسولیان عزیز) که این جشنواره رو بهمون معرفی کرد، گفت که پارسال سرش شلوغ بود و تونست فقط 3 تا پول ریکوئست موفق بفرسته که مرج بشه اما در یکی از همین روزا در عین ناباوری براش یه بسته که روش نوشته بود Happy Hacking و توش چنتا استیکر گوگولی گیت و گیتهاب و لوگو خودشون بودو فرستادن!&lt;/p&gt;

&lt;h1 id=&quot;پول-پُست-کردن-بسته-رو-که-دیگه-باید-بدیم&quot;&gt;پول پُست کردن بسته رو که دیگه باید بدیم!&lt;/h1&gt;

&lt;p&gt;اینم بگم سرتونو از شدت این همه تناقض توی رفتار با ایرانیا میکوبید به دیوار!! جالبی قضیه اینه که حتی یک قرون هم لازم نیست بدید، شما برنامه نویس و مشارکت کننده متن باز هستید، یعنی دست کنی تو جیبت ناراحت میشم! تنها کاری که باید بعد از 4 تا پول ریکوئست موفق بکنید اینه که چاییتون رو بریزید (یا حالا قهوه) و منتظر بشید بستتون برسه!&lt;/p&gt;

&lt;h1 id=&quot;هَپی-هَکینگ&quot;&gt;هَپی هَکینگ!&lt;/h1&gt;

&lt;p&gt;فکر کنم همه اطلاعاتی که لازمه رو دادم دیگه، فقط یه لینک وبسایتش مونده که برید ثبت نام کنید و کارتون رو استارت بزنید:&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://hacktoberfest.digitalocean.com&quot;&gt;https://hacktoberfest.digitalocean.com&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;به امید روزی که برای هر ریپازیتوری پول ریکوئست فرستادیم یه تیشرتی ماگی پیکسلی چیزی برامون بفرسته. 😂&lt;/p&gt;

&lt;p&gt;راستی یادتون نره به دوستاتونم درباره این جشنواره بگید یا لینک این پست رو براشون بفرستید. جامعه اوپن سورس هرچی فعال تر بهتر! 💻&lt;/p&gt;</content><author><name>عرفان صحاف نژاد</name></author><category term="open-source" /><category term="otoberfest" /><category term="متن-باز" /><summary type="html">سلام خدمت همه دوستان اوپن سورسی! 😊 چند روزه ک رویدادی (نمیدونم رویداد بهش بگیم درست تره یا جشنواره!) به اسم هکتوبرفست توسط شرکت DigitalOcean شروع شده که تا آخر اکتبر ادامه داره. میخوام توی این پست براتون دربارش توضیح بدم، آخر سر اگه تیشرت گرفتید بگید دمش گرم چه پست خفنی گذاشته بود!! 😁</summary></entry></feed>