تجربه من از مراسم SkillUP سال ۱۴۰۱ - قسمت ۱

رویداد های حضوری چند سالی بود که به خاطر کرونا برگزار نمیشد. تقریبا آخرین رویداد حضوری مربوط به فرانت-اند که شرکت کردم سال ۹۸ بود که در واقع ReactConf بود. SkillUP امسال که برگزار کننده اصلیش Quera بود بهونه ای شد که دوباره کامیونیتی فرانت-اند دور هم جمع بشن و از تجربیات آدمای خفن تو این حوزه استفاده کنن.برگزار کننده رویداد کوئرا بود - با حمایت دیجی کالاتصمیم گرفتم تجربه خودم رو از این رویداد به اشتراک بذارم بلکه کسایی که فرصت یا هزینه شرکت تو این همایش رو نداشتند هم بتونن استفاده کنن یا حداقل ببین چه خبر بوده.شروع شدمراسم توی دانشگاه شریف برگزار میشد، از درب شمالی دانشگاه، دسترسی به سالن مراسم خیلی راحت بود. مخصوصا اینکه پارکینگ دانشگاه برای استفاده شرکت کننده ها در نظر گرفته شده بود. از پارکینگ یه مسیر تقریبا ۱۰ دقیقه ای پیاده روی بود تا محل برگزاری. توی نگهبانی یکی از مسئولین برگزار کننده نشسته بود و جلوی اسامی افراد تیک میزد.طبق برنامه ای که اعلام کرده بودن قرار بود ساعت ۸:۳۰ تا ۹ پذیرایی و پذیرش انجام بشه. ساعت ۸:۳۰ رسیدم و راهنماییم کردند به داخل سالن. هنوز خبری از پذیرش و پذیرایی نبود.خیلی افراد اومده بودن و توی سالن منتظر نشسته بودن. تقریبا نیم ساعت تا ۴۰ دقیقه نشستیم و بعد یه نفر اومد اعلام کرد که ۳-۴ ردیف جلوی سالن برن داخل لابی برای پذیرش و گرفتن پک صبونه.اینجاش خیلی شبیه دوران مدرسه بود که میومدن میگفتن از ردیف جلو خیلی بی سر و صدا برید که بقیه کلاسا نفهمن?بعد اینکه نوبت ردیف ما شد باید میرفتیم که کارت مون رو بگیریم. تقریبا ساعت ۱۰:۲۰ دقیقه بود. کاش برگزار کننده ها توی این قسمت بهتر عمل می‌کردن.پشت کارت جلوی کارتبعد اینکه کارت رو گرفتیم باید توی صف صبر می‌کردیم که نوبت مون بشه که پک صبحونه رو بگیریم. توی صف که بودم یکی از دوستان رو دیدم و سلام علیک کردیم و خیلی خوشحال شدم بین اون همه آدم دیدمش.پک صبونه رو گرفتم.پک صبونه (البته من چون خورده بودم قبل مراسم استفاده نکردم ازش)کنارش یه ساک دستی بود که توش یه سری گیفت بود. که به نظرم واقعا خوشگل بودن.این همون گیفت بود که بسته بندی شده بود حالا جلو تر عکس از محتویاتش رو هم میذارمدیگه بعدش رفتیم داخل ساعت و ساعت ۱۱ حدودا اولین ارائه در حالی شروع شد که قبلش یکی دو نفر از برگزار کننده ها اومدن و یه سری موارد رو اعلام کردن مثل اینکه چند نفر کارت شونو نگرفته بودن و اینطور چیزا.اولین ارائه - امیرحسین بکان از دیجیکالااولین ارائه توسط امیرحسین بکان بود که چپتر لید تیم فرانت-اند دیجیکالا بود. صحبت ها بیشتر حول محور مدیریت تیم های مختلفی که دیجیکالا داره و پروژه ها و تیم هایی که وجود داره و تصمیماتی که افراد برای انتخاب استک مناسب گرفتن و ایجاد فضای مناسب برای کار بود. اینکه چطور میتونیم Development Experiance رو بهبود بدیم و توی دیجیکالا چطور این اتفاق داره میوفته. اینکه چی شد دیجیکالا نسبتا دیرتر از بقیه نسبت به تغییر تکنولوژی های سمت کلاینت اش اقدام کرد و اینکار چطور انجام شد که در واقع اوایل سال ۱۴۰۰ که توسعه سمت فرانت-اند دیجیکالا کار سختی شده بود همزمان شد با پروداکت های جدید دیجیکالا مثل دیجیکالا جت که تجربه توسعه اون ها به پروداکت اصلی کمک کرد که این اتفاق راحت تر بیوفته.ارائه امیرحسین بکان از دیجیکالا با عنوان "از تغییر تکنولوژی تا ساختن آینده"چند تا مورد از چیزایی که میشد یاد گرفت از این ارائه:توی انتخاب تکنولوژی ها نباید هیجانی عمل کرد و انتخاب تکنولوژی ها مستقیما به نیاز بیزنس بستگی دارهبهتره برای گسترش تیم ها سیستم هایی ایجاد کنیم که مولد باشن، در طراحی این سیستم ها در عین اینکه نیاز ها و محدودیت های بیزنس رو در نظر باید گرفت، خوشحالی افراد هم باید لحاظ کردهمه چیز رو نمیشه مانیتور و مدیریت کرد و این رو باید پذیرفتاشتباه کردن اوکیه! ولی تکرارش نههمه چیز رو نمیشه تحت کنترل نگه داشت و هرجا احساس کردید همه چیز تحت کنترله یا یه جای کار مشکل داره یا شما دارید اشتباه فکر میکنیدبرای رشد یه مجموعه باید ساختار ایجاد کرد و این رو باید دونست که این ساختار هیچوقت ثابت نیست و باید همیشه تو حلقه فیدبک و اصلاح باشهدومین ارائه - مجتبی افراز از شرکت Hahnخب ارائه ایشون در مورد پکیج باندلر ها بود. یه تاریخچه از اینکه قدیم چطوری از پکیج ها استفاده می‌کردیم گفت و کلی خاطره زنده شد برام و نم نم اومد جلو تا رسید به browserify و همینطور جلوتر رفت. اینکه webpack چطور به وجود اومد که برای من خیلی این قسمت جذاب بود! اینکه چطور این ابزار ها کار میکنن و چه مشکل (یا مشکلاتی) رو حل میکنن. ارائه اوکی ای بود ولی مباحثش خیلی عمیق نبود به نظرم. نم نم رسید به Vite که چیه و چطوریه و چطور کار میکنه. (در مورد Vite یه مطلب قبلا نوشتم که میتونید اینجا بخونیدش)ارائه مجتبی افراز از شرکت Hahn آلمان با موضوع JavaScript Bundlersچند تا مورد از چیزایی که میشد یاد گرفت از این ارائه: باندلر ها ابزار هایی هستند که به ما کمک میکنن کل فایل های جاواسکریپ مون رو باندل کنیم تو یه دونه فایل که به پرفورمنس سایت و روند توسعه اش کمک میکنهوب-پک نتیجه کنجکاوی و یه پروژه ارشد یه بنده خدایی بود به نام Tobias که در واقع اول پیشنهادش رو به سازنده browserify داد و وقتی طرف زیر بار نرفت webpack رو بوجود آورد (اینجا بخونید کاملش رو)مدل کار کردن Vite (‌یکم مفصل بود که کامل نمیتونم اینجا بگم، برای شروع میتونید مطلبی که قبلا در موردش نوشتم رو بخونید)هنوز از Vite توی پروژه های پروداکشن نمیشه استفاده کرد (هنوز)بعد از ارائه دوم ازمون با آبمیوه و کیک پذیرایی شد، یکم رفتیم هوا خوردیم و برگشتیم توی سالن. که برای ارائه بعد آماده بشیم.ارائه سوم - امیر کبیری از دیجی‌کالاهمیشه خوشم میاد اومده از کسایی که دوست دارن ببینن دقیقا پشت پرده چی میگذره. ارائه امیر کبیری دقیقا از همون جنس چیز ها بود. کنجکاو بودم ببینم تا چه حد میخواد عمیق بشه و به نظرم برای یک ارائه ۲۰-۲۵ دقیقه ای عالی بود. امیر مشخص بود که خیلی آدم باهوش و با استعدادیه و با یک ته لحجه شیرین ترکی که داشت جذاب تر هم شده بود. در مورد اینکه مرورگر ها چطوری کار میکنن و اینکه ما بدونیم این موضوع رو، چطور میتونه روی کارمون تاثیر بذاره. به نظرم یه موضوع خیلی مهم تر که ارائه امیر داشت این بود که هیچوقت نباید غافل شد از عمق مباحث و همیشه باید کنجکاو موند و البته از اندوخته هامون توی کار استفاده کرد.ارائه امیر کبیری از دیجی‌کالا با موضوع "How browsers work"چند تا مورد از چیزایی که میشد یاد گرفت از این ارائه: مرورگر با برخلاف ظاهرشون بسیار بسیار پیچیده هستندلود شدن هر صفحه وب شامل چند فاز مختلف میشه که توی هر فاز یکی از بخش های اصلی صفحه شکل میگیرنانجین HTML Parser بسیار قدرتمنده و کمترین خطای ممکن رو تولید میکنه (که خب جز این هم انتظار نمیره)این انجین مواقعی که به یک Script میرسه روند پارس کردن رو متوقف میکنه و فایل های js رو دانلود و اجرا میکنه. این اتفاق برای تگ های style و link هم میوفتهبهتره استایل ها همیشه بالای سند HTML یا همون head قرار بگیره و فایل های script پایین در انتهای body به خاطر مورد قبلی که بهش اشاره کردممیشه با استفاده از defer و async روی تگ های script روند دانلود یا اجرا شون رو دستکاری کرد (و البته کلی چیز دیگه)مفهوم speculative parsing توی پارسر مرورگر کمک میکنه سرعت پارس کردن صفحات به طرز قابل توجهی افزایش پیدا کنه. مثلا یکی از کار هایی که میکنه اینه که اول همه فایل های js رو همزمان دانلود و بعد به ترتیب یکی یکی اجرا میشن.مرورگر ها قبل از اینکه شما آدرس سایت رو کامل بنویسید شروع میکنن به دانلود کردن و پارس کردن اون صفحات و موقعی که شما enter میزنید سرعت لود شدن صفحه خیلی خیلی سریع تره و این موضوع لزوما به سرعت اینترنت شما ندارهارائه چهارم - محمدصالح فدایی از اچارهمطالب عنوان شده توی این ارائه به نظرم خیلی مهم بود. فقط مشکل اینجا بود که به خاطر طولانی بودن اسامی، خیلی اسمای خلاصه پشت هم تکرار شد و عملا من آخرش گیج شدم و کلا دیگه وسطاش نمیفهمیدم چی به چی شد.البته من از قبل یه مطالعه نسبی به کلیات موارد داشتم و گوشی دستم بود که حرف از چیه و اهمیتش چیه و این بحث ها، ولی توی ارائه دنبال کردن این همه مباحث کار سختی بود. موضوع این ارائه در مورد Core Web Vitals بود و بحث اصلی ارتقا وب سایت از نظر SEO و سرعت لود سایت و اینطور چیز ها و معرفی بعضی ابزار ها و روش ها برای تست و بررسی و حل کردن اینجور مشکلات.چیزایی مثل LCP, CLS, FID و ... (در موردش عمیق تر میتونید اینجا بخونید)ارائه محمدصالح فدایی از آچاره در مورد Core Web Vitalsچند تا مورد از چیزایی که میشد یاد گرفت از این ارائه: چیزایی مثل LCP و FID و ... در واقع متریک هایی هستن که به کمک شون شما سایت یا اپلیکیش تون رو ارزیابی کنید و بر اساس اون ها مدل محتوا و نحوه چینش شون رو تغییر بدیدبالا بودن امتیاز توی همه این متریک ها معیار خوب و عالی بودن سایت شما نیستبهتره فایل های حجیم تر (مخصوصا کتابخونه های third-party) بعد از اسکریپت های خودتون لود بشه که سرعت لود سایت تون بهبود پیدا کنهلود کردن asset های static مثل تصاویر و ... باید به صورت بهینه انجام بشهبهتره از مدل های روش مند تری برای استایل هامون استفاده کنیم که صفحه هی لگ نخوره و محتوا جابجا نشه جلوی چشم کاربر و اگر نیاز به اینکار هست حدالامکان خارج از viewport کاربر باشهدر کل این معیار ها به ما کمک میکنن سرویس بهتری به لحاظ تجربه کاربری برای مخاطب ایجاد کنیمبعد از ارائه محمدصالح یکی از برگزار کننده ها اومد و فضا رو یکم گرم تر کرد. اول خواست بحث رو ببره سمت کل کل های تکنولوژی ها و ... ولی بعد رفت سمت اینکه ببینیم جوون ترین و مسن ترین فرد شرکت کننده کیه توی سالن.جوون ترین فرد یه آقا پسری بود که متولد ۸۶ بود، اینکارو یک سال بود که شروع کرده بود و خیلی با استعداد و انگیزه به نظر میرسید و البته خجالتی (البته من خودمم وضع بهتری ندارما، کلا یهو بیای جلو ۲۰۰-۳۰۰ نفر حرف بزنی کار راحتی نیست). دعوتش کردند رفت روی صحنه و مجری چندتا سوال پرسید و هر جوابی که میداد حاضرین تشویق می‌کردند. واقعا هم تشویق داشت. بعد از اون مسن ترین فرد رو دعوت کردند و روی صحنه رفت که یه آقایی بودن فکر کنم متولد سال ۵۶ یا ۵۴ که برنامه نویسی رو از دبیرستان شروع کرده بودن و بعد هم با کومودور ۶۴! ایشونم داستانش رو گفت و همه تشویق می‌کردند و در همین حین توی گروه تلگرامی پیام هایی میومد و راه رسیدن به سلف دانشگاه برای صرف ناهار رو اعلام می‌کرد. ساعت ۱ شده بود.ناهار توی قابلمه هایی بود که بقچه پیچ شده بودن. منو یاد غذا های رستوران قیمه قورمه مینداخت سمت میدون ولی عصر.قسمت اول اینجا تموم شد.قسمت دوم: https://virgool.io/@hesanam/%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%D9%85%D9%86-%D8%A7%D8%B2-%D9%85%D8%B1%D8%A7%D8%B3%D9%85-skillup-%D8%B3%D8%A7%D9%84-%DB%B1%DB%B4%DB%B0%DB%B1-%D9%82%D8%B3%D9%85%D8%AA-%DB%B2-jtpwg6dlvedo