Как да мигрираме от AngularJS към Vue

… Използвайки ngVue

Нашето приложение в предния край на Dawex (пазар за осигуряване на приходи и получаване на данни) е приложение за една страница, захранвано от AngularJS. Първите редове от кода бяха написани през лятото на 2015 г. Тогава имаше напълно смисъл да се избере тази рамка. Екипът имаше много опит с него и той съответстваше на нашите нужди за платформата. Ъгловата (новата) беше само в алфа версия. React току-що започна да става популярен, използван предимно сред front-end общността, но нямахме достатъчно опит с него. И Вю… е, още не го беше направил.

Кой знаеше, че Vue ще свърши с големите играчи?

Въпреки че нашето приложение е разработено със стара рамка (натъжава ме да пиша това, но, ей ... 2009 г.), ние изградихме солидна архитектура и то мащабира доста дяволски добре!

От самото начало винаги се опитвахме да сме на върха и да правим най-доброто за платформата и нашите потребители. Нито беше забравено преживяването на разработчиците.

Използваме изцяло базиран на компонент дизайн с модерен JavaScript (ES2015 +) и разширени инструменти като Babel, ESLint, Gulp, Jest, Redux, Webpack и други страхотни технологии, които сцената с отворен код на JavaScript може да предложи.

Тогава какво?

Като преден разработчик, аз се вълнувам всеки път, когато в моята емисия в Twitter се появи нова лъскава рамка / или инструмент (вие го наречете) (разбира се, това не означава, че ще се приземи веднага в нашия стек). Както можете да се досетите, Vue предизвика интереса ми - дотолкова, че старателно исках да започна да мигрирам нашето приложение от AngularJS към Vue.

API Vue е много по-прост. Доста впечатляващо е колко бързо е да се следи с него.

Например, имате нужда само от един файл (.vue), за да създадете компонент, и там отивате - готов за употреба! Понякога все още се обърквам със спецификацията на случай camelCase / kebab между декларациите и използването в HTML шаблони с AngularJS.

Ние всъщност не страдаме от проблеми с производителността, но нека бъдем честни: мръсната проверка е само НАЙ. Системата за реактивност във Vue е ненатрапчива и комбинирана с леката си виртуална DOM реализация, тя позволява откриването на промяна да бъде мълниеносно.

Освен това, опитът на разработчиците е много по-добър. Намирам се за много по-доволен и ентусиазиран, когато се развивам с Vue. Няма да продължа с Vue срещу AngularJS, има много други публикации в блога за него.

Обратно към темата за миграцията. Не може да се направи с един изстрел. Тя трябва да бъде прогресивна и възможно най-гладка.

Следващата част на тази статия описва някои мисли за това предизвикателство:

Запознайте се ngVue

ngVue е AngularJS модул. Тя ви позволява безболезнено да интегрирате Vue компоненти в приложението AngularJS.

Това означава, че можем да стартираме всяка нова функция за разработка с Vue или да преобразуваме съществуваща.

Ето слайдове за това от беседа, която изнесох на среща на LyonJS: http://slides.com/npayot/ng-vue.

Този модул предлага директива: vue-компонент и фабрика: createVueComponent.

Директивата дава възможност за вграждане на компонент Vue с неговите дефинирани свойства. Фабриката ще доведе до същия резултат, тъй като създава директива за многократна употреба, която е обвързана с конкретен компонент Vue.

вю-компонент

Като пример, да кажем, че имаме прост Vue компонент, който бихме искали да добавим в AngularJS един:

Ето компонента AngularJS:

Както можете да видите тук, директивата на компонент vue приема два атрибута: име и vprops.

name трябва да бъде името на компонента Vue, регистрирано като стойност в AngularJS модул. vue-компонентът се нуждае от него, за да може да получи при своята връзка функция екземпляра на компонента Vue чрез услугата $ инжектор. По този начин той може да бъде инстанциран и изобразен на тага . Също така, ngVue модул трябва да бъде добавен към основния модул AngularJS.

vprops ви позволява да предавате данни от AngularJS контекст към компонента Vue. Може да се използва и по този начин, като ви предоставя по-фин контрол върху свойствата на вашите компоненти:

createVueComponent

Тази фабрика е интересна, защото дава възможност за свързване на компонент Vue с персонализирана директива. По този начин използването на Vue-компонент не е необходимо, нито регистрирането на Vue компонента като стойност и собственият ви персонализиран маркер може да се използва.

Интеграцията на компонентите на Vue е първата стъпка в миграционния път.

За съжаление (в конкретния случай ...), AngularJS идва с дебел слой, който не можем да използваме във Vue: Dependency Injection. Ако от години разработвате и поддържате приложението AngularJS, се обзалагам, че сте създали куп сладки услуги / фабрики / доставчици. Ще е жалко, че не можете да ги използвате в компонентите на Vue, нали? Поне по време на съвместното съжителство на AngularJS и Vue. Е, може да има решение ... Нека го проучим!

Използване на услугите на AngularJS в компонентите на Vue

Благодарение на модулите ES2015, екземплярите на услугите на AngularJS могат да бъдат изложени и след това импортирани. Без инжектиране на зависимост! За да активирате този механизъм, екземплярите на услугите трябва да залагат в контекста на AngularJS. $ инжектор за спасяването! Ето как работи:

След това можем просто да импортираме и използваме екземпляр helloService навсякъде: import {helloService} от 'path / to / hello.service;

Тада!

заключение

Мисля, че ngVue и освобождаването от инжектиране на зависимост за услугите на AngularJS (добре, нещо като…) представляват добър подход за прогресивна миграция към Vue.

Очевидно трябва да се посрещнат други ограничения и предизвикателства, които в крайна сметка ще бъдат тема на друга публикация в блога, когато започнем.