Þegar þú vinnur að flóknu verkefni, hvort sem þú ert reyndur forritari eða nýnemi, munt þú nánast lenda í vandamálum. Þegar þú skiptir verkefninu upp í margar einingar koma upp vandamál sem gera það erfiðara að elta uppi villur og finna lausnir. Í öðrum kringumstæðum getur verið erfitt að kemba einstaka tilvik vegna þess að þú hefur ekki fundið réttu lausnina á vandamálinu sem þú hefur verið að vinna að.
Það kemur líka fyrir sem stykki af kóða stundum, sem gæti litið flókið út á þeim tíma. JavaScript er eitt af veftungumálunum sem er afar einfalt að læra. Ræstu einfaldlega skjáborðsvafrann þinn og farðu í þróunartól (venjulega F12), og þú ert búinn! Þú getur síðan gert tilraunir með JS án þess að þurfa að setja upp eða keyra flókinn hugbúnað.
Til að byrja, allt sem þú þarft er vafra. Það er dásamlegt að hafa allan þennan einfaldleika beint úr kassanum, en það eru tækifæri þegar þú þarft meira. Segjum til dæmis að þú viljir gera tilraunir með nýtt vefforritaskil sem þú hefur nýlega uppgötvað en vilt ekki hefja nýtt verkefni.
Í þessari færslu munum við bera saman og andstæða þremur vinsælustu JS leikvöllunum, CodePen, CodeSandbox og StackBlitz. Byrjum!
CodePen
Framhlið vefþróunarverkfæri eru alltaf í þróun og textaritlar eru stór hluti af nýjustu tækni sem gerir líf þróunaraðila einfaldara. Burtséð frá sjálfstæðum textaritlum eins og Atom eða Notepad ++, hefur orðið sprenging í vafraritstýrðum ritstjórum á undanförnum árum sem krefjast ekki uppsetningar forrita og stuðla að auknu samstarfi.
CodePen er „netsamfélag til að prófa og kynna notendabúna HTML, CSS og JavaScript kóðabúta“ sem býður upp á frábær tækifæri til að læra hvernig á að skrifa framenda vefsíður betur.
CodePen gefur þér tvo „hama“. Fyrsti og oftast notaði er penninn. Það er eins einfalt og að smella á hnapp og vera flutt beint í ritstjórann. Þaðan geturðu fengið aðgang að forskoðunarspjaldi sem og helstu HTML, CSS og JS klippiglugga.
Það er ekkert "skráakerfi", "IntelliSense" eða neitt annað - bara einföld setningafræði auðkenning og hraðar skipanir eins og prettify. Í valmöguleikum flipanum geturðu valið úr takmörkuðu úrvali af forvinnslum fyrir öll þrjú tungumálin (svo sem TypeScript fyrir JS) eða bætt við tengingum við ytri heimildir.
Ef þú þarft aðeins að gera eitthvað ókeypis, dugar annar hvor ritstjórinn. Ég myndi stinga upp á CodePen fyrir allt sem krefst ekki mikillar uppsetningar eða bókasöfnum – einfaldlega HTML, CSS og JS með valfrjálsum forgjörvum ofan á. Ef þú vilt nýta leikvöllinn til að bæta viðveru þína á samfélagsmiðlum eða þróa persónulegt eignasafn, þá er CodePen betri kostur.
Premium útgáfa
Þú hefur nokkra valkosti í viðbót til að velja úr á CodePen. Ef þú borgar árlega geturðu fengið eina af þremur iðgjaldaáætlunum fyrir $12, $19 eða $39 í hverjum mánuði. Þú getur búið til óendanlega marga einkapenna, pósta og söfn á hvaða af þrepunum sem er.
Þú munt einnig fá Pro merkið (samfélagslega uppörvun), aðgang að samspili í beinni, engar auglýsingar og fleira. Það eru líka ákveðnar liðssértækar aðferðir og önnur aðgreining milli flokka. Skoðaðu opinbera innheimtuborð þeirra til að fá frekari upplýsingar.
Lykil atriði
Fyrir utan að búa til HTML, CSS og JavaScript í CodePen, þá eru nokkur atriði í viðbót sem aðgreina það.
- Hægt er að skoða kóðann þinn í rauntíma. Það þarf ekki samantekt.
- Tilraunir gera þér kleift að læra nýja hluti.
- Búðu til örsmá próftilvik til að leita að og takast á við vandamál.
- Sýndu dásamlegu verkin þín.
- Búðu til og geymdu penna til síðari nota.
- Prófaðu kóða annarra þróunaraðila og sjáðu hann í aðgerð.
Kostir
- Til að byrja með er enginn kostnaður.
- Innbyggt námsefni.
- Vertu í samstarfi við aðra og berðu saman verkefni til að sjá hvert þau geta farið í framtíðinni.
- Viðmótið er einfalt í notkun og einfalt.
Ókostir
- Kóðasafnið er lítið, útfylling sjálfvirkrar kóða er ófullnægjandi. Það er bara gott fyrir verkefni á einni síðu og ræður ekki við neitt stærra.
- Á CodePen geturðu búið til einkapenna, en þú þarft að uppfæra í Pro aðild ($9/mánuði).
KóðiSandbox
CodeSandbox er kóðaritari á vefnum. Það gerir sjálfvirkan sendingu, pökkun og ávanastjórnun fyrir þig, sem gerir þér kleift að byggja nýtt verkefni með einum smelli. Eftir að þú hefur búið til eitthvað heillandi geturðu deilt því með öðrum með því einfaldlega að deila vefsíðunni.
Ritstjórinn er samhæfur öllum JavaScript verkefnum, þó að hann feli í sér ákveðna React-sértæka eiginleika, svo sem möguleikann á að vista verkefnið í búa til-viðbragð-app sniðmát.
Öll verkefni sem þú byggir í CodeSandbox byrjar með sniðmáti. Það getur annað hvort tengst tilteknu bókasafni, ramma eða keyrslutíma (þar á meðal Node.js) eða notað einfaldlega staðlaða veftækni. Eftir að hafa valið sniðmát ertu sendur í ritstjórann, þar sem þú finnur allar nauðsynlegar skrár og forskoðunarglugginn þegar opinn.
Þú hefur aðgang að „skráakerfi“ í öllum sandkössum, sem þýðir að þú getur búið til nýjar skrár, notað einingar (þar á meðal NPM pakka) og haft samskipti við kyrrstæðar eignir. Það er líka tækifæri til að breyta sniðmátssértækum stillingarskrám.
Þú gætir jafnvel smíðað þitt eigið sniðmát fyrir þitt einstaka notkunartilvik, heill með skráargerð og ósjálfstæði, líkt og í IDE. Vegna þess að tólið er tengt Github geturðu fljótt búið til skuldbindingar og opnað PR. Þú getur sent forritið þitt strax á ZEIT eða Netlify.
CodeSandbox Team Pro
CodeSandbox, hollenskt fyrirtæki sem gerir forriturum kleift að smíða sandkassa sem byggir á vafraforritum, hefur opinberlega gefið út samstarfsvettvang sem gerir teymum kleift að vinna að kóða í skýinu. Nýja varan, Team Pro, er lausn án kóða sem er smíðuð fyrir heildar vöruteymi, allt frá hönnuðum og stjórnendum í gegnum gæðatryggingateymi (QA) og víðar.
Verkefni eru í notendavænu viðmóti fyrir alla sem vilja gera eða samþykkja breytingar á vefforriti, forðast aðrar aðferðir eins og að senda athugasemdir og tillögur til þróunaraðila til að framkvæma breytingarnar, senda þær aftur til umræðu og endurtaka ferlið.
Lykil atriði
- Vefbundinn kóðaritari og frumgerðatól.
- Til notkunar á staðnum er auðvelt að hlaða niður sandkassa í zip skrá.
- Forritun er gert í sandkössum, sem auðvelt er að deila með vinnufélögum.
Kostir
- Bætt notendaupplifun og meiri stjórn á ritlinum.
- Hægt er að breyta forskoðunaraðgerðinni í beinni og skoða í sérstökum glugga.
- Kóðinn er sjálfkrafa sniðinn og inniheldur CLI (codesandbox-cli)
- Stuðningur við háþróaðar npm einingar.
- Fín villuskilaboð með ráðleggingum.
- Það bætir villuleitarupplifunina með því að bjóða upp á betri flugstöð, prófunarskoðara og málskoðara.
Ókostir
- Endanlegir neytendur verða fyrir mörgum sérstillingum.
- Draga og sleppa skrám úr staðbundinni tölvu virkar ekki rétt.
- Fylgja þarf ákveðinni möppuuppbyggingu í CodeSandbox.
- Virkni einkasandkassa er aðeins í boði fyrir gesti.
StackBlitz
StackBlitz er Visual Studio Code-knúið IDE á netinu fyrir vefforrit. Vettvangurinn er eins móttækilegur og aðlögunarhæfur og skrifborðsútgáfan. StackBlitz er IDE á netinu sem er forhlaðinn með Angular og React þróunarverkfæri.
Thinkster.io smíðaði þetta frábæra verkefni til að gera það eins einfalt og mögulegt er að byrja með Angular eða React verkefnið þitt án þess að þurfa að hafa áhyggjur af uppsetningu ósjálfstæðis eða byggingarstillingar. StackBlitz býður upp á marga ótrúlega og einstaka eiginleika sem enginn annar kóðaritari á netinu hefur eins og er. Þess vegna er það þess virði að rannsaka StackBlitz frekar og uppgötva hvað þessi IDE á netinu hefur upp á að bjóða.
Stackblitz er einstaklega sambærilegt við heildar IDE, sérstaklega ef þú getur ekki sagt bless við VS kóða vegna þess að tólið er byggt á honum. Pakkinn hefur ýmsa eiginleika sem gera þér kleift að byrja og halda áfram að búa til forrit í fullri stafla.
Forritið er knúið af Visual Studio, sem er vel þekkt meðal þróunaraðila. Ónettengd klipping er áberandi eiginleiki verkefnisins. Til að gera þetta mögulegt bjó Stackblitz teymið til vefþjón í vafranum. Þegar þú skrifar setur það sjálfkrafa upp ósjálfstæði, safnar saman, hleður saman og gerir heitt endurhleðslu.
Premium útgáfa
Cadet, Astronaut og Commander eru fáanlegir ókeypis, $8/mánuði og $29/mánuði, í sömu röð. Geimfari og yfirmaður inniheldur fjölda eiginleika eins og ótakmarkað einkaverkefni, ótakmarkað skráahleðslu, boð til slaka rásar í kjarnahópi og svo framvegis. Fyrir frekari upplýsingar, sjá opinbera innheimtuborðið.
Lykil atriði
- Bætir NPM pökkum við verkefnið þitt.
- Þökk sé nýjum þróunarþjóni í vafra geturðu breytt án nettengingar.
- Vefslóð fyrir hýst forrit sem gerir okkur kleift að fá aðgang að (og deila) appinu okkar í beinni hvenær sem er.
- Aðrir athyglisverðir eiginleikar Visual Studio Code eru Intellisense, Verkefnaleit (Cmd/Ctrl+P), Fara í skilgreiningu og fleira.
Kostir
- Möguleiki Firebase fyrir uppsetningu.
- Ritstjórinn er mjög auðveldur í notkun og mjög fljótlegur.
- Notendur hafa aðgang að package.json, index.html og index.js.
- Deilanleg frumkóði sem einnig er hægt að fella inn.
- Forskoðun í beinni á stórum hluta síðunnar, með möguleika á að opna á annarri síðu ef þörf krefur.
- Meðan á tengingu er klippt
- Snjöll frágangur og endurbætt Intellisense.
- Kjarninn í Stackblitz er opinn uppspretta.
Ókostir
- Þú hefur ekki áhrif á bygginguna eða þróunarþjóninn vegna þess að þeim er stjórnað af create-react-app skipuninni.
- Í React ætti að fylgjast með grundvallarmöppuuppbyggingu.
- Það er ekki hægt að forsníða kóða sjálfkrafa, þó það sé hægt að gera það handvirkt.
Niðurstaða
Nú á dögum er hægt að nota kóðunarleikvöll eins og þau sem við höfum séð hér að ofan til að smíða hvaða vefverkefni sem er. Það er engin þörf á að setja upp fyrirferðarmikil IDE á tölvuna þína þegar þú getur smíðað, kembiforrit, prófað og sett upp beint úr vafranum þínum.
Að mínu mati væri StackBlitz best meðal þeirra vegna þess að það er vefbundið IDE sem leyfir JavaScript, Angular og önnur þróunarverkefni beint úr kassanum, án þess að þurfa að setja upp staðbundið þróunarumhverfi eins og Node.js, npm, eða Angular. Það veitir sömu upplifun og að nota Visual Studio Code á staðnum. Í raun og veru, vegna þess að StackBlitz er knúið áfram af Visual Studio Code, líður honum eins hratt og fjölhæfur og skrifborðsútgáfan.
Hvert af CodePen, CodeSandbox og StackBlitz er tólið þitt? Láttu okkur vita í athugasemdunum.
Abbatyya
Takk fyrir þessa frábæru grein, þegar ég sá stackblitz.com þá veit ég að þetta er það sem ég vil.