Če delate na zapletenem projektu, ne glede na to, ali ste izkušen programer ali novinec, boste skoraj verjetno naleteli na težave. Ko svoj projekt razdelite na številne module, se pojavijo težave, zaradi katerih je težje odkriti napake in najti rešitve. V drugih okoliščinah je lahko odpravljanje napak v posameznih primerih težko, ker niste odkrili ustrezne rešitve za težavo, s katero ste se ukvarjali.
Občasno se pojavi tudi kot del kode, ki je takrat morda videti zapleten. JavaScript je eden izmed spletnih jezikov, ki se ga je zelo enostavno naučiti. Preprosto zaženite brskalnik na namizju in se pomaknite do Orodja za razvijalce (običajno F12) in končali ste! Nato lahko eksperimentirate z JS, ne da bi vam bilo treba namestiti ali zagnati kakšno zapleteno programsko opremo.
Če želite začeti, potrebujete le brskalnik. Čudovito je imeti vso to preprostost takoj iz škatle, vendar obstajajo priložnosti, ko potrebujete več. Recimo, da želite eksperimentirati z novim spletnim API-jem, ki ste ga nedavno odkrili, vendar ne želite začeti novega projekta.
V tej objavi bomo primerjali in primerjali tri najbolj priljubljena igrišča JS, CodePen, CodeSandbox in StackBlitz. Začnimo!
CodePen
Orodja za razvoj spletnih strani se vedno razvijajo, urejevalniki besedil pa so pomemben sestavni del najnovejših tehnologij, ki poenostavljajo življenje razvijalca. Poleg samostojnih urejevalnikov besedil, kot sta Atom ali Notepad ++, je v zadnjih letih prišlo do eksplozije urejevalnikov, ki temeljijo na brskalniku, ki ne zahtevajo namestitve programa in spodbujajo večje sodelovanje.
CodePen je »spletna skupnost za testiranje in predstavitev uporabniško ustvarjenih odrezkov kode HTML, CSS in JavaScript«, ki ponuja fantastične priložnosti za učenje boljšega pisanja spletnih strani v vmesniku.
CodePen vam ponuja dva "načina". Prvi in najpogosteje uporabljen je pisalo. To je tako preprosto, kot da kliknete gumb in se prenesete naravnost v urejevalnik. Od tam lahko dostopate do plošče za predogled ter osnovnih oken za urejanje HTML, CSS in JS.
Ni "datotečnega sistema", "IntelliSense" ali česar koli drugega - samo preprosto poudarjanje sintakse in hitri ukazi, kot je prettify. Na zavihku možnosti lahko izbirate med omejenim naborom predprocesorjev za vse tri jezike (kot je TypeScript za JS) ali dodate povezave z zunanjimi viri.
Če potrebujete samo karkoli zastonj, bo zadostoval kateri koli od urednikov. Predlagal bi CodePen za vse, kar ne zahteva veliko nastavitev ali knjižnic – preprosto HTML, CSS in JS z izbirnimi predprocesorji na vrhu. Če želite igrišče uporabiti za izboljšanje prisotnosti v družbenih medijih ali razvoj osebnega portfelja, je CodePen boljša možnost.
Premium različica
Na CodePen imate na izbiro še nekaj drugih možnosti. Če plačujete letno, lahko dobite enega od treh premium načrtov za 12, 19 ali 39 USD vsak mesec. Ustvarite lahko neskončno število zasebnih pisal, objav in zbirk na kateri koli od treh stopenj.
Prejeli boste tudi značko Pro (družabna spodbuda), dostop do načina sodelovanja v živo, brez oglaševanja in še več. Obstajajo tudi določene strategije, specifične za ekipo, in druge razlike med nivoji. Za dodatne informacije si oglejte njihovo uradno plačilno desko.
Ključne funkcije
Poleg ustvarjanja HTML, CSS in JavaScript v CodePenu obstaja še nekaj stvari, ki ga ločijo.
- Ogled vaše kode je možen v realnem času. Ne zahteva sestavljanja.
- Eksperimentiranje vam omogoča, da se naučite novih stvari.
- Ustvarite majhne testne primere za iskanje in reševanje težav.
- Pokažite svoja čudovita dela.
- Ustvarite in shranite pisala za kasnejšo uporabo.
- Preizkusite kodo drugih razvijalcev in si oglejte, kako deluje.
prednosti
- Za začetek ni stroškov.
- Vgrajeni učni viri.
- Sodelujte z drugimi in primerjajte projekte, da vidite, kam lahko gredo v prihodnosti.
- Uporabniški vmesnik je preprost za uporabo in enostaven.
Slabosti
- Knjižnica kod je majhna, samodejno dokončanje kode je neustrezno. Dobro je samo za enostranske projekte in ne prenese ničesar večjega.
- Na CodePen lahko ustvarite zasebna pisala, vendar boste morali nadgraditi na Pro članstvo (9 $/mesec).
kodni peskovnik
CodeSandbox je spletni urejevalnik kode. Za vas avtomatizira upravljanje razkrivanja, pakiranja in odvisnosti, kar vam omogoča, da z enim samim klikom zgradite nov projekt. Ko ustvarite nekaj zanimivega, ga lahko delite z drugimi tako, da preprosto delite spletno mesto.
Urejevalnik je združljiv z vsemi projekti JavaScript, čeprav vključuje nekatere funkcije, specifične za React, kot je možnost shranjevanja projekta v predlogi create-react-app.
Vsak projekt, ki ga zgradite v CodeSandboxu, se začne s predlogo. Lahko se nanaša na določeno knjižnico, okvir ali izvajalno okolje (vključno z Node.js) ali pa uporablja preprosto standardne spletne tehnologije. Ko izberete predlogo, ste poslani v urejevalnik, kjer boste našli vse potrebne datoteke in okno za predogled je že odprto.
V vseh peskovnikih imate dostop do »datotečnega sistema«, kar pomeni, da lahko ustvarjate nove datoteke, uporabljate module (vključno s paketi NPM) in komunicirate s statičnimi sredstvi. Obstaja tudi možnost spreminjanja konfiguracijskih datotek, specifičnih za predlogo.
Lahko celo sestavite svoje predloge za vaš edinstven primer uporabe, skupaj s strukturo datotek in odvisnostmi, podobno kot v IDE. Ker je orodje povezano z Githubom, lahko hitro ustvarite potrditve in odprete PR-je. Svojo aplikacijo lahko takoj namestite na ZEIT ali Netlify.
CodeSandbox Team Pro
CodeSandbox, nizozemsko podjetje, ki razvijalcem omogoča izdelavo peskovnika za razvoj spletnih aplikacij, ki temelji na brskalniku, je uradno izdalo platformo za sodelovanje, ki ekipam omogoča delo na kodi v oblaku. Novi izdelek, Team Pro, je rešitev brez kodiranja, zgrajena za celotne skupine izdelkov, od oblikovalcev in menedžerjev do skupin za zagotavljanje kakovosti (QA) in več.
Projekti so na voljo v uporabniku prijaznem vmesniku za vsakogar, ki želi narediti ali sprejeti spremembe v spletni aplikaciji, pri čemer se izogiba alternativnim metodam, kot je pošiljanje opomb in priporočil razvijalcem za izvedbo sprememb, pošiljanje nazaj v razpravo in ponavljanje postopka.
Ključne funkcije
- Spletni urejevalnik kode in orodje za prototip.
- Za lokalno uporabo lahko peskovnik enostavno prenesete v datoteko zip.
- Programiranje se izvaja v peskovnikih, ki jih lahko zlahka delite s sodelavci.
prednosti
- Izboljšana uporabniška izkušnja in večji nadzor nad urejevalnikom.
- Funkcijo predogleda v živo lahko spremenite in si ogledate v ločenem oknu.
- Koda je samodejno oblikovana in vključuje CLI (codesandbox-cli)
- Podpora za napredne npm module.
- Lepa sporočila o napakah s priporočili.
- Izboljša izkušnjo odpravljanja napak z zagotavljanjem boljšega terminala, pregledovalnika testov in pregledovalnika težav.
Slabosti
- Končni potrošnik je izpostavljen številnim personalizacijam.
- Povleci in spusti datoteke iz lokalnega računalnika ne deluje pravilno.
- V CodeSandboxu je treba upoštevati določeno strukturo map.
- Funkcionalnost zasebnega peskovnika je na voljo samo obiskovalcem.
StackBlitz
StackBlitz je spletni IDE za spletne aplikacije, ki ga poganja Visual Studio Code. Platforma je tako odzivna in prilagodljiva kot namizna različica. StackBlitz je spletni IDE, ki je vnaprej naložen Angular in React razvojna orodja.
Thinkster.io je ustvaril ta fantastičen projekt, da bi čim bolj poenostavil začetek z vašim projektom Angular ali React, ne da bi vam bilo treba skrbeti za namestitev odvisnosti ali nastavitve gradnje. StackBlitz ponuja veliko neverjetnih in edinstvenih funkcij, ki jih trenutno nima noben drug spletni urejevalnik kode. Zato je vredno dodatno raziskati StackBlitz in odkriti, kaj ponuja ta spletni IDE.
Stackblitz je izjemno primerljiv s celotnim IDE, še posebej, če se ne morete posloviti od VS kode, ker orodje temelji na njej. Paket ima številne funkcije, ki vam omogočajo, da začnete in nadaljujete z ustvarjanjem aplikacije s polnim skladom.
Program poganja Visual Studio, ki je med razvijalci dobro poznan. Urejanje brez povezave je izstopajoča lastnost projekta. Da bi to omogočili, je ekipa Stackblitz ustvarila spletni strežnik v brskalniku. Ko tipkate, samodejno namesti odvisnosti, prevede, združi in opravi vročo ponovno nalaganje.
Premium različica
Kadet, astronavt in poveljnik so na voljo brezplačno, 8 USD na mesec oziroma 29 USD na mesec. Astronaut and Commander vključuje številne funkcije, kot so neomejeno število zasebnih projektov, neomejeno nalaganje datotek, vabila na kanal za ohlapno ekipo in tako naprej. Za dodatne informacije si oglejte uradno obračunsko desko.
Ključne funkcije
- Dodajanje paketov NPM v vaš projekt.
- Zahvaljujoč novemu strežniku za razvijalce v brskalniku lahko urejate brez povezave.
- URL gostujoče aplikacije, ki nam omogoča dostop (in skupno rabo) naše aplikacije v živo kadar koli.
- Druge pomembne funkcije kode Visual Studio vključujejo Intellisense, Iskanje projekta (Cmd/Ctrl+P), Pojdi na definicijo in druge.
prednosti
- Zmogljivosti Firebase za uvajanje.
- Urejevalnik je zelo enostaven za uporabo in izjemno hiter.
- Uporabniki imajo dostop do package.json, index.html in index.js.
- Delljiva izvorna koda, ki jo je mogoče tudi vdelati.
- Predogled v živo na velikem delu strani z možnostjo, da se po potrebi odpre na drugi strani.
- V načinu brez povezave, urejanje
- Pametni zaključki in izboljšan Intellisense.
- Jedro Stackblitza je open source.
Slabosti
- Nimate vpliva na zgradbo ali razvijalski strežnik, ker jih upravlja ukaz create-react-app.
- V Reactu je treba upoštevati osnovno strukturo map.
- Kode ni mogoče samodejno formatirati, čeprav je to mogoče narediti ročno.
zaključek
Dandanes je igrišče za kodiranje, kot smo ga videli zgoraj, mogoče uporabiti za popolno izdelavo katerega koli spletnega projekta. Na vaš računalnik vam ni treba nameščati okornih IDE-jev, ko lahko gradite, odpravljate napake, testirate in uvajate neposredno iz spletnega brskalnika.
Po mojem mnenju bi bil StackBlitz najboljši med njimi, ker je spletni IDE, ki omogoča JavaScript, Angular in druge razvojne projekte takoj iz škatle, brez potrebe po namestitvi kakršnih koli lokalnih razvojnih okolij, kot so Node.js, npm, ali kotni. Zagotavlja enako izkušnjo kot lokalno uporabo kode Visual Studio. V resnici, ker StackBlitz poganja Visual Studio Code, se zdi tako hiter in vsestranski kot namizna različica.
Katero od CodePen, CodeSandbox in StackBlitz je vaše orodje? Sporočite nam v komentarjih.
Abbatyya
Hvala za ta odličen članek, ko sem enkrat videl stackblitz.com, vem, da je to tisto, kar želim.