9 Cele mai bune editori de cod online pentru aplicații web

Care este următorul lucru în materie de codificare? Editorul de cod, desigur!


Editorii de coduri sunt al doilea motiv cel mai semnificativ pentru războaiele de flacără ale programatorului (primul fiind formatarea codurilor).

Pentru unii, Vim este singurul redactor sensibil creat vreodată, în timp ce pentru alții, tot ceea ce nu se potrivește lumii cu Emacs, care se învârte în spirală, precum Incepția, este potrivit doar pentru ridicol. Dacă nu căutați atenție, tot ce trebuie să faceți este să mergeți într-o comunitate de programare și să începeți un fir de genul „De ce cred că X (alegeți un editor de cod popular) suge / este cel mai bun”, ia ceva bere și relaxați-vă.

Argumentele, contraargumentele și insultele vor continua să curgă în discuție toată noaptea și vor trece multe luni înainte ca veninul din fir să se răcorească..

Întrebarea este: de ce?

Sigur, ființele umane reușesc să facă o afacere mare din toate, dar cred că editorii de cod sunt particulari când vine vorba de programatori. Un programator obișnuit își petrece aproape tot timpul (mai mult de 98%, dacă ar trebui să pariez) pe editorul de coduri ales. Ei își cunosc drumul în jurul editorului – punctele sale forte, punctele slabe, limitele, chestiile și pietrele ascunse.

Nimic nu este mai frustrant decât să fii nevoit să te lupți cu editorul când scrii codul (gândește-te la cât de enervant este când trebuie să tragi un e-mail lung și urgent pe o nouă tastatură!). Redactorii de cod reduc frecarea mentală și vă permit să fiți mai productiv, motiv pentru care sunt atât de importanți și primesc atât de multă atenție.

Deci, care este cel mai bun editor de coduri?

Sincer, nici nu îndrăznesc să merg acolo! �� ��

Cu toate acestea, dacă sunteți în curs de dezvoltare web, există o alternativă la care vreau să vă gândiți – editori de cod online!

Pe scurt, este vorba de editori care locuiesc în întregime pe un server la distanță și sunt accesați prin intermediul browserului.

Pare ciudat, nu?

M-am simțit și eu când am întâlnit cu ei acum 3-4 ani. De ce naiba ar trebui cineva să vrea să predea totul unui browser stupid?

Poate chiar să concureze cu un editor de cod instalat nativ?

Se pare că, în majoritatea cazurilor, și în special pentru dezvoltarea web, răspunsul este da. Acum, deși nu am înglobat editorii online ca mijloc principal, mă simt că îi folosesc din ce în ce mai mult în scenarii specifice.

Înainte de a ne afunda în ce redactori de coduri trebuie să fie folosiți, să ne oprim și să ne gândim când pot avea sens editorii de cod online.

Configurare zero

Nu știu despre tine, dar configurarea editorului meu preferat pe un sistem nou nu este ceea ce aștept cu nerăbdare. Pluginuri, teme, fonturi, comenzi rapide, fragmente, setări. . . Există o listă nesfârșită de lucruri care trebuie echilibrate înainte ca totul să devină utilizabil. Este ușor să treceți cu vederea ceva, doar să vă enervați mai târziu atunci când fluxul de lucru este întrerupt.

În schimb, nu este nimic de-a face cu un editor online după terminarea primei configurații. Construcții oficiale, actualizări, compilări nocturne, platforme acceptate, arhitectură de sistem, sincronizare FTP, conducte CI / CD – nimic nu contează atât timp cât ai un browser!

Colaborare

Cel mai adesea, trebuie să colaborați cu alți dezvoltatori atunci când rezolvați probleme sau depistați ceva.

Editorul de cod tradițional nu este creat pentru acest lucru – nu există nicio posibilitate de editare simultană de coduri, comentarii sau evidențieri și este dificil să adăugați suport pentru acesta.

Securitatea datelor

Acum, este dat de faptul că niciun proiect nu este astăzi fără control de versiune, ceea ce înseamnă că o copie a codului există în depozit în orice moment. Acestea fiind spuse, există momente în care controlul versiunii nu este suficient:

  • Uitați să împingeți angajamentele nou create, iar laptopul dvs. ia foc.
  • Aveți alte fișiere importante și depozite de date cu care codul dvs. interacționează, deși acestea nu fac parte din aplicația live. Ce se întâmplă cu ei dacă laptopul tău ia foc?

(Bine, se pare că sunt obsedat de caietele de foc, dar ai înțeles, nu ?!)

Aplicarea disciplinei

La fel de bine ar putea fi contestat și în curtea drepturilor dezvoltatorilor (dacă există așa ceva), dar adevărul este că dezvoltatorii își sacrifică rareori capriciile pentru binele comun.

De exemplu, un pasionat de text sublime hardcore va îmbrățișa pe deplin pe oricare dintre editorii excelenți ai JetBrains și va găsi orice ocazie de a puncta natura sa flămândă de memorie și performanța mai lentă..

Același lucru este valabil și pentru filele vs. spații (sau chiar pentru cele două spații vs. cele pentru patru spații) – sunteți naivi dacă credeți că programatorii din echipa dvs. nu vor bloca coarnele.

În astfel de cazuri, un editor online este o boonă – decideți setările pentru proiecte (chiar și modul în care trebuie formatat codul) și pur și simplu va refuza să accepte munca până nu va respecta toate standardele. Dure pentru individ, poate, dar grozav pentru proiect!

Deocamdată rămân fără cazuri de utilizare, deci rămânem la ce opțiune avem atunci când vine vorba de editori de cod online, în special pentru dezvoltarea web.

JSFiddle

In timp ce JSFiddle nu poate înlocui un editor de text complet, ci face o treabă bună de a gestiona scripturi frontend unice.

Este atât de popular că Q&Site-uri precum StackOverflow acceptă deja încorporarea legăturilor JSFiddle direct în platforma lor.

Pentru a începe lucrurile rapid, JSFiddle oferă la început câteva plăci de cazane; ceea ce înseamnă că dacă doriți să obțineți o demonstrație de, să spunem, să reacționeze, a început, tot ce trebuie să faceți este să faceți clic pe butonul relevant și să începeți să scrieți codul. După ce ați salvat „Salvarea”, „fiddle” este salvat, veți obține o adresă URL permanentă (Consultați acest joc prostesc pe care l-am creat: https://jsfiddle.net/tuqd76c4/ și observați că puteți efectua modificările și apăsați Salvați pentru a crea o nouă versiunea acestui URL).

Iată ce face JSFiddle o platformă viabilă pentru dezvoltarea web front-end:

  • Gratuit de utilizat (fără taxe ascunse sau funcții freemium). JSFiddle se acceptă prin intermediul anunțurilor (cel puțin la scriere) și puteți vedea un anunț Adobe în stânga jos a capturii de ecran de mai sus.
  • Caracteristici de colaborare a codului – ideale pentru construirea de concepte împreună, interviuri etc..
  • Aspecte multiple, dimensiuni de fonturi, teme de lumină / întuneric etc..
  • Formatarea codului (redactare), suport pentru viitoarele linii (CSS și JS) și multe altele.

Și acum, suspin, suspin, pentru lucrurile rele:

  • JSFiddle este un editor de front-end pur. Nu există nicio modalitate de a codifica și de a rula limba preferată de backend.
  • Nu există niciun concept de fișiere și foldere aici (sau încărcări, în acest sens). Tot ce aveți este un singur spațiu pentru cod, indiferent cât de mult există.
  • JSFiddle nu poate fi utilizat pentru a găzdui cod pe serverul dvs. Codul trebuie să fie pe JSFiddle și este public tot timpul.
  • Nu există nicio modalitate de a construi o conductă CI / CD, de a utiliza Git etc..

Acestea fiind spuse, JSFiddle are punctul ei dulce și strălucește atunci când trebuie să pregătiți dovezi de concept și să colaborați cu viteza luminii. Este și va rămâne o identitate majoră în rândul editorilor online.

CodeSandbox

CodeSandbox poate fi gândit ca o abordare mult mai puternică și mai completă asupra JSFiddle. Fidel numelui său, CodeSandbox oferă o experiență completă de redactor de coduri și un mediu sandboxed pentru dezvoltare front-end.

CodeSandbox este o adevărată centrală și un produs dulce, dulce. Am rămas fără hârtie dacă încerc să listez toate avantajele sale, dar iată câteva caracteristici ucigătoare:

  • Suport Npm: Da, puteți adăuga aproape orice pachet disponibil pe npm.
  • Fișiere, foldere, module: Puteți împărți codul în mai multe fișiere, adăuga / elimina imagini din folderul public și crea / importa module după cum considerați de cuviință. Fluxul de lucru reflectă cel al unui pachet de module modern, astfel încât nu este necesar să configurați (aproape) nimic.
  • Asistență pentru TypeScript, reîncărcare la cald, export GitHub, găzduire de fișiere statice etc..
  • Este construit pe Redactor Monaco, aceeași fiară care alimentează favoritul VSCode editor. Aceasta aduce caracteristici puternice, cum ar fi „Mergi la”, „Găsiți referințe” și refactorizarea necesară la vârful degetelor!
  • Suport fragment pentru Emmet
  • DevTools integrate, liniere, suprapuneri de eroare, cadre de testare (Jest), legături de taste și multe altele.
  • Cli puternic pentru importarea directă a proiectelor locale în CodeSandbox.

Deși versiunea gratuită a CodeSandbox nu acceptă codul privat, puteți obține această caracteristică (și creșteți limitele de mărime în general), ajutându-le Patreon pentru minim 5 USD pe lună (plătiți ce doriți, până la 50 USD pe lună).

CodeAnywhere

O problemă cu majoritatea editorilor de coduri din această listă (cel puțin până acum) este că ei se așteaptă să păstrezi codul pe serverele lor în orice moment sau să te solicite să sincronizezi codul prin linia de comandă în mod regulat.

Nu cu asta CodeAnywhere.

Cel mai puternic, CodeAnywhere are două caracteristici care ies în evidență pentru mine:

  • Imagini de container pre-construite pentru mai mult de 72 de limbaje de programare și cadre. Aceasta înseamnă că puteți asigura un nou mediu de dezvoltare chiar din interiorul editorului! Desigur, codul este găzduit automat pe containerul nou creat, iar fișierele sunt furnizate direct de acolo.
  • Conectați-vă la orice. Da, literalmente orice. Nu sunteți obligat să vă stocați codul pe serverele CodeAnywhere. Indiferent dacă codul dvs. se află pe FTP, pe platforme de partajare a fișierelor precum Dropbox, Amazon S3 sau pe platforme sofisticate de control al versiunilor precum GitHub, puteți configura cu ușurință CodeAnywhere unde să citiți și să scrieți la sursa respectivă, folosind doar editorul de cod. . . Ei bine, editarea codului. ��

Încă un lucru pe care doresc să-l subliniez: dacă nu ești confortabil cu Git când vine vorba de istoricul și diferențele, CodeAnywhere ar putea simți un suspin de ușurare. Editorul folosește sistemul său dif pentru compararea fișierelor, ceea ce vă permite să comparați două fișiere la oricare două revizii (o revizuire este creată de fiecare dată când salvați un fișier).

Cu toate acestea, există o ușoară captură – versiunea gratuită vă permite să mențineți o singură revizuire, în timp ce cel mai mic plan plătit permite cel mult 20 de revizuiri. În general, nu este o problemă, deoarece rareori vrei să te uiți dincolo de ultima revizuire, dar din moment ce majoritatea programatorilor au obiceiul să lovească de câteva ori pe minut, poate deveni dureros.

Toate cele spuse și făcute, CodeAnywhere este o ofertă solidă și plăcută pentru cei care doresc să se mute în Cloud și să rămână acolo. �� Întrucât puterile sale se extind dincolo de codul front-end, în opinia mea, este foarte recomandat!

StackBlitz

Dacă sunteți în front-end mai ales și nu vă puteți îndepărta de interfața VSCode, StackBlitz a fost creat doar pentru tine.

Nu vezi nimic special? Nu am reușit până când am defilat puțin și am dat clic pe butonul Angular. bum!

Ghiciți ce, asta nu a fost creat în mod intenționat pentru a arăta ca VSCode – este construit pe editorul VSCode! Atât de mult, încât puteți instala extensii, căutați în dosare și organizați fișiere exact așa cum vă așteptați de la o instanță VSCode obișnuită.

Dar, stai, sunt mai multe!

S-ar putea să fi observat sau nu că:

  • Toate aplicațiile create pe StackBlitz sunt de asemenea implementate automat pe serverele lor! Deci, această aplicație Angular pentru jucării pe care tocmai am creat-o este găzduită automat pe https://angular-yvyi2j.stackblitz.io/. Cel mai probabil, URL-ul încă funcționează (totuși se va încărca încet, așa cum vă așteptați când este găzduit gratuit)!
  • Puteți furca și partaja proiectul. În timp ce partajați, veți obține un control mai bun asupra a ceea ce pot face alții.
  • Vă puteți conecta la un depozit GitHub și, de asemenea, permiteți ca codul să fie direct tras / împins de acolo. Sau puteți pur și simplu să descărcați proiectul ca fișier zip în modul bun ol.

Dar, stai, sunt mai multe!

Serios! ��

Iată lista de caracteristici oficiale oferite de StackBlitz:

  • Asistență nativă pentru Firebase (lucru pe care nu îl folosesc personal, dar hei, este un bun lucru pentru cei care nu doresc să se afunde în adâncurile întunecate ale backend-ului)
  • Intellisense, căutare de proiecte
  • Încărcarea la cald pe măsură ce tastați
  • Import pachete npm
  • Editați offline atunci când nu sunteți conectat!

StackBlitz este plin de (frumoase) surprize atunci când vine vorba de eliminarea obstacolelor de la dezvoltarea și implementarea Web. Încorporarea VSCode în site-ul dvs. web nu mai este chestia viselor!

AWS Cloud9

Cloud9 a fost, probabil, primul IDE bazat pe browser care a oferit funcții serioase și a luat ideea de browser-ca-un-editor principal. Nu e de mirare că Amazon a achiziționat-o mai târziu și astăzi, Cloud9 face parte din ofertele AWS.

Dacă sunteți atașat de la distanță (sau sunteți interesat) de platforma AWS, Cloud9 este locul în care se încheie căutarea dvs. pentru un editor perfect (bine, aproape perfect). Să vedem de ce:

  • Nu există taxe suplimentare pentru utilizarea Cloud9. Puteți conecta Cloud9 la o instanță de calcul AWS existentă / nouă și veți plăti doar pentru acea instanță. De asemenea, este posibil să vă conectați la un server terț prin SSH – fără taxă! ��
  • Suport de primă clasă pentru aplicațiile fără server AWS (depanare etc.)
  • Accesul terminalului direct la AWS din interiorul editorului (sincer, un terminal decent cu file, este ceea ce îmi lipsește încă din VSCode)
  • Peste 40 de limbaje de programare acceptate (Go, C ++, Ruby, Node, Python, PHP, Java … luați alegerea dvs.)

Funcțiile de colaborare din Cloud9 sunt de asemenea de dorit, permițând recenziile / interviurile să fie realizate fără probleme.

O altă caracteristică criminală este o redare în stil video a modificărilor aduse unui fișier, ceea ce face ca procesul de revizuire să fie bucuros:

Sfatul meu?

Dacă sunteți în AWS, atunci nu așteptați și nu apucați Cloud9 chiar acum. Și dacă nu sunteți încă pe cloud, dar v-ați gândit să faceți o mișcare, îmbrățișați AWS și integrați Cloud9 în fluxul de lucru. În niciun caz nu puteți lua o decizie mai bună!

CodeEnvy

CodeEnvy este un editor cloud puternic care utilizează containerele Docker pentru a vă permite să rulați medii dev preconfigurate și izolate. Este construit pe IDE cloud cloud Eclipse Che open source și oferă o mulțime de opțiuni de scalabilitate și DevOps.

În ceea ce scrie, CodeEnvy a fost achiziționat de RedHat (care, amuzant, însuși a fost achiziționat de Oracle!).

Gitpod

Gitpod este o abordare revigorantă a editorilor de cod cloud (sau IDE-uri, dacă doriți) care are ca scop menținerea codului dvs. mereu testat și actualizat. Cu alte cuvinte, este profund integrat cu GitHub și, de fiecare dată când adăugați cod, vă execută testarea și conductele CI / CD pentru a vă asigura că codul este întotdeauna la 100% sănătate.

Merită să verificați dacă vă place experiența VSCode și doriți ceva care să susțină toate limbajele și cadrele principale de back-end / front-end (Django, Rails, Revel, îl numiți).

Theia

Dacă sunteți un fan SOLID greu de suportat și un arhitect de software care să aleagă nituri, Theia IDE îți va gâdilă osul de separare a preocupărilor. Este un cod IDE codificat de tip TypeScript (cinci puncte pentru stilul imediat!) Care are în mod perfect front-end și backend. Front-end-ul rulează într-un browser, în timp ce backend-ul poate fi oriunde – mașină locală sau cloud!

Dar asta nu este totul – front-end-ul poate fi rulat ca o aplicație Electron cu un mediu de browser complet funcțional, izolat, oferindu-ți aspectul unei aplicații desktop native dacă ar trebui să o dorești.

Coder

Deși site-ul lor nu reușește să spună atât de clar, Coder este un mediu VSCode încorporat într-un server care poate fi rulat local sau în cloud. Configurația recomandată este să rulați IDE ca server în cloud și să îl accesați local prin browser. Există imagini Docker preconstruite pentru setări cu probleme zero și un plan de întreprindere ar trebui să ai nevoie de asistență sau să ai nevoi diferite.

Concluzie

Acest lucru acoperă mai mult sau mai puțin toate IDE-urile și editorii de coduri pe parcursul scrierii. Am lăsat în evidență două tipuri de oferte din această listă: cele care sunt concentrate pur și simplu pe interviuri și nu au medii depline (cu excepția iubitului nostru clasic JSFiddle, desigur), și cele care nu păreau să ofere ceva substanțial și nu avea decât mai mult decât o pagină de început elegantă.

Dacă credeți că ceva merită să fie aici, anunțați-mă și voi fi recunoscător! ��

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map