قدم گذاشتن در Vue – افزایش تجربه کاربری در JHipster Lite

در اصل در renanfranca.github.io منتشر شده است

با سلام به همه! امروز خوشحالم که در حین کار بر روی پروژه JHipster Lite در GitHub به ماجراجویی اخیرم در دنیای Vue.js می پردازم. من برای حل یک مشکل وارد این چارچوب محبوب جاوا اسکریپت شدم و در این فرآیند اطلاعات زیادی در مورد چارچوب و معماری شش ضلعی یاد گرفتم. بنابراین، بیایید درست شیرجه بزنیم!

موضوع در دست است

در ابتدا، می‌خواهم به مشکلی که آغازگر سفر Vue من بود، بپردازم. شماره 3371 توضیح می دهد که هر بار که کاربر به صفحه دیگری می رود، ویژگی های ماژول بازنشانی می شود. این می تواند برای کاربران خسته کننده باشد، زیرا آنها باید هر بار که صفحه را تغییر می دهند، ترجیحات خود را دوباره تعریف کنند. این راه حل پیشنهادی برای حفظ ویژگی های ماژول در سراسر صفحات با استفاده از ذخیره سازی محلی بود.

بنابراین، هنگامی که یک ویژگی تایپ شده در صفحه Landscape بدون نیاز به تایپ مجدد، در صفحه Patch بارگذاری شود، این مشکل حل شده در نظر گرفته می شود. بیایید نگاهی به تصاویر زیر بیندازیم که همان ویژگی “نام کامل پروژه” را نشان می دهد که بین گزینه های منوی Landscape و Patch به اشتراک گذاشته شده است.

اولین قدم های من با Vue

برای حل این مشکل، برای اولین بار متوجه شدم که با Vue.js کار می کنم. من این سفر را هنگام ایجاد درخواست کشش شماره 6091، با عنوان “اشتراک گذاری ویژگی های ماژول بین صفحات افقی و پچ” آغاز کردم. من تغییرات زیادی در کد ایجاد کردم تا ویژگی های ماژول را بین صفحه ها به اشتراک بگذارم.

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

چالش های معماری شش ضلعی

چالش جالبی که در طول این توسعه با آن مواجه شدم حفظ اصول معماری شش ضلعی در حین برنامه نویسی قسمت جلو بود. مواردی وجود داشت که من اشتباهاتی را انجام دادم که با مفاهیم معماری در تضاد بود، اما خوش شانس بودم که یک بازنگری کد داشتم که به این تناقضات اشاره کرد و به وضوح مرا راهنمایی کرد که چه کاری باید انجام شود.

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

ایجاد بهبود

تغییرات زیر با حفظ وضعیت ویژگی های ماژول در صفحات مختلف، تجربه کاربر را به طور قابل توجهی بهبود بخشیده است. استفاده از یک مخزن برای مدیریت پارامترهای ماژول نیز کارایی و قابلیت اطمینان کد را افزایش داده است.

بخش اول: ModuleParametersRepository.ts و LocalStorageModuleParametersRepository.ts

من دو فایل TypeScript ایجاد کردم: ModuleParametersRepository.ts و LocalStorageModuleParametersRepository.ts.

که در ModuleParametersRepository.ts، من یک رابط معرفی کردم ModuleParametersRepository:

import { ModuleParameterType } from "@/module/domain/ModuleParameters";

export interface ModuleParametersRepository {
  store(map: Map<string, ModuleParameterType>): void;
  get(): Map<string, ModuleParameterType>;
}

این رابط قراردادی برای ذخیره و بازیابی پارامترهای ماژول فراهم می کند. را store روش یک نقشه از نوع را می پذیرد ModuleParameterType و چیزی را پس نمی دهد، در حالی که get متد یک نقشه از همان نوع را برمی گرداند.

که در LocalStorageModuleParametersRepository.ts، اجرا کردم ModuleParametersRepository رابط:

import { ModuleParametersRepository } from "../domain/ModuleParametersRepository";
import { ModuleParameterType } from "../domain/ModuleParameters";

export class LocalStorageModuleParametersRepository
  implements ModuleParametersRepository
{
  private readonly STORAGE_KEY = "moduleParameters";
  private readonly localStorage: Storage;

  constructor(localStorage: Storage) {
    this.localStorage = localStorage;
  }
  store(map: Map<string, ModuleParameterType>): void {
    this.localStorage.setItem(
      this.STORAGE_KEY,
      JSON.stringify(Array.from(map.entries()))
    );
  }

  get(): Map<string, ModuleParameterType> {
    const storedValue = this.localStorage.getItem(this.STORAGE_KEY);
    if (storedValue) {
      return new Map(JSON.parse(storedValue));
    }
    return new Map<string, ModuleParameterType>();
  }
}

در این کلاس، a را تعریف کردم STORAGE_KEY ثابت برای شناسایی محل نگهداری و الف localStorage خاصیت نوع Storage. سازنده a را می پذیرد Storage شی و آن را به localStorage.

را store روش نقشه ای از ModuleParameterType، آن را با استفاده از یک رشته تبدیل می کند JSON.stringify، و این رشته را در آن ذخیره می کند localStorage با استفاده از setItem روش. را get متد رشته ذخیره شده را از آن بازیابی می کند localStorage با استفاده از getItem با استفاده از روش، آن را دوباره به نقشه تجزیه می کند JSON.parse، و آن را برمی گرداند. اگر مقدار ذخیره شده ای پیدا نشد، یک نقشه جدید و خالی برمی گرداند.

بخش دوم: Main.ts

اولین تغییری که انجام دادم اضافه کردن یک واردات جدید در بالای صفحه بود main.ts فایل. من وارد کردم LocalStorageModuleParametersRepository کلاس از فایل ‘./module/secondary/LocalStorageModuleParametersRepository’. این کلاس مسئول ذخیره ویژگی های ماژول در حافظه محلی مرورگر است.

import { LocalStorageModuleParametersRepository } from "./module/secondary/LocalStorageModuleParametersRepository";

بعد، من یک نمونه جدید از LocalStorageModuleParametersRepository، گذراندن localStorage به عنوان یک استدلال این به کلاس اجازه می دهد تا به حافظه محلی مرورگر برای ذخیره و بازیابی ویژگی های ماژول دسترسی پیدا کند.

const moduleParametersRepository = new LocalStorageModuleParametersRepository(
  localStorage
);

بالاخره اضافه کردم moduleParametersRepository به زمینه برنامه Vue. این اجازه می دهد تا هر جزء Vue به مخزن و بنابراین به ویژگی های ماژول دسترسی پیدا کند.

app.provide("moduleParameters", moduleParametersRepository);

این تغییرات اجازه می دهد تا ویژگی های ماژول به طور مداوم ذخیره شود و تجربه کاربر هنگام پیمایش بین صفحات بهبود یابد. علاوه بر این، اجرای LocalStorageModuleParametersRepository به بخش‌های دیگر برنامه اجازه می‌دهد تا به راحتی به ویژگی‌های ماژول دسترسی داشته باشند و کد را ماژولارتر و نگهداری آسان‌تر می‌کند.

قسمت سوم: Landscape.component.ts

در به روز رسانی اخیر مولفه Landscape پروژه JHipster Lite، تغییر قابل توجهی برای بهبود مدیریت پارامترهای ماژول ایجاد شد. کد اصلی از یک مرجع محلی استفاده می کرد، valuatedModuleParameters، برای ذخیره پارامترهای ماژول ها. این با یک راه حل قوی تر جایگزین شد: یک الگوی مخزن.

را ModuleParametersRepository در بالای فایل وارد شد و نمونه ای از آن به کامپوننت تزریق شد. این مخزن وظیفه مدیریت پارامترهای ماژول را بر عهده دارد و روشی متمرکزتر و سازگارتر برای مدیریت این مقادیر ارائه می دهد. این تغییر در خطوط زیر قابل مشاهده است:

import { ModuleParametersRepository } from '@/module/domain/ModuleParametersRepository';
...
const moduleParameters = inject('moduleParameters') as ModuleParametersRepository;
const moduleParametersValues = ref(moduleParameters.get());

را moduleParametersValues مرجع اکنون به مقادیر بازیابی شده از مخزن اشاره می کند و هر تغییری در این مقادیر دوباره در مخزن ذخیره می شود. این را می توان در updateProperty و deleteProperty مواد و روش ها:

const updateProperty = (property: ModuleParameter): void => {
  moduleParametersValues.value.set(property.key, property.value);
  moduleParameters.store(moduleParametersValues.value);
};

const deleteProperty = (key: string): void => {
  moduleParametersValues.value.delete(key);
  moduleParameters.store(moduleParametersValues.value);
};

این رویکرد جدید تضمین می کند که پارامترهای ماژول به طور مداوم در بخش های مختلف برنامه مدیریت می شوند و خطر ناهماهنگی ها و اشکالات را کاهش می دهد. همچنین کد را قابل نگهداری تر و درک آن آسان تر می کند، زیرا مسئولیت مدیریت پارامترهای ماژول به وضوح تعریف شده و در داخل کپسوله می شود. ModuleParametersRepository.

بخش چهارم: ModulesPatch.component.ts

از قسمت واردات شروع کردم، معرفی کردم ModuleParametersRepository از دامنه ماژول این مخزن برای مدیریت پارامترهای ماژول طراحی شده است و راه کارآمدتری برای مدیریت آنها ارائه می دهد.

import { ModuleParametersRepository } from "@/module/domain/ModuleParametersRepository";

در defineComponent تابع، من جایگزین moduleParameters رف با تزریق از moduleParameters از ModuleParametersRepository. این به کامپوننت اجازه می دهد تا مستقیماً به مخزن دسترسی داشته باشد و کارایی بازیابی داده ها را بهبود بخشد. من هم معرفی کردم moduleParametersValues به عنوان یک ref، که وضعیت فعلی پارامترهای ماژول را از مخزن دریافت می کند.

const moduleParameters = inject('moduleParameters') as ModuleParametersRepository;
const moduleParametersValues = ref(moduleParameters.get());

در isNotSet تابع، منبع مقدار را تغییر دادم moduleParameters.value.get(propertyKey) به moduleParametersValues.value.get(propertyKey). این تضمین می کند که تابع وضعیت فعلی پارامترهای ماژول را بررسی می کند.

const value = moduleParametersValues.value.get(propertyKey);

در updateProperty و deleteProperty توابع، وضعیت پارامترهای ماژول را پس از هر تغییر در مخزن به روز کردم. این تضمین می کند که مخزن همیشه آخرین وضعیت پارامترهای ماژول را نگه می دارد.

const updateProperty = (property: ModuleParameter): void => {
  moduleParametersValues.value.set(property.key, property.value);
  moduleParameters.store(moduleParametersValues.value);
};

const deleteProperty = (key: ModulePropertyKey): void => {
  moduleParametersValues.value.delete(key);
  moduleParameters.store(moduleParametersValues.value);
};

در تابعی که یک ماژول را اعمال می کند، جایگزین کردم moduleParameters.value با moduleParametersValues.value به عنوان منبع پارامترها این تضمین می کند که آخرین وضعیت پارامترهای ماژول هنگام اعمال یک ماژول استفاده می شود.

parameters: moduleParametersValues.value,

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

moduleParametersValues.value.set(property.key, property.value);
moduleParameters.store(moduleParametersValues.value);

در نهایت، در بیانیه بازگشت از defineComponent عملکرد، جایگزین کردم moduleParameters با moduleParametersValues. این تضمین می کند که کامپوننت همیشه آخرین وضعیت پارامترهای ماژول را ارائه می دهد.

moduleParametersValues,

نتیجه

این تغییرات پتانسیل افزایش چشمگیر تجربه کاربری در JHipster Lite را دارند. با وجود ویژگی‌های ماژول که اکنون در سراسر صفحات وجود دارد، کاربران دیگر نیازی به تعریف مجدد تنظیمات ترجیحی خود در هر بار رفتن به صفحه دیگری ندارند.

با این حال، لطفاً توجه داشته باشید که این تغییرات اشکال زیر را ایجاد کرده است. ذخیره‌سازی خصوصیات محلی هیچ بازنشانی 6279 را انجام نمی‌دهد که قبلاً آن را برطرف کرده‌ام. من مشتاقانه منتظر بازخورد جامعه هستم و آماده هستم تا هر گونه اصلاحات لازم را انجام دهم.

برای درک جامع تغییرات، توصیه می کنم کد را مستقیماً در GitHub مرور کنید. منتظر به روز رسانی های بیشتر در مورد توسعه JHipster Lite باشید!

امیدوارم این پست برای شما مفید و جالب بوده باشد. اگر سوال یا نظری دارید، لطفاً آن‌ها را در زیر مطرح کنید. تا دفعه بعد، کد نویسی مبارک!