12 Beste online IDE- en code-editors om webapplicaties te ontwikkelen

Wat is het beste alternatief voor coderen? De code-editor natuurlijk!

Code-editors zijn de op één na belangrijkste reden voor flamewars van programmeurs (de eerste is code-opmaak).

Voor sommigen is Vim de enige verstandige editor die ooit is gemaakt, terwijl voor anderen alles wat niet past in de Inception-achtige spiraalvormige, hoofddraaiende wereld van Emacs alleen maar belachelijk is. Als je slecht op zoek bent naar aandacht, hoef je alleen maar naar een programmeergemeenschap te gaan en een draadje te starten als “Waarom ik denk dat X (kies een populaire code-editor) de beste is/zuigt”, een biertje pakken en ontspannen.

Argumenten, tegenargumenten en beledigingen zullen de hele nacht in en uit de discussie blijven stromen, en het zal vele maanden duren voordat het gif in de draad is afgekoeld.

De vraag is: waarom?

Natuurlijk slagen mensen erin om overal iets groots van te maken, maar ik denk dat code-editors bijzonder zijn als het om programmeurs gaat. Een typische programmeur besteedt bijna al zijn tijd (meer dan 98%, als ik zou wedden) aan de code-editor van zijn keuze. Ze kennen de weg in de editor – zijn sterke en zwakke punten, limieten, eigenaardigheden en verborgen juweeltjes.

Niets is frustrerender dan te moeten worstelen met de editor wanneer je code schrijft (bedenk eens hoe vervelend het is als je een lange en dringende e-mail moet afschieten op een nieuw toetsenbord!). Code-editors verminderen mentale wrijving en stellen u in staat productiever te zijn, daarom zijn ze zo belangrijk en krijgen ze zoveel aandacht.

Dus, wat is de beste code-editor?

Eerlijk gezegd durf ik er niet eens heen! 😀

Als je echter van webontwikkeling houdt, is er een alternatief waar ik aan moet denken: online code-editors! Je kunt ze ook cloudgebaseerde code-editors noemen.

Verwar code-editor niet met een geïntegreerde ontwikkelomgeving (IDE). Beide zijn twee verschillende dingen en als ontwikkelaar moet u bekend zijn met deze meertalige IDE.

In een notendop zijn dit editors die volledig op een externe server staan ​​en toegankelijk zijn via de browser.

Klinkt raar, toch?

Dat voelde ik ook toen ik ze 3-4 jaar geleden tegenkwam. Waarom zou iemand in godsnaam alles aan een stomme browser willen overdragen?

Kan het zelfs concurreren met een native geïnstalleerde code-editor?

Het blijkt dat in de meeste gevallen, en vooral voor webontwikkeling, het antwoord ja is. Nu, hoewel ik online editors niet als mijn primaire medium heb omarmd, merk ik dat ik ze steeds meer in specifieke scenario’s gebruik.

Voordat we ingaan op welke code-editors er zijn om te gebruiken, laten we even stilstaan ​​en nadenken over wanneer online code-editors zinvol kunnen zijn.

Nul setup

Ik weet niet hoe het met jullie zit, maar het opzetten van mijn favoriete editor naar mijn smaak op een nieuw systeem is niet iets waar ik naar uitkijk. Plug-ins, thema’s, lettertypen, snelkoppelingen, fragmenten, instellingen. . . Er is een eindeloze lijst van dingen die in evenwicht moeten worden gebracht voordat het geheel bruikbaar wordt. Het is gemakkelijk om iets over het hoofd te zien, om later geïrriteerd te raken wanneer uw workflow wordt onderbroken.

Daarentegen is er niets te maken met een online editor als de eerste installatie eenmaal is voltooid. Officiële builds, updates, nachtelijke builds, ondersteunde platforms, systeemarchitectuur, FTP-synchronisatie, CI/CD-pijplijnen – dat maakt allemaal niet uit, zolang je maar een browser hebt!

Samenwerking

Vaker wel dan niet, moet u samenwerken met andere ontwikkelaars bij het oplossen van problemen of het debuggen van iets.

De traditionele code-editor is hier niet voor gebouwd – er is geen ruimte voor het gelijktijdig bewerken, becommentariëren of markeren van code, en het is een uitdaging om er ondersteuning voor toe te voegen.

Gegevensveiligheid

Nu is het een gegeven dat geen enkel project tegenwoordig zonder versiebeheer is, wat betekent dat er altijd een kopie van de code in de repository aanwezig is. Dat gezegd hebbende, er zijn momenten waarop versiebeheer niet genoeg is:

  • Je vergeet nieuw gemaakte commits te pushen en je laptop vat vlam.
  • U hebt andere belangrijke bestanden en gegevensdumps waarmee uw code interageert, hoewel deze geen deel uitmaken van de live-toepassing. Wat gebeurt er met hen als je laptop in brand vliegt?

(Oké, het lijkt erop dat ik geobsedeerd ben door notebooks die in brand vliegen, maar je begrijpt het wel, toch?!)

Discipline afdwingen

Dit kan net zo goed worden betwist in de rechtbank voor ontwikkelaarsrechten (als zoiets bestaat), maar de waarheid is dat ontwikkelaars zelden hun grillen opofferen voor het algemeen welzijn.

Een hardcore Sublime Text-liefhebber zal bijvoorbeeld ooit een van de uitstekende editors van JetBrains volledig omarmen en elke gelegenheid aangrijpen om te wijzen op het geheugenhongerige karakter en langzamere prestaties.

Hetzelfde geldt voor tabs versus spaties (of zelfs tabs met twee spaties versus tabs met vier spaties) – je bent naïef als je denkt dat de programmeurs in je team de hoorns niet zullen blokkeren.

In dergelijke gevallen is een online-editor een zegen – u bepaalt de instellingen voor projecten (zelfs hoe de code moet worden opgemaakt), en hij zal eenvoudigweg weigeren werk te accepteren totdat het aan alle normen voldoet. Hard voor het individu misschien, maar geweldig voor het project!

Inmiddels heb ik bijna geen gebruiksscenario’s meer, dus laten we eens kijken welke optie we hebben als het gaat om online code-editors, vooral voor webontwikkeling.

  State of Survival-cadeaucodes: nu inwisselen

JSFiddle

Terwijl JSFiddle kan een volwaardige teksteditor niet vervangen, het gaat verdomd goed om met eenmalige frontend-scripts.

Het is zo populair dat Q&A-sites zoals StackOverflow de inbedding van JSFiddle-links al rechtstreeks in hun platform ondersteunen.

Om snel van start te gaan, biedt JSFiddle in het begin enkele standaardteksten aan; wat betekent dat als je een demo van bijvoorbeeld React wilt starten, je alleen maar op de relevante knop hoeft te klikken en de code hoeft te schrijven. Zodra je op Opslaan drukt, wordt de “viool” opgeslagen en krijg je een permanente URL (bekijk deze gekke viool die ik heb gemaakt: https://jsfiddle.net/tuqd76c4/ en merk op dat je je wijzigingen kunt aanbrengen en op Opslaan kunt drukken om een ​​nieuwe te maken versie van deze URL).

Dit is wat JSFiddle een levensvatbaar platform maakt voor front-end webontwikkeling:

  • Gratis te gebruiken (geen verborgen kosten of freemium-functies). JSFiddle ondersteunt zichzelf via advertenties (tenminste vanaf het moment van schrijven), en je kunt een Adobe-advertentie zien in de linkerbenedenhoek van de bovenstaande schermafbeelding.
  • Functies voor codesamenwerking — ideaal voor het samen bouwen van concepten, interviews, enz.
  • Meerdere lay-outs, lettergroottes, lichte/donkere thema’s, enz.
  • Code-opmaak (opruimen), aankomende ondersteuning voor linters (CSS en JS) en meer.

En nu, snik, snik, voor de slechte dingen:

  • JSFiddle is een puur front-end-editor. Er is geen manier om uw favoriete backend-taal te coderen en uit te voeren.
  • Er is hier geen concept van bestanden en mappen (of uploads, wat dat betreft). Alles wat je hebt is een enkele spatie voor code, hoeveel er ook is.
  • JSFiddle kan niet worden gebruikt om code op uw server te hosten. De code moet op JSFiddle staan ​​en is altijd openbaar.
  • Er is geen manier om een ​​CI/CD-pijplijn te bouwen, Git te gebruiken, enz.

Dat gezegd hebbende, JSFiddle heeft zijn goede plek en blinkt uit wanneer je proof-of-concept moet uitdelen en moet samenwerken met de snelheid van het licht. Het is en blijft een belangrijke identiteit onder online redacteuren.

CodeSandbox

CodeSandbox kan worden gezien als een veel krachtigere en completere versie van JSFiddle. CodeSandbox doet zijn naam eer aan en biedt een complete code-editorervaring en een sandbox-omgeving voor front-end ontwikkeling.

CodeSandbox is een echte krachtpatser en een lief, zoet product. Ik zou zonder papier komen te zitten als ik alle voordelen probeer op te sommen, maar hier zijn enkele geweldige functies:

  • Npm-ondersteuning: Ja, u kunt vrijwel elk pakket toevoegen dat beschikbaar is op npm.
  • Bestanden, mappen, modules: U kunt uw code in meerdere bestanden splitsen, afbeeldingen toevoegen/verwijderen uit de openbare map en modules bouwen/importeren zoals u wilt. De workflow weerspiegelt die van een moderne modulebundelaar, dus je hoeft (bijna) niets in te stellen.
  • Ondersteuning voor TypeScript, hot reloading, GitHub-export, statische bestandshosting, enz.
  • Het is gebouwd op de Monaco-editor, hetzelfde beest dat de favoriet aandrijft VSCode editor. Dit brengt krachtige functies zoals “Ga naar”, “Find References” en noodzakelijke refactoring binnen handbereik!
  • Ondersteuning voor fragmenten voor Emmet
  • Geïntegreerde DevTools, linting, foutoverlays, testframeworks (Jest), sneltoetsen en meer.
  • Krachtige CLI om lokale projecten rechtstreeks in CodeSandbox te importeren.

Hoewel de gratis versie van CodeSandbox geen privécode ondersteunt, kunt u die functie krijgen (en de totale groottelimieten verhogen) door ze te helpen Patreon voor slechts $ 5 per maand (betaal wat je wilt, tot $ 50 per maand).

CodeOveral

Een probleem met de meeste code-editors op deze lijst (althans tot nu toe) is dat ze verwachten dat je de code te allen tijde op hun servers bewaart, of dat je de code regelmatig via de opdrachtregel synchroniseert.

niet zo met CodeOveral.

Op zijn sterkst heeft CodeAnywhere twee functies die voor mij opvallen:

  • Vooraf gebouwde container-images voor 72+ programmeertalen en frameworks. Dit betekent dat u rechtstreeks vanuit de editor een nieuwe ontwikkelomgeving kunt inrichten! Natuurlijk wordt de code automatisch gehost op de nieuw gemaakte container en worden bestanden direct vanaf daar geserveerd.
  • Maak verbinding met wat dan ook. Ja, letterlijk alles. Je bent niet verplicht om je code op te slaan op de servers van CodeAnywhere. Of uw code nu op FTP staat, op platforms voor het delen van bestanden zoals Dropbox, Amazon S3 of op geavanceerde versiebeheerplatforms zoals GitHub, u kunt CodeAnywhere eenvoudig instellen om van en naar die bron te lezen en te schrijven, met de code-editor puur voor . . . Nou ja, code-editing.

Nog iets waar ik op wil wijzen: als je je niet op je gemak voelt met Git als het gaat om het bekijken van geschiedenis en verschillen, kan CodeAnywhere een zucht van verlichting zijn. De editor gebruikt zijn diff-systeem voor het vergelijken van bestanden, waarmee je twee bestanden kunt vergelijken over twee willekeurige revisies (elke keer dat je een bestand opslaat, wordt er een revisie gemaakt).

Er is echter een klein nadeel aan revisies: met de gratis versie kunt u slechts één revisie behouden, terwijl het kleinste betaalde abonnement maximaal 20 revisies toestaat. Over het algemeen is het geen probleem, aangezien je zelden verder wilt kijken dan de laatste 20e revisie, maar aangezien de meeste programmeurs de gewoonte hebben om een ​​paar keer per minuut op Save te drukken, kan het pijnlijk worden.

Alles gezegd en gedaan, CodeAnywhere is een solide, aangenaam aanbod voor diegenen die naar de cloud willen verhuizen en daar willen blijven. 🙂 Aangezien zijn bevoegdheden verder gaan dan front-end code, is het naar mijn mening een echte aanrader!

  Maak verbluffende demovideo's met deze 6 tools

StackBlitz

Als je vooral van front-end houdt en niet weg kunt gaan van de VSCode-interface, StackBlitz is speciaal voor jou gemaakt.

Zie je niets bijzonders?

Ik ook niet totdat ik een beetje naar beneden scrolde en op de Angular-knop klikte. Boom!

Raad eens, dat is niet opzettelijk gemaakt om op VSCode te lijken – het is gebouwd op de VSCode-editor! Zozeer zelfs dat u extensies kunt installeren, de mappen kunt doorzoeken en bestanden kunt ordenen op de manier die u zou verwachten van een gewone VSCode-instantie.

Maar wacht, er is meer!

Misschien heb je het al dan niet gemerkt:

  • Alle applicaties die op StackBlitz zijn gemaakt, worden ook automatisch op hun servers geïmplementeerd! Dus deze Angular-speelgoed-app die ik zojuist heb gemaakt, wordt automatisch gehost op https://angular-yvyi2j.stackblitz.io/. Hoogstwaarschijnlijk werkt de URL nog steeds (zal echter langzaam laden, zoals je zou verwachten als het gratis wordt gehost)!
  • U kunt het project splitsen en delen. Tijdens het delen krijg je meer controle over wat anderen kunnen doen.
  • U kunt verbinding maken met een GitHub-repository en ook de code daar direct laten ophalen/pushen. Of je kunt het project gewoon downloaden als een zip-bestand op de goede oude manier.

Maar wacht, er is meer!

Ernstig!

Hier is de lijst met officiële functies die door StackBlitz worden aangeboden:

  • Native ondersteuning voor Firebase (iets dat ik persoonlijk niet gebruik, maar hey, het is een zegen voor degenen die niet in de duistere diepten van de backend willen duiken)
  • Intellisense, Project zoeken
  • Heet herladen terwijl je typt
  • Npm-pakketten importeren
  • Bewerk offline wanneer niet verbonden!

StackBlitz zit vol met (mooie) verrassingen als het gaat om het wegnemen van hindernissen bij webontwikkeling en -implementatie. Het insluiten van VSCode in uw website is geen droom meer!

AWS Cloud9

Wolk 9 was misschien wel de eerste browsergebaseerde IDE die serieuze functies bood en het idee van browser-als-een-editor mainstream nam. Geen wonder dat Amazon het later kocht, en vandaag maakt Cloud9 deel uit van het AWS-aanbod.

Als je zelfs maar op afstand verbonden bent met (of geïnteresseerd bent in) het AWS-platform, dan is Cloud9 waar je zoektocht naar een perfecte (oké, bijna perfecte) editor eindigt.

Laten we eens kijken waarom:

  • Er zijn geen extra kosten voor het gebruik van Cloud9. U kunt Cloud9 verbinden met een bestaande/nieuwe AWS-rekeninstantie en u betaalt alleen voor die instantie. Het is ook mogelijk om via SSH verbinding te maken met een server van een derde partij — helemaal gratis!
  • Eersteklas ondersteuning voor AWS Serverless-applicaties (foutopsporing, enz.)
  • Directe terminaltoegang tot AWS vanuit de editor (eerlijk gezegd, een fatsoenlijke in-editor, de terminal met tabbladen is wat ik nog steeds mis in VSCode)
  • Meer dan 40 programmeertalen ondersteund (Go, C++, Ruby, Node, Python, PHP, Java… maak uw keuze)

Ook de samenwerkingsfuncties in Cloud9 zijn wenselijk, waardoor reviews/interviews naadloos kunnen verlopen.

Een andere geweldige functie is het afspelen in videostijl van de wijzigingen die in een bestand zijn aangebracht, waardoor het beoordelingsproces een plezier wordt:

Mijn advies?

Als je van AWS houdt, wacht dan niet en pak Cloud9 nu meteen. En als je nog niet in de cloud zit, maar wel overweegt om over te stappen, omarm AWS dan en integreer Cloud9 in je workflow. Je kunt hoe dan ook geen betere beslissing nemen!

Gitpod

Gitpod is een verfrissende kijk op cloudcode-editors (of IDE’s, zo u wilt) die erop gericht zijn uw code altijd getest en up-to-date te houden. Met andere woorden, het is diep geïntegreerd met GitHub, en elke keer dat je code toevoegt, voert het je test- en CI/CD-pijplijnen uit om ervoor te zorgen dat de code altijd 100% gezond is.

Het is de moeite waard om te kijken of je van de VSCode-ervaring houdt en iets wilt dat alle belangrijke back-end/front-end-talen en frameworks ondersteunt (Django, Rails, Revel, noem maar op).

Theia

Als je een die-hard SOLID-fan bent en een nit-picking software-architect, dan is de Theia IDE zal je zorgenkindje kietelen. Het is een TypeScript-gecodeerde (vijf punten voor stijl meteen!) code-IDE die een perfect gescheiden front-end en backend heeft. De front-end draait in een browser, terwijl de backend overal kan zijn: lokale machine of de cloud!

Maar dat is niet alles: de front-end kan worden uitgevoerd als een Electron-app met een volledig functionele, geïsoleerde browseromgeving, waardoor je de look-and-feel krijgt van een native desktop-app als je daar behoefte aan hebt.

GitHub-coderuimten

GitHub-coderuimten biedt hoogwaardige virtuele machines om codes uit te voeren om webapplicaties te ontwikkelen. Met behulp van de Visual Studio Code die een editor en een compleet ecosysteem bevat, zult u het werken in de browser gemakkelijker vinden.

Probeer de nieuwste ontwikkelomgeving voor de projecten, samen met kant-en-klare afbeeldingen. U ervaart een lage latentie in verschillende regio’s door uw VM’s te schalen tot 64 GB RAM en 32 cores. Begin met coderen met de gestandaardiseerde omgevingen, hardwarespecificaties, editorinstellingen, extensies en runtimevereisten.

U kunt de afhankelijkheden tussen de projecten isoleren met docker-compose en containers. Bekijk daarnaast eenvoudig een voorbeeld van de wijzigingen die u hebt aangebracht in de browser en deel zowel openbare als privépoorten met teamgenoten. Je kunt ook nerdy details zoals spaties, tabs, licht, donker, verfraaien, mooier, solarized, Monokai en nog veel meer bewerken of toevoegen.

Beginners die hun geluk willen beproeven, kunnen GitHub Codespaces gratis gebruiken met beperkte voordelen, maar je hebt genoeg functies om door te gaan. Als u een team of een onderneming bent, kunt u GitHub Codespaces gaan gebruiken voor $ 40/gebruiker/jaar.

  27 Beste gratis website-hostingservices

JetBrains

Krijg binnen enkele seconden nieuwe, reproduceerbare, gebruiksklare en geautomatiseerde ontwikkelomgevingen voor de ruimtecloud en begin met coderen met JetBrains IDE – Ruimte. Het is de enige oplossing voor softwareprojecten en -teams door verantwoordelijkheid te nemen voor de volledige ontwikkelingslevenscyclus, beginnend bij CI/CD-pijplijnen en het hosten van Git-repositories tot de publicatiepakketten.

Space is de speciale virtuele machine met de Docker-container. U kunt alle essentiële bibliotheken en hulpmiddelen installeren die u in het project nodig hebt. Stroomlijn en versnel de onboarding-ervaring door de coderingswerkruimten te delen en te reproduceren wanneer u maar wilt.

Laat nieuwkomers direct beginnen met het ontwikkelen van een code zonder tijd te verspillen aan het ontwikkelen van een lokale machine. U krijgt een complete gebruiksklare IDE wanneer u de code moet gaan schrijven, debuggen en binnen enkele seconden moet uitvoeren om de uitvoer te testen. JetBrains biedt een gecentraliseerd platform voor het beheer van de dev-omgevingen.

Alles wat u doet en elke bron die u gebruikt, wordt op één plek bijgehouden. U kunt de bronnen ook vrij eenvoudig in de ontwikkelingspijplijn integreren. Afhankelijk van uw project kunt u het gewenste type virtuele machine kiezen dat past bij de projectgrootte. Space bespaart uw bronnen door de coderingswerkruimte in de slaapstand te zetten, zodat u na de pauze eraan kunt gaan werken.

Begin vandaag nog met je rit en ervaar de schoonheid van dit beest gratis.

CodeTasty

CodeTasty is een uitbreidbare, slimme en moderne cloud-IDE met veel extra functies waar u dol op zult zijn. Het helpt je om in realtime schone en leesbare code slimmer te schrijven in de taal van je voorkeur.

Download de code-editor voor een soepele ervaring met ingebouwde compilatie, codeaanvulling, foutdetectietools en nog veel meer. Maak je geen zorgen over de installatie; sta op en begin te werken aan de projecten die voor je liggen.

U krijgt hetzelfde gevoel als werken met uw desktop wanneer u uw codes in de cloud bewerkt terwijl u geniet van dezelfde prestaties en snelheid. CodeTasty begrijpt de behoeften van elke ontwikkelaar; en daarom kunt u zoveel extensies installeren als u wilt om uw productiviteit te verhogen. Bovendien ondersteunt het meer dan 40 talen en honderd regels code in één bestand.

Probeer CodeTasty gratis om één sandbox-werkruimte, 2 FTP/SSH-werkruimten, samenwerking, terminaloptie en 2 medewerkers te krijgen. U kunt ook beginnen met een betaald abonnement van $ 4 / maand en de kans krijgen om uw codes te herzien voordat u begint.

Herhalen

Leer, schrijf en maak code met Herhalen’s gratis, in-browser en collaboratieve IDE die meer dan 50 talen ondersteunt zonder veel tijd te besteden aan setups. U kunt beginnen met coderen in uw taal op elk apparaat, besturingssysteem en platform.

Nodig je teamgenoten, collega’s of vrienden uit om de code in Google-documenten te bewerken. U kunt uw code importeren in GitHub om zonder instellingen uit te voeren en samen te werken met GitHub-opslagplaatsen. Of u nu vertrouwd bent met C++, Python, CSS of HTML, u kunt de code schrijven en bewerken op één enkel platform.

Bovendien, op het moment dat je klaar bent met de code, gaat deze direct de wereld in. Als je ook meer wilt weten over code, Replit heeft meer dan drie miljoen technologen, creatievelingen, gepassioneerde programmeurs en meer. Met realtime samenwerking met uw teams zal uw team productiever zijn. Bovendien kunt u tijdens het coderen applicaties, bots enz. maken met behulp van plug-ins. De tool helpt u ook om uw projecten rechtstreeks vanuit uw browser te ontwikkelen.

Meld u aan voor een account en begin nu met coderen.

PaizaCloud

Bouw webapplicaties in uw browser met PaizaCloud IDE. Het is een webontwikkelomgeving voor Node.Js, MySQL, Django, Java, PHP, Jupyter Notebook, Laravel, WordPress en meer.

Met PaizaCloud kunt u naadloos uw codes schrijven zonder dat u zich zorgen hoeft te maken over het instellen van de omgeving. Open gewoon de browser en binnen drie seconden is je omgeving klaar. Of je nu een Mac-, iPad-, OS- of Windows-versie gebruikt, je kunt in elke browser met dezelfde omgeving werken.

Bovendien kun je met Linux-shells eenvoudiger en flexibeler webgebaseerde ontwikkelomgevingen inrichten. U kunt ook de ideale services voor uw portfolio publiceren, zoals hostingservices, door te upgraden naar het basisplan.

Voer opdrachten uit, beheer bestanden, bewerk codes en meer in de browser zelf. PaizaCloud elimineert de noodzaak om commando’s zoals vim, ssh, enz. toe te voegen voor het bewerken van bestanden of inloggen. In plaats daarvan kunt u de servers eenvoudig en efficiënt bedienen, net alsof u een desktop gebruikt.

Maak een proefrit met het gratis abonnement met 2 cores en 2 GB geheugen. Of profiteer van een onbeperkte levensduur van de server met $ 9,80/maand en krijg 1 GB extra schijfruimte.

Conclusie

Dit omvat min of meer alle IDE’s en code-editors die er zijn vanaf het moment van schrijven. Ik heb twee soorten aanbiedingen in deze lijst weggelaten: degenen die puur op interviews zijn gericht en geen volwaardige omgevingen hebben (behalve natuurlijk onze geliefde klassieke JSFiddle), en degenen die niets leken te bieden substantieel en had weinig meer dan een strakke homepage.

Als u iets lichtgewichts nodig heeft voor de webontwikkeling, kunt u deze code-editors verkennen.

gerelateerde berichten