Ti presentiamo Tetrachrome

Co-autore di: Risa Ochiai , Terry Park , Marco Xu

Perché abbiamo costruito Tetrachrome

Spesso vediamo strumenti per sviluppatori che visualizzano il frontend, ma mancano strumenti che visualizzino il backend o l'intero stack, dal frontend al backend e ciò che sta accadendo nel mezzo. In qualità di sviluppatori esperti, crediamo che mantenere una prospettiva olistica sia la chiave per una solida base e si dimostri anche immensamente utile per gli sviluppatori che imparano un nuovo ecosistema o base di codice. Abbiamo deciso di creare Tetrachrome utilizzando React, il framework frontend più popolare, e Node.js / Express, l'ambiente di runtime più popolare insieme al framework più comunemente utilizzato con Node.js. Visualizza in anteprima il nostro strumento qui sotto e continua a leggere per imparare a usare Tetrachrome!

React è stato creato dagli sviluppatori di Facebook nel 2013 prima di essere rilasciato alla comunità open source nel 2015. React utilizza un flusso di dati unidirezionale dall'alto verso il basso e consente la modularità con la sua architettura basata su componenti. Come? Tramite DOM virtuale e React Fiber. Il DOM virtuale di React consente al framework di eseguire nuovamente il rendering solo di quei componenti che richiedono un aggiornamento utilizzando React Fiber, che è stato introdotto in React v16.0. React Fiber è un oggetto che comprende un elenco di nodi collegati singolarmente, che sono intrecciati come relazioni di pari livello e genitore-figlio: Tetrachrome avvolge l'applicazione utente e mappa queste relazioni tra componenti.

Spesso andando di pari passo con React sul frontend, Node.js e/o Express.js viene implementato sul backend per una miriade di motivi. Node.js è un ambiente di runtime lato server non bloccante, basato su eventi, basato sul motore JavaScript V8 di Chrome. Express è un framework Web Node.js leggero che utilizza un modello di progettazione middleware, che consente la scalabilità delle applicazioni ed è ampiamente supportato nella comunità open source, il che consente un'ampia gamma di compatibilità con altre tecnologie. Tetrachrome estrae tutti i percorsi e i registri di rete tramite Express e li restituisce in un formato tabulare analizzato, che viene trasferito tramite una libreria WebSocket.

La nostra visione e le caratteristiche principali

La nostra visione per Tetrachrome è quella di essere il prodotto open source di riferimento per gli sviluppatori quando apprendono una nuova applicazione, sia che si tratti di entrare in un nuovo ruolo o di apprendere un'altra applicazione solo perché! Abbiamo creato questo prodotto open source con React, Node.js, Express come semplice punto di partenza e siamo entusiasti della prospettiva che il nostro prodotto open source si espanda a più framework e linguaggi frontend/backend.

Le caratteristiche principali della nostra applicazione includono:

• analisi attraverso il React Fiber Tree dell'applicazione utente e generazione di una visualizzazione di un albero dei componenti, comprese le relazioni genitore-figlio e di pari livello, utilizzando D3.js
• analisi dell'oggetto Express dell'applicazione utente e creazione di una tabella di tutte le route e dei metodi associati
• acquisizione delle richieste HTTP dall'interazione del client con l'applicazione utente e creazione di una tabella di metodi, endpoint, stati, lunghezze dei contenuti, tempi di risposta e timestamp

Supponendo che tu abbia già installato Node.js e NPM, installa il pacchetto Tetrachrome eseguendo il seguente comando nel tuo terminale:

npm i tetrachrome

Aggiungi Tetrachrome nel back-end (spesso il tuo file server.js) della tua applicazione:

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

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

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

• Frontend: visualizzazione dei componenti dell'applicazione utente utilizzando il nostro algoritmo che analizza il tuo React Fiber Tree
• Backend: visualizzazione dei percorsi disponibili e dei metodi associati
• Registri: visualizzazione tabulare di tutte le richieste HTTP che stanno colpendo il tuo server utente

‍ Come puoi contribuire

Grazie per aver letto! Siamo aperti al feedback sul nostro prodotto e saremmo più che felici se volessi creare un fork del nostro repository e inviare una richiesta pull con eventuali contributi o contattare il team.

Starci su GitHub: github.com/oslabs-beta/tetrachrome

Seguici su LinkedIn: linkedin.com/company/tetrachrome-open-source/

Scarica il nostro strumento su NPM: npmjs.com/package/tetrachrome

Il tetracromo è offerto da:

‍ Risa Ochiai | Linkedin | GitHub
‍ Terry Park | Linkedin | GitHub
‍ Judy Wu | Linkedin | GitHub
‍ Marco Xu | Linkedin | Git Hub