Radeći na složenom projektu, bilo da ste iskusan programer ili brucoš, praktički ćete vjerovatno naići na probleme. Kada svoj projekat podijelite na mnogo modula, pojavljuju se problemi koji otežavaju pronalaženje grešaka i pronalaženje rješenja. U drugim okolnostima, otklanjanje grešaka u pojedinačnim instancama može biti teško jer niste otkrili pravo rješenje za problem na kojem ste radili.
Povremeno se pojavljuje i kao dio koda, koji u tom trenutku može izgledati složeno. JavaScript je jedan od jezika zasnovanih na Webu koji je izuzetno jednostavan za učenje. Jednostavno pokrenite vaš desktop pretraživač i idite na Developer Tools (obično F12) i gotovi ste! Zatim možete eksperimentisati sa JS-om bez potrebe za instaliranjem ili pokretanjem bilo kakvog komplikovanog softvera.
Za početak, sve što vam treba je pretraživač. Divno je imati svu ovu jednostavnost odmah iz kutije, ali postoje prilike kada vam treba više. Na primjer, pretpostavimo da želite eksperimentirati s novim Web API-jem koji ste nedavno otkrili, ali ne želite započeti novi projekt.
U ovom postu ćemo uporediti tri najpopularnija JS igrališta, CodePen, CodeSandbox i StackBlitz. Hajde da počnemo!
CodePen
Frontend alati za web razvoj se uvijek razvijaju, a uređivači teksta su velika komponenta najnovijih tehnologija koje čine život programera jednostavnijim. Osim samostalnih uređivača teksta kao što su Atom ili Notepad ++, posljednjih godina došlo je do eksplozije uređivača zasnovanih na pretraživaču koji ne zahtijevaju instalaciju programa i promoviraju veću saradnju.
CodePen je „online zajednica za testiranje i predstavljanje isječaka HTML, CSS i JavaScript koda kreiranih od strane korisnika“ koja nudi fantastične mogućnosti da naučite kako bolje pisati frontend web stranice.
CodePen vam daje dva "moda". Prva i najčešće korištena je olovka. Jednostavno je kao da kliknete na dugme i prenesete se pravo do uređivača. Odatle možete pristupiti panelu za pregled, kao i osnovnim prozorima za uređivanje HTML, CSS i JS.
Ne postoji „sistem datoteka“, „IntelliSense“ ili bilo šta drugo – samo jednostavno isticanje sintakse i brze komande kao što je prettify. Na kartici sa opcijama možete birati iz ograničenog raspona predprocesora za sva tri jezika (kao što je TypeScript za JS) ili dodati veze s vanjskim izvorima.
Ako vam je potrebno samo nešto besplatno, bilo koji od urednika će biti dovoljan. Predložio bih CodePen za sve što ne zahteva mnogo podešavanja ili biblioteka – jednostavno HTML, CSS i JS sa opcionim predprocesorima na vrhu. Ako želite da iskoristite igralište da poboljšate svoje prisustvo na društvenim mrežama ili razvijete lični portfolio, CodePen je bolja opcija.
Premium verzija
Imate još nekoliko alternativa koje možete izabrati na CodePenu. Ako plaćate godišnje, možete dobiti jedan od tri premium plana za 12, 19 ili 39 dolara svakog mjeseca. Možete kreirati beskonačan broj privatnih olovaka, postova i kolekcija na bilo kojem od tri nivoa.
Također ćete dobiti Pro značku (pojačanje društvenih mreža), pristup načinu rada uživo, bez reklama i još mnogo toga. Postoje i određene strategije specifične za tim i druge međuslojne razlike. Za dodatne informacije pogledajte njihovu službenu ploču za naplatu.
ključne značajke
Osim kreiranja HTML-a, CSS-a i JavaScript-a u CodePen-u, postoji još nekoliko stvari koje ga izdvajaju.
- Pregled vašeg koda je moguć u realnom vremenu. Ne zahtijeva kompilaciju.
- Eksperimentisanje vam omogućava da naučite nove stvari.
- Kreirajte male testne slučajeve za traženje i rješavanje problema.
- Pokažite svoje divne radove.
- Kreirajte i pohranite olovke za kasniju upotrebu.
- Isprobajte kod drugih programera i pogledajte ga na djelu.
prednosti
- Za početak, nema troškova.
- Ugrađeni resursi za učenje.
- Sarađujte s drugima i uporedite projekte kako biste vidjeli gdje mogu ići u budućnosti.
- UI je jednostavan za korištenje i jasan.
nedostaci
- Biblioteka kodova je mala, automatsko dovršavanje koda je neadekvatno. Dobar je samo za projekte na jednoj stranici i ne može podnijeti ništa veće.
- Na CodePenu možete kreirati privatne olovke, ali ćete morati nadograditi na Pro članstvo (9 USD mjesečno).
kod sandbox
CodeSandbox je web-based editor koda. Automatizira upravljanje transpiracijom, pakiranjem i ovisnošću za vas, omogućavajući vam da napravite novi projekt jednim klikom. Nakon što kreirate nešto fascinantno, možete to podijeliti s drugima jednostavnim dijeljenjem web stranice.
Uređivač je kompatibilan sa svim JavaScript projektima, iako uključuje određene karakteristike specifične za React, kao što je opcija za spremanje projekta u predlošku create-react-app.
Svaki projekat koji izgradite u CodeSandboxu počinje predloškom. Može se ili odnositi na određenu biblioteku, okvir ili vrijeme izvođenja (uključujući Node.js) ili koristiti jednostavno standardne web tehnologije. Nakon odabira šablona, bićete poslani u editor, gdje ćete pronaći sve potrebne datoteke i prozor za pregled koji je već otvoren.
Imate pristup „sistemu datoteka“ u svim Sandboxovima, što znači da možete kreirati nove datoteke, koristiti module (uključujući NPM pakete) i komunicirati sa statičkim sredstvima. Također postoji mogućnost izmjene konfiguracijskih datoteka specifičnih za šablone.
Možete čak i konstruisati sopstvene šablone za svoj jedinstveni slučaj upotrebe, zajedno sa strukturom datoteka i zavisnostima, slično kao u IDE-u. Budući da je alat povezan s Github-om, možete brzo generirati urezivanje i otvoriti PR-ove. Svoju aplikaciju možete odmah rasporediti na ZEIT ili Netlify.
CodeSandbox Team Pro
CodeSandbox, holandska firma koja omogućava programerima da konstruišu sandbox za razvoj web aplikacija baziran na pretraživaču, zvanično je objavio platformu za saradnju koja omogućava timovima da rade na kodu u oblaku. Novi proizvod, Team Pro, je rešenje bez kodiranja napravljeno za kompletne timove proizvoda, od dizajnera i menadžera preko timova za osiguranje kvaliteta (QA) i dalje.
Projekti su dostupni u korisničkom sučelju za svakoga ko želi napraviti ili prihvatiti izmjene na web aplikaciji, izbjegavajući alternativne metode kao što je slanje bilješki i preporuka programerima da izvrše promjene, prosljeđivanje na diskusiju i ponavljanje procesa.
ključne značajke
- Web-bazirani uređivač koda i alat za prototip.
- Za lokalnu upotrebu, sandbox se može lako preuzeti u zip datoteci.
- programiranje se radi u sandboxovima, koji se mogu lako podijeliti sa kolegama.
prednosti
- Poboljšano korisničko iskustvo i veća kontrola nad uređivačem.
- Funkcija pregleda uživo može se izmijeniti i pogledati u posebnom prozoru.
- Kôd se automatski formatira i uključuje CLI (codesandbox-cli)
- Podrška za napredne npm module.
- Lijepe poruke o grešci sa preporukama.
- Poboljšava iskustvo otklanjanja grešaka pružanjem boljeg terminala, preglednika testova i preglednika problema.
nedostaci
- Krajnji potrošač je izložen mnogim personalizacijama.
- Prevlačenje i ispuštanje datoteka sa lokalnog računara ne radi ispravno.
- U CodeSandboxu mora se pratiti određena struktura foldera.
- Funkcionalnost privatnog sandboxa dostupna je samo korisnicima.
StackBlitz
StackBlitz je online IDE za web aplikacije koji pokreće Visual Studio Code. Platforma je prilagodljiva i prilagodljiva kao i desktop verzija. StackBlitz je internetski IDE koji dolazi s unaprijed učitanim Angular i React razvojni alati.
Thinkster.io je napravio taj fantastičan projekat kako bi bio što jednostavniji za početak rada s vašim Angular ili React projektom bez brige o instalaciji ovisnosti ili postavkama izgradnje. StackBlitz pruža mnogo neverovatnih i jedinstvenih karakteristika koje trenutno nema nijedan drugi onlajn uređivač kodova. Kao rezultat toga, vrijedno je dodatno istražiti StackBlitz i otkriti šta ovaj online IDE može ponuditi.
Stackblitz je izuzetno uporediv sa kompletnim IDE-om, posebno ako ne možete reći zbogom VS kodu jer je alat baziran na njemu. Paket ima niz funkcija koje vam omogućavaju da započnete i nastavite sa kreiranjem full-stack aplikacije.
Program pokreće Visual Studio, koji je dobro poznat među programerima. Offline uređivanje je istaknuta karakteristika projekta. Da bi to omogućilo, Stackblitz tim je napravio web server u pretraživaču. Dok kucate, on automatski instalira zavisnosti, kompajlira, skuplja i vrši vruće ponovno učitavanje.
Premium verzija
Kadet, Astronaut i Zapovjednik su dostupni besplatno, 8 USD mjesečno, odnosno 29 USD mjesečno. Astronaut and Commander uključuje brojne funkcije kao što su neograničeni privatni projekti, neograničeno otpremanje datoteka, pozivnica na kanal za lanac glavnog tima i tako dalje. Za više informacija pogledajte zvaničnu billing board.
ključne značajke
- Dodavanje NPM paketa vašem projektu.
- Zahvaljujući novom dev serveru u pretraživaču, možete uređivati dok ste van mreže.
- URL hostovane aplikacije koji nam omogućava pristup (i dijeljenje) našoj aplikaciji uživo u bilo kojem trenutku.
- Ostale značajne funkcije Visual Studio Codea uključuju Intellisense, pretragu projekata (Cmd/Ctrl+P), Idi na definiciju i druge.
prednosti
- Mogućnosti Firebase za implementaciju.
- Editor je zaista jednostavan za korištenje i izuzetno brz.
- Korisnici imaju pristup package.json, index.html i index.js.
- Izvorni kod koji se može dijeliti i koji se također može ugraditi.
- Pregled uživo na velikom dijelu stranice, s opcijom otvaranja na drugoj stranici ako je potrebno.
- Dok ste van mreže, uređivanje
- Pametni dovršeci i poboljšani Intellisense.
- Srž Stackblitz-a je open source.
nedostaci
- Nemate uticaj na zgradu ili server za razvojne programere jer njima upravlja naredba create-react-app.
- U Reactu treba obratiti pažnju na osnovnu strukturu foldera.
- Nije moguće formatirati kod automatski, iako je to moguće učiniti ručno.
zaključak
U današnje vrijeme, igralište za kodiranje poput onih koje smo vidjeli iznad može se koristiti za potpunu izgradnju bilo kojeg web projekta. Nema potrebe da instalirate glomazne IDE-ove na računar kada možete da pravite, otklanjate greške, testirate i postavljate direktno iz svog veb pretraživača.
Po mom mišljenju, StackBlitz bi bio najbolji među njima jer je to web-bazirani IDE koji omogućava JavaScript, Angular i druge razvojne projekte odmah iz kutije, bez potrebe za instaliranjem bilo kakvog lokalnog razvojnog okruženja poput Node.js, npm, ili Angular. Pruža isto iskustvo kao lokalno korištenje Visual Studio Code-a. U stvarnosti, budući da StackBlitz pokreće Visual Studio Code, čini se da je brz i svestran kao desktop verzija.
Koji od CodePen-a, CodeSandbox-a i StackBlitza je vaš alat? Javite nam u komentarima.
Abbatyya
Hvala na ovom sjajnom članku, kada sam jednom vidio stackblitz.com, znam da je to ono što želim.