Fra tid til annen dukker det opp nye kodeeditorer som prøver å utfordre mer etablerte editorer som VS Code eller Jetbrains sine editorer. Stort sett er de alle sammen variasjoner rundt samme tema – det dukker sjelden opp noe som er virkelig nyskapende.
Nå har det imidlertid kommet en kodeeditor som ikke ligner på noe annet jeg har vært borti – Haystack.
Det som gjør Haystack spesiell, er at du i stedet for å ha filene i hver sin fane forholder deg til et stort lerrett (canvas) med en masse editorvinduer. Hver kodefil du klikker på får sin egen editor på lerretet, og så kan du zoome inn og ut og dra editorvinduene rundt som du vil.
Jeg har prøvd Haystack noen dager, her er mitt førsteinntrykk.
Lett å få oversikt
Haystack presenterer seg selv som "et IDE bygget på toppen av et canvas", og lover å "ta seg av alt som er kjedelig og forvirrende med kodingen".
En av grunnleggerne av Haystack, Akshay Subramaniam, skriver på Reddit at han begynte å lage Haystack etter mye frustrasjon med å jobbe med store kodebaser. Han nevner spesielt det å følge flyten i kode, for eksempel fra databaselaget til frontend-UI-et når du lager en app der brukeren skal kunne legge til varer i en handlekurv. Dette innebærer ofte å navigere gjennom en labyrint av filer og funksjoner som henger sammen på ulike måter.
Om Haystack virkelig klarer å fjerne alt som er forvirrende, er jeg ikke overbevist om. Det som imidlertid er helt sikkert, er at Haystack gjør det enklere å få oversikt. Eller finne koden i høystakken, om du vil.
Slik så det ut da jeg åpnet ett av mine egne prosjekter:
Hvert vindu kan dras rundt, og du kan zoome inn og ut på lerrettet med musen eller med hurtigtaster. Det er også hurtigtaster for å hoppe raskt mellom de ulike vinduene du har oppe.
Basert på VS Code
Jeg må innrømme at jeg gruer meg nesten like mye til å bytte editor som å bytte bank. Det er alltid en masse styr.
Det å bytte til Haystack viste seg imidlertid å være overraskende enkelt. Haystack er nemlig basert på en fork av VS Code, og du får automatisk synkronisert over alt av innstillinger, tillegg og andre ting fra VS Code.
Etter at Haystack var installert, var i praksis alt likt – med unntak av at jeg i stedet for de vanlige fanene for hver fil nå hadde fått et uendelig stort lerret å zoome inn og ut på.
Det aller meste av VS Code-tillegg fungerte uten at jeg behøvde å gjøre noe.
Brukergrensesnittet vil være velkjent for de som bruker VS Code. Hele sidestolpen på venstre side med Explorer, søk, Source Control, og så videre er helt likt det du er vant til.
Du har imidlertid et par ekstra valg:
- En Navigate Editors-knapp som gir deg en liste over alle editorvinduene du har åpnet på lerretet. Med andre ord en slags innholdsfortegnelse for å finne raskere frem hvis du har veldig mye oppe samtidig.
- En Canvas Workspaces-knapp. Når du har mange editorer oppe, kan du lagre disse som et workspace (arbeidsområde). Slik kan du for eksempel lage separate arbeidsområder for å samle alt som har med en bestemt funksjonalitet i applikasjonen din å gjøre.
Finner forbindelsene
Når du bruker Haystack, åpnes det automatisk et editorvindu på lerretet hver gang du klikker på en ny fil i Explorer. Disse kan du dra fritt rundt og plassere akkurat der du ønsker, eller du kan trykke en knapp for å automatisk organisere vinduene.
Noe av det mest geniale, er hvordan Haystack lar deg utforske kodebasen din som en "rettet graf" (directed graph) av funksjoner, metoder og klasser.
Forklart på en annen måte så vil du kunne få piler mellom de ulike kodeeditorene som viser hvilke funksjoner eller metoder som kaller hvilke andre, eller blir kallet.
Det fungerer slik:
Til høyre for et editorvindu har du to piler du kan klikke på. Et klikk på venstrepilen viser deg alle inngående kall, mens høyrepilen viser utgående kall. I eksempelet under velger vi å ta en kikk på CustomerPortalForm:
Etter å ha valgt ett av de utgående kallene (CustomerPortalForm), åpnes et nytt editorvindu med denne koden – bundet sammen med det første vinduet med en pil:
Slik kan du organisere kode som henger sammen pent og pyntelig som et slags flytskjema på skjermen.
Så er det bare å klikke i den editoren du vil redigere koden i, eller bruke hurtigtaster for å raskt navigere mellom alle editorene på skjermen.
Lover godt, men mange bugs
Det er fortsatt en del svakheter og bugs, som for eksempel at når jeg har brukt tid på å arrangere editorvinduer og lagret dem som en "workspace", så dukker vinduene noen ganger opp hulter til bulter når jeg åpner workspacet igjen senere. Og noen ganger dukker ikke pilene som skal være mellom de ulike editorvinduene som henger sammen opp.
Dokumentasjonen er også foreløpig ganske dårlig – omtrent ikke-eksisterende. Men jeg har forståelse for at utviklerne i starten fokuserer mest på selve editoren og på å gjøre produktet så bra som mulig.
Men i det store og hele synes jeg Haystack virker veldig lovende. Og spesielt om du har en bredformat-skjerm – som mange jo har nå – da får du en helt annen oversikt enn du får med "vanlige" kodeeditorer.
Men jeg må innrømme at jeg ikke har turt å bytte helt til Haystack ennå. Det er litt bugs, og så er jeg ofte litt forsiktig med å gjøre meg for avhengig av teknologi som er på et tidlig stadium. I hvert fall når det ikke er et stort og anerkjent selskap som står bak. Kommer denne editoren til å få oppdateringer til neste år, eller om fem år?
Når det er sagt – det er jo ingenting i veien for å bytte til noe annet om hele prosjektet skulle strande.
Etter 7 år er en «Microsoft-fri» VSCode klar
Her kan du se utviklernes egen videodemonstrasjon av hvordan Haystack fungerer: