Ang pagtrabaho sa usa ka komplikado nga proyekto, bisan kung ikaw usa ka eksperyensiyado nga programmer o usa ka freshman, lagmit nga makaagi ka sa mga problema. Kung gibahin nimo ang imong proyekto sa daghang mga module, ang mga isyu motungha, nga labi ka lisud sa pagsubay sa mga sayup ug pagpangita og mga solusyon. Sa ubang mga kahimtang, ang pag-debug sa mga indibidwal nga mga higayon mahimong lisud tungod kay wala nimo nahibal-an ang husto nga solusyon sa problema nga imong gitrabaho.
Kini usab mahitabo ingon nga usa ka piraso sa code usahay, nga mahimong komplikado tan-awon sa panahon. Ang JavaScript kay usa sa mga Web-based nga lengguwahe nga sayon ra kaayong tun-an. Ilunsad lang ang imong desktop browser ug navigate sa Developer Tools (kasagaran F12), ug nahuman ka! Mahimo nimong mag-eksperimento sa JS nga dili kinahanglan nga mag-install o magpadagan sa bisan unsang komplikado nga software.
Sa pagsugod, ang tanan nga imong gikinahanglan mao ang usa ka browser. Nindot nga makuha ang tanan niini nga kayano gikan sa kahon, apan adunay mga higayon nga kinahanglan nimo ang labi pa. Pananglitan, pananglit gusto nimo nga mag-eksperimento sa usa ka bag-ong Web API nga bag-o lang nimo nadiskubre apan dili gusto nga magsugod usa ka bag-ong proyekto.
Niini nga post, atong itandi ug itandi ang tulo ka pinakasikat nga JS playgrounds, CodePen, CodeSandbox, ug StackBlitz. Magsugod na ta!
CodePen
Ang mga galamiton sa pagpalambo sa web sa frontend kanunay nga nag-uswag, ug ang mga editor sa teksto usa ka dako nga bahin sa pinakabag-o nga mga teknolohiya nga naghimo sa kinabuhi sa usa ka developer nga mas simple. Gawas sa stand-alone nga mga text editor sama sa Atom o Notepad ++, adunay usa ka pagbuto sa browser-based nga mga editor sa bag-ohay nga mga tuig nga wala magkinahanglan og pag-instalar sa programa ug pagpalambo sa mas dako nga kolaborasyon.
Ang CodePen usa ka "online nga komunidad para sa pagsulay ug pagpresentar sa HTML, CSS, ug JavaScript code snippet nga hinimo sa user" nga nagtanyag ug nindot nga mga oportunidad aron makat-on unsaon pagsulat sa frontend nga mga web page nga mas maayo.
Ang CodePen naghatag kanimo og duha ka "mode." Ang una ug kasagarang gigamit mao ang Pen. Kini kay yano sama sa pag-klik sa usa ka buton ug ihatud ngadto mismo sa editor. Gikan didto, mahimo nimong ma-access ang usa ka preview panel ingon man ang batakang HTML, CSS, ug JS nga pag-edit windows.
Walay “file system,” “IntelliSense,” o bisan unsa pa – yano lang nga syntax highlighting ug paspas nga mga sugo sama sa prettify. Diha sa tab sa mga opsyon, mahimo kang mopili gikan sa usa ka limitado nga han-ay sa mga preprocessors alang sa tanang tulo ka mga pinulongan (sama sa TypeScript para sa JS) o makadugang og mga koneksyon sa mga eksternal nga tinubdan.
Kung kinahanglan nimo ang bisan unsa nga buhaton nga libre, bisan kinsa sa mga editor igo na. Isugyot nako ang CodePen alang sa bisan unsang butang nga wala magkinahanglan daghang pag-setup o mga librarya - yano nga HTML, CSS, ug JS nga adunay mga opsyonal nga pre-processors sa ibabaw. Kung gusto nimo gamiton ang dulaanan aron mapaayo ang imong presensya sa social media o maghimo usa ka personal nga portfolio, ang CodePen usa ka mas maayo nga kapilian.
Premium Version
Adunay ka pipila ka mga alternatibo nga mapili gikan sa CodePen. Kung magbayad ka matag tuig, mahimo nimong makuha ang usa sa tulo nga mga premium nga plano sa $12, $19, o $39 matag bulan. Mahimo kang maghimo ug walay kinutuban nga gidaghanon sa mga pribadong panulat, mga post, ug mga koleksyon sa bisan asa sa tulo ka hut-ong.
Madawat usab nimo ang Pro badge (usa ka social boost), live collab mode access, walay advertising, ug uban pa. Adunay usab piho nga mga estratehiya nga piho sa team ug uban pang mga kalainan sa cross-tier. Tan-awa ang ilang opisyal nga billing board alang sa dugang nga impormasyon.
Mga Key Features
Gawas sa paghimo sa HTML, CSS, ug JavaScript sa CodePen, adunay pipila pa nga mga butang nga nagpalain niini.
- Ang real-time nga pagtan-aw sa imong code posible. Wala kini magkinahanglan og compilation.
- Ang pag-eksperimento nagtugot kanimo nga makakat-on og bag-ong mga butang.
- Paghimo og gagmay nga mga kaso sa pagsulay aron pangitaon ug sulbaron ang mga problema.
- Ipakita ang imong katingalahang mga buhat.
- Paghimo ug pagtipig sa mga Pen para magamit sa ulahi.
- Sulayi ang code sa ubang mga developer ug tan-awa kini sa aksyon.
bentaha
- Sa pagsugod, wala’y gasto.
- Gitukod nga mga kapanguhaan sa pagkat-on.
- Pakigtambayayong sa uban ug itandi ang mga proyekto aron makita kung asa sila moadto sa umaabot.
- Ang UI yano nga gamiton ug prangka.
disadvantages
- Ang code library gamay ra, ang pagkompleto sa auto-code dili igo. Maayo lang kini alang sa usa ka panid nga mga proyekto ug dili makadumala sa bisan unsang mas dako.
- Sa CodePen, makahimo ka og mga pribadong pen, apan kinahanglan nimo nga mag-upgrade sa usa ka Pro membership ($9/bulan).
code sandbox
Ang CodeSandbox kay usa ka web-based nga code editor. Gi-automate niini ang transpiring, packaging, ug pagdumala sa dependency alang kanimo, nga nagtugot kanimo sa paghimo og bag-ong proyekto sa usa ka pag-klik. Human nimo mabuhat ang usa ka butang nga makaiikag, mahimo nimong ipaambit kini sa uban pinaagi lamang sa pagpaambit sa website.
Ang editor nahiuyon sa bisan unsang mga proyekto sa JavaScript, bisan kung kini adunay pipila nga mga bahin nga piho nga React, sama sa kapilian nga i-save ang proyekto sa usa ka template nga paghimo-react-app.
Ang bisan unsang proyekto nga imong gitukod sa CodeSandbox nagsugod sa usa ka template. Mahimo kini nga may kalabutan sa usa ka piho nga librarya, balangkas, o oras sa pagdagan (lakip ang Node.js) o mogamit yano nga mga standard nga teknolohiya sa web. Human sa pagpili sa usa ka template, ikaw ipadala ngadto sa editor, diin imong makita ang tanan nga gikinahanglan nga mga file ug ang preview nga bintana abli na.
Adunay ka access sa "file system" sa tanang Sandboxes, nga nagpasabot nga makahimo ka og bag-ong mga file, mogamit og modules (lakip ang NPM packages), ug makig-interact sa static assets. Adunay usab higayon nga usbon ang mga file sa pag-configure nga piho sa template.
Mahimo ka pa nga maghimo sa imong kaugalingon nga mga templates alang sa imong talagsaon nga kaso sa paggamit, kompleto sa istruktura sa file ug mga dependency, sama sa usa ka IDE. Tungod kay ang himan nalambigit sa Github, dali ka makamugna og mga commit ug bukas nga mga PR. Mahimo nimong i-deploy ang imong aplikasyon sa ZEIT o Netlify dayon.
CodeSandbox Team Pro
Ang CodeSandbox, usa ka Dutch nga negosyo nga nagtugot sa mga developers sa paghimo sa usa ka browser-based web app development sandbox, opisyal nga nagpagawas sa usa ka kolaborasyon plataporma nga nagtugot sa mga team sa pagtrabaho sa code sa panganod. Ang bag-ong produkto, ang Team Pro, usa ka solusyon nga walay code nga gihimo para sa kompleto nga mga team sa produkto, gikan sa mga tigdesinyo ug mga manedyer pinaagi sa mga team sa quality assurance (QA) ug sa unahan pa.
Ang mga proyekto gihatag sa usa ka user-friendly nga interface alang sa bisan kinsa nga gusto nga mohimo o modawat sa mga pagbag-o sa usa ka web application, paglikay sa mga alternatibong pamaagi sama sa pagpadala sa mga nota ug rekomendasyon sa mga developers aron ipatuman ang mga pagbag-o, ipasa kini balik alang sa diskusyon, ug sublion ang proseso.
Mga Key Features
- Usa ka web-based nga code editor ug prototype tool.
- Alang sa lokal nga paggamit, ang sandbox mahimong dali nga ma-download sa usa ka zip file.
- programming gihimo sa mga sandbox, nga mahimong dali nga ipaambit sa mga kauban sa trabaho.
bentaha
- Usa ka gipaayo nga kasinatian sa tiggamit ug labi nga pagkontrol sa editor.
- Ang live preview nga bahin mahimong usbon ug tan-awon sa usa ka bulag nga bintana.
- Ang code awtomatik nga giporma ug naglakip sa usa ka CLI (codesandbox-cli)
- Suporta alang sa mga advanced npm modules.
- Nindot nga mga mensahe sa sayup nga adunay mga rekomendasyon.
- Gipauswag niini ang kasinatian sa pag-debug pinaagi sa paghatag usa ka labing maayo nga terminal, tigtan-aw sa pagsulay, ug tigtan-aw sa isyu.
disadvantages
- Ang katapusan nga konsumidor nahayag sa daghang mga pag-personalize.
- Ang pag-drag ug paghulog sa mga file gikan sa usa ka lokal nga kompyuter dili molihok sa husto.
- Ang usa ka piho nga istruktura sa folder kinahanglan sundon sa CodeSandbox.
- Ang gamit sa usa ka pribadong sandbox magamit ra sa mga patron.
StackBlitz
Ang StackBlitz usa ka online IDE nga gipadagan sa Visual Studio Code alang sa mga aplikasyon sa web. Ang plataporma kay responsive ug adaptable sama sa desktop version. Ang StackBlitz usa ka online IDE nga na-pre-loaded Angular ug React mga himan sa pagpalambo.
Gibuhat sa Thinkster.io ang nindot nga proyekto aron mahimo kini nga yano kutob sa mahimo aron makasugod sa imong Angular o React nga proyekto nga dili kinahanglan mabalaka bahin sa pag-install sa dependency o paghimo sa mga setting. Naghatag ang StackBlitz og daghang katingad-an ug talagsaon nga mga bahin nga wala’y lain nga editor sa online code karon. Ingon usa ka sangputanan, angayan nga imbestigahan pa ang StackBlitz ug mahibal-an kung unsa ang gitanyag sa online nga IDE.
Ang Stackblitz hilabihan ka ikatandi sa kompleto nga IDE, ilabi na kung dili ka makapaalam sa VS code tungod kay ang himan gibase niini. Ang package adunay lain-laing mga bahin nga nagtugot kanimo sa pagsugod ug pagpadayon sa paghimo sa usa ka full-stack nga aplikasyon.
Ang programa gipadagan sa Visual Studio, nga ilado sa mga developers. Ang offline nga pag-edit mao ang talagsaong bahin sa proyekto. Aron mahimo kini nga posible, ang Stackblitz team naghimo ug in-browser webserver. Samtang nag-type ka, awtomatiko kini nga nag-install sa mga dependency, nag-compile, nag-bundle, ug naghimo og init nga pag-reload.
Premium Version
Ang Cadet, Astronaut, ug Commander magamit nga libre, $8/bulan, ug $29/bulan, matag usa. Ang Astronaut ug Commander naglakip sa daghang mga bahin sama sa walay kinutuban nga pribadong mga proyekto, walay kinutuban nga pag-upload sa file, pagdapit sa core team slack channel, ug uban pa. Para sa dugang nga impormasyon, tan-awa ang opisyal nga billing board.
Mga Key Features
- Pagdugang sa mga pakete sa NPM sa imong proyekto.
- Salamat sa usa ka nobela nga in-browser dev server, mahimo ka mag-edit samtang offline.
- Usa ka gi-host nga URL sa app nga nagtugot kanamo nga ma-access (ug ipaambit) ang among live app bisan unsang oras.
- Ang ubang bantog nga Visual Studio Code nga mga bahin naglakip sa Intellisense, Project Search (Cmd/Ctrl+P), Go to Definition, ug uban pa.
bentaha
- Ang mga kapabilidad sa Firebase alang sa pag-deploy.
- Ang editor dali ra gamiton ug labi ka dali.
- Ang mga tiggamit adunay access sa package.json, index.html, ug index.js.
- Mapaambit nga source code nga mahimo usab nga i-embed.
- Live preview sa usa ka dako nga seksyon sa panid, nga adunay kapilian sa pag-abli sa lain nga panid kung gikinahanglan.
- Samtang Offline, Pag-edit
- Maalamon nga mga pagkompleto ug gipaayo nga Intellisense.
- Ang kinauyokan sa Stackblitz mao ang Bukas nga tinubdan.
disadvantages
- Wala ka'y impluwensya sa bilding o sa developer server tungod kay kini gidumala sa command-react-app.
- Sa React, usa ka sukaranan nga istruktura sa folder kinahanglan nga obserbahan.
- Dili posible nga awtomatiko nga ma-format ang code, bisan kung mahimo kini nga mano-mano.
Panapos
Karong panahona, ang usa ka coding playground sama sa among nakita sa taas mahimong magamit sa hingpit nga paghimo sa bisan unsang proyekto sa web. Dili na kinahanglan nga mag-install ug masamok nga mga IDE sa imong PC kung mahimo ka nga magtukod, mag-debug, magsulay, ug mag-deploy direkta gikan sa imong web browser.
Sa akong opinyon, ang StackBlitz mao ang labing maayo sa taliwala nila tungod kay kini usa ka web-based nga IDE nga nagtugot sa JavaScript, Angular, ug uban pang mga proyekto sa pag-uswag gikan sa kahon, nga dili kinahanglan nga mag-install sa bisan unsang lokal nga mga palibot sa pag-uswag sama sa Node.js, npm, o Angular. Naghatag kini parehas nga kasinatian sama sa paggamit sa Visual Studio Code sa lokal. Sa tinuud, tungod kay ang StackBlitz gimaneho sa Visual Studio Code, gibati kini nga paspas ug daghag gamit sama sa bersyon sa desktop.
Asa sa CodePen, CodeSandbox, ug StackBlitz ang imong gamiton nga himan? Ipahibalo kanamo sa mga komento.
Abbatyya
Salamat niining maayo nga artikulo, sa dihang nakita nako ang stackblitz.com, nahibal-an ko nga kini ang akong gusto.