Lucrând la un proiect complex, fie că sunteți un programator cu experiență sau un boboc, probabil că veți întâlni probleme. Când vă împărțiți proiectul în mai multe module, apar probleme, ceea ce face mai dificilă identificarea erorilor și găsirea soluțiilor. În alte circumstanțe, depanarea instanțelor individuale poate fi dificilă, deoarece nu ați descoperit soluția adecvată pentru problema la care ați lucrat.
De asemenea, apare ocazional ca o bucată de cod, care poate părea complexă la momentul respectiv. JavaScript este unul dintre limbile bazate pe web care este extrem de simplu de învățat. Pur și simplu lansați browserul desktop și navigați la Instrumente pentru dezvoltatori (de obicei F12) și ați terminat! Apoi puteți experimenta cu JS fără a fi nevoie să instalați sau să rulați vreun software complicat.
Pentru a începe, tot ce aveți nevoie este un browser. Este minunat să ai toată această simplitate imediat scoasă din cutie, dar există ocazii când ai nevoie de mai mult. De exemplu, să presupunem că doriți să experimentați cu un nou Web API pe care l-ați descoperit recent, dar nu doriți să începeți un nou proiect.
În această postare, vom compara și compara cele mai populare trei locuri de joacă JS, CodePen, CodeSandbox și StackBlitz. Să începem!
CodePen
Instrumentele de dezvoltare web front-end evoluează mereu, iar editorii de text sunt o componentă importantă a celor mai noi tehnologii care simplifică viața unui dezvoltator. În afară de editorii de text autonomi, cum ar fi Atom sau Notepad ++, în ultimii ani a existat o explozie de editoare bazate pe browser care nu necesită instalarea programului și promovează o colaborare mai mare.
CodePen este o „comunitate online pentru testarea și prezentarea fragmentelor de cod HTML, CSS și JavaScript create de utilizator” care oferă oportunități fantastice de a învăța cum să scrieți mai bine pagini web frontend.
CodePen vă oferă două „moduri”. Primul și cel mai des folosit este Pen. Este la fel de simplu ca să faci clic pe un buton și să fii transportat direct la editor. De acolo, puteți accesa un panou de previzualizare, precum și ferestrele de editare HTML, CSS și JS de bază.
Nu există „sistem de fișiere”, „IntelliSense” sau orice altceva – doar evidențiere simplă de sintaxă și comenzi rapide precum prettify. În fila de opțiuni, puteți selecta dintr-o gamă restrânsă de preprocesoare pentru toate cele trei limbi (cum ar fi TypeScript pentru JS) sau puteți adăuga conexiuni la surse externe.
Dacă aveți nevoie doar de ceva făcut gratuit, oricare dintre editori va fi suficient. Aș sugera CodePen pentru orice nu necesită multă configurare sau biblioteci - pur și simplu HTML, CSS și JS cu preprocesoare opționale deasupra. Dacă doriți să utilizați locul de joacă pentru a vă îmbunătăți prezența în rețelele sociale sau pentru a dezvolta un portofoliu personal, CodePen este o opțiune mai bună.
Versiune Premium
Mai aveți câteva alternative din care să alegeți pe CodePen. Dacă plătiți anual, puteți obține unul dintre cele trei planuri premium pentru 12 USD, 19 USD sau 39 USD în fiecare lună. Puteți crea un număr infinit de pixuri private, postări și colecții pe oricare dintre cele trei niveluri.
Veți primi, de asemenea, insigna Pro (un impuls social), acces în modul de colaborare live, fără publicitate și multe altele. Există, de asemenea, anumite strategii specifice echipei și alte distincții între niveluri. Consultați tabloul lor oficial de facturare pentru mai multe informații.
Caracteristici-cheie
Pe lângă crearea HTML, CSS și JavaScript în CodePen, mai există câteva lucruri care îl deosebesc.
- Este posibilă vizualizarea în timp real a codului dvs. Nu necesită compilare.
- Experimentarea vă permite să învățați lucruri noi.
- Creați cazuri de testare mici pentru a căuta și rezolva probleme.
- Afișează-ți lucrările minunate.
- Creați și stocați pixuri pentru utilizare ulterioară.
- Încercați codul altor dezvoltatori și vedeți-l în acțiune.
Avantaje
- Pentru început, nu există niciun cost.
- Resurse de învățare încorporate.
- Colaborați cu alții și comparați proiecte pentru a vedea unde pot merge în viitor.
- Interfața de utilizare este simplu de utilizat și direct.
Dezavantaje
- Biblioteca de coduri este mică, completarea codului automat este inadecvată. Este doar bun pentru proiecte de o pagină și nu poate face față cu nimic mai mare.
- Pe CodePen, puteți crea pixuri private, dar va trebui să faceți upgrade la un abonament Pro (9 USD/lună).
cod sandbox
CodeSandbox este un editor de cod bazat pe web. Automatizează transpirația, ambalarea și gestionarea dependenței pentru tine, permițându-ți să construiești un nou proiect cu un singur clic. După ce ați creat ceva fascinant, îl puteți împărtăși altora prin simpla partajare a site-ului web.
Editorul este compatibil cu orice proiect JavaScript, deși include anumite caracteristici specifice React, cum ar fi opțiunea de a salva proiectul într-un șablon create-react-app.
Orice proiect pe care îl construiți în CodeSandbox începe cu un șablon. Se poate referi fie la o anumită bibliotecă, cadru sau runtime (inclusiv Node.js) sau poate utiliza pur și simplu tehnologii web standard. După ce ați selectat un șablon, sunteți trimis la editor, unde veți găsi toate fișierele necesare și fereastra de previzualizare deja deschisă.
Aveți acces la un „sistem de fișiere” în toate Sandbox-urile, ceea ce înseamnă că puteți crea fișiere noi, puteți utiliza module (inclusiv pachete NPM) și puteți interacționa cu activele statice. Există, de asemenea, posibilitatea de a modifica fișierele de configurare specifice șablonului.
Puteți chiar să vă construiți propriile șabloane pentru cazul dvs. unic de utilizare, complet cu structura de fișiere și dependențe, la fel ca într-un IDE. Deoarece instrumentul este conectat la Github, puteți genera rapid comite și deschide PR-uri. Vă puteți implementa aplicația pe ZEIT sau Netlify imediat.
CodeSandbox Team Pro
CodeSandbox, o companie olandeză care le permite dezvoltatorilor să construiască un sandbox de dezvoltare a aplicațiilor web bazate pe browser, a lansat oficial o platformă de colaborare care permite echipelor să lucreze la cod în cloud. Noul produs, Team Pro, este o soluție fără cod creată pentru echipe complete de produse, de la designeri și manageri până la echipe de asigurare a calității (QA) și nu numai.
Proiectele sunt furnizate într-o interfață ușor de utilizat pentru oricine dorește să facă sau să accepte modificări la o aplicație web, evitând metode alternative, cum ar fi trimiterea de note și recomandări către dezvoltatori pentru a executa modificările, transmiterea lor înapoi pentru discuție și repetarea procesului.
Caracteristici-cheie
- Un editor de cod bazat pe web și un instrument prototip.
- Pentru uz local, un sandbox poate fi descărcat cu ușurință într-un fișier zip.
- Programare se face în nisip, care pot fi ușor partajate colegilor.
Avantaje
- O experiență de utilizator îmbunătățită și un control mai mare asupra editorului.
- Funcția de previzualizare live poate fi modificată și vizualizată într-o fereastră separată.
- Codul este formatat automat și include un CLI (codesandbox-cli)
- Suport pentru module avansate npm.
- Mesaje de eroare frumoase cu recomandări.
- Îmbunătățește experiența de depanare, oferind un terminal mai bun, un vizualizator de testare și un vizualizator de probleme.
Dezavantaje
- Consumatorul final este expus multor personalizări.
- Glisarea și plasarea fișierelor de pe un computer local nu funcționează corect.
- O anumită structură de foldere trebuie urmată în CodeSandbox.
- Funcționalitatea unui sandbox privat este disponibilă numai pentru patroni.
StackBlitz
StackBlitz este un IDE online bazat pe Visual Studio Code pentru aplicații web. Platforma este la fel de receptivă și adaptabilă ca și versiunea desktop. StackBlitz este un IDE online care vine preîncărcat cu Angular și React instrumente de dezvoltare.
Thinkster.io a creat acel proiect fantastic pentru a fi cât mai simplu posibil să începeți cu proiectul dvs. Angular sau React fără a fi nevoit să vă faceți griji cu privire la instalarea dependenței sau a setărilor de construcție. StackBlitz oferă o mulțime de caracteristici uimitoare și unice pe care niciun alt editor de cod online nu le are în acest moment. Drept urmare, merită să investigăm mai mult StackBlitz și să descoperiți ce are de oferit acest IDE online.
Stackblitz este extrem de comparabil cu IDE-ul complet, mai ales dacă nu vă puteți lua rămas bun de la codul VS, deoarece instrumentul se bazează pe acesta. Pachetul are o varietate de caracteristici care vă permit să începeți și să continuați crearea unei aplicații full-stack.
Programul este alimentat de Visual Studio, care este binecunoscut printre dezvoltatori. Editarea offline este caracteristica remarcabilă a proiectului. Pentru a face acest lucru posibil, echipa Stackblitz a creat un server web în browser. Pe măsură ce tastați, instalează automat dependențe, compilează, pachete și efectuează reîncărcarea la cald.
Versiune Premium
Cadet, Astronaut și Commander sunt disponibile gratuit, 8 USD/lună și, respectiv, 29 USD/lună. Astronaut and Commander include o serie de funcții precum proiecte private nelimitate, încărcări nelimitate de fișiere, invitație la canalul de slack al echipei de bază și așa mai departe. Pentru mai multe informații, consultați tabloul oficial de facturare.
Caracteristici-cheie
- Adăugarea pachetelor NPM la proiectul dvs.
- Datorită unui nou server de dezvoltare în browser, puteți edita în timp ce sunteți offline.
- O adresă URL a aplicației găzduite care ne permite să accesăm (și să partajăm) aplicația noastră live în orice moment.
- Alte caracteristici notabile Visual Studio Code includ Intellisense, Căutare de proiect (Cmd/Ctrl+P), Accesați definiția și altele.
Avantaje
- Capabilitățile Firebase pentru implementare.
- Editorul este foarte ușor de utilizat și extrem de rapid.
- Utilizatorii au acces la package.json, index.html și index.js.
- Cod sursă partajabil care poate fi, de asemenea, încorporat.
- Previzualizare live pe o secțiune mare a paginii, cu opțiunea de a deschide pe o altă pagină dacă este necesar.
- În timp ce offline, editați
- Terminări inteligente și Intellisense îmbunătățite.
- Miezul lui Stackblitz este open-source.
Dezavantaje
- Nu aveți influență asupra clădirii sau a serverului dezvoltatorului, deoarece acestea sunt gestionate de comanda create-react-app.
- În React, trebuie respectată o structură fundamentală a folderelor.
- Nu este posibil să formatați codul automat, deși este posibil să o faceți manual.
Concluzie
În zilele noastre, un loc de joacă de codare precum cele pe care le-am văzut mai sus poate fi folosit pentru a construi complet orice proiect web. Nu este nevoie să instalați IDE-uri greoaie pe computer când puteți construi, depana, testa și implementa direct din browserul dvs. web.
După părerea mea, StackBlitz ar fi cel mai bun dintre ele, deoarece este un IDE bazat pe web care permite JavaScript, Angular și alte proiecte de dezvoltare imediat ce nu este nevoie să instalați medii de dezvoltare locale precum Node.js, npm, sau unghiulară. Oferă aceeași experiență ca și utilizarea Visual Studio Code local. În realitate, deoarece StackBlitz este condus de Visual Studio Code, se simte la fel de rapid și versatil ca versiunea desktop.
Care dintre CodePen, CodeSandbox și StackBlitz este instrumentul tău preferat? Spune-ne în comentarii.
Abbatyya
Mulțumesc pentru acest articol grozav, odată ce am văzut stackblitz.com, știu că asta îmi doresc.