Työskentelet monimutkaisen projektin parissa, olitpa sitten kokenut ohjelmoija tai fuksi, kohtaat käytännössä todennäköisesti ongelmia. Kun jaat projektisi useisiin moduuleihin, syntyy ongelmia, mikä vaikeuttaa virheiden jäljittämistä ja ratkaisujen löytämistä. Muissa olosuhteissa yksittäisten ilmentymien virheenkorjaus voi olla vaikeaa, koska et ole löytänyt oikeaa ratkaisua käsittelemääsi ongelmaan.
Se esiintyy myös toisinaan koodinpätkänä, mikä voi näyttää tuolloin monimutkaiselta. JavaScript on yksi verkkopohjaisista kielistä, joka on erittäin helppo oppia. Käynnistä vain työpöytäselain ja siirry Kehittäjätyökaluihin (yleensä F12), ja olet valmis! Voit sitten kokeilla JS:ää ilman, että sinun tarvitsee asentaa tai suorittaa monimutkaisia ohjelmistoja.
Aloitaksesi tarvitset vain selaimen. On hienoa saada kaikki tämä yksinkertaisuus heti käyttöön, mutta joskus tarvitset enemmän. Oletetaan esimerkiksi, että haluat kokeilla uutta verkkosovellusliittymää, jonka olet äskettäin löytänyt, mutta et halua aloittaa uutta projektia.
Tässä viestissä vertaamme kolmea suosituinta JS-leikkikenttää CodePen, CodeSandbox ja StackBlitz. Aloitetaan!
CodePen
Käyttöliittymän verkkokehitystyökalut kehittyvät jatkuvasti, ja tekstieditorit ovat suuri osa uusimpia teknologioita, jotka helpottavat kehittäjien elämää. Erillisten tekstieditorien, kuten Atom tai Notepad ++, lisäksi on viime vuosina kasvanut räjähdysmäinen määrä selainpohjaisia muokkausohjelmia, jotka eivät vaadi ohjelman asennusta ja edistävät suurempaa yhteistyötä.
CodePen on "verkkoyhteisö käyttäjien luomien HTML-, CSS- ja JavaScript-koodinpätkien testaamiseen ja esittämiseen", joka tarjoaa upeita mahdollisuuksia oppia kirjoittamaan käyttöliittymän verkkosivuja paremmin.
CodePen tarjoaa kaksi "tilaa". Ensimmäinen ja yleisimmin käytetty on kynä. Se on yhtä helppoa kuin napsauttaa nappia ja siirtyä suoraan editoriin. Sieltä pääset esikatselupaneeliin sekä perus-HTML-, CSS- ja JS-muokkausikkunoihin.
Ei ole olemassa "tiedostojärjestelmää", "IntelliSense" tai mitään muuta – vain yksinkertainen syntaksin korostus ja nopeat komennot, kuten Prettify. Asetukset-välilehdellä voit valita rajatusta esiprosessorien valikoimasta kaikille kolmelle kielelle (kuten TypeScript JS:lle) tai lisätä yhteyksiä ulkoisiin lähteisiin.
Jos tarvitset vain jotain ilmaiseksi, jompikumpi editoreista riittää. Suosittelisin CodePeniä kaikkeen, joka ei vaadi paljon asennusta tai kirjastoja – vain HTML, CSS ja JS valinnaisilla esiprosessoreilla päällä. Jos haluat hyödyntää leikkikenttää sosiaalisen median läsnäolon parantamiseen tai henkilökohtaisen portfolion kehittämiseen, CodePen on parempi vaihtoehto.
Premium-versio
Sinulla on valittavana muutama vaihtoehto CodePenissä. Jos maksat vuosittain, voit saada yhden kolmesta premium-suunnitelmasta 12 dollarilla, 19 dollarilla tai 39 dollarilla kuukaudessa. Voit luoda äärettömän määrän yksityisiä kyniä, viestejä ja kokoelmia mille tahansa kolmesta tasosta.
Saat myös Pro-merkin (sosiaalinen boost), pääsyn live-yhteistyötilaan, ei mainoksia ja paljon muuta. On myös tiettyjä joukkuekohtaisia strategioita ja muita tasojen välisiä eroja. Katso lisätietoja heidän virallisesta laskutustaulustaan.
Avainominaisuudet
HTML:n, CSS:n ja JavaScriptin luomisen lisäksi CodePenissä on muutama muu seikka, jotka erottavat sen muista.
- Koodisi reaaliaikainen katselu on mahdollista. Se ei vaadi kokoamista.
- Kokeilun avulla voit oppia uusia asioita.
- Luo pieniä testitapauksia ongelmien etsimiseen ja ratkaisemiseen.
- Näytä upeita töitäsi.
- Luo ja säilytä kyniä myöhempää käyttöä varten.
- Kokeile muiden kehittäjien koodia ja näe se toiminnassa.
edut
- Aluksi ei ole kustannuksia.
- Sisäänrakennetut oppimisresurssit.
- Tee yhteistyötä muiden kanssa ja vertaa projekteja nähdäksesi, mihin he voivat mennä tulevaisuudessa.
- Käyttöliittymä on helppokäyttöinen ja suoraviivainen.
Haitat
- Koodikirjasto on pieni, automaattinen koodin täydennys on riittämätön. Se on hyvä vain yksisivuisille projekteille, eikä pysty käsittelemään mitään suurempaa.
- CodePenissä voit luoda yksityisiä kyniä, mutta sinun on päivitettävä Pro-jäsenyyteen (9 dollaria/kk).
koodi hiekkalaatikko
CodeSandbox on verkkopohjainen koodieditori. Se automatisoi transpiroinnin, pakkaamisen ja riippuvuuden hallinnan puolestasi, jolloin voit rakentaa uuden projektin yhdellä napsautuksella. Kun olet luonut jotain kiehtovaa, voit jakaa sen muiden kanssa yksinkertaisesti jakamalla verkkosivuston.
Editori on yhteensopiva kaikkien JavaScript-projektien kanssa, vaikka se sisältää tiettyjä React-kohtaisia ominaisuuksia, kuten mahdollisuuden tallentaa projekti luo-reagoi-sovellusmalliin.
Kaikki CodeSandboxissa rakentamasi projektit alkavat mallista. Se voi liittyä joko tiettyyn kirjastoon, kehykseen tai suoritustilaan (mukaan lukien Node.js) tai käyttää yksinkertaisesti tavallisia verkkotekniikoita. Mallin valinnan jälkeen sinut lähetetään editoriin, josta löydät kaikki tarvittavat tiedostot ja esikatseluikkuna on jo auki.
Sinulla on pääsy "tiedostojärjestelmään" kaikissa hiekkalaatikoissa, mikä tarkoittaa, että voit luoda uusia tiedostoja, käyttää moduuleja (mukaan lukien NPM-paketteja) ja olla vuorovaikutuksessa staattisen omaisuuden kanssa. On myös mahdollisuus muokata mallikohtaisia konfiguraatiotiedostoja.
Voit jopa rakentaa omia malleja ainutlaatuista käyttötapausta varten, tiedostorakenteen ja riippuvuuksien kanssa, aivan kuten IDE:ssä. Koska työkalu on linkitetty Githubiin, voit nopeasti luoda sitoumuksia ja avata PR:ita. Voit ottaa sovelluksesi käyttöön ZEIT:ssä tai Netlifyssa heti.
CodeSandbox Team Pro
CodeSandbox, hollantilainen yritys, jonka avulla kehittäjät voivat rakentaa selainpohjaisen verkkosovelluskehityshiekkalaatikon, on virallisesti julkaissut yhteistyöalustan, jonka avulla tiimit voivat työskennellä koodin parissa pilvessä. Uusi tuote, Team Pro, on kooditon ratkaisu, joka on rakennettu kokonaisille tuotetiimeille, jotka vaihtelevat suunnittelijoista ja johtajista laadunvarmistustiimeihin (QA) ja muillekin.
Projektit tarjotaan käyttäjäystävällisessä käyttöliittymässä kaikille, jotka haluavat tehdä tai hyväksyä muutoksia verkkosovellukseen, välttäen vaihtoehtoisia menetelmiä, kuten muistiinpanojen ja suositusten lähettämistä kehittäjille muutosten suorittamiseksi, niiden palauttamista keskustelua varten ja prosessin toistamista.
Avainominaisuudet
- Verkkopohjainen koodieditori ja prototyyppityökalu.
- Paikallista käyttöä varten hiekkalaatikko voidaan ladata helposti zip-tiedostona.
- Ohjelmointi tehdään hiekkalaatikoissa, jotka voidaan helposti jakaa työtovereiden kanssa.
edut
- Parempi käyttökokemus ja parempi editorin hallinta.
- Live-esikatseluominaisuutta voidaan muokata ja tarkastella erillisessä ikkunassa.
- Koodi muotoillaan automaattisesti ja sisältää CLI:n (codesandbox-cli)
- Tuki edistyneille npm-moduuleille.
- Mukavia virheilmoituksia suositusten kera.
- Se parantaa virheenkorjauskokemusta tarjoamalla paremman päätelaitteen, testikatseluohjelman ja ongelmankatseluohjelman.
Haitat
- Loppukuluttaja on alttiina monille personoinneille.
- Tiedostojen vetäminen ja pudottaminen paikalliselta tietokoneelta ei toimi oikein.
- CodeSandboxissa on noudatettava tiettyä kansiorakennetta.
- Yksityisen hiekkalaatikon toiminnot ovat vain asiakkaiden käytettävissä.
PinoBlitz
StackBlitz on Visual Studio Code -pohjainen online-IDE verkkosovelluksille. Alusta on yhtä herkkä ja mukautuva kuin työpöytäversio. StackBlitz on online-IDE, joka on valmiiksi ladattu Kulmikas ja reagoi kehitystyökalut.
Thinkster.io rakensi upean projektin tehdäkseen Angular- tai React-projektin aloittamisesta mahdollisimman yksinkertaista ilman, että sinun tarvitsee huolehtia riippuvuusasennuksesta tai rakennusasetuksista. StackBlitz tarjoaa paljon uskomattomia ja ainutlaatuisia ominaisuuksia, joita millään muulla online-koodieditorilla ei ole tällä hetkellä. Tästä syystä kannattaa tutkia StackBlitziä tarkemmin ja selvittää, mitä tällä online-IDE:llä on tarjota.
Stackblitz on erittäin verrattavissa koko IDE:hen, varsinkin jos et voi sanoa hyvästit VS-koodille, koska työkalu perustuu siihen. Paketissa on useita ominaisuuksia, joiden avulla voit aloittaa ja jatkaa täyden pinon sovelluksen luomista.
Ohjelman tarjoaa kehittäjien keskuudessa hyvin tunnettu Visual Studio. Offline-muokkaus on projektin erottuva ominaisuus. Tämän mahdollistamiseksi Stackblitz-tiimi loi selaimen sisäisen verkkopalvelimen. Kun kirjoitat, se asentaa automaattisesti riippuvuuksia, kokoaa, niputtaa ja lataa uudelleen.
Premium-versio
Cadet, Astronaut ja Commander ovat saatavilla ilmaiseksi, 8 dollaria kuukaudessa ja 29 dollaria kuukaudessa. Astronaut and Commander sisältää joukon ominaisuuksia, kuten rajoittamattoman määrän yksityisiä projekteja, rajoittamattomia tiedostolatauksia, kutsun ydintiimin löysälle kanavalle ja niin edelleen. Lisätietoja saat viralliselta laskutustaululta.
Avainominaisuudet
- NPM-pakettien lisääminen projektiisi.
- Uuden selaimen sisäisen kehityspalvelimen ansiosta voit muokata offline-tilassa.
- Isännöidyn sovelluksen URL-osoite, jonka avulla voimme käyttää (ja jakaa) live-sovellustamme milloin tahansa.
- Muita merkittäviä Visual Studio Coden ominaisuuksia ovat Intellisense, Project Search (Cmd/Ctrl+P), Go to Definition ja muut.
edut
- Firebasen käyttöönottoominaisuudet.
- Editori on todella helppokäyttöinen ja erittäin nopea.
- Käyttäjillä on pääsy paketti.json-, index.html- ja index.js-tiedostoihin.
- Jaettava lähdekoodi, joka voidaan myös upottaa.
- Live-esikatselu suurella osalla sivua ja mahdollisuus avata tarvittaessa toiselle sivulle.
- Offline-tilassa, muokkaaminen
- Älykkäät täydennykset ja parannettu Intellisense.
- Stackblitzin ydin on avoimen lähdekoodin.
Haitat
- Sinulla ei ole vaikutusvaltaa rakennukseen tai kehittäjäpalvelimeen, koska niitä hallinnoi create-react-app -komento.
- Reactissa tulee noudattaa peruskansiorakennetta.
- Koodia ei voi muotoilla automaattisesti, vaikka se on mahdollista tehdä manuaalisesti.
Yhteenveto
Nykyään yllä näkemiemme kaltaisia koodausleikkipaikkoja voidaan käyttää minkä tahansa verkkoprojektin rakentamiseen. Sinun ei tarvitse asentaa hankalia IDE:itä tietokoneellesi, kun voit rakentaa, jäljittää, testata ja ottaa käyttöön suoraan verkkoselaimestasi.
Mielestäni StackBlitz olisi paras niistä, koska se on verkkopohjainen IDE, joka mahdollistaa JavaScriptin, Angularin ja muut kehitysprojektit heti laatikosta ilman, että tarvitsee asentaa paikallisia kehitysympäristöjä, kuten Node.js, npm, tai Kulmikas. Se tarjoaa saman kokemuksen kuin Visual Studio Coden käyttäminen paikallisesti. Todellisuudessa, koska StackBlitziä ohjaa Visual Studio Code, se tuntuu yhtä nopealta ja monipuoliselta kuin työpöytäversio.
Mikä CodePen, CodeSandbox ja StackBlitz on sinun työkalusi? Kerro meille kommenteissa.
Abbatyya
Kiitos tästä upeasta artikkelista, kun näin stackblitz.comin, tiedän, että tämä on mitä haluan.