איך לבצע מיגרציה של מערכת legacy ל-Vue בקלות

David Meir-Levy | 6/26/2020, 7:36:45 AM

איך לבצע מיגרציה של מערכת legacy ל-Vue בקלות

נניח וקיימת לכם מערכת legacy, ואתם חושבים לשדרג אותה ולעבור לשימוש ב-Vue, אבל לא בבת-אחת, אז הנה פתרון יצירתי.

הבעיה היא בעיה מוכרת בעולם התוכנה - כתבתם אפליקציה. היא עובדת, הכל נחמד.
ועכשיו צריך להמשיך את הפיתוח, אבל גיליתם שאין אפשרות לשדרג את המערכת בלי לשבור דברים, או שהספריות בהם השתמשתם כבר לא מספקות אלכם, מיושנות, ומפריעות לכם לגייס עובדים חדשים.

בנקודה הזאת בוודאי תרצו לשדרג, אבל גם לא תרצו לעצור לחלוטין את הפיתוח כדי לשדרג מערכת, אנחנו לא בשנות ה-80.

מה שנכון בעולם הבקאנד - חלוקה למיקרו-סרביסים כדי להקל על תהליכי הפיתוח, לא רחוק מהותית מעולם הפרונטאנד. לפחות בגישה (המימוש זה כבר עניין אחר).
במקרה הזה, יהיה לכם הרבה יותר קל לשלב את המערכת הישנה עם החדשה כדי לאפשר פיתוח של פיצ׳רים חדשים בטכנולוגיה חדשה, בלי לעצור את הפיתוח כדי לכתוב מחדש מסכים קיימים.

למזלנו, כל הדפדפנים המיושנים והגרועים חלפו להם מן העולם (ביי ביי IE, אל תחזור), ואפשר עקרונית להציע פתרונות שמבוססים על ואנילה של Web Components.
במקרה של Vue, החבר׳ה הרציניים שמפתחים את הספריה דאגו להכין לנו פונקציה אחת פשוטה, שגם אשכרה עובדת, ועושה פעולה מאוד ברורה - היא מקבלת קומפוננת Vue סטנדרטית, ומחזירה אובייקט שניתן ליצור ממנו customElement סטנדרטי בדפדפן, שכולל כמובן עבודה עם props, events וכו׳.

להלן הדגמה פשוטה:

import wrap from '@vue/web-component-wrapper';

import MyComponent from './components/MyComponent.vue';

const MyCustomElement = wrap(Vue, MyComponent)

 

window.customElements.define('my-component', MyCustomElement);

לאחר המקרה הזה, תוכלו להגיע למערכת ה-Legacy שלכם, ולהשתמש באלמנט <my-component> כאילו הוא אלמנט סטנדרטי לשימוש, כמו כל div.
תוכלו להירשם לאיבנטים שהקומפוננטה ״יורה״ ולהעביר לה פרופס כמו שמעבירים כל attribute, או data prop לאלמנט ב-js.

תהנו. :)

Related tags: 
Powered by © Greenpress 2019.