Integrare la visualizzazione del software nei code editor
Un nuovo strumento migliora la comprensione del comportamento del software all'interno degli editor di codice.
― 7 leggere min
Indice
La Visualizzazione del software aiuta gli sviluppatori a vedere e capire come funzionano i programmi. Mostra come diverse parti di un sistema software si comportano durante l'esecuzione. Ci sono molti strumenti di visualizzazione, ma di solito funzionano da soli e non si integrano bene con gli editor di codice dove gli sviluppatori passano la maggior parte del loro tempo.
Questo è un problema perché leggere il codice sorgente è un modo chiave per gli sviluppatori di capire come si comporta il software. Dato che molti sviluppatori usano quotidianamente editor di codice come Visual Studio Code, avere strumenti di visualizzazione che lavorano a stretto contatto con questi editor può migliorare la comprensione del software.
In questo lavoro, proponiamo un nuovo modo di visualizzare il software direttamente all'interno degli editor di codice. Il nostro approccio consente agli sviluppatori di vedere il comportamento durante l'esecuzione in modo più interattivo, aiutandoli a collaborare in modo più efficace. Crediamo che questa integrazione possa rendere più fluida la comprensione e la collaborazione nello sviluppo software.
La Necessità di una Migliore Visualizzazione del Software
Gli sviluppatori spesso affrontano sfide quando cercano di comprendere sistemi software complessi. Questo processo implica solitamente passare avanti e indietro tra il codice e strumenti di visualizzazione separati, il che può rallentare il loro lavoro. Il continuo cambio di contesto può portare a confusione e ridurre la produttività.
Inoltre, gli strumenti di visualizzazione tradizionali tendono a fornire informazioni limitate su come il software si comporta effettivamente durante l'esecuzione. Invece di mostrare solo la struttura del codice, gli strumenti visivi dovrebbero rappresentare il comportamento in tempo reale per dare agli sviluppatori un quadro più chiaro.
La prossimità al codice è essenziale per una visualizzazione software efficace. La prossimità al codice significa che gli strumenti di visualizzazione dovrebbero essere strettamente legati al codice sorgente in modo che gli sviluppatori possano spostarsi rapidamente tra il codice e la visualizzazione senza problemi.
Date queste sfide, il nostro lavoro si concentra sulla creazione di un sistema di visualizzazione software che funzioni a stretto contatto con gli editor di codice. Questo aiuterà gli sviluppatori ad accedere a informazioni visive direttamente correlate al codice su cui stanno lavorando.
Il Nostro Approccio
Abbiamo introdotto un approccio in cui le visualizzazioni del codice possono essere incorporate all'interno degli editor di codice. Questo rende più facile per gli sviluppatori vedere come il codice si comporta durante l'esecuzione senza lasciare il loro ambiente di lavoro. Il nostro approccio utilizza Analisi Dinamica, il che significa che raccoglie dati su come il software opera mentre viene eseguito.
Incorporiamo anche il Tracciamento Distribuito per rendere la visualizzazione più realistica. Il tracciamento distribuito aiuta a tracciare come diverse parti di un sistema software comunicano tra loro mentre viene eseguito, facilitando l'identificazione di problemi di prestazioni o comportamenti imprevisti.
Le visualizzazioni che creiamo vengono presentate come "città di codice" tridimensionali, che rappresentano diverse parti del software. Gli sviluppatori possono esplorare queste città di codice mentre visualizzano contemporaneamente il codice sorgente. Questa configurazione consente una comprensione più intuitiva di come il comportamento del software si colleghi a specifici elementi di codice.
Implementazione
Per mostrare come funziona il nostro approccio, abbiamo sviluppato un prototipo che si integra con Visual Studio Code, un editor di codice molto usato. Questo prototipo può either incorporare direttamente la visualizzazione nell'editor o connettersi a un servizio esterno che fornisce le visualizzazioni.
Gli sviluppatori hanno due opzioni quando utilizzano il nostro strumento. Possono utilizzare un'interfaccia web autonoma per la visualizzazione che si collega al loro editor di codice o installare un plugin che incorpora direttamente la visualizzazione nel loro ambiente di codifica.
Usare il nostro strumento è progettato per sembrare senza soluzione di continuità per gli sviluppatori. Ad esempio, quando uno sviluppatore interagisce con elementi nell'editor di codice, le visualizzazioni si aggiornano in tempo reale. Se uno sviluppatore clicca su un metodo nel codice, la parte corrispondente nella città di codice viene evidenziata, e viceversa.
Questa funzionalità promuove un ambiente collaborativo. Gli sviluppatori possono lavorare insieme, condividere ciò che vedono e comunicare direttamente tramite lo strumento. Funzioni come popup condivisi e viste sincronizzate rendono facile discutere aspetti specifici del codice e della visualizzazione.
Studio Sugli Utenti
Per valutare quanto bene funziona il nostro approccio, abbiamo condotto uno studio sugli utenti con studenti di un programma di informatica. L'obiettivo era raccogliere il loro feedback su quanto trovassero utile e user-friendly il nostro strumento durante i compiti collaborativi.
Nello studio, coppie di studenti hanno lavorato su compiti utilizzando le visualizzazioni incorporate accanto al loro codice. Volevamo valutare come interagiscono sia con le visualizzazioni incorporate che con l'editor di codice. Le loro esperienze sono state catturate tramite osservazioni e sondaggi.
Risultati
I risultati del nostro studio hanno mostrato che la maggior parte dei partecipanti ha trovato utile il nostro approccio. Hanno valutato come fornisca un buon supporto per i compiti su cui stavano lavorando.
Confrontando l'editor di codice e lo strumento di visualizzazione, i partecipanti hanno percepito entrambi come ugualmente utili per comprendere il software. Molti partecipanti hanno notato che la visualizzazione li ha aiutati a vedere strutture e comportamenti complessi che erano più difficili da afferrare solo nel codice.
I partecipanti hanno trascorso tempo significativo sia nella visualizzazione che nell'editor di codice, indicando che il nostro strumento ha integrato efficacemente la loro comprensione del programma. Curiosamente, alcuni partecipanti preferivano le visualizzazioni per compiti specifici, soprattutto quando cercavano di capire come diverse parti del codice funzionassero insieme durante l'esecuzione.
Funzioni Collaborative
Uno degli aspetti più promettenti del nostro approccio sono le sue funzioni collaborative. Durante lo studio sugli utenti, molti partecipanti hanno notato quanto fosse utile lavorare insieme in tempo reale mentre esploravano le visualizzazioni.
Hanno apprezzato la possibilità di evidenziare parti importanti del codice e condividere intuizioni tramite lo strumento stesso, rendendo le discussioni sul codice più efficaci. La comunicazione vocale ha completato lo strumento visivo, aiutando i partecipanti a impegnarsi in discussioni significative su ciò che osservavano nelle città di codice.
Queste funzioni collaborative sono cruciali, poiché possono migliorare significativamente il processo di integrazione per i nuovi sviluppatori. Consentendo loro di vedere il comportamento di un sistema software accanto al suo codice, i nuovi membri del team possono rapidamente mettersi al passo.
Casi d'Uso
Oltre a risolvere compiti immediati, lo strumento può essere utilizzato in vari scenari. Ad esempio, può assistere nell'inserimento di nuovi sviluppatori fornendo un'esplorazione guidata dei sistemi software. I nuovi membri del team possono interagire con le visualizzazioni per comprendere meglio come funziona il sistema e ricevere spiegazioni in tempo reale da sviluppatori più esperti.
Lo strumento potrebbe anche essere utilizzato durante le revisioni del codice. Consentendo ai revisori di vedere le modifiche nel contesto del comportamento del software durante l'esecuzione, possono fornire feedback più approfonditi. I partecipanti al nostro studio hanno riconosciuto che visualizzare le modifiche potrebbe migliorare le discussioni sulle pull request.
Inoltre, il nostro approccio consente agli sviluppatori di collegare informazioni in tempo reale direttamente nel loro flusso di lavoro. Se sorgono problemi di prestazioni durante il collaudo, gli sviluppatori possono accedere rapidamente a visualizzazioni che possono evidenziare la fonte del problema, rendendo il debugging più efficace.
Conclusione
In conclusione, il nostro approccio di visualizzazione del software incorporato all'interno degli editor di codice rappresenta un passo significativo per migliorare il modo in cui gli sviluppatori comprendono e collaborano sul design dei sistemi software. I forti feedback dal nostro studio sugli utenti indicano che combinare strumenti di editing del codice e visualizzazione può migliorare il modo in cui gli sviluppatori interagiscono con sistemi software complessi.
Il potenziale delle funzioni collaborative per aumentare il lavoro di squadra e la comprensione tra gli sviluppatori è particolarmente promettente. Mantenendo gli strumenti visivi vicini al codice, gli sviluppatori possono lavorare in modo più efficace e comprendere accuratamente le dinamiche del loro software.
Il lavoro futuro si concentrerà sul perfezionare il nostro approccio e migliorare le funzionalità in base ai feedback degli utenti. Abbiamo intenzione di esplorare ulteriori casi d'uso e ampliare i nostri studi sugli utenti per includere sviluppatori professionisti per raccogliere una gamma più ampia di intuizioni.
Questo lavoro mostra come integrare la visualizzazione del software negli editor di codice possa assistere notevolmente gli sviluppatori nella comprensione del comportamento del software, portando a una migliore collaborazione e a processi di sviluppo più efficienti.
Titolo: Collaborative, Code-Proximal Dynamic Software Visualization within Code Editors
Estratto: Software visualizations are usually realized as standalone and isolated tools that use embedded code viewers within the visualization. In the context of program comprehension, only few approaches integrate visualizations into code editors, such as integrated development environments. This is surprising since professional developers consider reading source code as one of the most important ways to understand software, therefore spend a lot of time with code editors. In this paper, we introduce the design and proof-of-concept implementation for a software visualization approach that can be embedded into code editors. Our contribution differs from related work in that we use dynamic analysis of a software system's runtime behavior. Additionally, we incorporate distributed tracing. This enables developers to understand how, for example, the currently handled source code behaves as a fully deployed, distributed software system. Our visualization approach enhances common remote pair programming tools and is collaboratively usable by employing shared code cities. As a result, user interactions are synchronized between code editor and visualization, as well as broadcasted to collaborators. To the best of our knowledge, this is the first approach that combines code editors with collaboratively usable code cities. Therefore, we conducted a user study to collect first-time feedback regarding the perceived usefulness and perceived usability of our approach. We additionally collected logging information to provide more data regarding time spent in code cities that are embedded in code editors. Seven teams with two students each participated in that study. The results show that the majority of participants find our approach useful and would employ it for their own use. We provide each participant's video recording, raw results, and all steps to reproduce our experiment as supplementary package.
Autori: Alexander Krause-Glau, Wilhelm Hasselbring
Ultimo aggiornamento: 2023-08-30 00:00:00
Lingua: English
URL di origine: https://arxiv.org/abs/2308.15785
Fonte PDF: https://arxiv.org/pdf/2308.15785
Licenza: https://creativecommons.org/licenses/by/4.0/
Modifiche: Questa sintesi è stata creata con l'assistenza di AI e potrebbe presentare delle imprecisioni. Per informazioni accurate, consultare i documenti originali collegati qui.
Si ringrazia arxiv per l'utilizzo della sua interoperabilità ad accesso aperto.
Link di riferimento
- https://explorviz.dev
- https://threejs.org
- https://opentelemetry.io
- https://github.com/spring-petclinic/spring-petclinic-microservices
- https://youtu.be/wdkeDDPXeQQ
- https://www.limesurvey.org
- https://code.visualstudio.com
- https://code.explorviz.dev
- https://github.com/ExplorViz
- https://youtu.be/3qZVSehnEug
- https://doi.org/#1