Pri práci na zložitom projekte, či už ste skúsený programátor alebo prvák, prakticky pravdepodobne narazíte na problémy. Keď rozdelíte projekt do mnohých modulov, vyskytnú sa problémy, ktoré sťažia vystopovanie chýb a nájdenie riešení. Za iných okolností môže byť ladenie jednotlivých inštancií náročné, pretože ste nenašli správne riešenie problému, na ktorom ste pracovali.
Príležitostne sa vyskytuje aj ako kúsok kódu, ktorý môže v danom čase vyzerať zložito. JavaScript je jeden z webových jazykov, ktorý sa dá veľmi ľahko naučiť. Jednoducho spustite prehliadač na počítači a prejdite na Nástroje pre vývojárov (zvyčajne F12) a máte hotovo! Potom môžete experimentovať s JS bez toho, aby ste museli inštalovať alebo spúšťať akýkoľvek komplikovaný softvér.
Ak chcete začať, všetko, čo potrebujete, je prehliadač. Je úžasné mať všetku túto jednoduchosť hneď po vybalení, ale sú príležitosti, keď potrebujete viac. Predpokladajme napríklad, že chcete experimentovať s novým webovým rozhraním API, ktoré ste nedávno objavili, ale nechcete spustiť nový projekt.
V tomto príspevku porovnáme a porovnáme tri najpopulárnejšie ihriská JS, CodePen, CodeSandbox a StackBlitz. Začnime!
CodePen
Frontendové nástroje na vývoj webových aplikácií sa neustále vyvíjajú a textové editory sú veľkou súčasťou najnovších technológií, ktoré uľahčujú život vývojárov. Okrem samostatných textových editorov, ako je Atom alebo Notepad ++, došlo v posledných rokoch k explózii editorov založených na prehliadači, ktoré nevyžadujú inštaláciu programu a podporujú väčšiu spoluprácu.
CodePen je „online komunita na testovanie a prezentáciu útržkov kódu HTML, CSS a JavaScript vytvorených používateľmi“, ktorá ponúka fantastické príležitosti naučiť sa, ako lepšie písať webové stránky.
CodePen vám ponúka dva „režimy“. Prvým a najčastejšie používaným je pero. Je to také jednoduché ako kliknutie na tlačidlo a presun priamo do editora. Odtiaľ máte prístup k panelu náhľadu, ako aj k základným oknám úprav HTML, CSS a JS.
Neexistuje žiadny „systém súborov“, „IntelliSense“ ani nič iné – iba jednoduché zvýrazňovanie syntaxe a rýchle príkazy ako prettify. Na karte možností si môžete vybrať z obmedzeného rozsahu preprocesorov pre všetky tri jazyky (ako je TypeScript pre JS) alebo pridať pripojenia k externým zdrojom.
Ak potrebujete urobiť čokoľvek zadarmo, postačí vám ktorýkoľvek z editorov. Navrhoval by som CodePen pre čokoľvek, čo nevyžaduje veľa nastavení alebo knižníc – jednoducho HTML, CSS a JS s voliteľnými predprocesormi navrchu. Ak chcete využiť ihrisko na zlepšenie svojej prítomnosti na sociálnych sieťach alebo na rozvoj osobného portfólia, CodePen je lepšou voľbou.
Prvá verzia
Na CodePen máte na výber niekoľko ďalších alternatív. Ak platíte ročne, môžete získať jeden z troch prémiových plánov za 12, 19 alebo 39 dolárov každý mesiac. Môžete vytvoriť nekonečné množstvo súkromných pier, príspevkov a zbierok na ktorejkoľvek z troch úrovní.
Získate tiež odznak Pro (sociálna podpora), prístup k režimu živej spolupráce, žiadnu reklamu a ďalšie. Existujú aj určité stratégie špecifické pre tím a ďalšie rozdiely medzi jednotlivými vrstvami. Ďalšie informácie nájdete na ich oficiálnej fakturačnej tabuli.
kľúčové vlastnosti
Okrem vytvárania HTML, CSS a JavaScriptu v CodePen existuje niekoľko ďalších vecí, ktoré ho odlišujú.
- Prezeranie kódu v reálnom čase je možné. Nevyžaduje kompiláciu.
- Experimentovanie vám umožňuje učiť sa nové veci.
- Vytvorte malé testovacie prípady na hľadanie a riešenie problémov.
- Ukážte svoje úžasné diela.
- Vytvorte a uložte perá na neskoršie použitie.
- Vyskúšajte kód iných vývojárov a uvidíte ho v akcii.
výhody
- Na začiatok nie sú žiadne náklady.
- Vstavané vzdelávacie zdroje.
- Spolupracujte s ostatnými a porovnávajte projekty, aby ste zistili, kam môžu ísť v budúcnosti.
- Používateľské rozhranie je jednoduché a priamočiare.
Nevýhody
- Knižnica kódov je malá, automatické dokončenie kódu je nedostatočné. Je dobrý len na jednostranové projekty a nič väčšie nezvládne.
- Na CodePen si môžete vytvárať súkromné perá, ale budete musieť prejsť na členstvo Pro (9 dolárov mesačne).
karanténa kódu
CodeSandbox je webový editor kódu. Automatizuje za vás transpiráciu, balenie a správu závislostí, čo vám umožní vytvoriť nový projekt jediným kliknutím. Keď vytvoríte niečo fascinujúce, môžete to zdieľať s ostatnými jednoduchým zdieľaním webovej stránky.
Editor je kompatibilný s akýmikoľvek projektmi JavaScript, aj keď obsahuje určité funkcie špecifické pre React, ako napríklad možnosť uložiť projekt do šablóny create-react-app.
Každý projekt, ktorý vytvoríte v CodeSandbox, začína šablónou. Môže sa vzťahovať buď na konkrétnu knižnicu, framework alebo runtime (vrátane Node.js), alebo jednoducho používať štandardné webové technológie. Po výbere šablóny sa dostanete do editora, kde nájdete všetky potrebné súbory a už otvorené okno s ukážkou.
Vo všetkých karanténách máte prístup k „systému súborov“, čo znamená, že môžete vytvárať nové súbory, využívať moduly (vrátane balíkov NPM) a pracovať so statickými aktívami. Existuje tiež možnosť upraviť konfiguračné súbory špecifické pre šablónu.
Môžete si dokonca vytvoriť svoje vlastné šablóny pre svoj jedinečný prípad použitia, doplnené o štruktúru súborov a závislosti, podobne ako v IDE. Pretože je nástroj prepojený s Githubom, môžete rýchlo generovať commity a otvárať PR. Svoju aplikáciu môžete ihneď nasadiť do ZEIT alebo Netlify.
CodeSandbox Team Pro
CodeSandbox, holandská spoločnosť, ktorá umožňuje vývojárom vytvárať sandbox na vývoj webových aplikácií založených na prehliadači, oficiálne vydala platformu na spoluprácu, ktorá umožňuje tímom pracovať na kóde v cloude. Nový produkt, Team Pro, je bezkódové riešenie vytvorené pre kompletné produktové tímy, od dizajnérov a manažérov cez tímy zabezpečenia kvality (QA) a ďalej.
Projekty sú poskytované v užívateľsky prívetivom rozhraní pre každého, kto chce vykonať alebo prijať zmeny vo webovej aplikácii, pričom sa vyhýbajú alternatívnym metódam, ako je posielanie poznámok a odporúčaní vývojárom na vykonanie zmien, ich odovzdávanie späť na diskusiu a opakovanie procesu.
kľúčové vlastnosti
- Webový editor kódu a prototypový nástroj.
- Pre lokálne použitie je možné karanténu jednoducho stiahnuť v súbore zip.
- Programovanie sa vykonáva v sandboxoch, ktoré možno ľahko zdieľať so spolupracovníkmi.
výhody
- Vylepšený používateľský zážitok a lepšia kontrola nad editorom.
- Funkciu živého náhľadu je možné upraviť a zobraziť v samostatnom okne.
- Kód je automaticky naformátovaný a obsahuje CLI (codesandbox-cli)
- Podpora pokročilých modulov npm.
- Pekné chybové hlásenia s odporúčaniami.
- Zlepšuje zážitok z ladenia tým, že poskytuje lepší terminál, prehliadač testov a prehliadač problémov.
Nevýhody
- Koncový spotrebiteľ je vystavený mnohým prispôsobeniam.
- Drag and drop súborov z lokálneho počítača nefunguje správne.
- V CodeSandbox musí byť dodržaná určitá štruktúra priečinkov.
- Funkcia súkromnej karantény je dostupná iba pre návštevníkov.
StackBlitz
StackBlitz je online IDE s kódom Visual Studio pre webové aplikácie. Platforma je rovnako citlivá a prispôsobivá ako verzia pre stolné počítače. StackBlitz je online IDE s predinštalovaným Angular a React vývojové nástroje.
Thinkster.io vytvoril tento fantastický projekt, aby bolo čo najjednoduchšie začať s projektom Angular alebo React bez toho, aby ste sa museli starať o inštaláciu závislostí alebo nastavenia zostavy. StackBlitz poskytuje množstvo úžasných a jedinečných funkcií, ktoré momentálne nemá žiadny iný online editor kódu. V dôsledku toho stojí za to ďalej skúmať StackBlitz a zistiť, čo toto online IDE ponúka.
Stackblitz je mimoriadne porovnateľný s kompletným IDE, najmä ak sa nemôžete rozlúčiť s kódom VS, pretože nástroj je na ňom založený. Balík má množstvo funkcií, ktoré vám umožňujú začať a pokračovať vo vytváraní kompletnej aplikácie.
Program poháňa Visual Studio, ktoré je medzi vývojármi dobre známe. Offline úpravy sú výnimočnou funkciou projektu. Aby to bolo možné, tím Stackblitz vytvoril webový server v prehliadači. Počas písania automaticky nainštaluje závislosti, kompiluje, zbalí a vykoná opätovné načítanie.
Prvá verzia
Cadet, Astronaut a Commander sú k dispozícii zadarmo, 8 $/mesiac a 29 $/mesiac. Astronaut and Commander obsahuje množstvo funkcií, ako sú neobmedzené súkromné projekty, neobmedzené nahrávanie súborov, pozvanie do základného tímového slabého kanála atď. Ďalšie informácie nájdete na oficiálnej fakturačnej tabuli.
kľúčové vlastnosti
- Pridanie balíkov NPM do vášho projektu.
- Vďaka novému vývojovému serveru v prehliadači môžete upravovať offline.
- Webová adresa hosťovanej aplikácie, ktorá nám umožňuje kedykoľvek pristupovať (a zdieľať) našu živú aplikáciu.
- Medzi ďalšie pozoruhodné funkcie Visual Studio Code patrí Intellisense, Project Search (Cmd/Ctrl+P), Prejsť na definíciu a ďalšie.
výhody
- Možnosti nasadenia Firebase.
- Editor je skutočne jednoduchý a extrémne rýchly.
- Používatelia majú prístup k súborom package.json, index.html a index.js.
- Zdrojový kód na zdieľanie, ktorý možno tiež vložiť.
- Živý náhľad na veľkej časti stránky s možnosťou otvorenia na inej stránke, ak je to potrebné.
- V režime offline, úpravy
- Inteligentné dokončovanie a vylepšený Intellisense.
- Jadrom Stackblitzu je open source.
Nevýhody
- Nemáte vplyv na budovu alebo vývojársky server, pretože ich spravuje príkaz create-react-app.
- V Reacte by sa mala dodržiavať základná štruktúra priečinkov.
- Nie je možné formátovať kód automaticky, aj keď je možné to urobiť manuálne.
záver
V súčasnosti možno kódovacie ihrisko, ako je to, ktoré sme videli vyššie, použiť na kompletnú konštrukciu akéhokoľvek webového projektu. Keď môžete vytvárať, ladiť, testovať a nasadzovať priamo z webového prehliadača, nie je potrebné inštalovať ťažkopádne IDE do vášho počítača.
Podľa môjho názoru by bol StackBlitz medzi nimi najlepší, pretože ide o webové IDE, ktoré umožňuje JavaScript, Angular a ďalšie vývojové projekty hneď po vybalení bez potreby inštalovať žiadne miestne vývojové prostredia ako Node.js, npm, alebo Angular. Poskytuje rovnaké skúsenosti ako pri lokálnom používaní Visual Studio Code. V skutočnosti, pretože StackBlitz je poháňaný kódom Visual Studio, je taký rýchly a všestranný ako verzia pre stolné počítače.
Ktorý z CodePen, CodeSandbox a StackBlitz je vaším obľúbeným nástrojom? Dajte nám vedieť v komentároch.
Abbatyya
Ďakujem za tento skvelý článok, keď som videl stackblitz.com, viem, že toto je to, čo chcem.