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

av

Vad är det näst bästa att koda? Kodeditorn såklart!

Kodredigerare är den näst viktigaste orsaken till programmerares flame wars (den första är kodformatering).

För vissa är Vim den enda vettiga redaktören som någonsin skapats, medan för andra är allt som inte passar den Inception-liknande spiralformade huvudsnurrande värld av Emacs bara lämpligt för förlöjligande. Om du är dåligt ute efter uppmärksamhet behöver du bara gå till en programmeringsgemenskap och starta en tråd som ”Varför jag tycker att X (välj valfri populär kodredigerare) suger/är bäst”, ta en öl och slappna av.

Argument, motargument och förolämpningar kommer att fortsätta strömma in och ut ur diskussionen hela natten lång, och det kommer att ta många månader innan giftet i tråden kommer att svalna.

Frågan är: varför?

Visst, människor lyckas göra en stor sak av allt, men jag tror att kodredigerare är speciella när det kommer till programmerare. En typisk programmerare spenderar nästan all sin tid (mer än 98 %, om jag skulle satsa) på den valda kodredigeraren. De känner sig runt redaktören – dess styrkor, svagheter, gränser, egenheter och dolda pärlor.

Ingenting är mer frustrerande än att behöva kämpa med editorn när du skriver kod (tänk på hur irriterande det är när du måste skjuta iväg ett långt och brådskande mejl på ett nytt tangentbord!). Kodredigerare minskar mental friktion och låter dig bli 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 så vågar jag inte ens åka dit! 😀 😀

Men om du gillar webbutveckling finns det ett alternativ som jag vill att du ska tänka på – kodredigerare online! Du kan också kalla dem molnbaserade kodredigerare.

Blanda inte ihop kodredigerare med en integrerad utvecklingsmiljö (IDE). Båda är två olika saker och som utvecklare bör du vara bekant med dessa flerspråkiga IDE.

I ett nötskal är dessa redigerare som helt och hållet finns på en fjärrserver och är tillgängliga via webbläsaren.

Låter konstigt, eller hur?

Det kände jag också när jag stötte på dem för 3-4 år sedan. Varför i helvete ska någon vilja lämna över allt till en dum webbläsare?

Kan den ens konkurrera med en inbyggt installerad kodredigerare?

Det visar sig att i de flesta fall, och särskilt för webbutveckling, är svaret ja. Nu, även om jag inte har anammat onlineredigerare som mitt primära medium, tycker jag att jag använder dem mer och mer i specifika scenarier.

Innan vi dyker in i vilka kodredigerare som finns där ute för att användas, låt oss pausa och fundera på när onlinekodredigerare kan vara vettigt.

Noll inställning

Jag vet inte om dig, men att ställa in min favoritredigerare i ett nytt system är inget jag ser fram emot. Plugins, teman, typsnitt, genvägar, utdrag, inställningar . . . Det finns en oändlig lista med saker som måste balanseras innan det hela blir användbart. Det är lätt att förbise något, bara för att bli irriterad senare när ditt arbetsflöde avbryts.

Däremot finns det inget att göra med en onlineredigerare när den första installationen är över. Officiella builds, uppdateringar, nattliga builds, plattformar som stöds, systemarkitektur, FTP-synkronisering, CI/CD-pipelines – inget av det spelar någon roll så länge du har en webbläsare!

Samarbete

Oftare än inte behöver du samarbeta med andra utvecklare när du arbetar med problem eller felsöker något.

Den traditionella kodredigeraren är inte byggd för detta – det finns inget utrymme för samtidig kodredigering, kommentarer eller framhävning, och det är utmanande att lägga till stöd för det.

Datasäkerhet

Nu är det givet att inget projekt idag är utan versionskontroll, vilket innebär att en kopia av koden alltid finns på förvaret. Som sagt, det finns tillfällen då versionskontroll inte räcker:

  • Du glömmer att trycka på nyskapade commits och din bärbara dator tar eld.
  • Du har andra viktiga filer och datadumpar som din kod interagerar med, även om dessa inte är en del av liveapplikationen. Vad händer med dem om din bärbara dator brinner?

(Okej, det ser ut som att jag är besatt av att anteckningsböcker tar eld, men du förstår poängen, eller hur?!)

Att upprätthålla disciplin

Detta kan lika gärna argumenteras emot i domstolen för utvecklarrättigheter (om något sådant existerar), men sanningen i saken är att utvecklare sällan offrar sina nycker för det gemensamma bästa.

Till exempel kommer en hardcore Sublime Text-entusiast någonsin att fullt ut omfamna någon av JetBrains utmärkta redaktörer och kommer att finna alla möjligheter att peka på dess minneshungriga natur och långsammare prestanda.

Detsamma gäller flikar vs. mellanslag (eller till och med två-mellanslagsflikar vs. fyra-mellanslagsflikar) — du är naiv om du tror att programmerarna i ditt team inte kommer att låsa horn.

I sådana fall är en onlineredigerare en välsignelse – du bestämmer inställningarna för projekt (även hur koden ska formateras), och den kommer helt enkelt att vägra acceptera arbete tills den följer alla standarder. Hårt mot individen kanske, men bra för projektet!

Vid det här laget har jag slut på användningsfall, så låt oss gå vidare till vilket alternativ vi har när det gäller kodredigerare online, särskilt för webbutveckling.

JSFiddle

Medan JSFiddle kan inte ersätta en fullfjädrad textredigerare, den gör ett jävligt bra jobb med att hantera enstaka frontend-skript.

Det är så populärt att Q&A-sajter som StackOverflow redan stöder inbäddning av JSFiddle-länkar direkt i deras plattform.

För att få saker igång snabbt, erbjuder JSFiddle några boilerplates i början; vilket innebär att om du vill få en demo av, säg, React, started, allt du behöver göra är att klicka på den relevanta knappen och börja skriva koden. När du trycker på Spara, sparas ”fiolen” du får en permanent URL (Kolla in den här fåniga fiolen jag skapade: https://jsfiddle.net/tuqd76c4/ och notera att du kan göra dina ändringar och trycka på Spara för att skapa en ny version av denna URL).

Här är vad som gör JSFiddle till en hållbar plattform för front-end webbutveckling:

  • Gratis att använda (ingen dold avgift eller freemium-funktioner). JSFiddle stödjer sig själv genom annonser (åtminstone i skrivande stund), och du kan se en Adobe-annons i nedre vänstra delen av skärmdumpen ovan.
  • Kodsamarbetsfunktioner – perfekt för att bygga koncept tillsammans, intervjuer etc.
  • Flera layouter, teckenstorlekar, ljusa/mörka teman, etc.
  • Kodformatering (städa), kommande stöd för linters (CSS och JS) med mera.

Och nu, snyft, snyft, för det dåliga:

  • JSFiddle är en ren front-end editor. Det finns inget sätt att koda och köra ditt favoritspråk för backend.
  • Det finns inget koncept för filer och mappar här (eller uppladdningar, för den delen). Allt du har är ett enda utrymme för kod, oavsett hur mycket det finns.
  • JSFiddle kan inte användas som värdkod på din server. Koden måste finnas på JSFiddle och är offentlig hela tiden.
  • Det finns inget sätt att bygga en CI/CD-pipeline, använda Git, etc.

Som sagt, JSFiddle har sin sweet spot och lyser när du behöver dela ut proof-of-concept och samarbeta med ljusets hastighet. Det är och kommer att förbli en stor identitet bland nätredaktörer.

CodeSandbox

CodeSandbox kan ses som en mycket kraftfullare och mer komplett version av JSFiddle. Trogen sitt namn ger CodeSandbox en komplett kodredigeringsupplevelse och en sandlådemiljö för front-end-utveckling.

CodeSandbox är ett riktigt kraftpaket och söt, söt produkt. Jag skulle få slut på papper om jag försöker lista ner alla dess fördelar, men här är några fantastiska funktioner:

  • Npm-stöd: Ja, du kan lägga till i stort sett alla paket som är tillgängliga på npm.
  • Filer, mappar, moduler: Du kan dela upp din kod i flera filer, lägga till/ta bort bilder från den offentliga mappen och bygga/importera moduler som du vill. Arbetsflödet speglar det för en modern modulbuntare, så du behöver inte ställa in (nästan) någonting.
  • Stöd för TypeScript, hot reloading, GitHub-export, statisk filhosting, etc.
  • Den är byggd på Monaco editor, samma best som driver favoriten VSCode redaktör. Detta ger kraftfulla funktioner som ”Gå till”, ”Hitta referenser” och nödvändig omstrukturering till dina fingertoppar!
  • Utdrag stöd för Emmet
  • Integrerade DevTools, linting, felöverlägg, testramar (Jest), tangentbindningar och mer.
  • Kraftfull CLI för att direktimportera lokala projekt till CodeSandbox.

Även om gratisversionen av CodeSandbox inte stöder privat kod, kan du få den funktionen (och öka storleksgränserna totalt sett) genom att hjälpa dem på Patreon för så lite som 5 USD i månaden (betala vad du vill, upp till 50 USD i månaden).

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 kräver att du synkroniserar kod via kommandoraden regelbundet.

Inte så med CodeAnywhere.

När det är som starkast har CodeAnywhere två funktioner som sticker ut för mig:

  • Förbyggda containerbilder för 72+ programmeringsspråk och ramverk. Det betyder att du kan tillhandahålla en ny utvecklingsmiljö direkt från redigeraren! Naturligtvis lagras koden automatiskt på den nyskapade behållaren och filer serveras direkt därifrån.
  • Anslut till vad som helst. Ja, bokstavligen vad som helst. Du är inte skyldig att lagra din kod på CodeAnywheres servrar. Oavsett om din kod finns på FTP, fildelningsplattformar som Dropbox, Amazon S3 eller på sofistikerade versionskontrollplattformar som GitHub, kan du enkelt ställa in CodeAnywhere för att läsa från och skriva till den källan, med hjälp av kodredigeraren enbart för . . . Nåväl, kodredigering. 😛

En sak till som jag känner för att påpeka: om du inte är bekväm med Git när det gäller att se historik och skillnader, kan CodeAnywhere kännas som en lättnadens suck. Redaktören 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å valfria versioner (en version skapas varje gång du sparar en fil).

Det finns dock en liten hake med revisioner – gratisversionen låter dig behålla endast en revision, medan den minsta betalda planen tillåter högst 20 revisioner. Generellt sett är det inte ett problem eftersom du sällan vill se bortom den senaste 20:e revisionen, men eftersom de flesta programmerare har för vana att trycka på Spara några gånger i minuten, kan det bli smärtsamt.

Sagt och gjort, CodeAnywhere är ett solidt, trevligt erbjudande för dem som vill flytta till molnet och stanna där. 🙂 Eftersom dess krafter sträcker sig bortom front-end-koden, enligt min mening, rekommenderas den starkt!

StackBlitz

Om du för det mesta använder front-end och inte kan ta dig bort från VSCode-gränssnittet, StackBlitz skapades just för dig.

Ser du inget speciellt?

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

Gissa vad, det är inte medvetet skapat för att se ut som VSCode – det är byggt på VSCode-redigeraren! Så mycket att du kan installera tillägg, söka igenom mapparna och organisera filer precis som du kan förvänta dig av en vanlig VSCode-instans.

Men vänta, det finns mer!

Du kanske eller kanske inte har märkt att:

  • Alla applikationer som skapas på StackBlitz distribueras också automatiskt på deras servrar! Så denna Angular-leksaksapp som jag just skapade är värd automatiskt på https://angular-yvyi2j.stackblitz.io/. Mest troligt fungerar URL:en fortfarande (kommer dock att laddas långsamt, som du kan förvänta dig när den är gratis)!
  • Du kan dela projektet. Medan du delar får du bättre kontroll över vad andra kan göra.
  • Du kan ansluta till ett GitHub-förråd och även låta kod dras/pushas direkt därifrån. Eller så kan du helt enkelt ladda ner projektet som en zip-fil på det goda sättet.

Men vänta, det finns mer!

Allvarligt! 😀

Här är listan över officiella funktioner som erbjuds av StackBlitz:

  • Inbyggt stöd för Firebase (vilket är något jag personligen inte använder, men hey, det är en välsignelse för dem som inte vill dyka ner i backends grumliga djup)
  • Intellisense, projektsökning
  • Varm omladdning medan du skriver
  • Importera npm-paket
  • Redigera offline när du inte är ansluten!

StackBlitz är full av (vackra) överraskningar när det gäller att ta bort hindren från webbutveckling och distribution. Att bädda in VSCode på din webbplats är inte drömmarna längre!

AWS Cloud9

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

Om du till och med är fjärransluten till (eller intresserad av) AWS-plattformen, är Cloud9 där ditt sökande efter en perfekt (okej, nästan perfekt) redigerare slutar.

Låt oss se varför:

  • Det tillkommer inga extra avgifter för att använda Cloud9. Du kan ansluta Cloud9 till en befintlig/ny AWS-beräkningsinstans, och du betalar endast för den instansen. Det är också möjligt att ansluta till en tredjepartsserver över SSH — helt utan kostnad! 🙂
  • Förstklassigt stöd för AWS Serverless-applikationer (felsökning, etc.)
  • Direkt terminalåtkomst till AWS från redaktören (ärligt talat, en anständig in-editor, flikterminalen är vad jag fortfarande saknar i VSCode)
  • Över 40 programmeringsspråk stöds (Go, C++, Ruby, Node, Python, PHP, Java … välj själv)

Samarbetsfunktionerna i Cloud9 är också önskvärda, vilket gör att recensioner/intervjuer kan genomföras sömlöst.

En annan mördande funktion är en videoliknande uppspelning av ändringarna som gjorts i en fil, vilket gör processen att granska en fröjd:

Mitt råd?

Om du gillar AWS, vänta inte utan ta tag i Cloud9 just nu. Och om du inte är på molnet än men har funderat på att göra ett steg, omfamna AWS och integrera Cloud9 i ditt arbetsflöde. Du kan inte fatta ett bättre beslut på något sätt!

Gitpod

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

Värt att kolla in om du älskar VSCode-upplevelsen och vill ha något som stöder alla större back-end/front-end-språk och ramverk (Django, Rails, Revel, you name it).

Theia

Om du är en inbiten SOLID-fan och en nit-plockande mjukvaruarkitekt, Theia IDE kommer att kittla din separation-of-bekymmer ben. Det är en TypeScript-kodad (fem poäng för stil direkt!) kod IDE som har en perfekt separat front-end och backend. Front-end körs i en webbläsare, medan backend kan vara var som helst – lokal maskin eller molnet!

Men det är inte allt – front-end kan köras som en Electron-app med en fullt fungerande, isolerad webbläsarmiljö, vilket ger dig utseendet och känslan av en inbyggd skrivbordsapp om du skulle längta efter det.

GitHub Codespaces

GitHub Codespaces tillhandahåller högpresterande virtuella maskiner för att köra koder för att utveckla webbapplikationer. Genom att använda Visual Studio Code som innehåller en redigerare och ett komplett ekosystem blir det lättare att arbeta i webbläsaren.

Prova den senaste utvecklingsmiljön för projekten, tillsammans med förbyggda bilder. Du kommer att uppleva låg latens i olika regioner genom att skala upp dina 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örtidskrav.

Du kan isolera beroenden mellan projekten med docker-compose och containrar. Dessutom kan du förhandsgranska ändringarna du enkelt har gjort i webbläsaren och dela offentliga såväl som privata portar med lagkamrater. Du kan också redigera eller lägga till till och med nördiga detaljer som mellanslag, flikar, ljus, mörk, försköna, snyggare, solariserad, Monokai och många fler.

Nybörjare som vill pröva lyckan kan använda GitHub Codespaces gratis med begränsade fördelar, men du kommer att ha tillräckligt med funktioner för att fortsätta. Om du är ett team eller ett företag kan du börja använda GitHub Codespaces för $40/användare/år.

JetBrains

Få fräscha, reproducerbara, färdiga att använda och automatiserade rymdmolnutvecklingsmiljöer på några sekunder och börja koda med JetBrains IDE – Space. Det är den enda lösningen för mjukvaruprojekt och -team genom att ta ansvar för hela utvecklingslivscykeln från CI/CD-pipelines och värd för Git-arkiv till publiceringspaketen.

Space är den dedikerade virtuella maskinen med Docker-behållaren. Du kan installera alla viktiga bibliotek och verktyg du behöver i projektet. Effektivisera och snabba upp introduktionsupplevelsen genom att dela och reproducera de kodande arbetsytorna när du vill.

Tillåt nykomlingar att börja utveckla en kod direkt utan att slösa tid på att utveckla en lokal maskin. Du kommer att få en komplett färdig att använda IDE när du behöver börja skriva koden, felsöka och köra den på några sekunder för att testa utdata. JetBrains erbjuder en centraliserad plattform för att hantera utvecklingsmiljöer.

Allt du gör och varje resurs du använder spåras på en enda plats. Du kan också integrera resurserna i utvecklingspipeline ganska enkelt. Beroende på ditt projekt kan du välja den typ av virtuell maskin att föredra för att passa projektstorleken. Space kommer att spara dina resurser genom att lägga kodningsarbetsytan i viloläge så att du kan börja arbeta med densamma efter pausen.

Börja din tur idag och upplev skönheten i detta odjur gratis.

CodeTasty

CodeTasty är en utbyggbar, smart och modern moln-IDE med många ytterligare funktioner du kommer att älska. Det hjälper dig att skriva ren och läsbar kod smartare i realtid på ditt föredragna språk.

Få kodredigeraren att få en smidig upplevelse med inbyggd kompilering, kodkomplettering, feldetekteringsverktyg och mycket mer. Oroa dig inte för installationen; stå upp och börja arbeta med projekten precis framför dig.

Du kommer att få samma känsla som att arbeta med ditt skrivbord när du redigerar dina koder i molnet samtidigt som du njuter av samma prestanda och hastighet. CodeTasty förstår behoven hos varje utvecklare; och låter dig därför installera så många tillägg som du vill för att öka din produktivitet. Dessutom stöder den över 40 språk och hundra rader kod i en fil.

Prova CodeTasty gratis för att få en sandlådearbetsyta, 2 FTP/SSH-arbetsytor, samarbete, terminalalternativ och 2 medarbetare. Du kan också börja med en betald plan på $4/månad och få chansen att revidera dina koder innan du kör.

Replit

Lär dig, skriv och skapa kod med Replits gratis, i webbläsaren och kollaborativ IDE som stöder över 50 språk utan att spendera mycket tid på inställningar. Du kan börja koda på ditt språk på vilken enhet, operativsystem och plattform som helst.

Bjud in dina lagkamrater, kollegor eller vänner att redigera koden i Google docs. Du kan importera din kod till GitHub för att köra och samarbeta med GitHub-förråd utan inställningar. Oavsett om du är bekväm med C++, Python, CSS eller HTML kan du skriva koden och redigera den på en enda plattform.

Dessutom, så fort du är redo med koden, går den direkt till världen. Om du också vill lära dig om kod har Replit mer än tre miljoner teknologer, kreativa, passionerade programmerare och mer. Med samarbete i realtid med dina team blir ditt team mer produktivt. Dessutom kan du skapa applikationer, bots, etc., med hjälp av plugins medan du kodar. Verktyget hjälper dig också att utveckla dina projekt direkt från din webbläsare.

Registrera dig för ett konto och börja koda nu.

PaizaCloud

Bygg webbapplikationer i din webbläsare med PaizaCloud ID. Det är en webbutvecklingsmiljö för Node.Js, MySQL, Django, Java, PHP, Jupyter Notebook, Laravel, WordPress och mer.

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

Dessutom kan du använda Linux-skal för att enklare och flexibelt sätta upp webbaserade utvecklingsmiljöer. Du kan också publicera de idealiska tjänsterna för din portfölj, som värdtjänster, genom att uppgradera till grundplanen.

Kör kommandon, hantera filer, redigera koder och mer i själva webbläsaren. PaizaCloud eliminerar behovet av att lägga till kommandon som vim, ssh, etc., för att redigera filer eller logga in. Istället kan du enkelt och effektivt använda servrarna precis som om du kör ett skrivbord.

Ta en provkörning med gratisplanen med 2 kärnor och 2 GB minne. Eller utnyttja obegränsad serverlivslängd med $9,80/månad och få 1 GB extra diskutrymme.

Slutsats

Detta täcker mer eller mindre alla IDE:er och kodredigerare där ute när de skrivs. Jag har utelämnat två typer av erbjudanden i den här listan: de som är inriktade enbart på intervjuer och inte har fullfjädrade miljöer (förutom vår älskade klassiska JSFiddle, förstås), och de som inte verkade erbjuda något betydande och hade lite mer än en snygg hemsida.

Om du behöver något lätt för webbutvecklingen kan du utforska dessa kodredigerare.