تجربه‌ی استفاده از hygen در پروژه frontend

حین یکی از پروژه‌هایی که توی شرکت سیگنال داشتیم به یک چالشی برخوردیم که بنظرم ممکنه خیلیا باهاش مواجه بشن. بخاطر همین این پستو منتشر کردم.

پروژه‌ی ما یک پروژه Entity Based بود و به ازای اضافه شدن هر Entity به سیستم ، یک‌سری فایل‌هایی به پروژه اضافه می‌شدن که ساختار این فایل‌ٰها برای همه Entity ها یکسان بود. مثلا فایلی که کامپوننت لیست یا فرم اون Entity داخلش بود یا فایلٰ‌های api و config مربوط به اون Entity .

چالش اینجا بود که برای هر Entity باید این چندتا فایل رو می‌ساختیم و یکسری مواقع این فایل‌ها نسبت به فایل‌های بقیه Entity ها فرق زیادی نداشتن.

اینجا بود که این به ذهنمون رسید که فرآیند اضافه شدن یک Entity به سیستم رو خودکار کنیم. راه‌های مختلفی رو بررسی کردیم ولی در نهایت به پکیج hygen رسیدیم ، که این کارو به بهترین نحو برامون انجام میداد و ما از تکرار خیلی کارا نجات پیدا می‌کردیم. همچنین اگر نیروی جدیدی میخواست با پروژه کار کنه ، دیگه درگیر این نمیشد که برای دولوپ سیستم و ایجاد یک Entity جدید باید چه فایل‌هایی رو اضافه کنه.

توی این پست نحوه‌ی کار با ‌hygen رو توضیح دادم

امیدوارم براتون مفید واقع بشه

درواقع Hygen یک code generator هست. کار کردن باهاش خیلی راحته و توی اضافه‌کردن فایل‌های مختلف به پروژه خیلی برامون زمان می‌خره. برای مثال توی فریم‌وورک laravel وقتی شما دستور php artisan make:model رو ران می‌کنید ، یک مدل جدید براتون generate میشه. hygen هم کارش تقریبا همینه و براتون فایل generate می‌کنه. بریم ببینیم داستان چیه.

خب ابتدا پکیج hygen رو نصب می‌کنیم. هدف ما اینه که با ران کردن دستور hygen ، یه فولدر به همراه اسم و فایل‌های مشخص ، توی یک آدرس مشخص ( که همه‌ی اینارو ما تعیین می‌کنیم ) ، اضافه بشه به پروژه.

فرض کنید ما داخل view های پروژه (منظور فولدر views یا pages هستش ) ، برای هر Entity یک فولدر داریم. داخل فولدر هر Entity ، فولدر Components شامل لیست و فرم اون Entity و فایل‌های api و config مربوط به اون Entity هستش (خیلی به محتویات فایل‌ها و فولدر‌ها کاری نداریم).

با استفاده از hygen ، میتونیم این فایل‌ها و فولدر‌ها رو برای هر Entity جدید ، به صورت کاستوم‌شده با اجرای یک command ایجاد کنیم.

ابتدا hygen رو initialize می‌کنیم.

بعد از اجرای این دستور میبینیم که یک فولدر به اسم templates_ در پروژه ایجاد شده. داخل این فولدر یک فولدر دیگه به اسم generator هست که به ما میگه چطور یک command با ساختار مشخص برای hygen ایجاد کنیم.

همونطور که می‌بینید یک فولدر generator داریم که داخلش فولدر new و فایل hello.ejs.t.

خب حالا این به چه دردی می‌خوره ؟

این به این معنیه که اگر دستور hygen generator new --name رو اجرا کنیم ( دقت کنید که اینجا generator اسم فولدری هس که داخل templates_ قرار داره و میتونه هر اسم دیگه‌ای باشه ) ، فایل‌هایی که داخل فولدر new هست (مثلا hello.ejs.t ) توی مسیری که داخل همین فایل‌ها نوشته شده قرار داده میشه. وارد کردن name در command هم اختیاری هستش که در ادامه میگم کاربردش چیه.
محتویات این فایل به این شکله که در قسمت بالای فایل ، آدرسی که این فایل قراره در اونجا قرار بگیره نوشته می‌شه و قسمت پایین فایل محتویات فایل هستش. تصویر پایین محتویات فایل hello.ejs.t هستش که خود hygen به عنوان نمونه برامون ایجاد کرده.

حالا بیاید با پیاده‌سازی و کاستوم کردن command خودمون ، یک Entity جدید به همراه فایل‌هاش ایجاد کنیم.
هدقمون اینه که یه همچین دستوری داشته باشیم :
hygen entity new en_3
که با ران کردنش فولدر En_3 به همراه فایل‌های همنام و مخصوص خودش ایجاد بشه. برای اینکار :

مرحله اول : فولدر entity رو داخل templates_ ایجاد و سپس داخلش یک فولدر دیگه به اسم new می‌ذاریم.
مرحله دوم : فایل‌هایی که میخوایم بعد از اجرا شدن این دستور ایجاد بشن رو داخل فولدر new با پسوند .ejs.t قرار می‌دیم. فایل‌های مدنظر Form ، List ، api و config هستن.
مرحله سوم : داخل هر فایل آدرس جایی که میخوایم اون فایل ایجاد بشه و محتوای اولیه‌ش رو قرار میدیم. یعنی در نهایت باید ساختار فولدر templates_ اینطوری بشه

حالا برای مثال کدی که داخل فایل Form.ejs.t گذاشتم رو ببینید.

ما داخل این فایل به اون nameی که در command بعد از کلمه new وارد میکنیم دسترسی داریم و با استفاده از متدهای hygen میتونیم اسم فایل یا هرچیز دیگه رو بر اساس name مشخص کنیم. متدهاشو پیشنهاد میکنم از داک خودش بخونید. خیلی ساده و کاربردیه.

https://www.hygen.io/docs/templates

یکی از متدهایی که hygen در اختیارمون قرار میده ()h.changeCase.pascal هست که پارامتر ورودی در command ( که اینجا name بود ) رو تبدیل به پاسکال کیس میکنه. یعنی در مثال ما en_3 تبدیل میشه به En_3 . در قسمت بالای فایل آدرس نهایی به این شکل درمیاد :
to : src/views/En_3/En_3_Components/Form.vue

قسمت پایین این فایل هم محتویات دلخواهم رو گذاشتم. کدها مربوط به کامپوننت Form هستش که حتی داخل این کدها هم باز به name ی که وارد کردیم دسترسی داریم (و میبینید که اسم Entity رو به عنوان prop به کامپوننت v-entity-form پاس دادم). محتویات و آدرس بقیه فایل‌ها رو هم به همین راحتی میتونم وارد کنم.
حالا بریم. دستور رو ران کینم ببینیم چی میشه

خب میبینیم که فایل‌ها توی مسیری که خواستیم ایجاد شد. یه نگاهی هم فولدر views بندازیم.

دقیقا همون‌ چیزی که می‌خواستیم شد. خیلی راحت فقط با ران کردن یه command ، یه فولدر به همراه فایل‌هاش به صورت کاستوم شده به پروژمون اضافه شد
اگر یه نگاهی هم به فایل Form.vue بندازیم ، می‌بینیم که کدهایی که می‌خواستیم رو داخل فایل قرار داده ( prop ی که تعریف کرده بودیم رو هم به کامپوننت v-entity-form پاس داده ).

خب دیدیم که hygen خیلی میتونه سرعت مارو توی ایجاد فایل‌ها بیشتر کنه ، مخصوصاٌ اگر مثل ما پروژتون entity based باشه.
قابلیت‌های hygen همینجا تموم نمیشه و امکانات خیلی جالب و بیشتری رو ارائه میده. مثلا یکی از کارایی که میتونید باهاش انجام بدید اینه که با ران کردن یک دستور ، یک قطعه کد رو append کنید به انتهای یک فایل. و این خیلی جاها مثل اضافه کردن یک  route جدید به فایل router میتونه به کارتون بیاد. خلاصه که پیشنهاد میکنم حتما داکشو بخونید :)

مرسی از وقتی که گذاشتید