Имаме удоволствието да ви представим стартирането на Middle-Aware, визуализатор на стека на повикванията за Express разработчици. Middle-Aware е приложение на Electron, което използва React, Typescript, Node.js, Express и MongoDB. Middle-Aware е изграден в партньорство с OSLabs, технологичен ускорител с нестопанска цел, посветен на улесняването на въздействащи продукти с отворен код.
Какво е Middleware?
Като цяло мидълуерът е слой от софтуер, разположен между множество приложения, което позволява на приложенията да комуникират помежду си. За целите на Express междинният софтуер са функции, добавени към тръбопровода за обработка на заявка/отговор, които могат да променят обектите на заявка и отговор, да извикват допълнителни функции на междинен софтуер или да прекратят цикъла заявка/отговор чрез изпращане на отговор до клиента. Функциите на междинния софтуер служат за различни цели, като обработка на входящи заявки, удостоверяване на потребители чрез проверка на разрешения и обработка на грешки. Мидълуерът позволява на разработчика да раздели проблемите, като модулира функционалността на бекенда във фрагменти, които се справят със специфични задачи.
Проблемът
Поради разнообразието от цели, на които служат функциите на мидълуера, и поради зачитането на разделянето на проблемите, проблемите с данните и производителността могат да бъдат трудни за проследяване, тъй като заявките се изпращат от предния край на приложение към маршрутите и междинния софтуер в задния край. Тези проблеми могат да създадат разочароващо изживяване за разработчиците, особено за тези, които не са запознати с кодовата база, тъй като преминават от файл към файл, за да проследяват потока от данни и да редактират функционалността, където е необходимо.
Решението
Създадохме приложение, посветено на разрешаването на проблемите, с които се сблъскват разработчиците на Express при проследяване на данни и производителност. Middle-Aware предоставя представа за клиентските заявки към крайните точки и пътя на данните през междинния софтуер, като улавя подробности за заявка и отговор, време за обработка и грешки. Чрез показване на пътя на данните през всяка функция на междинния софтуер на едно място, разработчиците могат да визуализират състоянието на данните през всяка стъпка от процеса, да диагностицират тесните места в цикъла заявка/отговор и да идентифицират и коригират грешки с лекота.
Приготвяме се да започнем
За да започнете да използвате Middle-Aware, можете да изтеглите приложението тук. След това просто следвайте инструкциите в нашия файл README и сте готови да започнете. Уверете се, че сте създали конфигурационния файл JSON, който изисква свойства като пътя до основната директория на проекта, порта за изпълнение на интерфейса и бекенда на проекта и началния скрипт на проекта, преди да можете да използвате Middle-Aware.
Middle-Aware архитектура и под капака
Под капака Middle-Aware внедрява модел на посетител в персонализиран плъгин Babel, за да улесни тръбопровода на инструментите, който ефективно преминава и трансформира изходния код на потребителя. Middle-Aware инжектира инструментална логика във функциите на междинния софтуер, за да позволи безпроблемно проследяване на стека на повикванията.
Както се подчертава в диаграмата по-горе, Middle-Aware се намира между работещия фронтенд и бекенд на обектния проект. Потребителят взаимодейства с обектния проект както обикновено и тъй като заявките се изпращат от интерфейса, прокси сървърът на Middle-Aware прихваща заявката и записва тялото, метода и параметрите на заявката, наред с други неща, в отдалечената или локална база данни MongoDB на потребителя . След това Middle-Aware актуализира запазената заявка с информация, събрана от бекенда, и данни, върнати чрез отговора, включително тялото на отговора и кода на състоянието, докато бекендът отговаря на интерфейса.
Входната точка на Middle-Aware е основният процес на Electron, който отговаря за създаването и управлението на главния прозорец на Middle-Aware, комуникацията между приложението и операционната система на потребителя и изпълнението на бекенда на Middle-Aware. Бекендът на Middle-Aware използва Node.js, който приложението използва за свързване с базата данни на разработчика и за стартиране на прокси сървъра.
Middle-Aware също така съдържа процес на изобразяване, който изобразява потребителския интерфейс и управлява взаимодействието на програмиста с приложението. Рендърът използва комуникационни канали между процесите, за да комуникира с основния процес. Предният интерфейс на Middle-Aware използва библиотеката React JavaScript и Tailwind CSS за графичния потребителски интерфейс на приложението.
Процесът на средното осъзнаване
След като разработчикът инсталира Middle-Aware, приложението ще отвори прозорец и ще подкани разработчика да зареди конфигурационен файл, преди да започне. Изискванията за конфигурация включват главната директория на обектния проект, целева директория за Middle-Aware за създаване на клонинг („копие в сянка“) на обектния проект и портовете за изпълнение на обектния проект и прокси сървъра на Middle-Aware.
След като конфигурира приложението, разработчикът натиска бутона за стартиране, който започва инструменталната линия на Middle-Aware. След като процесът на инструментиране започне, Middle-Aware поглъща кода на потребителя и създава скритото копие. Middle-Aware търси подходящи файлове, като JavaScript файлове, които може да се наложи да бъдат трансформирани и анализира кода в абстрактно синтактично дърво, за да инжектира инструменталната логика. Персонализираният плъгин Babel на Middle-Aware посещава всяка функция на междинния софтуер, инжектира логиката и кодът се връща обратно към JavaScript, а файловете със скрито копие се презаписват с инжектирания код. Middle-Aware изпълнява скритото копие в дъщерен процес на възел, което позволява на потребителя да тества своя проект и позволява на Middle-Aware да улови данни от инструментите.
След стартиране на процеса на инструментиране, потребителят преминава към интерфейса на обектния проект, за да упражнява функции в проекта, които задействат заявки от интерфейса към бекенда. В Middle-Aware потребителят кликва върху бутона „Извличане на тестове“, за да извлече данни, свързани с предишната заявка на потребителя. След това потребителят може да направи промени в своя изходен код, ако е необходимо, и след извършване на промени, щракнете върху бутона за стартиране, за да стартирате процеса отново.
Следващи стъпки
Екипът е горд да предостави Middle-Aware на разработчиците навсякъде. Надяваме се, че лекотата на тестване на крайни точки, разглеждане на данните, докато текат през веригата на междинния софтуер, ще бъде полезна за другите, докато работят по своите проекти. Middle-Aware е с отворен код и екипът все още активно подобрява и поддържа проекта с помощта на OSLabs. Ако имате някакви въпроси или отзиви или искате да допринесете за проекта, не се колебайте да се свържете с нас в GitHub или LinkedIn по-долу.
Запознайте се с екипа
„Middle-Aware“ | GitHub | LinkedIn
Джейсън Брийн | GitHub | LinkedIn
Zhiyi Huang | GitHub | LinkedIn
