Paggawa sa isang kumplikadong proyekto, ikaw man ay isang bihasang programmer o isang freshman, halos malamang na makakatagpo ka ng mga problema. Kapag hinati mo ang iyong proyekto sa maraming mga module, lumitaw ang mga isyu, na ginagawang mas mahirap na subaybayan ang mga error at makahanap ng mga solusyon. Sa iba pang mga pangyayari, maaaring mahirap ang pag-debug ng mga indibidwal na pagkakataon dahil hindi mo pa natutuklasan ang tamang solusyon sa problemang pinagsusumikapan mo.
Nagaganap din ito bilang isang piraso ng code paminsan-minsan, na maaaring mukhang kumplikado sa oras. Ang JavaScript ay isa sa mga Web-based na wika na napakasimpleng matutunan. Ilunsad lang ang iyong desktop browser at mag-navigate sa Developer Tools (karaniwan ay F12), at tapos ka na! Maaari kang mag-eksperimento sa JS nang hindi kinakailangang mag-install o magpatakbo ng anumang kumplikadong software.
Upang makapagsimula, ang kailangan mo lang ay isang browser. Napakagandang magkaroon ng lahat ng pagiging simple na ito sa labas ng kahon, ngunit may mga pagkakataon na kailangan mo ng higit pa. Halimbawa, ipagpalagay na gusto mong mag-eksperimento sa isang bagong Web API na kamakailan mong natuklasan ngunit ayaw mong magsimula ng bagong proyekto.
Sa post na ito, ihahambing at ihahambing natin ang tatlong pinakasikat na palaruan ng JS, CodePen, CodeSandbox, at StackBlitz. Magsimula na tayo!
CodePen
Palaging umuunlad ang mga tool sa web development sa frontend, at ang mga text editor ay isang malaking bahagi ng mga pinakabagong teknolohiya na nagpapasimple sa buhay ng isang developer. Bukod sa mga stand-alone na text editor gaya ng Atom o Notepad ++, nagkaroon ng pagsabog ng mga editor na nakabatay sa browser nitong mga nakaraang taon na hindi nangangailangan ng pag-install ng program at nagpo-promote ng higit na pakikipagtulungan.
Ang CodePen ay isang "online na komunidad para sa pagsubok at pagpapakita ng HTML, CSS, at JavaScript code snippet na ginawa ng user" na nag-aalok ng mga magagandang pagkakataon upang matutunan kung paano magsulat ng mga frontend na web page nang mas mahusay.
Binibigyan ka ng CodePen ng dalawang "mode." Ang una at pinakakaraniwang ginagamit ay ang Panulat. Ito ay kasing simple ng pag-click sa isang pindutan at inihatid mismo sa editor. Mula doon, maa-access mo ang isang panel ng preview pati na rin ang mga pangunahing HTML, CSS, at mga window sa pag-edit ng JS.
Walang "file system," "IntelliSense," o anumang bagay - simpleng pag-highlight ng syntax at mabilis na mga utos tulad ng prettify. Sa tab na mga opsyon, maaari kang pumili mula sa isang pinaghihigpitang hanay ng mga preprocessor para sa lahat ng tatlong wika (gaya ng TypeScript para sa JS) o magdagdag ng mga koneksyon sa mga panlabas na mapagkukunan.
Kung kailangan mo lamang gawin ang anumang bagay nang libre, alinman sa mga editor ay sapat na. Iminumungkahi ko ang CodePen para sa anumang bagay na hindi nangangailangan ng maraming setup o library – HTML, CSS, at JS lang na may mga opsyonal na pre-processor sa itaas. Kung gusto mong gamitin ang playground para pagbutihin ang iyong presensya sa social media o bumuo ng personal na portfolio, mas magandang opsyon ang CodePen.
Premium Version
Mayroon ka pang ilang alternatibong mapagpipilian sa CodePen. Kung magbabayad ka taun-taon, maaari kang makakuha ng isa sa tatlong premium na plano para sa $12, $19, o $39 bawat buwan. Maaari kang lumikha ng walang katapusang bilang ng mga pribadong panulat, post, at koleksyon sa alinman sa tatlong tier.
Makakatanggap ka rin ng Pro badge (isang social boost), access sa live na collab mode, walang advertising, at higit pa. Mayroon ding ilang partikular na diskarte sa koponan at iba pang pagkakaibang cross-tier. Tingnan ang kanilang opisyal na billing board para sa karagdagang impormasyon.
Pangunahing tampok
Bukod sa paggawa ng HTML, CSS, at JavaScript sa CodePen, may ilan pang mga bagay na nagpapahiwalay dito.
- Posible ang real-time na pagtingin sa iyong code. Hindi ito nangangailangan ng compilation.
- Ang pag-eksperimento ay nagpapahintulot sa iyo na matuto ng mga bagong bagay.
- Gumawa ng maliliit na kaso ng pagsubok upang hanapin at tugunan ang mga problema.
- Ipakita ang iyong mga kahanga-hangang gawa.
- Gumawa at mag-imbak ng mga Panulat para magamit sa ibang pagkakataon.
- Subukan ang code ng iba pang developer at makita ito sa pagkilos.
Bentahe
- Upang magsimula, walang gastos.
- Mga built-in na mapagkukunan ng pag-aaral.
- Makipagtulungan sa iba at ihambing ang mga proyekto upang makita kung saan sila mapupunta sa hinaharap.
- Ang UI ay simpleng gamitin at prangka.
Mga Disbentaha
- Maliit ang library ng code, hindi sapat ang pagkumpleto ng auto-code. Ito ay mabuti lamang para sa isang-pahinang proyekto at hindi maaaring pangasiwaan ang anumang mas malaki.
- Sa CodePen, maaari kang lumikha ng mga pribadong panulat, ngunit kakailanganin mong mag-upgrade sa isang Pro membership ($9/buwan).
code sandbox
Ang CodeSandbox ay isang web-based na code editor. I-automate nito ang transpiring, packaging, at dependency management para sa iyo, na nagbibigay-daan sa iyong bumuo ng bagong proyekto sa isang pag-click. Pagkatapos mong gumawa ng isang bagay na kaakit-akit, maaari mo itong ibahagi sa iba sa pamamagitan lamang ng pagbabahagi ng website.
Tugma ang editor sa anumang proyekto ng JavaScript, bagama't may kasama itong ilang partikular na feature ng React, gaya ng opsyong i-save ang proyekto sa isang template ng create-react-app.
Anumang proyektong gagawin mo sa CodeSandbox ay nagsisimula sa isang template. Maaari itong alinman sa nauugnay sa isang partikular na library, framework, o runtime (kabilang ang Node.js) o gumamit lamang ng mga karaniwang teknolohiya sa web. Pagkatapos pumili ng template, ipapadala ka sa editor, kung saan makikita mo ang lahat ng kinakailangang file at nakabukas na ang preview window.
May access ka sa isang “file system” sa lahat ng Sandbox, na nangangahulugang maaari kang gumawa ng mga bagong file, gumamit ng mga module (kabilang ang mga NPM package), at makipag-ugnayan sa mga static na asset. Mayroon ding pagkakataon na baguhin ang mga file ng pagsasaayos na tukoy sa template.
Maaari ka ring gumawa ng sarili mong mga template para sa iyong natatanging use-case, kumpleto sa istruktura ng file at mga dependency, katulad ng sa isang IDE. Dahil naka-link ang tool sa Github, mabilis kang makakabuo ng mga commit at magbukas ng mga PR. Maaari mong i-deploy kaagad ang iyong application sa ZEIT o Netlify.
CodeSandbox Team Pro
Ang CodeSandbox, isang Dutch na negosyo na nagpapahintulot sa mga developer na bumuo ng isang browser-based na web app development sandbox, ay opisyal na naglabas ng isang collaboration platform na nagbibigay-daan sa mga team na magtrabaho sa code sa cloud. Ang bagong produkto, ang Team Pro, ay isang walang code na solusyon na binuo para sa mga kumpletong team ng produkto, mula sa mga designer at manager sa pamamagitan ng mga team ng quality assurance (QA) at higit pa.
Ang mga proyekto ay ibinibigay sa isang user-friendly na interface para sa sinumang gustong gumawa o tumanggap ng mga pagbabago sa isang web application, pag-iwas sa mga alternatibong pamamaraan tulad ng pagpapadala ng mga tala at rekomendasyon sa mga developer upang maisagawa ang mga pagbabago, ipasa ang mga ito pabalik para sa talakayan, at ulitin ang proseso.
Pangunahing tampok
- Isang web-based na code editor at prototype tool.
- Para sa lokal na paggamit, ang isang sandbox ay madaling ma-download sa isang zip file.
- Programming ay ginagawa sa mga sandbox, na maaaring madaling ibahagi sa mga katrabaho.
Bentahe
- Isang pinahusay na karanasan ng user at higit na kontrol sa editor.
- Ang tampok na live na preview ay maaaring mabago at matingnan sa isang hiwalay na window.
- Awtomatikong na-format ang code at may kasamang CLI (codesandbox-cli)
- Suporta para sa mga advanced na npm module.
- Magandang mensahe ng error na may mga rekomendasyon.
- Pinapabuti nito ang karanasan sa pag-debug sa pamamagitan ng pagbibigay ng mas magandang terminal, viewer ng pagsubok, at viewer ng isyu.
Mga Disbentaha
- Nalantad ang end consumer sa maraming pag-personalize.
- Ang pag-drag at pag-drop ng mga file mula sa isang lokal na computer ay hindi gumagana nang maayos.
- Dapat sundin ang isang partikular na istraktura ng folder sa CodeSandbox.
- Ang functionality ng isang pribadong sandbox ay magagamit lamang sa mga parokyano.
StackBlitz
Ang StackBlitz ay isang online IDE na pinapagana ng Visual Studio Code para sa mga web application. Ang platform ay tumutugon at madaling ibagay gaya ng desktop na bersyon. Ang StackBlitz ay isang online na IDE na nauna nang na-load Angular at React mga kasangkapan sa pagpapaunlad.
Binuo ng Thinkster.io ang kamangha-manghang proyektong iyon upang gawin itong kasing simple hangga't maaari upang makapagsimula sa iyong Angular o React na proyekto nang hindi kinakailangang mag-alala tungkol sa pag-install ng dependency o pagbuo ng mga setting. Nagbibigay ang StackBlitz ng maraming kamangha-manghang at natatanging tampok na wala sa ibang online code editor ngayon. Bilang resulta, sulit na siyasatin pa ang StackBlitz at tuklasin kung ano ang inaalok ng online IDE na ito.
Ang Stackblitz ay lubos na maihahambing sa kumpletong IDE, lalo na kung hindi ka makapagpaalam sa VS code dahil ang tool ay nakabatay dito. Ang package ay may iba't ibang feature na nagbibigay-daan sa iyong magsimula at magpatuloy sa paggawa ng full-stack na application.
Ang programa ay pinalakas ng Visual Studio, na kilala sa mga developer. Ang offline na pag-edit ay ang natatanging tampok ng proyekto. Upang gawin itong posible, ang koponan ng Stackblitz ay lumikha ng isang in-browser na webserver. Habang nagta-type ka, awtomatiko itong nag-i-install ng mga dependency, nagko-compile, nag-bundle, at gumagawa ng mainit na pag-reload.
Premium Version
Available ang Cadet, Astronaut, at Commander nang libre, $8/buwan, at $29/buwan, ayon sa pagkakabanggit. Ang Astronaut at Commander ay may kasamang ilang feature tulad ng walang limitasyong pribadong proyekto, walang limitasyong pag-upload ng file, imbitasyon sa core team slack channel, at iba pa. Para sa karagdagang impormasyon, tingnan ang opisyal na billing board.
Pangunahing tampok
- Pagdaragdag ng mga pakete ng NPM sa iyong proyekto.
- Salamat sa isang nobelang in-browser dev server, maaari kang mag-edit habang offline.
- Isang naka-host na URL ng app na nagbibigay-daan sa amin na i-access (at ibahagi) ang aming live na app anumang oras.
- Kasama sa iba pang kapansin-pansing feature ng Visual Studio Code ang Intellisense, Project Search (Cmd/Ctrl+P), Go to Definition, at iba pa.
Bentahe
- Mga kakayahan ng Firebase para sa pag-deploy.
- Ang editor ay talagang madaling gamitin at napakabilis.
- May access ang mga user sa package.json, index.html, at index.js.
- Naibabahaging source code na maaari ding i-embed.
- Live na preview sa isang malaking seksyon ng page, na may opsyong magbukas sa ibang page kung kinakailangan.
- Habang Offline, Editing
- Mga matalinong pagkumpleto at pinahusay na Intellisense.
- Ang core ng Stackblitz ay open source.
Mga Disbentaha
- Wala kang impluwensya sa gusali o sa server ng developer dahil ang mga iyon ay pinamamahalaan ng command na create-react-app.
- Sa React, dapat sundin ang isang pangunahing istraktura ng folder.
- Hindi posibleng awtomatikong i-format ang code, bagaman posible itong gawin nang manu-mano.
Konklusyon
Sa ngayon, ang isang coding playground tulad ng mga nakita natin sa itaas ay maaaring gamitin upang ganap na bumuo ng anumang proyekto sa web. Hindi na kailangang mag-install ng mga masalimuot na IDE sa iyong PC kapag maaari kang bumuo, mag-debug, sumubok, at mag-deploy nang direkta mula sa iyong web browser.
Sa palagay ko, ang StackBlitz ang pinakamaganda sa kanila dahil ito ay isang web-based na IDE na nagbibigay-daan sa JavaScript, Angular, at iba pang mga proyekto sa pag-unlad sa labas ng kahon, nang hindi na kailangang mag-install ng anumang mga lokal na kapaligiran sa pag-unlad tulad ng Node.js, npm, o Angular. Nagbibigay ito ng parehong karanasan tulad ng paggamit ng Visual Studio Code nang lokal. Sa totoo lang, dahil ang StackBlitz ay hinihimok ng Visual Studio Code, pakiramdam nito ay kasing bilis at maraming nalalaman gaya ng desktop na bersyon.
Alin sa CodePen, CodeSandbox, at StackBlitz ang iyong go-to tool? Ipaalam sa amin sa mga komento.
Abbatyya
Salamat sa mahusay na artikulong ito, sa sandaling nakita ko ang stackblitz.com, alam kong ito ang gusto ko.