سیر تحول FrontEnd و Angular و UX توی شرکت ما!

این اولین مطلبیه که من داخل سایت ویرگول مینویسم. امیدوارم بتونم با نوشتن به ارتقا دانش خودم و شما کمک کنم.من توی شرکت خوارزمی کار میکنم. اوایل همه از شرکت بد میگفتن ولی من امید داشتم که شرکت در آینده میتونه خیلی پیشرفت های خوبی توی حوزه برنامه نویسی داشته باشه. ترجیح میدم سال دیگه راجع به این موضوع یه پست کامل بذارم.قبل از اینکه من توی شرکت استخدام بشم AngularJs بعد از JQuery به عنوان زبان frontend شرکت انتخاب شده بود که به توسعه برنامه نویس ها بسیار کمک می کرد. تیم زیساخت اون زمان یه package برای شرکت نوشته بود که برنامه نویس ها خیلی راحت میتونستن با چند خط کد به حالت scaffolding صفحات CRUD (فرم های ایجاد، نمایش، آپدیت و حذف) خودشون رو طراحی کنن. این داستان برای برنامه نویس هایی که با فسیل شدن مشکل نداشتن خیلی خوب بود، راحت کد میزدن، نیاز به فکر نداشتن، اگرم مشکلی پیش می اومد میرفتن رو سر تیم زیرساخت خراب می شدن و تیم زیرساخت باید مشکلاتشون رو حل میکرد.angular typescriptمن که اومدم شروع کردیم به سوییچ روی Angular 2. شرکت ما پر از برنامه نویس های دات نت بود که وجود TypeScript در Angular 2 به ما کمک می کرد که بچه ها خیلی راحت بتونن با Angular ارتباط برقرار کنن.خلاصه شروع کردیم به ساختن یک ساختار جدید، ما شرکت هستیم و علی الله هی نمیتونیم پروژه بالا بیاریم پس لازم بود اول یه سری قوانین در نظر بگیریم که همه پروژه ها شبیه هم باشن و اگه یه برنامه نویس از یه پروژه رفت روی یک پروژه دیگه دچار سردرگمی نشه و در سریعترین زمان ممکن شروع به کار کنه.بعدا سر فرصت روال تکامل ساختار پروژه هامون از اول تا امروز رو توضیح میدم. سعی من این بود که برنامه نویس ها بیشتر با Angular درگیر بشن و ما کتابخونه ای برای scaffolding نسازیم که طرف نفهمه چی شد اصلا و اگه دو روز دیگه رفت خارج بهش نگن هیچی حالیت نیست.اولین پروژمون استارت خورد رفت جلو، توی ساختار اولیمون برای یه سری کارهای روتین یه سری چیزا تعریف کرده بودیم که کارها راحت شه، بعد از یه مدیت دیدیم کافی نیست و رفتیم سراغ توسعه بیشتر کامپوننت ها و سرویس ها و دایرکتیوها و... به محض شروع دومین پروژمون دیدم عه یه سری اشتراکات داریم که توی این پروژه هم نیازه استفاده بشه، رفتیم سراغ پکیج نویسی و اولین پکیجمون رو توسعه دادیم و از اونجا به بعد اونو به پروژه ها رفرنس دادیم.ngxsتوی یکی از پروژه ها به یه مشکلی برخوردیم که نیاز بود یه دیتایی همزمان توی چند جا تغییر کنه که در حالت عادی کار سختی بود. رفتیم سراغ Redux ، چند تا کتابخونه رو مطالعه کردیم و از بینشون NGXS رو انتخاب کریم چون از همه ساده تر بود و خیلی راحت می شد آموزشش داد و کار ما رو هم به صورت کامل راه مینداخت.همزمان با این موضوع دیدم توی پروژه های مختلفمون ظاهرهای متفاوتی داریم میبینیم. یه پروژه یه ظاهر میبره جلو اون یکی پروژه یه شکل دیگه. تصمیم گرفتیم بحث UX رو جدی تر کنیم، و با ابزار Justinmind شروع کردیم ولی بعد اکسپایر شده نتونیستیم کرک کنیمش (اگه کسی کرکشو داره بذاره توی کامنت شاید کسی نیازش شد) رفتیم سراغ Adobe XD و دیدیم اینم نرم افزار قدری هست و تقریبا همه چیز رو پوشش میده. حالا تیم UX شرکت ظاهر صفحات رو طراحی میکرد، توی جلسات شرکت میکرد و با نظر اون تیم ظاهر صفحات دیزاین می شد و دیگه پروژه ها ظاهر متحدالشکلی بخودشون گرفت.ما با یه روشی ساختار تم رو از پروژه ها مجزا کردیم و در واقع پروژه هامون رو تم پذیر کردیم، البته تم ما فقط شامل فایل های sass، تصاویر، فونت ها و از این دست فایل ها بود. حالا میتونستیم با تغییر یک خط کد از یه تم به یه تم دیگه سوییچ کنیم. البته ما تم هامون رو هم رنگ پذیر کردیم و میتونستیم با یه خط کد دیگه رنگ تم رو مثلا از آبی به قرمز سوییچ کنیم. primengیک نکنه که فراموش کردم بگم اینکه ما PrimeNg رو به عنوان کتابخونه UI خودمون انتخاب کردیم و همه قالب هایی که طراحی کردیم با اون بود، اون زمان که این کتابخونه رو انتخاب کردیم یه تجربه با material داشتیم و تجربه تلخی برای کاربرای بانکی بود ولی این کتابخونه کاملا مورد پسند کاربر ما قرار گرفت. تنها مشکلی که داشت این بود که برای بعضی از ابزارهاش راست چین رو پشتیبانی نمی کرد که مجبور شدیم خودمون راست چینشون کنیم.بعد از یه مدت با مفهومی به اسم MonoRepo آشنا شدیم که تحقیق راجع به اون ما رو با NX آشنا کرد. NX به ما کمک میکرد برای پروژه های بزرگ با تیپ کاری ما یه معماری شسته رفته تر داشته باشیم و بتونیم از امکانات MonoRepo (بعدا راجع بهش مفصل توضیح می دم) استفاده کنیم.بعد از اولین پابلیش متوجه حجم بالا و کندی شدید پروژه شدیم، حجم فایل main.js حدود 16 مگ شده بود. رفتیم سراغ AOT و Production Build و نهایتا با حجم بسیار بسیار کمتر و سرعت لود بسیار بالاتر پروژه رو deploy کردیم.بعد از دو سال تقریبا به یک نقطه استیبل رسیدیم و داریم تکنولوژی های جدید رو بررسی می کنیم تا بر اساس نیاز اون ها رو به پروژه ها اضافه و مورد استفاده قرار بدیم. اگر شما هم یه توسعه دهنده Angular یا حتی الباقی زبان های JavaScriptی باشید حتما با خیلی از مسائلی که گفتم رو به رو شدید. خوشحال میشم تجربیاتتون رو به اشتراک بذارید تا ما هم بتونیم از اون ها استفاده کنیم.