بر فرض که شما نینجا هم هستین🥷

- سافت اسکیل
- استفاده از ابزار های موجود

همه چیز کد نیست

خیلی وقته این کتابخونه ترند شده
ولی من جدیدا دارم باهاش کار میکنم

و واقعا تا قبل از استفادش مدیریت search params های پیچیده و زیاد برام کابوس بود مگر اینکه کلی وقت میذاشتم خودم یدونه internal state management مینوشتم براش

https://nuqs.47ng.com/
دریابیدش که خیلی کار راه بندازه 🔥

-------
ذخیره کردن استیت های مربوط به سرچ و فیلتر داخل لیست
یا تغییراتی که توی صفحات محصول کاربر ایجاد میکنه (مثل چک کردن سایز ها و رنگ های دیگه ی محصول) جزو Good Practice ها حساب میشه که هم تجربه کاربری بهتری داره و هم جزو نکاتی حساب میشه که رعایت کردنش توی تست های فنی شمارو یه لول بالاتر نشون میده
-------
البته توی ایجاد تغییرات توی url محتاط باشید. ⚠️
push نکنید
بجاش replace کنید
چون که وقتی کاربر تغییرات زیادی اعمال میکنه انتظار داره با back navigation برگرده به صفحه ی قبل، نه تغییرات قبلی!

البته خودم تازه با این پکیج آشنا شدم
نمیدونم اجازه میده بجای push کردن replace url انجام بدیم یا نه

آبی سفید - هم اکنون😁✌🏻

همایش کد اند کافی با موضوع frontend optimization

فارق از اینکه به عنوان برنامه نویس و فعالان حوزه تکنولوژی باید همیشه درحال یادگیری و پیشرفت باشیم؛

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

امسال میخوام روی حرفه ای تر فعالیت کردن داخل لینکدین و مهارت حل مسئله‌م بیشتر و عمیق تر‌ از قبل کار کنم تا بتونم اون gap هایی که سال قبل ایجاد شده بود رو پر کنم.

شما پلنتون چیه؟
اگه بخواید با یادگرفتن یک یا چند موضوع یه مسئله ای رو از ۱۴۰۳ حل کنید، اون چه موضوعیه؟

از تجربه مصاحبه ای که امروز رفتم براتون بنویسم

خیلی آدمی نیستم که بخوام نکات منفی بگم و دانش فنی یه نفر (ظاهرا مدیر فنی/بدون دانش فنی) رو زیر سوال ببرم.

ولی میخوام نکته ای که بنظرم جالب اومد و کمتر بهش پرداخته شده رو بهتون بگم.
مدیر فنی داستان امروز، خیلی اصرار داشت که از من اینو بشنوه:
SPA === CSR

از هزار راه داشت سعی میکرد این نظریه اشتباهش رو به من ثابت کنه ولی متاسفانه نتونست😂

اما اشکالی نداره!
من برای شما توضیح میدم که چرا این نظریه اشتباهه.

میدونم که خیلیاتون خیلی حتی بهتر از من این دو مفهوم رو میدونید
ولی یه توضیح کوتاهی داشته باشیم ازش:

SPA (Single Page Application)
نوعی وب اپلیکیشن که در ابتدا فایل html رو بدون محتوای خاص صرفا همراه با یک root tag دریافت میکنه و هر محتوایی که باید داشته باشیم رو بعد از compile شدن فایل جاوا اسکریپت داخل اون tag قرار میدیم.
احتمالا توی پروژه های ریکت دیدید یه div وجود داره به این صورت:
<div id="root"></div>

CSR (Client-Side Rendering)
یک استراتژی رندر هست که مرورگر بعد از دریافت و اجرای فایل javanoscript فراید رندر کردن صفحه رو شروع میکنه

----------
بله احتمالا میدونید که خیلی این دو مفهوم به هم شبیه هستند
ولی چرا نمیشه گفت باهم یکی هستن؟؟

چون که یک SPA میتونه محتوای SSR هم داشته باشه!
همونطور که توی ورژن های قبلی nextjs یا حتی در حال حاضر داخل page router این مفهوم رو داریم.
که اپلیکیشن ما به صورت کلی SPA هست
ولی میتونیم مشخص کنیم یه سری از محتوا ها SSR یا حتی SSG باشن!
به کمک getServerSideProps

خب حالا چطور میتونیم بهتر اینارو تعریف کنیم؟
- SPA
بیشتر یک معماری هست تا یک rendering strategy!
- CSR
یک rendering strategy هست. جوری که/جایی که رندر صورت میگیره

و در نهایت باید اینو بدونیم که یک SPA app میتونه هم SSR باشه هم CSR و حتی SSG.

کامپایلر زبان تایپ اسکریپت درحال port شدن به golang هست.
چیزی که باعث میشه سرعت کامپایل تایپ اسکریپت تا 10x سریع تر بشه!

احتمالا این خبر رو توی کامیونیتی خیلی شنیدید ولی بیاید باهم یه سری سوال رو جواب بدیم و مفاهیم رو ساده تر درک کنیم😁
برای رفقایی که تازه وارد این حوزه شدن و دوست دارن دیدشون باز تر بشه🤍

تایپ اسکریپت چیه؟
تایپ اسکریپت در واقع یک زبان برنامه نویسی بر مبنی جاوا اسکریپت هست که به ما کمک میکنه کد های قابل اعتماد تر و ارور های زمان اجرای کمتری داشته باشیم. چطور این کارو میکنه؟ با مشخص کردن نوع داده های مختلف و ساختار های ابجکت ها و آرایه ها کمک میکنه زمان توسعه نوع داده ها و یا ساختار های اشتباه استفاده نکنیم و در نهایت موقع اجرا به اروری از این نوع بر نخوریم.


زبان golang چیه؟
یه زبان برنامه نویسی multithread (یعنی میتونه از هسته های مختلف cpu به صورت همزمان استفاده کنه و سرعت فوق العاده بالاتر بهمون بده)
که توسط گوگل ساخته شده و جزو زبان هایی حساب میشه که سرعت خیلی بالایی داره.
و دلیلی که کامپایلر تایپ اسکریپت الان قراره چنین سرعت متفاوت و بالاتری داشته باشه همینه.

منظور از port شدن چیه؟
به اشتباه بعضا میگن همون rewrite هست.
ولی اینطور نیست
توی rewrite ما در کنار تغییر تکنولوژی و ابزار(اختیاری) تغییر معماری و ساختار رو داریم.
ولی اینجا مفهوم port کردن یعنی دقیقا فانکشن به فانکشن، خط به خط، همون کد های تایپ اسکریپتی که قبلا بوده (کامپایلر قبلی با تایپ اسکریپت نوشته شده) رو با زبان golang نوشتن.
غیر از سرعت خیلی بالا، هیچ تغییری زمان توسعه حس نمیشه.

مفهوم کامپایل شدن چیه؟ فرق تایپ اسکریپت و golang در کامپایل چیه؟

خب چیزی که cpu میفهمه متاسفانه خیلی با زبانی که ما میفهمیم یا باهاش کد میزنیم فرق میکنه. Cpu زبانی به اسم باینری یا همون صفر و یک داره و ما زبان انسان رو داریم.
که خب میبینید مثلا زبان هایی مثل پایتون خیلی نزدیک به زبان انسان هستن.
به فرایندی که زبان نزدیک به زبان انسان رو یه زبان ماشین یا باینری تبدیل میکنه و قابلیت اجرا شدن میده بهش، میگن کامپایل شدن.

خب تایپ اسکریپت که به صورت یک superset برای جاوا اسکریپت هست پس باید جاوا اسکریپت رو بررسی کنیم.
کد های جاوا اسکریپت به صورت JIT یا just in time کامپایل میشه.
یعنی engine کد هایی که ما نوشتیم رو به صورت AST یا یک درخت سینتکس بخش به بخش نگاه میکنه و برای ماشین ترجمه میکنه (طی مراحل درونی بیشتر..) و در نهایت کد ما مرحله به مرحله اجرا میشه.

ولی golang برای اجرا شدن توی مرحله اول مستقیما به فایل اجرایی یا exe تبدیل میشه و نیازی به انجام مراحل دیگه برای تفسیر کد نیست.
و همین خودش باعث افزایش سرعت اجرای برنامه میشه.

نیازی به ابزار های bundling مثل پروژه های جاوا اسکریپتی نداره و بعد از build کردن همه‌ی کد های golang که نوشتیم تبدیل به یدونه فایل اجرایی میشن.

چند رشته ای یا multi-thread بودن یعنی چی؟ توی این دو زبان چه تفاوتی هست؟

جاوا اسکریپت به صورت کلی یک زبان تک رشته ای یا single-thread حساب میشه و چیزی که باعث میشه ما حس کنیم داره به صورت multi-thread یا به اصطلاح non-blocking I/O اجرا میشه همون event loop هست.
ایونت لوپ با اولویت بندی تسک ها و گذاشتنشون توی دوتا صف مختلف فرایند non-blocking رو برامون فراهم میکنه. پیشنهاد میکنم اگه علاقه دارید بیشتر بدونید راجع بهش یه سرچ توی یوتیو‌ب بزنید.
یا اگر سوالی دارید از خودم بپرسید.

و اما golang به صورت واقعی میتونه از core های مختلف cpu در لحظه استفاده کنه.
کد هایی که دیتای مشترکی ندارن یا scope های کاملا جدا از همی هستند رو به صورت اتوماتیک در صورت نیاز روی رشته های مختلف اجرا میکنه تا اجرا شدن یکدوم مانع اجرا شدن بقیه نشه.
ولی بازهم با اینکه عدم وابستگیشون به هم دیگه شرط اجرا روی رشته های مختلف هست، گولنگ این اجازه رو بهمون میده که بین رشته های مختلف به کمک مفهومی به اسم channels ارتباط برقرار کنیم.
یا حتی بتونیم موقع تغییر یک داده روی یک رشته، اجازه ندیم رشته های دیگه بهش دسترسیِ تغییر داشته باشن.

اینم یه سری اطلاعات خیلی خفن برای رفقای کنجکاومون😁

رفقایی هم که هنوز با تایپ اسکریپت اشنایی ندارن یا دنبال یه دوره ای میگردن که با مثال های کاربردی مفاهیمش رو آموزش داده باشه.
من یه دوره درست کردم که توی همین تلگرام توی چنل پرایویت هست🔥😁
برای دریافت لینک پیوی بهم پیام بدید
@erfundev

یه سوال دیگم جا موند.
خب زبان های دیگه هم با این سرعت و این قابلیت ها وجود داره. از جمله C# که توسط خود مایکروسافت هم توسعه داده شده.
چرا golang؟
مایکروسافت علت این انتخاب رو نزدیک بودن زبان golang به تایپ اسکریپت (حداقل بیشتر از بقیه انتخاب ها) اعلام میکنه.

اینم لینک ویدیو‌ی یوتیوبش

چطور تشخیص بدیم سطحمون توی برنامه نویسی چیه و کجای بازی هستیم؟
junior/mid-level/senior

Junior:
صرفا به این فکر میکنید که چه کدی بنویسم که اجرا بشه.
به الگو های طراحی تسلط ندارید.
معمولا تسک های ساده و کوچیک انجام میدید و به کمک و راهنمایی یک mentor نیاز دارید توی اکثر مراحل.

Mid-level:
به این فکر میکنید که چه کدی بنویسم که بهینه باشه. کد ساده تری باشه. از ابزار های بهتری استفاده کنم. لایبرری های مختلف استفاده کنم. کدم تمیز باشه. خوانا باشه.
الگو های طراحی رو بلدید.
به best practice ها تسلط دارید.
ممکنه چیزایی راجع به مقیاس پذیری و مهندسی نرم افزار بدونید ولی دانشتون عمیق نیست.

Senior:
دغدغتون مقیاس پذیری و آینده‌ی کسب و کاره. کمتر کردن هزینه ها و بیشتر کردن درآمده. حس رضایت کاربر و تجربه کاربری روان و ساده هست. به حافظه و مدیریتش فکر میکنید. به این فکر میکنید که اگر بعدا سراغ این کد ها اومدید بتونید تغییرش بدید یا اگر شخص جدیدی اومد سریع بتونه روی کد های شما onboard بشه.
به رفتار و انتظار کاربر فکر میکنید.
دانشتون رو به اشتراک میگذارید و توی تیم ها به عنوان راهنما و کسی که تصمیمات فنی میگیره شناخته میشید.
میتونید سیستم های مقیاس پذیر طراحی کنید و تاثیر تصمیم های فنی رو روی بیزنس درک کنید.

————————————
هیچکدوم از این موارد بد نیست. راجع به جونیور بودن بدبین نباشید و اگر سنیور هستید مغرور نباشید🤍. همه در کنار هم مرحله به مرحله پیشرفت میکنیم و با ساخت بهترین تجربه ها برای کاربر، بهترین هارو تجربه میکنیم.

درود بر شما رفقای عزیزم
سال نوی همگی مبارک باشه انشالله امسال کلی اتفاقات خوب تجربه کنید
اینو از صمیم قلبم برای یکا یکتون میخوام🤍

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

ولی اگه چند تا ایونت داشته باشیم چی؟
مثلا ۵ تا ایونت مختلف گذاشته باشیم روی داکیومنت یا ویندو یا هرچیزی
و بعد بخوایم همرو cleanup کنیم
یکم غیر قابل توسعه بنظر میرسه اگه بخوایم واسه هرکدوم یدونه removeEventListener جدا بنویسیم.

راه حل👇🏻