Strādājot pie sarežģīta projekta, neatkarīgi no tā, vai esat pieredzējis programmētājs vai pirmkursnieks, jūs praktiski saskarsieties ar problēmām. Sadalot projektu daudzos moduļos, rodas problēmas, kas apgrūtina kļūdu izsekošanu un risinājumu atrašanu. Citos gadījumos atsevišķu gadījumu atkļūdošana var būt sarežģīta, jo neesat atradis pareizo risinājumu problēmai, pie kuras strādājat.
Reizēm tas parādās arī kā koda daļa, kas tajā laikā var izskatīties sarežģīti. JavaScript ir viena no tīmekļa valodām, kuru ir ļoti vienkārši apgūt. Vienkārši palaidiet darbvirsmas pārlūkprogrammu un dodieties uz Izstrādātāja rīkiem (parasti F12), un esat pabeidzis! Pēc tam varat eksperimentēt ar JS, neinstalējot vai palaistot nekādu sarežģītu programmatūru.
Lai sāktu, viss, kas jums nepieciešams, ir pārlūkprogramma. Ir brīnišķīgi, ja visu šo vienkāršību var izmantot uzreiz, taču ir gadījumi, kad nepieciešams vairāk. Piemēram, pieņemsim, ka vēlaties eksperimentēt ar jaunu Web API, ko nesen atklājāt, bet nevēlaties sākt jaunu projektu.
Šajā ziņojumā mēs salīdzināsim un salīdzināsim trīs populārākos JS rotaļu laukumus — CodePen, CodeSandbox un StackBlitz. Sāksim!
CodePen
Frontend tīmekļa izstrādes rīki vienmēr attīstās, un teksta redaktori ir liela jaunāko tehnoloģiju sastāvdaļa, kas padara izstrādātāja dzīvi vienkāršāku. Neatkarīgi no atsevišķiem teksta redaktoriem, piemēram, Atom vai Notepad ++, pēdējos gados ir pieaudzis tādu pārlūkprogrammu redaktoru skaits, kuriem nav nepieciešama programmu instalēšana un kuri veicina lielāku sadarbību.
CodePen ir “tiešsaistes kopiena lietotāja izveidoto HTML, CSS un JavaScript koda fragmentu testēšanai un prezentēšanai”, kas piedāvā fantastiskas iespējas iemācīties labāk rakstīt priekšgala tīmekļa lapas.
CodePen piedāvā divus “režīmus”. Pirmā un visbiežāk izmantotā ir pildspalva. Tas ir tik vienkārši, kā noklikšķināt uz pogas un nokļūt tieši uz redaktoru. No turienes varat piekļūt priekšskatījuma panelim, kā arī pamata HTML, CSS un JS rediģēšanas logiem.
Nav “failu sistēmas”, “IntelliSense” vai nekā cita — tikai vienkārša sintakses izcelšana un ātras komandas, piemēram, izskaistināšana. Opciju cilnē varat izvēlēties no ierobežota priekšapstrādātāju klāsta visām trim valodām (piemēram, TypeScript JS) vai pievienot savienojumus ar ārējiem avotiem.
Ja jums kaut kas jādara tikai bez maksas, pietiks ar kādu no redaktoriem. Es ieteiktu CodePen jebko, kam nav nepieciešams daudz iestatīšanas vai bibliotēku — vienkārši HTML, CSS un JS ar papildu priekšprocesoriem. Ja vēlaties izmantot rotaļu laukumu, lai uzlabotu savu klātbūtni sociālajos medijos vai izstrādātu personīgo portfolio, CodePen ir labāks risinājums.
Premium versija
Jums ir vēl dažas alternatīvas, no kurām izvēlēties CodePen. Ja maksājat katru gadu, jūs varat saņemt vienu no trim prēmiju plāniem par USD 12, USD 19 vai USD 39 katru mēnesi. Jebkurā no trim līmeņiem varat izveidot bezgalīgi daudz privātu pildspalvu, ziņu un kolekciju.
Jūs saņemsiet arī profesionāļa emblēmu (sociālais stimuls), piekļuvi tiešraides sadarbības režīmam, bez reklāmām un daudz ko citu. Ir arī noteiktas komandai raksturīgas stratēģijas un citas starplīmeņu atšķirības. Lai iegūtu papildinformāciju, skatiet viņu oficiālo norēķinu paneli.
Galvenās iezīmes
Papildus HTML, CSS un JavaScript izveidei CodePen ir vēl dažas lietas, kas to atšķir.
- Ir iespējama jūsu koda apskate reāllaikā. Tam nav nepieciešama kompilācija.
- Eksperimentēšana ļauj apgūt jaunas lietas.
- Izveidojiet nelielas pārbaudes lietas, lai meklētu un risinātu problēmas.
- Parādiet savus brīnišķīgos darbus.
- Izveidojiet un uzglabājiet pildspalvas vēlākai lietošanai.
- Izmēģiniet citu izstrādātāju kodu un skatiet to darbībā.
Priekšrocības
- Lai sāktu, nav jāmaksā.
- Iebūvēti mācību resursi.
- Sadarbojieties ar citiem un salīdziniet projektus, lai redzētu, kur viņi varētu doties nākotnē.
- Lietotāja saskarne ir vienkārši lietojama un vienkārša.
Trūkumi
- Kodu bibliotēka ir maza, automātiskā koda pabeigšana ir nepietiekama. Tas ir piemērots tikai vienas lapas projektiem un nevar tikt galā ar neko lielāku.
- Programmā CodePen varat izveidot privātas pildspalvas, taču jums būs jājaunina uz Pro dalību (9 ASV dolāri mēnesī).
koda smilškaste
CodeSandbox ir tīmekļa koda redaktors. Tas automatizē pārsūtīšanu, iepakošanu un atkarības pārvaldību, ļaujot jums izveidot jaunu projektu ar vienu klikšķi. Kad esat izveidojis kaut ko aizraujošu, varat to kopīgot ar citiem, vienkārši kopīgojot vietni.
Redaktors ir saderīgs ar jebkuriem JavaScript projektiem, lai gan tajā ir iekļauti noteikti React specifiski līdzekļi, piemēram, iespēja saglabāt projektu veidnē izveidot un reaģēt.
Jebkurš projekts, ko veidojat CodeSandbox, sākas ar veidni. Tas var attiekties vai nu uz noteiktu bibliotēku, ietvaru vai izpildlaiku (tostarp Node.js), vai izmantot vienkārši standarta tīmekļa tehnoloģijas. Pēc veidnes atlasīšanas jūs tiekat nosūtīts uz redaktoru, kur atradīsit visus nepieciešamos failus un jau ir atvērts priekšskatījuma logs.
Jums ir piekļuve "failu sistēmai" visās smilšu kastēs, kas nozīmē, ka varat izveidot jaunus failus, izmantot moduļus (tostarp NPM pakotnes) un mijiedarboties ar statiskiem līdzekļiem. Ir arī iespēja modificēt veidnei raksturīgos konfigurācijas failus.
Jūs pat varat izveidot savas veidnes savam unikālajam lietošanas gadījumam ar failu struktūru un atkarībām, līdzīgi kā IDE. Tā kā rīks ir saistīts ar Github, varat ātri ģenerēt saistības un atvērt PR. Varat nekavējoties izvietot savu lietojumprogrammu pakalpojumā ZEIT vai Netlify.
CodeSandbox Team Pro
CodeSandbox, Nīderlandes uzņēmums, kas ļauj izstrādātājiem izveidot uz pārlūkprogrammu balstītu tīmekļa lietotņu izstrādes smilškaste, ir oficiāli izlaidusi sadarbības platformu, kas ļauj komandām strādāt ar kodu mākonī. Jaunais produkts Team Pro ir bezkoda risinājums, kas paredzēts pilnām produktu komandām, sākot no dizaineriem un vadītājiem līdz kvalitātes nodrošināšanas (QA) komandām un citām.
Projekti tiek nodrošināti lietotājam draudzīgā saskarnē ikvienam, kurš vēlas veikt vai pieņemt izmaiņas tīmekļa lietojumprogrammā, izvairoties no alternatīvām metodēm, piemēram, piezīmju un ieteikumu nosūtīšanas izstrādātājiem veikt izmaiņas, nosūtot tos atpakaļ apspriešanai un atkārtojot procesu.
Galvenās iezīmes
- Tīmekļa koda redaktors un prototipa rīks.
- Vietējai lietošanai smilšu kasti var viegli lejupielādēt zip failā.
- Programmēšana tiek darīts smilšu kastēs, kuras var viegli kopīgot ar kolēģiem.
Priekšrocības
- Uzlabota lietotāja pieredze un lielāka kontrole pār redaktoru.
- Tiešraides priekšskatījuma funkciju var mainīt un skatīt atsevišķā logā.
- Kods tiek formatēts automātiski un ietver CLI (codesandbox-cli)
- Uzlabotu npm moduļu atbalsts.
- Jauki kļūdu ziņojumi ar ieteikumiem.
- Tas uzlabo atkļūdošanas pieredzi, nodrošinot labāku termināli, testa skatītāju un problēmu skatītāju.
Trūkumi
- Gala patērētājs ir pakļauts daudzām personalizācijām.
- Failu vilkšana un nomešana no lokālā datora nedarbojas pareizi.
- Programmā CodeSandbox ir jāievēro noteikta mapju struktūra.
- Privātās smilšu kastes funkcionalitāte ir pieejama tikai apmeklētājiem.
StackBlitz
StackBlitz ir Visual Studio koda darbināms tiešsaistes IDE tīmekļa lietojumprogrammām. Platforma ir tikpat atsaucīga un pielāgojama kā darbvirsmas versija. StackBlitz ir tiešsaistes IDE, kas ir iepriekš ielādēta Leņķiskais un reaģējošs izstrādes rīki.
Thinkster.io izveidoja šo fantastisko projektu, lai pēc iespējas vienkāršāk sāktu darbu ar Angular vai React projektu, neuztraucoties par atkarības instalēšanu vai izveides iestatījumiem. StackBlitz piedāvā daudzas pārsteidzošas un unikālas funkcijas, kuras šobrīd nav nevienam citam tiešsaistes koda redaktoram. Tā rezultātā ir vērts sīkāk izpētīt StackBlitz un atklāt, ko šis tiešsaistes IDE var piedāvāt.
Stackblitz ir ļoti salīdzināms ar visu IDE, it īpaši, ja nevarat atvadīties no VS koda, jo rīks ir balstīts uz to. Pakotnei ir dažādas funkcijas, kas ļauj sākt un turpināt pilnas steka lietojumprogrammas izveidi.
Programmu nodrošina Visual Studio, kas ir labi pazīstama izstrādātāju vidū. Rediģēšana bezsaistē ir projekta izcilā funkcija. Lai tas būtu iespējams, Stackblitz komanda izveidoja pārlūkprogrammas tīmekļa serveri. Rakstīšanas laikā tas automātiski instalē atkarības, apkopo, komplektē un veic atkārtotu ielādi.
Premium versija
Cadet, Astronaut un Commander ir pieejami bez maksas, attiecīgi USD 8 mēnesī un USD 29 mēnesī. Astronaut and Commander ietver vairākas funkcijas, piemēram, neierobežotu privāto projektu skaitu, neierobežotu failu augšupielādi, uzaicinājumu uz galvenās komandas atslābināto kanālu un tā tālāk. Papildinformāciju skatiet oficiālajā norēķinu panelī.
Galvenās iezīmes
- NPM pakotņu pievienošana jūsu projektam.
- Pateicoties jaunajam pārlūkprogrammas izstrādātāja serverim, varat rediģēt bezsaistē.
- Mitinātās lietotnes URL, kas ļauj mums jebkurā laikā piekļūt (un kopīgot) mūsu tiešraides lietotni.
- Citas ievērojamas Visual Studio Code funkcijas ietver Intellisense, Project Search (Cmd/Ctrl+P), Go to Definition un citas.
Priekšrocības
- Firebase izvietošanas iespējas.
- Redaktors ir patiešām viegli lietojams un ļoti ātrs.
- Lietotājiem ir piekļuve failiem package.json, index.html un index.js.
- Kopīgojams pirmkods, ko var arī iegult.
- Tiešsaistes priekšskatījums lielā lapas sadaļā ar iespēju vajadzības gadījumā atvērt citā lapā.
- Bezsaistē, rediģēšana
- Gudras pabeigšanas un uzlabota Intellisense.
- Stackblitz kodols ir atvērtā koda.
Trūkumi
- Jums nav ietekmes uz ēku vai izstrādātāja serveri, jo tos pārvalda komanda Create-React-app.
- Programmā React ir jāievēro pamata mapju struktūra.
- Automātiski formatēt kodu nav iespējams, lai gan to ir iespējams izdarīt manuāli.
Secinājumi
Mūsdienās kodēšanas rotaļu laukumu, piemēram, iepriekš redzēto, var izmantot, lai pilnībā izveidotu jebkuru tīmekļa projektu. Nav nepieciešams datorā instalēt apgrūtinošus IDE, ja varat izveidot, atkļūdot, pārbaudīt un izvietot tieši no tīmekļa pārlūkprogrammas.
Manuprāt, StackBlitz būtu vislabākais no tiem, jo tas ir tīmekļa IDE, kas nodrošina JavaScript, Angular un citus izstrādes projektus jau no kastes, bez nepieciešamības instalēt vietējās izstrādes vides, piemēram, Node.js, npm, vai leņķiskais. Tas nodrošina tādu pašu pieredzi kā Visual Studio koda izmantošana lokāli. Patiesībā, tā kā StackBlitz darbina Visual Studio Code, tas šķiet tikpat ātrs un daudzpusīgs kā darbvirsmas versija.
Kurš no CodePen, CodeSandbox un StackBlitz ir jūsu iecienītākais rīks? Paziņojiet mums komentāros.
Abatja
Paldies par šo lielisko rakstu, kad es ieraudzīju stackblitz.com, es zinu, ka tas ir tas, ko es vēlos.