Při práci na složitém projektu, ať už jste zkušený programátor nebo nováček, prakticky pravděpodobně narazíte na problémy. Když svůj projekt rozdělíte do mnoha modulů, vyvstanou problémy, které znesnadní dohledání chyb a nalezení řešení. Za jiných okolností může být ladění jednotlivých instancí obtížné, protože jste nenašli správné řešení problému, na kterém jste pracovali.
Příležitostně se také vyskytuje jako kus kódu, který může v tu chvíli vypadat složitě. JavaScript je jedním z webových jazyků, který se velmi snadno učí. Jednoduše spusťte prohlížeč na ploše a přejděte na Nástroje pro vývojáře (obvykle F12) a máte hotovo! Poté můžete experimentovat s JS, aniž byste museli instalovat nebo spouštět jakýkoli složitý software.
Chcete-li začít, vše, co potřebujete, je prohlížeč. Je úžasné mít celou tuto jednoduchost hned po vybalení, ale jsou příležitosti, kdy potřebujete víc. Předpokládejme například, že chcete experimentovat s novým webovým rozhraním API, které jste nedávno objevili, ale nechcete zakládat nový projekt.
V tomto příspěvku porovnáme a porovnáme tři nejoblíbenější hřiště JS, CodePen, CodeSandbox a StackBlitz. Začněme!
CodePen
Frontendové nástroje pro vývoj webových aplikací se neustále vyvíjejí a textové editory jsou velkou součástí nejnovějších technologií, které usnadňují vývojářům život. Kromě samostatných textových editorů, jako je Atom nebo Notepad ++, došlo v posledních letech k explozi editorů založených na prohlížeči, které nevyžadují instalaci programu a podporují větší spolupráci.
CodePen je „online komunita pro testování a prezentaci uživatelsky vytvořených úryvků kódu HTML, CSS a JavaScript“, která nabízí skvělé příležitosti, jak se naučit lépe psát frontendové webové stránky.
CodePen vám nabízí dva „režimy“. První a nejčastěji používané je pero. Je to tak jednoduché, jako když kliknete na tlačítko a přenesete se přímo do editoru. Odtud máte přístup k panelu náhledu a také základním oknům úprav HTML, CSS a JS.
Neexistuje žádný „systém souborů“, „IntelliSense“ ani nic jiného – pouze jednoduché zvýraznění syntaxe a rychlé příkazy, jako je prettify. Na kartě Možnosti si můžete vybrat z omezeného rozsahu preprocesorů pro všechny tři jazyky (jako je TypeScript pro JS) nebo přidat připojení k externím zdrojům.
Pokud potřebujete cokoliv udělat zdarma, postačí vám kterýkoli z editorů. Doporučil bych CodePen pro cokoli, co nevyžaduje mnoho nastavení nebo knihoven – jednoduše HTML, CSS a JS s volitelnými pre-procesory navrchu. Pokud chcete využít hřiště ke zlepšení své přítomnosti na sociálních sítích nebo k rozvoji osobního portfolia, CodePen je lepší volba.
Premium verze
Na CodePen máte na výběr z několika dalších alternativ. Pokud platíte ročně, můžete získat jeden ze tří prémiových plánů za $ 12, $ 19 nebo $ 39 každý měsíc. Na kterékoli ze tří úrovní můžete vytvořit nekonečné množství soukromých per, příspěvků a sbírek.
Získáte také odznak Pro (sociální podpora), přístup k režimu živé spolupráce, žádnou reklamu a další. Existují také určité strategie specifické pro tým a další rozdíly mezi vrstvami. Podívejte se na jejich oficiální billboard pro další informace.
Klíčové vlastnosti
Kromě vytváření HTML, CSS a JavaScriptu v CodePen existuje několik dalších věcí, které jej odlišují.
- Je možné zobrazit váš kód v reálném čase. Nevyžaduje kompilaci.
- Experimentování vám umožňuje učit se nové věci.
- Vytvářejte malé testovací případy pro hledání a řešení problémů.
- Ukažte svá nádherná díla.
- Vytvořte a uložte pera pro pozdější použití.
- Vyzkoušejte kód jiných vývojářů a uvidíte jej v akci.
Výhody
- Pro začátek nic nestojí.
- Vestavěné učební zdroje.
- Spolupracujte s ostatními a porovnávejte projekty, abyste viděli, kam se mohou v budoucnu ubírat.
- Uživatelské rozhraní je jednoduché a přímočaré.
Nevýhody
- Knihovna kódu je malá, automatické dokončování kódu je nedostatečné. Je prostě dobrý na jednostránkové projekty a nic většího nezvládne.
- Na CodePen si můžete vytvořit soukromá pera, ale budete muset upgradovat na členství Pro (9 $ měsíčně).
kód sandbox
CodeSandbox je webový editor kódu. Automatizuje za vás transpiraci, balení a správu závislostí, což vám umožní vytvořit nový projekt jediným kliknutím. Poté, co vytvoříte něco fascinujícího, můžete to sdílet s ostatními pouhým sdílením webové stránky.
Editor je kompatibilní se všemi projekty JavaScript, i když obsahuje určité funkce specifické pro React, jako je možnost uložit projekt do šablony create-react-app.
Každý projekt, který vytvoříte v CodeSandbox, začíná šablonou. Může se vztahovat buď ke konkrétní knihovně, frameworku nebo runtime (včetně Node.js), nebo používat jednoduše standardní webové technologie. Po výběru šablony se dostanete do editoru, kde najdete všechny potřebné soubory a již otevřené okno náhledu.
Ve všech karanténách máte přístup k „systému souborů“, což znamená, že můžete vytvářet nové soubory, využívat moduly (včetně balíčků NPM) a pracovat se statickými prostředky. Je zde také možnost upravit konfigurační soubory specifické pro šablonu.
Můžete si dokonce vytvořit své vlastní šablony pro svůj jedinečný případ použití, kompletní se strukturou souborů a závislostmi, podobně jako v IDE. Protože je nástroj propojen s Githubem, můžete rychle generovat potvrzení a otevírat PR. Svou aplikaci můžete ihned nasadit do ZEIT nebo Netlify.
CodeSandbox Team Pro
CodeSandbox, nizozemská firma, která umožňuje vývojářům vytvářet sandbox pro vývoj webových aplikací založený na prohlížeči, oficiálně vydala platformu pro spolupráci, která umožňuje týmům pracovat na kódu v cloudu. Nový produkt, Team Pro, je bezkódové řešení vytvořené pro kompletní produktové týmy, od návrhářů a manažerů přes týmy pro zajištění kvality (QA) a další.
Projekty jsou poskytovány v uživatelsky přívětivém rozhraní pro každého, kdo si přeje provést nebo přijmout změny ve webové aplikaci, přičemž se vyhýbá alternativním metodám, jako je zasílání poznámek a doporučení vývojářům k provedení změn, jejich předávání zpět k diskusi a opakování procesu.
Klíčové vlastnosti
- Webový editor kódu a prototypový nástroj.
- Pro místní použití lze sandbox snadno stáhnout v souboru zip.
- Programování se provádí v karanténách, které lze snadno sdílet se spolupracovníky.
Výhody
- Vylepšené uživatelské prostředí a lepší kontrola nad editorem.
- Funkci živého náhledu lze upravit a zobrazit v samostatném okně.
- Kód je automaticky naformátován a obsahuje CLI (codesandbox-cli)
- Podpora pokročilých modulů npm.
- Pěkné chybové zprávy s doporučeními.
- Zlepšuje zážitek z ladění tím, že poskytuje lepší terminál, prohlížeč testů a prohlížeč problémů.
Nevýhody
- Koncový spotřebitel je vystaven mnoha personalizacím.
- Přetažení souborů z místního počítače nefunguje správně.
- V CodeSandbox musí být dodržena určitá struktura složek.
- Funkce soukromé karantény je dostupná pouze pro čtenáře.
StackBlitz
StackBlitz je online IDE pro webové aplikace založené na kódu Visual Studio. Platforma je stejně citlivá a přizpůsobivá jako verze pro stolní počítače. StackBlitz je online IDE, které je dodáváno s předinstalovaným Angular a React vývojové nástroje.
Thinkster.io vytvořil tento fantastický projekt, aby bylo co nejjednodušší začít s vaším projektem Angular nebo React, aniž byste se museli starat o instalaci závislostí nebo nastavení sestavení. StackBlitz poskytuje spoustu úžasných a jedinečných funkcí, které momentálně nemá žádný jiný online editor kódu. V důsledku toho stojí za to prozkoumat StackBlitz dále a zjistit, co toto online IDE nabízí.
Stackblitz je extrémně srovnatelný s kompletním IDE, zvláště pokud se nemůžete rozloučit s kódem VS, protože je na něm nástroj založen. Balíček má řadu funkcí, které vám umožní začít a pokračovat ve vytváření kompletní aplikace.
Program pohání Visual Studio, které je mezi vývojáři dobře známé. Offline úpravy jsou vynikající funkcí projektu. Aby to bylo možné, tým Stackblitz vytvořil webový server v prohlížeči. Během psaní automaticky instaluje závislosti, kompiluje, svazuje a provádí opětovné načítání.
Premium verze
Cadet, Astronaut a Commander jsou k dispozici zdarma, 8 $ měsíčně a 29 $ měsíčně. Astronaut and Commander obsahuje řadu funkcí, jako je neomezený počet soukromých projektů, neomezené nahrávání souborů, pozvání do základního týmového slack kanálu a tak dále. Další informace naleznete na úřední desce.
Klíčové vlastnosti
- Přidání balíčků NPM do vašeho projektu.
- Díky novému vývojovému serveru v prohlížeči můžete upravovat offline.
- Adresa URL hostované aplikace, která nám umožňuje kdykoli přistupovat (a sdílet) naši živou aplikaci.
- Mezi další pozoruhodné funkce Visual Studio Code patří Intellisense, Project Search (Cmd/Ctrl+P), Přejít na definici a další.
Výhody
- Možnosti nasazení Firebase.
- Editor je opravdu snadno použitelný a extrémně rychlý.
- Uživatelé mají přístup k package.json, index.html a index.js.
- Zdrojový kód ke sdílení, který lze také vložit.
- Živý náhled na velké části stránky s možností otevřít v případě potřeby na jiné stránce.
- Když jste offline, úpravy
- Inteligentní dokončení a vylepšený Intellisense.
- Jádrem Stackblitz je open source.
Nevýhody
- Nemáte vliv na budovu nebo vývojářský server, protože ty jsou spravovány příkazem create-react-app.
- V Reactu by měla být dodržena základní struktura složek.
- Není možné formátovat kód automaticky, i když je možné to udělat ručně.
Proč investovat do čističky vzduchu?
V dnešní době lze kódovací hřiště, jako je ta, která jsme viděli výše, použít ke kompletní konstrukci jakéhokoli webového projektu. Když můžete vytvářet, ladit, testovat a nasazovat přímo z webového prohlížeče, není třeba instalovat těžkopádná IDE na váš počítač.
Podle mého názoru by byl StackBlitz mezi nimi nejlepší, protože je to webové IDE, které umožňuje JavaScript, Angular a další vývojové projekty hned po vybalení, bez nutnosti instalace jakýchkoli lokálních vývojových prostředí jako Node.js, npm, nebo Angular. Poskytuje stejné zkušenosti jako místní použití kódu Visual Studio. Ve skutečnosti, protože StackBlitz je řízen kódem Visual Studio, působí stejně rychle a všestranně jako verze pro stolní počítače.
Který z CodePen, CodeSandbox a StackBlitz je vaším oblíbeným nástrojem? Dejte nám vědět do komentářů.
Abbatyya
Děkuji za tento skvělý článek, jakmile jsem viděl stackblitz.com, vím, že to je to, co chci.