Ha egy összetett projekten dolgozik, akár tapasztalt programozó, akár pályakezdő, gyakorlatilag valószínűleg problémákba ütközik. Ha a projektet több modulra osztja, problémák merülnek fel, ami megnehezíti a hibák felderítését és a megoldások megtalálását. Más esetekben az egyes példányok hibakeresése nehéz lehet, mert nem találta meg a megfelelő megoldást a problémára, amelyen dolgozott.
Alkalmanként kódrészletként is előfordul, ami abban az időben bonyolultnak tűnhet. A JavaScript egyike azoknak a webalapú nyelveknek, amelyeket rendkívül egyszerű megtanulni. Egyszerűen indítsa el az asztali böngészőt, és navigáljon a Fejlesztői eszközökhöz (általában F12), és kész! Ezután kísérletezhet a JS-sel anélkül, hogy bonyolult szoftvert kellene telepítenie vagy futtatnia.
A kezdéshez csak egy böngészőre van szüksége. Csodálatos dolog mindezt az egyszerűséget a dobozból kivenni, de vannak esetek, amikor többre van szükséged. Tegyük fel például, hogy kísérletezni szeretne egy új webes API-val, amelyet nemrég fedezett fel, de nem szeretne új projektet indítani.
Ebben a bejegyzésben a három legnépszerűbb JS játszóteret, a CodePen-t, a CodeSandboxot és a StackBlitz-et fogjuk összehasonlítani és szembeállítani. Kezdjük el!
CodePen
A frontend webfejlesztő eszközök folyamatosan fejlődnek, a szövegszerkesztők pedig a legújabb technológiák fontos összetevői, amelyek megkönnyítik a fejlesztők életét. Az olyan önálló szövegszerkesztőkön kívül, mint az Atom vagy a Notepad ++, az elmúlt években robbanásszerűen megszaporodtak a böngésző alapú szerkesztők, amelyek nem igényelnek programtelepítést, és elősegítik a nagyobb együttműködést.
A CodePen egy „online közösség a felhasználók által létrehozott HTML, CSS és JavaScript kódrészletek tesztelésére és bemutatására”, amely fantasztikus lehetőségeket kínál a frontend weboldalak jobb írásának megtanulására.
A CodePen két „módot” ad. Az első és leggyakrabban használt a toll. Ez olyan egyszerű, mint egy gombra kattintani, és közvetlenül a szerkesztőbe kerül. Innen elérheti az előnézeti panelt, valamint az alapvető HTML-, CSS- és JS-szerkesztő ablakokat.
Nincs „fájlrendszer”, „IntelliSense” vagy bármi más – csak egyszerű szintaxiskiemelés és gyors parancsok, mint például a szépítés. Az opciók lapon választhat az előfeldolgozók korlátozott tartományából mindhárom nyelvhez (például TypeScript a JS-hez), vagy kapcsolatokat adhat hozzá külső forrásokhoz.
Ha csak bármit kell ingyen csinálni, akkor bármelyik szerkesztő elég lesz. A CodePen-t mindenre javaslom, ami nem igényel sok beállítást vagy könyvtárat – egyszerűen HTML, CSS és JS opcionális előfeldolgozókkal a tetején. Ha a játszóteret a közösségi média jelenlétének javítására vagy személyes portfólió kialakítására szeretné használni, a CodePen jobb választás.
Prémium verzió
Még néhány alternatíva közül választhat a CodePen-en. Ha évente fizet, három prémium csomag egyikét kaphatja meg havonta 12, 19 vagy 39 dollárért. A három szint bármelyikén végtelen számú privát tollat, bejegyzést és gyűjteményt hozhat létre.
Ezenkívül megkapja a Pro jelvényt (egy közösségi ösztönzést), élő együttműködési módot, reklámmentességet és még sok mást. Vannak bizonyos csapat-specifikus stratégiák és egyéb, több szintre kiterjedő megkülönböztetések is. További információkért tekintse meg hivatalos számlázótáblájukat.
Főbb jellemzők
A HTML, CSS és JavaScript CodePenben való létrehozásán kívül van még néhány dolog, ami megkülönbözteti.
- Lehetőség van a kód valós idejű megtekintésére. Nem igényel összeállítást.
- A kísérletezés lehetővé teszi új dolgok megtanulását.
- Hozzon létre apró teszteseteket a problémák kereséséhez és megoldásához.
- Mutasd be csodálatos munkáidat.
- Hozzon létre és tároljon tollakat későbbi használatra.
- Próbáljon ki más fejlesztők kódját, és nézze meg működés közben.
Előnyök
- Kezdésként nincs költség.
- Beépített tanulási források.
- Együttműködjön másokkal, és hasonlítsa össze a projekteket, hogy megtudja, hová juthatnak el a jövőben.
- A felhasználói felület egyszerűen használható és egyértelmű.
Hátrányok
- A kódkönyvtár kicsi, az automatikus kódkiegészítés nem megfelelő. Csak egyoldalas projektekhez jó, nagyobbat nem tud kezelni.
- A CodePen-en létrehozhat privát tollakat, de frissítenie kell Pro-tagságra (9 USD/hó).
kód homokozó
A CodeSandbox egy webalapú kódszerkesztő. Automatizálja az áttekintést, a csomagolást és a függőségkezelést, így egyetlen kattintással új projektet hozhat létre. Miután elkészített valami lenyűgözőt, egyszerűen megoszthatja másokkal a webhely megosztásával.
A szerkesztő kompatibilis bármely JavaScript-projekttel, bár tartalmaz bizonyos React-specifikus szolgáltatásokat, például a projekt létrehozása-reagálása-alkalmazássablonban történő mentésének lehetőségét.
A CodeSandboxban felépített bármely projekt egy sablonnal kezdődik. Ez kapcsolódhat egy adott könyvtárhoz, keretrendszerhez vagy futási környezethez (beleértve a Node.js-t), vagy használhat egyszerűen szabványos webtechnológiákat. A sablon kiválasztása után a szerkesztőbe kerül, ahol megtalálja az összes szükséges fájlt, és már meg is nyílik az előnézeti ablak.
Minden Sandboxban hozzáférhet egy „fájlrendszerhez”, ami azt jelenti, hogy új fájlokat hozhat létre, modulokat használhat (beleértve az NPM-csomagokat is), és kommunikálhat statikus eszközökkel. Lehetőség van a sablonspecifikus konfigurációs fájlok módosítására is.
Akár saját sablonokat is készíthet egyedi használati esetéhez, fájlszerkezettel és függőségekkel kiegészítve, hasonlóan az IDE-hez. Mivel az eszköz a Githubhoz kapcsolódik, gyorsan generálhat véglegesítéseket és megnyithat PR-eket. Alkalmazását azonnal telepítheti a ZEIT-re vagy a Netlify-ra.
CodeSandbox Team Pro
A CodeSandbox, egy holland vállalkozás, amely lehetővé teszi a fejlesztők számára, hogy böngésző alapú webalkalmazás-fejlesztési sandboxot hozzanak létre, hivatalosan is kiadott egy együttműködési platformot, amely lehetővé teszi a csapatok számára, hogy a felhőben dolgozzanak kódon. Az új termék, a Team Pro egy kód nélküli megoldás, amely komplett termékcsapatok számára készült, a tervezőktől és menedzserektől a minőségbiztosítási (QA) csapatokig és azon túl.
A projekteket felhasználóbarát felületen biztosítjuk mindenki számára, aki módosítani szeretne vagy elfogadni szeretne egy webalkalmazást, elkerülve az alternatív módszereket, mint például a megjegyzések és ajánlások küldése a fejlesztőknek a változtatások végrehajtására, visszaküldése megvitatásra és a folyamat megismétlése.
Főbb jellemzők
- Web alapú kódszerkesztő és prototípus eszköz.
- Helyi használatra egy homokozó egyszerűen letölthető zip fájlban.
- Programozás homokozókban történik, amelyek könnyen megoszthatók a munkatársakkal.
Előnyök
- Továbbfejlesztett felhasználói élmény és nagyobb kontroll a szerkesztő felett.
- Az élő előnézeti funkció módosítható és külön ablakban tekinthető meg.
- A kód automatikusan formázott, és tartalmaz egy CLI-t (codesandbox-cli)
- Fejlett npm modulok támogatása.
- Szép hibaüzenetek ajánlásokkal.
- Javítja a hibakeresési élményt azáltal, hogy jobb terminált, tesztnézegetőt és problémamegjelenítőt biztosít.
Hátrányok
- A végfelhasználó számos személyre szabottságnak van kitéve.
- A fájlok áthúzása a helyi számítógépről nem működik megfelelően.
- A CodeSandboxban egy bizonyos mappastruktúrát kell követni.
- A privát homokozó funkciói csak a látogatók számára érhetők el.
StackBlitz
A StackBlitz egy Visual Studio Code-alapú online IDE webes alkalmazásokhoz. A platform ugyanolyan érzékeny és rugalmas, mint az asztali verzió. A StackBlitz egy online IDE, amely előre telepítve van Szögletes és reagál fejlesztő eszközök.
A Thinkster.io megépítette ezt a fantasztikus projektet, hogy a lehető legegyszerűbbé tegye az Angular vagy React projekt megkezdését anélkül, hogy a függőségi telepítés vagy összeállítási beállítások miatt kellene aggódnia. A StackBlitz rengeteg csodálatos és egyedi funkciót kínál, amelyekkel jelenleg egyetlen más online kódszerkesztő sem rendelkezik. Ennek eredményeként érdemes tovább vizsgálni a StackBlitz-et, és felfedezni, mit kínál ez az online IDE.
A Stackblitz rendkívül összevethető a komplett IDE-vel, főleg, ha nem lehet búcsút venni a VS kódtól, mert az eszköz arra épül. A csomag számos olyan funkcióval rendelkezik, amelyek lehetővé teszik egy full-stack alkalmazás létrehozásának megkezdését és folytatását.
A programot a fejlesztők körében jól ismert Visual Studio hajtja. Az offline szerkesztés a projekt kiemelkedő funkciója. Ennek lehetővé tétele érdekében a Stackblitz csapata létrehozott egy böngészőn belüli webszervert. Gépelés közben automatikusan telepíti a függőségeket, lefordítja, kötegeli, és gyors újratöltést végez.
Prémium verzió
A Cadet, az Astronaut és a Commander ingyenesen elérhető, havi 8 USD, illetve 29 USD/hónap. Az Astronaut and Commander számos funkciót tartalmaz, például korlátlan számú privát projektet, korlátlan fájlfeltöltést, meghívást az alapcsapat laza csatornájára és így tovább. További információkért lásd a hivatalos számlázótáblát.
Főbb jellemzők
- NPM-csomagok hozzáadása a projekthez.
- Az új, böngészőn belüli fejlesztői szervernek köszönhetően offline módban is szerkesztheti.
- Egy tárolt alkalmazás URL-je, amely lehetővé teszi számunkra, hogy bármikor elérjük (és megosszuk) élő alkalmazásunkat.
- A Visual Studio Code további figyelemre méltó szolgáltatásai közé tartozik az Intellisense, a Project Search (Cmd/Ctrl+P), a Go to Definition és mások.
Előnyök
- A Firebase képességei a telepítéshez.
- A szerkesztő nagyon könnyen használható és rendkívül gyors.
- A felhasználók hozzáférhetnek a package.json, index.html és index.js fájlokhoz.
- Megosztható forráskód, amely beágyazható is.
- Élő előnézet az oldal nagy részén, szükség esetén egy másik oldalon való megnyitási lehetőséggel.
- Offline módban szerkesztés
- Intelligens kiegészítések és továbbfejlesztett Intellisense.
- A Stackblitz magja az nyílt forráskódú.
Hátrányok
- Nincs befolyása az épületre vagy a fejlesztői kiszolgálóra, mert ezeket a create-react-app parancs kezeli.
- A React alkalmazásban egy alapvető mappaszerkezetre kell figyelni.
- A kód automatikus formázása nem lehetséges, bár manuálisan megtehető.
Következtetés
Manapság egy olyan kódoló játszóteret, mint amilyeneket fent láttunk, bármilyen webes projekt teljes körű felépítésére lehet használni. Nincs szükség nehézkes IDE-k telepítésére a számítógépére, ha közvetlenül webböngészőjéből építhet, hibakereshet, tesztelhet és telepíthet.
Véleményem szerint a StackBlitz lenne a legjobb ezek közül, mert ez egy webalapú IDE, amely lehetővé teszi a JavaScriptet, az Angulart és más fejlesztési projekteket azonnal, anélkül, hogy telepíteni kellene semmilyen helyi fejlesztői környezetet, például Node.js, npm, vagy Szögletes. Ugyanazt az élményt nyújtja, mint a Visual Studio Code helyi használata. A valóságban, mivel a StackBlitz-et a Visual Studio Code hajtja, olyan gyors és sokoldalú, mint az asztali verzió.
A CodePen, CodeSandbox és StackBlitz közül melyik az Ön által használt eszköz? Tudassa velünk a megjegyzésekben.
Abbatyya
Köszönöm ezt a nagyszerű cikket, miután megláttam a stackblitz.com oldalt, tudom, hogy ezt akarom.