12 bästa online-IDE- och kodredigerare för att utveckla webbapplikationer

Kodredigerare: Nästa steg efter koden

Efter själva kodningen, vad kan vara näst viktigast? Självklart, kodredigeraren!

Kodredigerare är en vanlig källa till intensiva debatter bland programmerare, strax efter diskussioner om kodformatering.

Vissa anser Vim vara den enda vettiga redigeraren, medan andra avfärdar allt som inte lever upp till den snurriga, komplexa världen av Emacs. Om du vill skapa uppmärksamhet, starta en tråd i ett programmeringsforum med rubriken ”Varför X (valfri populär kodredigerare) är usel/fantastisk”, och sen kan du luta dig tillbaka och njuta av kaoset.

Argument, motargument och förolämpningar kommer att avlösa varandra under hela natten, och det kommer att ta månader innan stämningen lugnar ner sig.

Men varför är det så här?

Visst, människor kan göra en stor sak av allt, men det finns något speciellt med kodredigerare för programmerare. En typisk programmerare spenderar nästan all sin tid (jag skulle gissa över 98%) i den valda kodredigeraren. De känner till redigeraren inifrån och ut – dess styrkor, svagheter, begränsningar, egenheter och dolda funktioner.

Det är extremt frustrerande att kämpa med en redigerare när man skriver kod. Tänk hur irriterande det är att skriva ett långt och brådskande e-postmeddelande på ett nytt tangentbord! En bra kodredigerare minskar den mentala friktionen och gör dig mer produktiv, vilket är anledningen till att de är så viktiga och får så mycket uppmärksamhet.

Så, vilken är den bästa kodredigeraren?

Ärligt talat vågar jag inte ens ge mig in på det! 😀 😀

Men om du arbetar med webbutveckling finns det ett alternativ jag vill att du ska överväga: webbaserade kodredigerare, även kallade molnbaserade redigerare.

Det är viktigt att inte förväxla en kodredigerare med en integrerad utvecklingsmiljö (IDE). Dessa är två olika saker, och som utvecklare bör du vara bekant med båda.

Enkelt uttryckt är dessa redigerare helt och hållet placerade på en fjärrserver och är tillgängliga via webbläsaren.

Låter det konstigt?

Jag kände likadant när jag först hörde talas om dem för 3-4 år sedan. Varför skulle någon vilja lägga allt i händerna på en webbläsare?

Kan den ens konkurrera med en lokalt installerad redigerare?

Det visar sig att i de flesta fall, och särskilt för webbutveckling, är svaret ja. Jag använder inte webbaserade redigerare som mitt primära verktyg, men jag använder dem allt oftare i specifika situationer.

Innan vi går in på vilka kodredigerare som finns, låt oss stanna upp och fundera på när det kan vara bra med en webbaserad redigerare.

Ingen installation krävs

Jag vet inte hur det är med dig, men jag ser inte fram emot att installera min favoritredigerare på ett nytt system. Insticksprogram, teman, typsnitt, genvägar, kodsnuttar, inställningar… Det finns oändligt många saker som måste ställas in innan det blir användbart. Det är lätt att missa något, vilket senare kan bli irriterande när arbetsflödet störs.

Däremot finns det inget att installera med en webbaserad redigerare. Officiella versioner, uppdateringar, nattliga versioner, plattformar som stöds, systemarkitektur, FTP-synkronisering, CI/CD-pipelines – inget av detta spelar någon roll så länge du har en webbläsare!

Samarbete

Ofta behöver man samarbeta med andra utvecklare för att lösa problem eller felsöka något.

Den traditionella kodredigeraren är inte byggd för detta. Det saknas stöd för samtidig kodredigering, kommentarer och markeringar. Det är svårt att lägga till detta stöd i efterhand.

Datasäkerhet

Idag använder i princip alla projekt versionshantering, vilket innebär att en kopia av koden alltid finns på ett fjärrlager. Men det finns tillfällen då versionshantering inte räcker:

• Du glömmer att pusha nyligen skapade ändringar och din bärbara dator tar eld.
• Du har andra viktiga filer och databaser som koden interagerar med, även om de inte ingår i den live-applikationen. Vad händer med dem om datorn brinner?

(Okej, det verkar som att jag är besatt av tanken på bärbara datorer som brinner, men du förstår poängen, eller hur?!)

Disciplin

Detta kanske kan argumenteras mot i domstolen för utvecklarrättigheter (om en sådan skulle existera), men sanningen är att utvecklare sällan offrar sina egna preferenser för det gemensamma bästa.

Till exempel kommer en inbiten Sublime Text-användare aldrig helt omfamna någon av JetBrains utmärkta redigerare och kommer att göra allt för att peka på hur minneskrävande och långsamma de är.

Samma sak gäller flikar kontra mellanslag (eller till och med två-mellanslags flikar mot fyra-mellanslags flikar) – det är naivt att tro att teamets programmerare inte kommer att hamna i konflikt.

I sådana fall är en webbaserad redigerare en välsignelse. Du bestämmer inställningarna för projektet (även hur koden ska formateras), och redigeraren kommer inte acceptera arbetet innan det följer alla standarder. Det kan vara tufft för den enskilda utvecklaren, men bra för projektet!

Nu har jag inte fler användningsområden att nämna, så låt oss gå vidare till de alternativ vi har när det gäller webbaserade kodredigerare, särskilt för webbutveckling.

JSFiddle

Även om JSFiddle inte kan ersätta en fullfjädrad textredigerare, är den riktigt bra på att hantera enskilda frontend-skript.

Den är så populär att frågor-och-svar-sajter som StackOverflow stöder inbäddning av JSFiddle-länkar direkt i deras plattform.

JSFiddle erbjuder några mallar för att komma igång snabbt. Om du vill ha en demo av till exempel React, klickar du bara på den relevanta knappen och börjar skriva koden. När du klickar på Spara sparas ”fiolen” och du får en permanent URL. (Kolla in denna fåniga fiol jag skapade: https://jsfiddle.net/tuqd76c4/. Du kan göra ändringar och klicka på Spara för att skapa en ny version av URL:en.)

Här är vad som gör JSFiddle till en användbar plattform för frontend-webbutveckling:

• Gratis att använda (inga dolda avgifter eller freemium-funktioner). JSFiddle finansieras av annonser, och du kan se en Adobe-annons i nedre vänstra hörnet på skärmdumpen ovan.
• Funktioner för kodesamarbete, vilket är perfekt för att utveckla idéer tillsammans och intervjuer.
• Flera layouter, teckenstorlekar, ljusa/mörka teman med mera.
• Kodformatering (rensa), kommande stöd för linting (CSS och JS).

Och nu till nackdelarna:

• JSFiddle är en ren frontend-redigerare. Det går inte att koda och köra backend-språk.
• Det finns ingen struktur med filer och mappar (eller uppladdning för den delen). Det finns bara ett enda område för all kod, oavsett hur mycket det är.
• JSFiddle kan inte användas för att hosta kod på en server. Koden måste finnas på JSFiddle och är alltid offentlig.
• Det går inte att bygga en CI/CD-pipeline, använda Git med mera.

JSFiddle är bäst lämpad för att dela ”proof-of-concept” och samarbeta i snabb takt. Den kommer alltid att vara viktig inom online-redigerare.

CodeSandbox

CodeSandbox kan ses som en kraftfullare och mer komplett version av JSFiddle. CodeSandbox lever upp till sitt namn och ger en komplett kodredigeringsupplevelse och en sandlådemiljö för frontend-utveckling.

CodeSandbox är en riktigt kraftfull och bra produkt. Det skulle ta en evighet att lista alla fördelar, men här är några fantastiska funktioner:

• Npm-stöd: Du kan lägga till nästan alla paket som finns på npm.
• Filer, mappar, moduler: Du kan dela upp koden i flera filer, lägga till och ta bort bilder från den offentliga mappen samt bygga och importera moduler. Arbetsflödet liknar det för en modern modulbundlare, så du behöver inte ställa in (nästan) någonting.
• Stöd för TypeScript, hot reloading, GitHub-export, statisk filhosting med mera.
• Den är byggd på Monaco-redigeraren, samma som används i VSCode. Detta ger kraftfulla funktioner som ”Gå till”, ”Hitta referenser” och nödvändig omstrukturering direkt till hands!
• Stöd för Emmet.
• Integrerade DevTools, linting, felövertäckning, testramverk (Jest), tangentbindningar med mera.
• Kraftfullt CLI för att importera lokala projekt direkt till CodeSandbox.

Även om gratisversionen av CodeSandbox inte stöder privat kod, kan du få den funktionen (och öka gränserna överlag) genom att stödja dem på Patreon för så lite som 5 USD per månad (eller ett valfritt belopp upp till 50 USD per månad).

CodeAnywhere

Ett problem med de flesta kodredigerare på den här listan (åtminstone hittills) är att de förväntar sig att du ska ha koden på deras servrar hela tiden, eller att du synkroniserar koden via kommandoraden regelbundet.

Det är inte fallet med CodeAnywhere.

CodeAnywhere har två funktioner som sticker ut mest:

• Färdiga container-bilder för över 72 programmeringsspråk och ramverk. Detta innebär att du kan tillhandahålla en ny utvecklingsmiljö direkt från redigeraren! Koden lagras automatiskt på den nyskapade containern och filerna serveras direkt därifrån.
• Anslut till vad som helst. Ja, bokstavligen vad som helst. Du är inte tvungen att lagra koden på CodeAnywheres servrar. Oavsett om koden finns på FTP, plattformar för fildelning som Dropbox, Amazon S3 eller på versionshanteringsplattformar som GitHub, kan du enkelt konfigurera CodeAnywhere för att läsa från och skriva till den källan.

En annan sak jag vill nämna är att om du inte är bekväm med Git när det gäller historik och skillnader, kan CodeAnywhere kännas som en lättnad. Redigeraren använder sitt diff-system för att jämföra filer, vilket gör att du kan jämföra två filer mellan två versioner (en version skapas varje gång du sparar en fil).

Det finns dock ett litet problem med revisioner – gratisversionen låter dig bara behålla en revision, medan den billigaste betalda planen tillåter högst 20 revisioner. Det brukar inte vara ett problem eftersom du sällan behöver gå längre tillbaka än de 20 senaste revisionerna, men eftersom de flesta programmerare brukar trycka på Spara några gånger per minut kan det bli frustrerande.

CodeAnywhere är ett bra alternativ för de som vill flytta till molnet och stanna där. Eftersom funktionerna går längre än frontend-kod rekommenderas den starkt!

StackBlitz

Om du huvudsakligen använder frontend och inte kan tänka dig att överge VSCode-gränssnittet, skapades StackBlitz för dig.

Ser du något speciellt?

Jag gjorde inte det förrän jag scrollade ner lite och klickade på Angular-knappen. Boom!

Det är inte en efterlikning av VSCode, det är byggt på VSCode-redigeraren! Du kan installera tillägg, söka igenom mappar och ordna filer som du förväntar dig av en vanlig VSCode-instans.

Men det finns mer!

Du kanske har lagt märke till följande:

• Alla applikationer som skapas på StackBlitz distribueras automatiskt på deras servrar! Denna enkla Angular-app som jag precis skapade hostas automatiskt på https://angular-yvyi2j.stackblitz.io/. URL:en fungerar troligen fortfarande (men kommer att ladda långsamt, eftersom det är en gratisversion)!
• Du kan dela projektet och du får bättre kontroll över vad andra får göra.
• Du kan ansluta till ett GitHub-förråd och låta kod pushas och pullas direkt därifrån. Du kan också ladda ner projektet som en zip-fil.

Men det finns mer!

Verkligen! 😀

Här är en lista över de officiella funktionerna som erbjuds av StackBlitz:

• Inbyggt stöd för Firebase (något jag personligen inte använder, men det är bra för de som inte vill dyka ner i backendens mörka djup)
• Intellisense, projektsökning
• Hot reloading medan du skriver
• Importera npm-paket
• Redigera offline när du inte är ansluten!

StackBlitz är fullt av (positiva) överraskningar när det gäller att ta bort hindren för webbutveckling och distribution. Att bädda in VSCode på en webbplats är inte längre en fantasi!

AWS Cloud9

Cloud9 var utan tvekan den första webbaserade IDE som erbjöd seriösa funktioner och som gjorde idén om webbläsare som redigerare mainstream. Det är inte konstigt att Amazon senare köpte det, och idag är Cloud9 en del av AWS-erbjudandena.

Om du använder AWS-plattformen är Cloud9 ett bra val.

Låt oss se varför:

• Det tillkommer inga extra avgifter för att använda Cloud9. Du kan ansluta Cloud9 till en befintlig eller ny AWS-beräkningsinstans och du betalar bara för den instansen. Det är också möjligt att ansluta till en tredjepartsserver via SSH – helt utan kostnad! 🙂
• Förstklassigt stöd för AWS Serverless-applikationer (felsökning med mera).
• Direkt terminalåtkomst till AWS från redigeraren.
• Stöd för över 40 programmeringsspråk (Go, C++, Ruby, Node, Python, PHP, Java…).

Samarbetsfunktionerna i Cloud9 är också bra, vilket gör granskningar och intervjuer smidiga.

En annan funktion är möjligheten att se en videoliknande uppspelning av ändringarna som gjorts i en fil, vilket gör granskningen smidigare:

Mitt råd?

Om du gillar AWS, tveka inte att använda Cloud9. Och om du ännu inte är i molnet men funderar på det, använd AWS och Cloud9 i ditt arbetsflöde. Du kan inte göra ett bättre val!

Gitpod

Gitpod är en nyare molnkodredigerare (eller IDE, om du vill) som syftar till att hålla din kod testad och uppdaterad. Med andra ord är den djupt integrerad med GitHub, och varje gång du lägger till kod körs tester och CI/CD-pipelines för att se till att koden alltid är 100 %.

Värt att kolla in om du gillar VSCode-upplevelsen och vill ha något som stöder alla större backend- och frontend-språk och ramverk (Django, Rails, Revel…).

Theia

Om du gillar SOLID-principerna och noga utformar din mjukvaruarkitektur, kommer Theia IDE att tilltala dig. Det är en TypeScript-baserad kod-IDE med en tydligt separerad frontend och backend. Frontend körs i en webbläsare, medan backend kan finnas var som helst – lokalt eller i molnet!

Frontend kan också köras som en Electron-app med en fullt fungerande isolerad webbläsarmiljö, vilket ger dig en känsla av en inbyggd skrivbordsapp om du vill ha det.

GitHub Codespaces

GitHub Codespaces tillhandahåller högpresterande virtuella maskiner för att köra kod för att utveckla webbapplikationer. Med Visual Studio Code som redigerare och ett fullständigt ekosystem blir det lättare att arbeta i webbläsaren.

Prova den senaste utvecklingsmiljön för projekt med färdiga bilder. Du kan skala upp virtuella datorer till 64 GB RAM och 32 kärnor. Börja koda med standardiserade miljöer, hårdvaruspecifikationer, redigeringsinställningar, tillägg och körningskrav.

Du kan isolera beroenden mellan projekt med docker-compose och containrar. Du kan förhandsgranska ändringar i webbläsaren och dela portar med teammedlemmar. Du kan anpassa inställningarna med flikar, mellanslag, ljusa/mörka teman med mera.

Nybörjare kan använda GitHub Codespaces gratis med vissa begränsningar, men du kommer att ha tillräckligt med funktioner. Om du är ett team eller företag kan du använda GitHub Codespaces för 40 USD per användare och år.

JetBrains

Få snabba, reproducerbara och automatiserade molnutvecklingsmiljöer med JetBrains IDE – Space. Det är en lösning för mjukvaruprojekt och -team genom att ta ansvar för hela utvecklingsprocessen, från CI/CD-pipelines och Git-arkiv till publicering av paket.

Space är en dedikerad virtuell maskin med Docker-container. Du kan installera alla viktiga bibliotek och verktyg du behöver i projektet. Effektivisera introduktionen genom att dela och återskapa arbetsytor.

Låt nya utvecklare börja koda direkt utan att lägga tid på att ställa in en lokal maskin. Du får en färdig IDE för att skriva, felsöka och köra kod på några sekunder. JetBrains erbjuder en centraliserad plattform för att hantera utvecklingsmiljöer.

Allt du gör och all information spåras på ett ställe. Du kan också integrera resurser i utvecklingsprocessen. Beroende på ditt projekt kan du välja en typ av virtuell maskin som passar projektstorleken. Space sparar resurser genom att sätta arbetsytan i viloläge.

Prova det gratis!

CodeTasty

CodeTasty är en utbyggbar, smart och modern moln-IDE med många funktioner. Den hjälper dig att skriva ren och läsbar kod smartare i realtid.

Använd kodredigeraren för en smidig upplevelse med inbyggd kompilering, kodkomplettering, feldetektering med mera. Du behöver inte installera något.

Det känns som att arbeta med ett skrivbord när du redigerar koden i molnet. CodeTasty förstår behoven hos varje utvecklare och låter dig installera så många tillägg du vill för att öka produktiviteten. Den stöder över 40 språk och flera hundra rader kod per fil.

Prova CodeTasty gratis för en sandlådearbetsyta, två FTP/SSH-arbetsytor, samarbete, terminalalternativ och två medarbetare. Du kan också börja med en betald plan för 4 USD per månad och få möjlighet att granska koden innan du kör den.

Replit

Lär dig, skriv och skapa kod med Replits gratis webbläsare-IDE som stöder över 50 språk utan långa installationer. Du kan börja koda i ditt språk på valfri enhet, operativsystem eller plattform.

Bjud in teammedlemmar och vänner att redigera koden som i Google Docs. Du kan importera kod till GitHub för att köra och samarbeta med GitHub-förråd utan inställningar. Oavsett om du föredrar C++, Python, CSS eller HTML kan du skriva och redigera koden på en och samma plattform.

Och när du är klar med koden kan du dela den direkt. Replit har över tre miljoner tekniker, kreatörer och passionerade programmerare. Med samarbete i realtid blir teamet mer produktivt. Du kan också skapa appar och bots med hjälp av tillägg. Verktyget hjälper dig också att utveckla projekt direkt i webbläsaren.

Skapa ett konto och börja koda nu.

PaizaCloud

Bygg webbapplikationer i webbläsaren med PaizaCloud IDE. Det är en webbutvecklingsmiljö för Node.js, MySQL, Django, Java, PHP, Jupyter Notebook, Laravel, WordPress med mera.

PaizaCloud låter dig skriva koder utan att ställa in miljön. Öppna bara webbläsaren så är miljön redo på tre sekunder. Oavsett om du använder Mac, iPad, OS eller Windows kan du använda samma miljö i alla webbläsare.

Du kan använda Linux-skal för att smidigt och flexibelt konfigurera utvecklingsmiljöer. Du kan även publicera idealiska tjänster som värdtjänster genom att uppgradera till grundplanen.

Kör kommandon, hantera filer, redigera kod med mera direkt i webbläsaren. PaizaCloud eliminerar behovet av kommandon som vim och ssh. Du kan använda servrarna precis som om du använde en skrivbordsdator.

Prova gratis med en gratisplan med två kärnor och 2 GB minne. Eller få obegränsad serverlivslängd för 9,80 USD per månad och 1 GB extra lagringsutrymme.

Sammanfattning

Detta är de flesta IDE:er och kodredigerare som finns när detta skrivs. Jag har utelämnat två typer av tjänster i listan: De som bara riktar sig mot intervjuer och som inte har fullständiga miljöer (förutom klassiska JSFiddle) och de som inte verkar erbjuda något betydande och bara har en snygg hemsida.

Om du behöver en redigerare för webbutveckling kan du utforska dessa alternativ.