Przedstawiamy Tetrachrome

Współautorzy: Risa Ochiai , Terry Park , Marco Xu

Dlaczego zbudowaliśmy Tetrachrome

Często widzimy narzędzia programistyczne, które wizualizują frontend, ale brakuje narzędzi, które wizualizują backend lub pełny stos, od frontendu do backendu i tego, co dzieje się pomiędzy. Jako doświadczeni programiści wierzymy, że utrzymanie holistycznej perspektywy jest kluczem do solidnych podstaw, a także okazuje się niezwykle pomocne dla deweloperów uczących się nowego ekosystemu lub bazy kodu. Postanowiliśmy zbudować Tetrachrome przy użyciu React — najpopularniejszego frameworka frontendowego — oraz Node.js / Express — najpopularniejszego środowiska uruchomieniowego wraz z frameworkiem najczęściej używanym z Node.js. Zapoznaj się z naszym narzędziem poniżej i czytaj dalej, aby dowiedzieć się, jak korzystać z Tetrachrome!

React został stworzony przez programistów z Facebooka w 2013 r., zanim został udostępniony społeczności open source w 2015 r. React wykorzystuje jednokierunkowy przepływ danych z góry na dół i umożliwia modułowość dzięki architekturze opartej na komponentach. Jak? Za pomocą wirtualnego DOM i React Fibre. Wirtualny DOM Reacta umożliwia frameworkowi ponowne renderowanie tylko tych komponentów, które wymagają odświeżenia przy użyciu React Fibre, który został wprowadzony w React v16.0. React Fibre to obiekt zawierający pojedynczo połączoną listę węzłów, które są przeplatane jako relacje rodzeństwa i rodzic-dziecko — Tetrachrome opakowuje aplikację użytkownika i mapuje te relacje między komponentami.

Często idąc ramię w ramię z Reactem na froncie, Node.js i/lub Express.js jest implementowany na backendzie z niezliczonych powodów. Node.js to nieblokujące, sterowane zdarzeniami środowisko uruchomieniowe po stronie serwera, zbudowane na silniku JavaScript V8 przeglądarki Chrome. Express to lekka platforma internetowa Node.js, która wykorzystuje wzorzec projektowy oprogramowania pośredniego, co pozwala na skalowalność aplikacji i jest szeroko obsługiwana przez społeczność open source, co pozwala na szeroki zakres kompatybilności z innymi technologiami. Tetrachrome wyodrębnia wszystkie trasy i dzienniki sieciowe za pośrednictwem Express i wyświetla je w przeanalizowanym formacie tabelarycznym, który jest przesyłany przez bibliotekę WebSocket.

Nasza wizja i kluczowe cechy

Naszą wizją Tetrachrome jest być produktem open source dla programistów, którzy uczą się nowej aplikacji, niezależnie od tego, czy chodzi o wdrożenie do nowej roli, czy naukę innej aplikacji po prostu! Stworzyliśmy ten produkt open source z React, Node.js, Express jako zaledwie punktem wyjścia i jesteśmy podekscytowani perspektywą rozszerzenia naszego produktu open source na więcej frameworków i języków frontendu / backendu.

Kluczowe cechy naszej aplikacji to:

• analizowanie React Fibre Tree aplikacji użytkownika i generowanie wizualizacji drzewa komponentów, w tym relacji rodzic-dziecko i rodzeństwo, przy użyciu D3.js
• analizowanie obiektu Express aplikacji użytkownika i tworzenie tabeli wszystkich tras i powiązanych metod
• przechwytywanie żądań HTTP z interakcji klienta z aplikacją użytkownika i tworzenie tabeli metod, punktów końcowych, statusów, długości treści, czasów odpowiedzi i znaczników czasu

Zakładając, że masz już zainstalowane Node.js i NPM, zainstaluj pakiet Tetrachrome, uruchamiając następującą komendę w swoim terminalu:

npm i tetrachrome

Dodaj Tetrachrome do zaplecza (często do pliku server.js) swojej aplikacji:

const { tetrachrome, routeStack } = require('tetrachrome');

app.use(tetrachrome);
routeStack(app);

proxy: {
  '/tetrachrome': {
    target: 'http://localhost:3000/',
    secure: false,
  },
}

• Frontend — wyświetlanie komponentów aplikacji użytkownika przy użyciu naszego algorytmu analizującego Twoje React Fibre Tree
• Backend — wyświetlanie dostępnych ścieżek i powiązanych z nimi metod
• Dzienniki — tabelaryczne wyświetlanie wszystkich żądań HTTP, które docierają do serwera użytkownika

‍ Jak możesz się przyczynić

Dziękuję za przeczytanie! Jesteśmy otwarci na opinie na temat naszego produktu i bylibyśmy bardziej niż szczęśliwi, gdybyś zechciał rozwidlić nasze repozytorium i przesłać żądanie ściągnięcia z potencjalnym wkładem lub skontaktować się z zespołem.

Oznacz nas gwiazdką na GitHub: github.com/oslabs-beta/tetrachrome

Śledź nas na LinkedIn: linkedin.com/company/tetrachrome-open-source/

Pobierz nasze narzędzie na NPM: npmjs.com/package/tetrachrome

Tetrachrom dostarczają Ci:

‍ Risa Ochiai | LinkedIn | GitHub
‍ Terry Park | LinkedIn | GitHub
‍ Judy Wu | LinkedIn | GitHub
‍ Marco Xu | LinkedIn | GitHub