Dirbdami su sudėtingu projektu, nesvarbu, ar esate patyręs programuotojas, ar pirmakursis, greičiausiai susidursite su problemomis. Padalijus projektą į daugybę modulių, iškyla problemų, todėl bus sunkiau aptikti klaidas ir rasti sprendimus. Kitomis aplinkybėmis atskirų atvejų derinimas gali būti sudėtingas, nes neradote tinkamo problemos, su kuria dirbote, sprendimo.
Jis taip pat kartais pasirodo kaip kodo dalis, kuri tuo metu gali atrodyti sudėtinga. JavaScript yra viena iš žiniatinklio kalbų, kurią labai paprasta išmokti. Tiesiog paleiskite darbalaukio naršyklę ir eikite į Kūrėjo įrankius (dažniausiai F12), ir viskas! Tada galite eksperimentuoti su JS neįdiegę ar paleisti jokios sudėtingos programinės įrangos.
Norėdami pradėti, tereikia naršyklės. Nuostabu, kad visas šis paprastumas iš karto išimamas iš dėžutės, tačiau kartais reikia daugiau. Pavyzdžiui, tarkime, kad norite eksperimentuoti su nauja žiniatinklio API, kurią neseniai atradote, bet nenorite pradėti naujo projekto.
Šiame įraše palyginsime ir palyginsime tris populiariausias JS žaidimų aikšteles „CodePen“, „CodeSandbox“ ir „StackBlitz“. Pradėkime!
„CodePen“
Frontend žiniatinklio kūrimo įrankiai nuolat tobulinami, o teksto rengyklės yra svarbi naujausių technologijų sudedamoji dalis, palengvinančių kūrėjo gyvenimą. Be atskirų teksto redaktorių, tokių kaip „Atom“ ar „Notepad ++“, pastaraisiais metais labai daugėjo naršyklės redaktorių, kuriems nereikia įdiegti programos ir kurie skatina glaudesnį bendradarbiavimą.
„CodePen“ yra „internetinė bendruomenė, skirta išbandyti ir pateikti vartotojo sukurtus HTML, CSS ir JavaScript kodo fragmentus“, suteikianti puikias galimybes išmokti geriau rašyti priekinius tinklalapius.
„CodePen“ suteikia jums du „režimus“. Pirmasis ir dažniausiai naudojamas rašiklis. Tai taip paprasta, kaip spustelėti mygtuką ir būti tiesiai į redaktorių. Iš ten galite pasiekti peržiūros skydelį, taip pat pagrindinius HTML, CSS ir JS redagavimo langus.
Nėra „failų sistemos“, „IntelliSense“ ar dar ko nors – tik paprastas sintaksės paryškinimas ir greitos komandos, pvz., „prettify“. Parinkčių skirtuke galite pasirinkti iš riboto visų trijų kalbų išankstinių procesorių diapazono (pvz., „TypeScript“, skirto JS) arba pridėti ryšius su išoriniais šaltiniais.
Jei jums reikia ką nors padaryti nemokamai, užteks bet kurio iš redaktorių. „CodePen“ siūlyčiau viskam, kam nereikia daug sąrankos ar bibliotekų – tiesiog HTML, CSS ir JS su pasirenkamais išankstiniais procesoriais viršuje. Jei norite panaudoti žaidimų aikštelę, kad pagerintumėte savo buvimą socialinėje žiniasklaidoje arba sukurtumėte asmeninį portfelį, CodePen yra geresnis pasirinkimas.
Aukščiausios kokybės versija
„CodePen“ galite pasirinkti dar keletą alternatyvų. Jei mokate kasmet, kiekvieną mėnesį galite gauti vieną iš trijų priemokų planų už 12 USD, 19 USD arba 39 USD. Galite sukurti begalinį skaičių privačių rašiklių, įrašų ir kolekcijų bet kurioje iš trijų pakopų.
Taip pat gausite profesionalo ženklelį (socialinį postūmį), prieigą prie tiesioginio bendradarbiavimo režimo, jokios reklamos ir dar daugiau. Taip pat yra tam tikrų komandų strategijos ir kitų skirtingų pakopų skirtumų. Norėdami gauti daugiau informacijos, patikrinkite jų oficialią atsiskaitymo lentą.
Pagrindiniai bruožai
Be HTML, CSS ir JavaScript kūrimo „CodePen“, yra dar keletas dalykų, kurie jį išskiria.
- Galite peržiūrėti savo kodą realiuoju laiku. Tai nereikalauja kompiliacijos.
- Eksperimentuodami galite išmokti naujų dalykų.
- Sukurkite mažus bandomuosius atvejus, kad galėtumėte ieškoti ir spręsti problemas.
- Parodykite savo nuostabius darbus.
- Sukurkite ir saugokite rašiklius vėlesniam naudojimui.
- Išbandykite kitų kūrėjų kodą ir pažiūrėkite, kaip jis veikia.
Privalumai
- Norėdami pradėti, nėra jokių išlaidų.
- Integruoti mokymosi ištekliai.
- Bendradarbiaukite su kitais ir palyginkite projektus, kad sužinotumėte, kur jie gali nuveikti ateityje.
- UI paprasta naudoti ir nesudėtinga.
Trūkumai
- Kodų biblioteka maža, automatinio kodo užbaigimo nepakanka. Tai tiesiog tinka vieno puslapio projektams ir negali susidoroti su niekuo didesniu.
- „CodePen“ galite sukurti privačius rašiklius, tačiau turėsite atnaujinti „Pro“ narystę (9 USD per mėnesį).
„CodeSandbox“
CodeSandbox yra žiniatinklio kodo rengyklė. Jis automatizuoja transpiravimą, pakavimą ir priklausomybės valdymą, leidžiantį vienu paspaudimu sukurti naują projektą. Sukūrę ką nors įdomaus, galite tuo pasidalinti su kitais tiesiog bendrindami svetainę.
Redagavimo priemonė yra suderinama su bet kokiais „JavaScript“ projektais, nors jame yra tam tikrų „React“ specifinių funkcijų, pvz., galimybė išsaugoti projektą „kurti-reaguoti-programos“ šablone.
Bet koks projektas, kurį kuriate „CodeSandbox“, prasideda šablonu. Jis gali būti susijęs su konkrečia biblioteka, sistema arba vykdymo laiku (įskaitant Node.js) arba naudoti tiesiog standartines žiniatinklio technologijas. Pasirinkę šabloną, būsite nukreipti į redaktorių, kur rasite visus reikiamus failus ir jau atidarytas peržiūros langas.
Visose smėlio dėžėse turite prieigą prie „failų sistemos“, o tai reiškia, kad galite kurti naujus failus, naudoti modulius (įskaitant NPM paketus) ir sąveikauti su statiniais ištekliais. Taip pat yra galimybė keisti konkrečių šablonų konfigūracijos failus.
Jūs netgi galite sukurti savo šablonus savo unikaliam naudojimo atvejui su failų struktūra ir priklausomybėmis, panašiai kaip IDE. Kadangi įrankis yra susietas su „Github“, galite greitai generuoti įsipareigojimus ir atidaryti PR. Galite iš karto įdiegti programą į ZEIT arba Netlify.
CodeSandbox Team Pro
„CodeSandbox“, olandų verslas, leidžiantis kūrėjams sukurti naršyklės pagrindu sukurtą žiniatinklio programų kūrimo smėlio dėžę, oficialiai išleido bendradarbiavimo platformą, leidžiančią komandoms dirbti su kodu debesyje. Naujasis produktas „Team Pro“ yra be kodo sprendimas, sukurtas visoms produktų komandoms, pradedant dizaineriais ir vadovais, baigiant kokybės užtikrinimo (QA) komandomis ir ne tik.
Projektai pateikiami patogioje sąsajoje, skirta visiems, norintiems atlikti ar priimti pakeitimus žiniatinklio programoje, vengiant alternatyvių metodų, tokių kaip pastabų ir rekomendacijų siuntimas kūrėjams, kad jie atliktų pakeitimus, grąžinti juos diskusijoms ir kartoti procesą.
Pagrindiniai bruožai
- Internetinis kodo rengyklė ir prototipo įrankis.
- Vietiniam naudojimui smėlio dėžę galima lengvai atsisiųsti ZIP faile.
- Programavimas atliekama smėlio dėžėse, kuriomis galima lengvai dalytis su bendradarbiais.
Privalumai
- Patobulinta vartotojo patirtis ir didesnė redaktoriaus kontrolė.
- Tiesioginės peržiūros funkciją galima keisti ir peržiūrėti atskirame lange.
- Kodas formatuojamas automatiškai ir apima CLI (codesandbox-cli)
- Išplėstinių npm modulių palaikymas.
- Puikūs klaidų pranešimai su rekomendacijomis.
- Tai pagerina derinimo patirtį suteikdama geresnį terminalą, bandomąją peržiūros priemonę ir problemų peržiūros priemonę.
Trūkumai
- Galutinis vartotojas susiduria su daugybe personalizavimo galimybių.
- Failų vilkimas iš vietinio kompiuterio neveikia tinkamai.
- „CodeSandbox“ turi būti laikomasi tam tikros aplanko struktūros.
- Privačios smėlio dėžės funkcionalumas pasiekiamas tik lankytojams.
„StackBlitz“
„StackBlitz“ yra „Visual Studio“ kodu pagrįsta internetinė IDE, skirta žiniatinklio programoms. Platforma yra tokia pat jautri ir pritaikoma kaip ir darbalaukio versija. „StackBlitz“ yra internetinė IDE, kuri yra iš anksto įkelta Kampinis ir reaguoti kūrimo įrankiai.
„Thinkster.io“ sukūrė šį fantastišką projektą, kad būtų kuo paprasčiau pradėti su „Angular“ arba „React“ projektu, nesijaudinant dėl priklausomybės diegimo ar kūrimo nustatymų. „StackBlitz“ suteikia daug nuostabių ir unikalių funkcijų, kurių šiuo metu neturi joks kitas internetinis kodo rengyklė. Todėl verta toliau tyrinėti „StackBlitz“ ir sužinoti, ką gali pasiūlyti ši internetinė IDE.
„Stackblitz“ yra labai panašus į visą IDE, ypač jei negalite atsisveikinti su VS kodu, nes įrankis yra jo pagrindu. Paketas turi daugybę funkcijų, leidžiančių pradėti ir tęsti viso paketo programos kūrimą.
Programą palaiko „Visual Studio“, kuri yra gerai žinoma tarp kūrėjų. Redagavimas neprisijungus yra išskirtinė projekto funkcija. Kad tai būtų įmanoma, „Stackblitz“ komanda sukūrė naršyklėje esantį žiniatinklio serverį. Kai įvesite tekstą, jis automatiškai įdiegia priklausomybes, kompiliuoja, sugrupuoja ir įkelia iš naujo.
Aukščiausios kokybės versija
„Cadet“, „Astronaut“ ir „Commander“ yra prieinami nemokamai, atitinkamai 8 USD per mėnesį ir 29 USD per mėnesį. „Astronaut and Commander“ apima daugybę funkcijų, tokių kaip neribotas privačių projektų skaičius, neribotas failų įkėlimas, kvietimas į pagrindinės komandos laisvą kanalą ir pan. Norėdami gauti daugiau informacijos, žr. oficialią atsiskaitymo lentą.
Pagrindiniai bruožai
- NPM paketų pridėjimas prie projekto.
- Dėl naujojo naršyklėje esančio kūrėjo serverio galite redaguoti neprisijungę.
- Priglobtos programos URL, leidžiantis bet kada pasiekti (ir bendrinti) mūsų tiesioginę programą.
- Kitos svarbios „Visual Studio Code“ funkcijos yra „Intellisense“, „Project Search“ (Cmd/Ctrl+P), „Eiti į apibrėžimą“ ir kt.
Privalumai
- „Firebase“ diegimo galimybės.
- Redagavimo priemonė yra labai paprasta naudoti ir labai greita.
- Vartotojai turi prieigą prie package.json, index.html ir index.js.
- Bendrinamas šaltinio kodas, kurį taip pat galima įterpti.
- Tiesioginė peržiūra didelėje puslapio dalyje su galimybe, jei reikia, atidaryti kitame puslapyje.
- Redaguoti neprisijungus
- Sumanūs užbaigimai ir patobulinta „Intellisense“.
- „Stackblitz“ esmė yra atviro kodo.
Trūkumai
- Neturite įtakos pastatui ar kūrėjo serveriui, nes juos valdo komanda kurti-reaguoti-programą.
- React turėtų būti laikomasi pagrindinės aplankų struktūros.
- Automatiškai kodo formatuoti neįmanoma, nors galima tai padaryti rankiniu būdu.
Išvada
Šiais laikais kodavimo žaidimų aikštelė, tokia, kokią matėme aukščiau, gali būti naudojama bet kokiam žiniatinklio projektui sukurti. Nereikia kompiuteryje diegti sudėtingų IDE, kai galite kurti, derinti, išbandyti ir diegti tiesiai iš savo žiniatinklio naršyklės.
Mano nuomone, „StackBlitz“ būtų geriausias tarp jų, nes tai žiniatinklio IDE, leidžianti „JavaScript“, „Angular“ ir kitus kūrimo projektus iš karto iš karto, nereikalaujant diegti jokių vietinių kūrimo aplinkų, tokių kaip Node.js, npm, arba kampinis. Ji suteikia tokią pat patirtį kaip ir naudojant Visual Studio kodą vietoje. Iš tikrųjų, kadangi „StackBlitz“ valdo „Visual Studio Code“, jis atrodo toks pat greitas ir universalus, kaip ir darbalaukio versija.
Kuris iš „CodePen“, „CodeSandbox“ ir „StackBlitz“ yra jūsų įrankis? Praneškite mums komentaruose.
Abatija
Dėkoju už šį puikų straipsnį, kai pamačiau stackblitz.com, žinau, kad tai yra tai, ko noriu.