Det er selvsagt kodeeditoren!
Kodeeditorer er nesten like ofte kilde til konflikt blant programmerere som kodeformatering.
For noen er Vim den eneste akseptable editoren, mens andre anser alt som ikke er en del av Emacs» komplekse univers som latterlig. Om du søker oppmerksomhet, start en tråd i et programmeringsforum med tittelen «Hvorfor jeg mener X (velg en populær kodeeditor) er dårlig/best», så kan du lene deg tilbake og nyte showet.
Argumenter, motargumenter og fornærmelser vil strømme ut av diskusjonen hele natten, og det tar måneder før tonen blir mer vennlig.
Men hvorfor er det slik?
Jada, mennesker har en tendens til å overkomplisere ting, men jeg mener kodeeditorer er spesielle for programmerere. En typisk programmerer tilbringer nesten all sin tid (over 98%, vil jeg anta) i sin valgte kodeeditor. De kjenner den inn og ut – dens styrker, svakheter, begrensninger, særegenheter og skjulte funksjoner.
Det finnes ikke noe mer frustrerende enn å slite med editoren mens man koder (tenk deg hvor irriterende det er å skrive en lang e-post på et nytt tastatur!). Kodeeditorer reduserer kognitiv friksjon og øker produktiviteten, og det er derfor de er så viktige og får så mye oppmerksomhet.
Så, hvilken kodeeditor er best?
Ærlig talt, jeg tør ikke engang nærme meg det spørsmålet! 😀 😀
Men om du er interessert i webutvikling, finnes det et alternativ du bør vurdere – online kodeeditorer! Du kan også kalle dem skybaserte kodeeditorer.
Det er viktig å ikke forveksle kodeeditorer med integrerte utviklingsmiljøer (IDE). Dette er to forskjellige ting, og som utvikler bør du kjenne til de mange tilgjengelige IDE-ene.
Kort sagt, online editorer er programvare som kjører eksklusivt på en ekstern server og er tilgjengelige via nettleseren.
Det høres litt rart ut, ikke sant?
Det var også min reaksjon for 3-4 år siden. Hvorfor skulle noen ønske å legge alt i hendene på en nettleser?
Kan den i det hele tatt konkurrere med en lokal kodeeditor?
Det viser seg at for de fleste tilfeller, spesielt innen webutvikling, er svaret ja. Selv om jeg ikke har gjort online editorer til mitt hovedverktøy, bruker jeg dem stadig mer i spesifikke situasjoner.
Før vi går nærmere inn på hvilke online kodeeditorer som finnes, la oss vurdere når de kan være nyttige.
Ingen konfigurasjon
Jeg vet ikke med deg, men det å sette opp min favoritteditor på et nytt system er noe jeg ikke ser frem til. Plugins, temaer, fonter, snarveier, utdrag, innstillinger… Det er en endeløs liste med ting som må tilpasses før alt fungerer som det skal. Det er lett å overse noe og deretter bli irritert når arbeidsflyten avbrytes.
Med en online editor trenger du derimot ikke gjøre noe med det første oppsettet. Offisielle versjoner, oppdateringer, nattlige bygg, støttede plattformer, systemarkitektur, FTP-synkronisering, CI/CD-pipelines – ingenting av dette betyr noe så lenge du har en nettleser!
Samarbeid
Ofte må man samarbeide med andre utviklere for å løse problemer eller feilsøke.
Tradisjonelle kodeeditorer er ikke bygget for dette – det er ikke mulig med samtidig koding, kommentering eller utheving, og det er vanskelig å legge til støtte for dette.
Datasikkerhet
Det er en selvfølge at alle prosjekter i dag har versjonskontroll, noe som betyr at en kopi av koden finnes i depotet til enhver tid. Men noen ganger er versjonskontroll ikke nok:
- Du glemmer å laste opp endringene dine, og den bærbare datamaskinen din tar fyr.
- Du har andre viktige filer og data som koden din er avhengig av, men som ikke er en del av den aktive applikasjonen. Hva skjer med dem om den bærbare datamaskinen din tar fyr?
(Ok, det ser ut som jeg er besatt av bærbare datamaskiner som tar fyr, men du skjønner poenget, ikke sant?)
Håndheve regler
Dette kan like gjerne argumenteres mot i en rettssak for utviklerrettigheter (om det finnes noe sånt), men sannheten er at utviklere sjelden ofrer sine personlige preferanser for fellesskapets beste.
For eksempel vil en hardnakket Sublime Text-tilhenger aldri bruke en av JetBrains’ utmerkede editorer, og vil alltid påpeke dens store minneforbruk og tregere ytelse.
Det samme gjelder tabulatorer vs. mellomrom (eller til og med to mellomrom vs. fire mellomrom) – det er naivt å tro at programmererne på laget ditt ikke vil krangle.
I slike tilfeller er en online editor en velsignelse – du bestemmer innstillingene for prosjektene (selv hvordan koden skal formateres), og den vil ikke godta noe før alle standarder er oppfylt. Ulempen for den enkelte, men bra for prosjektet!
Jeg begynner å gå tom for bruksområder, så la oss se på hvilke alternativer vi har for online kodeeditorer, spesielt for webutvikling.
JSFiddle
Selv om JSFiddle ikke kan erstatte en fullverdig teksteditor, er den veldig god på å håndtere engangs front-end-skript.
Den er så populær at spørsmål- og svar-sider som StackOverflow allerede støtter å bygge inn JSFiddle-lenker direkte i plattformen deres.
For å komme i gang raskt, tilbyr JSFiddle noen standard oppsett i starten; Det betyr at hvis du vil lage en demo av f.eks. React, trenger du bare å trykke på den relevante knappen og begynne å skrive kode. Når du trykker på Lagre, blir «fela» lagret, og du får en permanent URL (sjekk ut denne dumme fela jeg lagde: https://jsfiddle.net/tuqd76c4/ og merk at du kan gjøre endringer og trykke Lagre for å lage en ny versjon av denne adressen).
Her er det som gjør JSFiddle til en brukbar plattform for front-end-utvikling:
- Gratis å bruke (ingen skjulte avgifter eller freemium-funksjoner). JSFiddle finansieres av annonser (i hvert fall i skrivende stund), og du kan se en Adobe-annonse nederst til venstre på skjermbildet ovenfor.
- Funksjoner for samarbeid om kode – ideelt for utvikling av konsepter sammen, intervjuer osv.
- Flere layouter, skriftstørrelser, lyse/mørke temaer osv.
- Kodeformatering (rydding), støtte for linters (CSS og JS) og mer er på vei.
Og nå, de dårlige tingene:
- JSFiddle er en ren front-end-editor. Det er ingen måte å skrive og kjøre kode i favorittspråket ditt.
- Det finnes ingen fil- eller mappestruktur her (eller opplastinger, for den saks skyld). Du har bare én enkelt plass for all koden din, uansett hvor mye det er.
- JSFiddle kan ikke brukes til å hoste kode på din egen server. Koden må være på JSFiddle og er offentlig til enhver tid.
- Det er ingen måte å bygge en CI/CD-pipeline, bruke Git osv.
Med det sagt, JSFiddle er et utmerket verktøy for å dele proof-of-concepts og samarbeide i lynets hastighet. Det er og vil forbli en viktig aktør blant online editorer.
CodeSandbox
CodeSandbox kan betraktes som en mye kraftigere og mer komplett versjon av JSFiddle. Som navnet antyder, gir CodeSandbox en komplett kodeditoropplevelse og et sandkasse-miljø for front-end-utvikling.
CodeSandbox er et kraftsentrum og et glimrende produkt. Jeg ville gå tom for papir om jeg skulle liste opp alle fordelene, men her er noen av de mest fremtredende funksjonene:
- Npm-støtte: Ja, du kan legge til nesten hvilken som helst pakke som er tilgjengelig på npm.
- Filer, mapper, moduler: Du kan dele koden din i flere filer, legge til/fjerne bilder fra den offentlige mappen og bygge/importere moduler som du ønsker. Arbeidsflyten ligner den til en moderne modul-bundler, slik at du (nesten) ikke trenger å sette opp noe.
- Støtte for TypeScript, hot reloading, GitHub-eksport, statisk filhosting osv.
- Den er bygget på Monaco-editoren, den samme som brukes i VSCode. Dette gir deg kraftige funksjoner som «Gå til», «Finn referanser» og refaktorering!
- Støtte for Emmet-snutter
- Integrerte DevTools, linting, feilmeldinger, testrammeverk (Jest), snarveier og mer.
- Kraftig CLI for direkte import av lokale prosjekter til CodeSandbox.
Selv om gratisversjonen av CodeSandbox ikke støtter privat kode, kan du få denne funksjonen (og øke størrelsesgrensene generelt) ved å støtte dem på Patreon for så lite som $5 per måned (du kan betale opptil $50 per måned).
CodeAnywhere
Et problem med de fleste kodeeditorer på denne listen (i det minste så langt) er at de forventer at du lagrer koden på serverne deres eller at du synkroniserer kode via kommandolinjen regelmessig.
Slik er det ikke med CodeAnywhere.
De to mest fremtredende egenskapene til CodeAnywhere er:
- Forhåndsbygde container-bilder for 72+ programmeringsspråk og rammeverk. Dette betyr at du kan sette opp et nytt utviklingsmiljø direkte fra editoren! Koden din hostes automatisk på den nyopprettede containeren, og filene serveres direkte derfra.
- Koble til hva som helst. Ja, bokstavelig talt hva som helst. Du trenger ikke å lagre koden din på CodeAnywheres servere. Uansett om koden din ligger på FTP, fildelingsplattformer som Dropbox, Amazon S3 eller avanserte versjonskontrollplattformer som GitHub, kan du enkelt konfigurere CodeAnywhere til å lese fra og skrive til den kilden, og bruke kodeeditoren kun til… vel, redigering av kode. 😛
En annen ting jeg vil påpeke: Hvis du ikke er komfortabel med Git når det gjelder å se historikk og forskjeller, kan CodeAnywhere føles som en lettelse. Editoren bruker et system for å sammenligne filer, som lar deg sammenligne to filer på tvers av to revisjoner (en revisjon opprettes hver gang du lagrer en fil).
Det er imidlertid en liten hake med revisjoner – gratisversjonen lar deg beholde bare én revisjon, mens den minste betalte planen tillater maksimalt 20 revisjoner. Generelt er det ikke et problem siden du sjelden trenger å se lenger enn de siste 20 revisjonene, men siden de fleste programmerere har for vane å trykke Lagre flere ganger i minuttet, kan det være litt kjedelig.
Alt i alt er CodeAnywhere et solid tilbud for de som ønsker å flytte til skyen og bli der. 🙂 Siden funksjonene strekker seg utover front-end-kode, anbefales den på det sterkeste!
StackBlitz
Hvis du hovedsakelig jobber med front-end og ikke kan unngå VSCode-grensesnittet, er StackBlitz laget for deg.
Ser du noe spesielt?
Det gjorde ikke jeg heller før jeg rullet litt ned og trykket på Angular-knappen. Wow!
Den er ikke bare designet for å se ut som VSCode – den er bygget på VSCode-editoren! Du kan til og med installere utvidelser, søke gjennom mapper og organisere filer akkurat som du forventer i en vanlig VSCode-forekomst.
Men det er mer!
Du har kanskje lagt merke til at:
- Alle applikasjoner som opprettes på StackBlitz, distribueres automatisk på deres servere! Så denne lille Angular-appen jeg nettopp lagde, hostes automatisk på https://angular-yvyi2j.stackblitz.io/. URL-en fungerer mest sannsynlig fortsatt (men lastes sakte, som forventet når det er gratis)!
- Du kan dele prosjektet. Når du deler, har du bedre kontroll over hva andre kan gjøre.
- Du kan koble til et GitHub-lager og la kode trekkes/pushes direkte derfra. Eller du kan laste ned prosjektet som en zip-fil.
Men vent, det er mer!
Seriøst! 😀
Her er listen over offisielle funksjoner som StackBlitz tilbyr:
- Innebygd støtte for Firebase (som jeg personlig ikke bruker, men det er en velsignelse for de som ikke vil dykke ned i de skumle dypet av backend)
- Intellisense, prosjektsøk
- Hot loading mens du koder
- Importer npm-pakker
- Rediger offline når du ikke er tilkoblet!
StackBlitz er full av (fine) overraskelser når det gjelder å fjerne hindringene fra webutvikling og distribusjon. Å bygge inn VSCode på nettstedet ditt er ikke lenger bare en drøm!
AWS Cloud9
Cloud9 var uten tvil den første nettleserbaserte IDE-en som tilbød seriøse funksjoner og populariserte ideen om en nettleser-som-editor. Det er ikke rart at Amazon kjøpte det senere, og i dag er Cloud9 en del av AWS-tilbudene.
Om du er interessert i AWS-plattformen, er Cloud9 det perfekte (ok, nesten perfekte) verktøyet.
La oss se hvorfor:
- Det er ingen ekstra kostnader for bruk av Cloud9. Du kan koble Cloud9 til en eksisterende/ny AWS-databehandlingsinstans, og du betaler bare for den instansen. Det er også mulig å koble til en tredjepartsserver via SSH – helt gratis! 🙂
- Førsteklasses støtte for AWS serverløse applikasjoner (feilsøking osv.)
- Direkte terminaltilgang til AWS fra editoren (en god terminal er noe jeg savner i VSCode)
- Over 40 programmeringsspråk støttes (Go, C++, Ruby, Node, Python, PHP, Java …)
Samarbeidsfunksjonene i Cloud9 er også nyttige, og gjør det mulig å gjennomføre kode-gjennomganger og intervjuer på en smidig måte.
En annen nyttig funksjon er en video-stil avspilling av endringer som er gjort i en fil, som gjør gjennomgangsprosessen til en fornøyelse:
Mitt råd?
Hvis du er interessert i AWS, bør du teste ut Cloud9 nå. Og om du ikke er på skyen ennå, men vurderer å flytte dit, bør du bruke AWS og integrere Cloud9 i arbeidsflyten din. Det er en god beslutning!
Gitpod
Gitpod er en nytenkende versjon av skybaserte kodeeditorer (eller IDE-er) som er designet for å holde koden din testet og oppdatert hele tiden. Den er dypt integrert med GitHub, og kjører tester og CI/CD-pipelines hver gang du legger til kode, for å sikre at den alltid er 100 % i orden.
Den er verdt å sjekke ut om du elsker VSCode-opplevelsen og ønsker et verktøy som støtter alle de store back-end- og front-end-språkene og rammeverkene (Django, Rails, Revel osv.).
Theia
Om du er en tilhenger av SOLID og en nøye programvarearkitekt, vil Theia IDE være noe for deg. Det er en kode-IDE skrevet i TypeScript (et stort pluss!) som har et tydelig skille mellom front-end og back-end. Front-end kjører i en nettleser, mens back-end kan være hvor som helst – lokalt eller i skyen!
Men det er ikke alt – front-end kan kjøres som en Electron-app med et fullt funksjonelt og isolert nettlesermiljø, noe som gir deg utseendet og følelsen til en lokal applikasjon om ønskelig.
GitHub Codespaces
GitHub Codespaces tilbyr kraftige virtuelle maskiner for å kjøre kode og utvikle webapplikasjoner. Ved å bruke Visual Studio Code, som inkluderer en editor og et komplett økosystem, vil det være lettere å jobbe i nettleseren.
Prøv det nyeste utviklingsmiljøet for prosjektene dine, sammen med forhåndsbygde bilder. Du vil oppleve lav ventetid i ulike regioner ved å skalere VM-ene dine opp til 64 GB RAM og 32 kjerner. Begynn å kode med standardiserte miljøer, maskinvarespesifikasjoner, editorinnstillinger, utvidelser og krav til kjøretid.
Du kan isolere avhengighetene mellom prosjektene ved hjelp av docker-compose og containere. I tillegg kan du enkelt forhåndsvise endringene dine i nettleseren og dele offentlige og private porter med teammedlemmer. Du kan også redigere detaljer som mellomrom, tabulatorer, lys/mørkt tema, forskjønne koden, og velge mellom ulike temaer som solarisert og Monokai.
Nybegynnere som ønsker å prøve lykken, kan bruke GitHub Codespaces gratis med begrensede fordeler, men du vil ha nok funksjoner til å komme i gang. Om du er et team eller en bedrift, kan dere begynne å bruke GitHub Codespaces for $40 per bruker per år.
JetBrains
Få ferske, reproduserbare og automatiserte skymiljøer klare til bruk på sekunder, og begynn å kode med JetBrains IDE – Space. Det er en komplett løsning for programvareprosjekter og team, som tar ansvar for hele utviklingsprosessen, fra CI/CD-pipelines og hosting av Git-repositorier til publisering av pakker.
Space er en dedikert virtuell maskin med en Docker-container. Du kan installere alle de nødvendige bibliotekene og verktøyene du trenger i prosjektet ditt. Strømlinjeform og akselerer oppstartsopplevelsen ved å dele og reprodusere arbeidsområdene når du vil.
La nykommere begynne å utvikle kode umiddelbart uten å kaste bort tid på å sette opp en lokal maskin. Du får en komplett IDE som er klar til bruk når du trenger å begynne å skrive kode, feilsøke og kjøre den på sekunder for å teste utdata. JetBrains tilbyr en sentralisert plattform for å administrere utviklingsmiljøene.
Alt du gjør og hver ressurs du bruker, spores på ett sted. Du kan også enkelt integrere ressursene i utviklings-pipelinen. Avhengig av prosjektet ditt, kan du velge den foretrukne typen virtuelle maskin for å passe prosjektstørrelsen. Space vil spare ressursene dine ved å sette kodearbeidsområdet i dvale, slik at du kan begynne å jobbe med det igjen etter en pause.
Start i dag, og opplev fordelene med dette fantastiske verktøyet helt gratis.
CodeTasty
CodeTasty er en utvidbar, smart og moderne sky-IDE med mange funksjoner du vil sette pris på. Den hjelper deg med å skrive ren og lesbar kode i sanntid på det språket du foretrekker.
Få en smidig opplevelse med innebygd kompilering, kodefullføring, feilsøkingsverktøy og mye mer. Du trenger ikke å bekymre deg for oppsett; kom i gang og arbeid med prosjektene dine med en gang.
Du vil få samme følelse som når du jobber med skrivebordet ditt når du redigerer koden i skyen, med samme ytelse og hastighet. CodeTasty forstår behovene til utviklere, og lar deg installere så mange utvidelser du vil for å øke produktiviteten. I tillegg støtter den over 40 språk og flere tusen linjer med kode i én fil.
Prøv CodeTasty gratis for å få ett sandkasse-arbeidsområde, 2 FTP/SSH-arbeidsområder, samarbeidsfunksjon, terminal og 2 samarbeidspartnere. Du kan også starte med en betalt plan for $4 per måned, og få sjansen til å se over koden før du kjører den.
Replit
Lær, skriv og lag kode med Replit, en gratis, samarbeidende IDE i nettleseren som støtter over 50 språk, uten å bruke mye tid på oppsett. Du kan begynne å kode på ditt språk på alle enheter, operativsystemer og plattformer.
Inviter teammedlemmer, kolleger eller venner til å redigere koden i Google Docs-stil. Du kan importere koden din til GitHub for å kjøre og samarbeide med GitHub-repositorier uten oppsett. Enten du er komfortabel med C++, Python, CSS eller HTML, kan du skrive koden og redigere den på en enkelt plattform.
Når du er ferdig med koden, går den umiddelbart live. Hvis du også vil lære om koding, har Replit over tre millioner teknologer, kreative, engasjerte programmerere og mer. Med samarbeid i sanntid med teamene dine vil teamet bli mer produktivt. Du kan også lage applikasjoner, roboter osv. ved hjelp av plugins mens du koder. Verktøyet hjelper deg også med å utvikle prosjektene dine direkte fra nettleseren.
Registrer deg for en konto, og begynn å kode nå.
PaizaCloud
Bygg webapplikasjoner i nettleseren din med PaizaCloud IDE. Det er et webutviklingsmiljø for Node.Js, MySQL, Django, Java, PHP, Jupyter Notebook, Laravel, WordPress og mer.
PaizaCloud lar deg skrive kode uten å bekymre deg for å sette opp miljøet. Bare åpne nettleseren, og miljøet ditt vil være klart i løpet av tre sekunder. Enten du bruker Mac-, iPad-, OS- eller Windows-versjon, kan du bruke det samme miljøet i alle nettlesere.
Du kan bruke Linux-skall for å sette opp webbaserte utviklingsmiljøer enklere og mer fleksibelt. Du kan også publisere de perfekte tjenestene for porteføljen din, som hostingtjenester, ved å oppgradere til grunnplanen.
Kjør kommandoer, administrer filer, rediger kode og mer i nettleseren. PaizaCloud eliminerer behovet for å legge til kommandoer som vim, ssh osv. for redigering av filer eller pålogging. I stedet kan du enkelt og effektivt betjene serverne akkurat som du kjører en vanlig PC.
Ta en prøvetur med gratisplanen med 2 kjerner og 2 GB minne. Eller benytt deg av ubegrenset serverlevetid med $9,80 per måned og få 1 GB ekstra diskplass.
Konklusjon
Dette dekker de fleste IDE-er og kodeeditorer som er tilgjengelige per i dag. Jeg har utelatt to typer tilbud i denne listen: de som er fokusert utelukkende på intervjuer og ikke har fullverdige miljøer (bortsett fra vår elskede klassiker JSFiddle, selvfølgelig), og de som ikke ser ut til å tilby noe særlig og bare har en fin hjemmeside.
Om du trenger noe enkelt for webutvikling, kan du utforske disse kodeeditorene.