Radeći na složenom projektu, bilo da ste iskusni programer ili brucoš, praktički ćete vjerojatno naići na probleme. Kada svoj projekt podijelite na mnoge module, pojavljuju se problemi, što otežava pronalaženje pogrešaka i pronalaženje rješenja. U drugim okolnostima, otklanjanje pogrešaka u pojedinačnim instancama može biti teško jer niste otkrili ispravno rješenje problema na kojem ste radili.
Također se ponekad pojavljuje kao dio koda, koji u tom trenutku može izgledati složeno. JavaScript je jedan od web-baziranih jezika koji je izuzetno jednostavan za učenje. Jednostavno pokrenite preglednik na radnoj površini i idite na Developer Tools (obično F12) i gotovi ste! Zatim možete eksperimentirati s JS-om bez potrebe za instaliranjem ili pokretanjem bilo kakvog kompliciranog softvera.
Za početak, sve što vam treba je preglednik. Divno je imati svu ovu jednostavnost odmah iz kutije, ali postoje prilike kada trebate više. Na primjer, pretpostavimo da želite eksperimentirati s novim web API-jem koji ste nedavno otkrili, ali ne želite pokrenuti novi projekt.
U ovom postu ćemo usporediti tri najpopularnija JS igrališta, CodePen, CodeSandbox i StackBlitz. Započnimo!
CodePen
Frontend alati za web razvoj uvijek se razvijaju, a uređivači teksta velika su komponenta najnovijih tehnologija koje razvojnim programerima čine život jednostavnijim. Osim samostalnih uređivača teksta kao što su Atom ili Notepad ++, posljednjih je godina došlo do eksplozije uređivača temeljenih na pregledniku koji ne zahtijevaju instalaciju programa i promiču veću suradnju.
CodePen je “online zajednica za testiranje i predstavljanje isječaka koda HTML, CSS i JavaScript kreiranih od strane korisnika” koja nudi fantastične mogućnosti da naučite kako bolje pisati frontend web stranice.
CodePen vam daje dva "načina". Prva i najčešće korištena je olovka. Jednostavno je kao da kliknete na gumb i prenesete se pravo do uređivača. Odatle možete pristupiti ploči za pregled, kao i osnovnim prozorima za uređivanje HTML-a, CSS-a i JS-a.
Ne postoji “sustav datoteka”, “IntelliSense” ili bilo što drugo – samo jednostavno isticanje sintakse i brze naredbe kao što je prettify. Na kartici s opcijama možete odabrati 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 bilo što učiniti besplatno, bilo koji od urednika će biti dovoljan. Predložio bih CodePen za sve što ne zahtijeva puno postavljanja ili knjižnica – jednostavno HTML, CSS i JS s dodatnim predprocesorima na vrhu. Ako želite iskoristiti igralište da poboljšate svoju prisutnost na društvenim mrežama ili razvijete osobni portfelj, CodePen je bolja opcija.
Premium verzija
Imate još nekoliko alternativa koje možete odabrati na CodePenu. Ako plaćate godišnje, svaki mjesec možete dobiti jedan od tri premium plana za 12, 19 ili 39 USD. Možete stvoriti beskonačan broj privatnih olovaka, postova i zbirki na bilo kojoj od tri razine.
Također ćete dobiti Pro značku (pojačavanje društvenih mreža), pristup načinu suradnje uživo, bez oglašavanja i još mnogo toga. Tu su i određene strategije specifične za tim i druge međuslojne razlike. Za dodatne informacije pogledajte njihovu službenu ploču za naplatu.
Glavne značajke
Osim stvaranja HTML-a, CSS-a i JavaScripta u CodePenu, postoji još nekoliko stvari koje ga izdvajaju.
- Moguć je pregled vašeg koda u stvarnom vremenu. Ne zahtijeva kompilaciju.
- Eksperimentiranje vam omogućuje da naučite nove stvari.
- Napravite male testne slučajeve za traženje i rješavanje problema.
- Pokažite svoje divne radove.
- Napravite 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.
- Surađujte s drugima i usporedite projekte kako biste vidjeli kamo mogu ići u budućnosti.
- Korisničko sučelje je jednostavno za korištenje i jednostavno.
Nedostaci
- Knjižnica 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 izraditi privatne olovke, ali ćete morati nadograditi na Pro članstvo (9 USD mjesečno).
sandbox koda
CodeSandbox je web-based editor koda. Automatizira upravljanje transpiracijom, pakiranjem i ovisnošću za vas, omogućujući vam da jednim klikom izgradite novi projekt. Nakon što ste stvorili nešto fascinantno, možete ga podijeliti s drugima jednostavnim dijeljenjem web-mjesta.
Uređivač je kompatibilan sa svim JavaScript projektima, iako uključuje određene značajke specifične za React, kao što je opcija za spremanje projekta u predlošku create-react-app.
Svaki projekt 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 što odaberete predložak, šaljete se u uređivač, gdje ćete pronaći sve potrebne datoteke i prozor za pregled koji je već otvoren.
Imate pristup "sustavu datoteka" u svim Sandboxovima, što znači da možete stvarati 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 predložak.
Možete čak i konstruirati vlastite predloške za svoj jedinstveni slučaj upotrebe, zajedno sa strukturom datoteka i ovisnostima, slično kao u IDE-u. Budući da je alat povezan s Githubom, možete brzo generirati urezivanje i otvoriti PR-ove. Svoju aplikaciju možete odmah implementirati na ZEIT ili Netlify.
CodeSandbox Team Pro
CodeSandbox, nizozemska tvrtka koja programerima omogućuje izradu sandboxa za razvoj web-aplikacija temeljenog na pregledniku, službeno je izdala platformu za suradnju koja timovima omogućuje rad na kodu u oblaku. Novi proizvod, Team Pro, rješenje je bez kodiranja izgrađeno za kompletne timove proizvoda, od dizajnera i menadžera do timova za osiguranje kvalitete (QA) i dalje.
Projekti su dostupni u korisničkom sučelju za svakoga tko želi napraviti ili prihvatiti promjene na web aplikaciji, izbjegavajući alternativne metode kao što je slanje bilješki i preporuka programerima da izvrše promjene, prosljeđivanje na raspravu i ponavljanje procesa.
Glavne značajke
- Web-bazirani uređivač koda i alat za prototip.
- Za lokalnu upotrebu, sandbox se može lako preuzeti u zip datoteci.
- Programiranje obavlja se u pješčanicima, koji se mogu lako podijeliti s suradnicima.
Prednosti
- Poboljšano korisničko iskustvo i veća kontrola nad uređivačem.
- Značajka pregleda uživo može se mijenjati i gledati u zasebnom prozoru.
- Kôd se automatski formatira i uključuje CLI (codesandbox-cli)
- Podrška za napredne npm module.
- Lijepe poruke o pogrešci s preporukama.
- Poboljšava iskustvo otklanjanja pogrešaka pružajući bolji terminal, preglednik testova i preglednik problema.
Nedostaci
- Krajnji potrošač je izložen mnogim personalizacijama.
- Povlačenje i ispuštanje datoteka s lokalnog računala ne radi ispravno.
- U CodeSandboxu mora se slijediti određena struktura mapa.
- Funkcionalnost privatnog pješčanika dostupna je samo korisnicima.
StackBlitz
StackBlitz je mrežno IDE za web aplikacije koje pokreće Visual Studio Code. Platforma je osjetljiva i prilagodljiva kao i desktop verzija. StackBlitz je mrežni IDE koji dolazi s unaprijed instaliranim Angular i React razvojni alati.
Thinkster.io je napravio taj fantastičan projekt kako bi što jednostavniji početak rada s vašim Angular ili React projektom bez brige o instalaciji ovisnosti ili postavkama izgradnje. StackBlitz pruža puno nevjerojatnih i jedinstvenih značajki koje trenutno nema nijedan drugi online uređivač kodova. Kao rezultat toga, vrijedno je dodatno istražiti StackBlitz i otkriti što ovaj online IDE može ponuditi.
Stackblitz je iznimno usporediv s kompletnim IDE-om, pogotovo ako se ne možete oprostiti od VS koda jer se alat temelji na njemu. Paket ima niz značajki koje vam omogućuju da započnete i nastavite stvarati full-stack aplikaciju.
Program pokreće Visual Studio, koji je dobro poznat među programerima. Izvanmrežno uređivanje je istaknuta značajka projekta. Kako bi to bilo moguće, tim Stackblitz-a je napravio web-poslužitelj u pregledniku. Dok tipkate, automatski instalira ovisnosti, kompilira, skuplja i vrši vruće ponovno učitavanje.
Premium verzija
Kadet, Astronaut i Zapovjednik dostupni su besplatno, 8 USD mjesečno, odnosno 29 USD mjesečno. Astronaut and Commander uključuje niz značajki kao što su neograničeni privatni projekti, neograničeno učitavanje datoteka, pozivnica na glavni timski kanal i tako dalje. Za dodatne informacije pogledajte službenu ploču za naplatu.
Glavne značajke
- Dodavanje NPM paketa vašem projektu.
- Zahvaljujući novom poslužitelju za razvoj u pregledniku, možete uređivati izvan mreže.
- URL hostirane aplikacije koji nam omogućuje pristup (i dijeljenje) našoj aplikaciji uživo u bilo kojem trenutku.
- Ostale značajne značajke Visual Studio Codea uključuju Intellisense, pretraživanje projekta (Cmd/Ctrl+P), Idi na definiciju i druge.
Prednosti
- Mogućnosti Firebasea za implementaciju.
- Urednik je stvarno jednostavan za korištenje i iznimno 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 mogućnošću otvaranja na drugoj stranici ako je potrebno.
- Dok ste izvan mreže, uređivanje
- Pametni dovršetak i poboljšani Intellisense.
- Srž Stackblitza je open source.
Nedostaci
- Nemate utjecaj na zgradu ili poslužitelj za razvojne programere jer njima upravlja naredba create-react-app.
- U Reactu treba promatrati temeljnu strukturu mapa.
- Nije moguće formatirati kôd automatski, iako je to moguće učiniti ručno.
Zaključak
Danas se igralište za kodiranje poput onih koje smo vidjeli gore može koristiti za potpunu izgradnju bilo kojeg web projekta. Nema potrebe za instaliranjem glomaznih IDE-ova na svoje računalo kada možete izgraditi, otkloniti greške, testirati i implementirati izravno iz svog web preglednika.
Po mom mišljenju, StackBlitz bi bio najbolji među njima jer je to web-bazirani IDE koji omogućuje JavaScript, Angular i druge razvojne projekte odmah iz kutije, bez potrebe za instaliranjem bilo kojeg lokalnog razvojnog okruženja poput Node.js, npm, ili Kutni. Pruža isto iskustvo kao lokalno korištenje koda Visual Studio. U stvarnosti, budući da StackBlitz pokreće Visual Studio Code, čini se da je brz i svestran kao verzija za stolna računala.
Koji je od CodePen, CodeSandbox i StackBlitz vaš alat? Javite nam se u komentarima.
Abbatyya
Hvala na ovom sjajnom članku, kada sam jednom vidio stackblitz.com, znam da je to ono što želim.