Kushanda purojekiti yakaoma, ungave uri mugadziri wepurogiramu ane ruzivo kana mutsva, iwe ungangosangana nematambudziko. Paunotsemura purojekiti yako mumamodule akawanda, nyaya dzinomuka, zvichiita kuti zvinyanye kunetsa kuronda zvikanganiso nekuwana mhinduro. Mune mamwe mamiriro ezvinhu, kugadzirisa mamiriro ega ega kunogona kuve kwakaoma nekuti hausati wawana mhinduro chaiyo kudambudziko rawanga uchishanda.
Izvo zvinoitikawo sechidimbu chekodhi pane dzimwe nguva, iyo inogona kutaridzika yakaoma panguva iyoyo. JavaScript ndeimwe yemitauro yakavakirwa paWebhu iri nyore kwazvo kudzidza. Ingo vhura desktop yako browser uye enda kune Developer Tools (kazhinji F12), uye wapedza! Unogona kuyedza neJS usingade kuisa kana kumhanyisa chero software yakaoma.
Kuti utange, zvese zvaunoda ibrowser. Zvinofadza kuve zvese izvi zviri nyore kunze kwebhokisi, asi pane nguva dzaunoda zvimwe. Semuyenzaniso, tomboti unoda kuyedza neWeb API itsva yawachangobva kuwana asi usingade kutanga chirongwa chitsva.
Mune ino positi, tichafananidza nekusiyanisa matatu anonyanya kufarirwa JS nhandare, CodePen, CodeSandbox, uye StackBlitz. Ngatitangei!
CodePen
Frontend webhu kuvandudza maturusi anogara achishanduka, uye vapepeti vemavara chinhu chikuru cheazvino matekinoroji anoita kuti hupenyu hwemugadziri hureruke. Kunze kwekumira-yega mameseji edhita akadai seAtom kana Notepad ++, kwave nekuputika kwebrowser-based edhita mumakore achangopfuura izvo zvisingade kuisirwa chirongwa uye kukurudzira kubatana kukuru.
CodePen i "online nharaunda yekuyedza uye kuratidza-yakagadzirwa mushandisi HTML, CSS, uye JavaScript kodhi snippets" inopa inoshamisa mikana yekudzidza kunyora emberi mapeji ewebhu zvirinani.
CodePen inokupa maviri "modes". Yekutanga uye inonyanya kushandiswa iPeni. Zviri nyore sekudzvanya bhatani uye kutakurwa kuenda kupepeta. Kubva ipapo, unogona kuwana preview panel pamwe neiyo yakakosha HTML, CSS, uye JS editing windows.
Iko hakuna "faira sisitimu," "IntelliSense," kana chero chinhu - ingori nyore syntax kuratidza uye nekukurumidza mirairo senge prettify. Mune iyo sarudzo tebhu, unogona kusarudza kubva kune yakaganhurirwa huwandu hwevagadziri vemitauro mitatu yese (seTypeScript yeJS) kana kuwedzera zvinongedzo kune zvekunze zvinyorwa.
Kana iwe uchingoda chero chinhu chiitwe mahara, chero yevapepeti inokwana. Ini ndingakurudzira CodePen kune chero chinhu chisingade yakawanda yekuseta kana maraibhurari - kungoti HTML, CSS, uye JS ine sarudzo pre-processors pamusoro. Kana iwe uchida kushandisa nhandare yekutamba kuti uvandudze kuvepo kwako pasocial media kana kugadzira yako portfolio, CodePen iri nani sarudzo.
Premium Version
Iwe une dzimwe nzira shoma dzekusarudza kubva paCodePen. Kana iwe uchibhadhara gore negore, unogona kuwana chimwe chezvirongwa zvitatu zvekutanga zvemadhora gumi nemaviri, $12, kana $19 mwedzi wega wega. Iwe unogona kugadzira isingaperi nhamba yeakavanzika mapeni, mapositi, uye kuunganidzwa pane chero matatu matatu matairi.
Iwe zvakare unogashira iyo Pro bheji (social boost), live collab mode kuwana, hapana kushambadza, nezvimwe. Kune zvakare mamwe marongero akanangana nechikwata uye kumwe kuchinjika-tier misiyano. Tarisa bhodhi ravo rekubhadhara repamutemo kuti uwane rumwe ruzivo.
Key Features
Kunze kwekugadzira HTML, CSS, uye JavaScript muCodePen, pane zvimwe zvinhu zvishoma zvinoimisa.
- Chaiyo-nguva yekuona kodhi yako inogoneka. Hazvidi kuunganidzwa.
- Kuedza kunobvumira iwe kudzidza zvinhu zvitsva.
- Gadzira makesi madiki ekuyedza kutsvaga uye kugadzirisa matambudziko.
- Ratidzai mabasa enyu anoshamisa.
- Gadzira uye chengetedza Zvinyoreso zvekushandisa gare gare.
- Edza kodhi yevamwe vanogadzira uye uone ichiita.
Advantages
- Kutanga, hapana muripo.
- Zvishandiso zvekudzidza zvakavakwa.
- Batira pamwe nevamwe uye enzanisa mapurojekiti kuti uone kwaanogona kuenda mune ramangwana.
- Iyo UI iri nyore kushandisa uye yakatwasuka.
payakaipira
- Iyo kodhi raibhurari idiki, auto-code kupedzisa haina kukwana. Yakangonakira mapurojekiti epeji rimwe chete uye haigone kubata chero chinhu chikuru.
- PaCodePen, unogona kugadzira zvinyoreso zvepachivande, asi iwe uchafanirwa kukwidziridza kuve nhengo yePro (9 $ / mwedzi).
code sandbox
CodeSandbox ndeyewebhu-yakavakirwa kodhi kodhi. Inoita otomatiki kufambisa, kurongedza, uye kutsamira manejimendi yako, ichikubvumidza iwe kuvaka purojekiti nyowani nekudzvanya kumwe chete. Mushure mekugadzira chimwe chinhu chinonakidza, unogona kuchigovana nevamwe nekungogovera webhusaiti.
Iyo mupepeti inoenderana nechero JavaScript mapurojekiti, kunyangwe ichisanganisira mamwe maReact-chaiwo maficha, senge sarudzo yekuchengetedza purojekiti mukugadzira-react-app template.
Chero chirongwa chaunovaka muCodeSandbox chinotanga ne template. Inogona kuenderana neraibhurari chaiyo, chimiro, kana nguva yekumhanya (kusanganisira Node.js) kana kushandisa yakajairwa webhu tekinoroji. Mushure mekusarudza template, unotumirwa kumupepeti, kwaunowana ese mafaera anodiwa uye hwindo rekuona rakatovhurwa.
Iwe unokwanisa kuwana "faira system" mumabhokisi ese eSandbox, zvinoreva kuti unogona kugadzira mafaera matsva, shandisa mamodule (kusanganisira NPM mapakeji), uye kupindirana nezvinhu zvakamira. Kune zvakare mukana wekugadzirisa iyo template-chaiyo configuration mafaira.
Iwe unogona kutogadzira ako ega matemplate kune yako yakasarudzika yekushandisa-kesi, izere nefaira chimiro uye zvinoenderana, senge muIDE. Nekuti chishandiso chakabatana neGithub, unogona kukurumidza kugadzira macommit uye kuvhura PRs. Unogona kutumira chikumbiro chako kuZEIT kana Netlify ipapo ipapo.
CodeSandbox Team Pro
CodeSandbox, bhizinesi reDutch rinobvumira vanogadzira kuvaka browser-based web application development sandbox, yakaburitsa zviri pamutemo chikuva chekubatana chinobvumira zvikwata kushanda pakodhi mugore. Chigadzirwa chitsva, Chikwata Pro, mhinduro isina-kodhi yakavakirwa zvikwata zvechigadzirwa zvakakwana, kubva kuvagadziri uye mamaneja kuburikidza nemhando yekusimbisa (QA) zvikwata nekupfuura.
Mapurojekiti anopihwa mushandisi-ane hushamwari interface kune chero munhu anoda kuita kana kugamuchira shanduko kuwebhu application, kudzivirira dzimwe nzira dzakadai sekutumira manotsi uye kurudziro kune vanogadzira kuti vagadzirise shanduko, vadzose kukurukura, uye kudzokorora maitiro.
Key Features
- Webhu-yakavakirwa kodhi mupepeti uye prototype chishandiso.
- Kuti ishandiswe munharaunda, bhokisi rejecha rinogona kutorwa zviri nyore muzip faira.
- zvirongwa inoitwa mumabhokisi ejecha, ayo anogona kugoverwa nyore nyore nevaunoshanda navo.
Advantages
- Kuvandudzwa kwemushandisi ruzivo uye kutonga kukuru pamusoro pemupepeti.
- Iyo mhenyu yekutarisa ficha inogona kugadziridzwa uye kutariswa mune imwe hwindo.
- Iyo kodhi inongogadzirwa otomatiki uye inosanganisira CLI (codesandbox-cli)
- Tsigiro yepamberi npm module.
- Yakanaka mameseji ekukanganisa ane kurudziro.
- Iyo inovandudza ruzivo rwekugadzirisa nekupa iri nani terminal, bvunzo yekuona, uye inoburitsa muoni.
payakaipira
- Mutengi wekupedzisira anoratidzwa kune akawanda personalizations.
- Dhonza uye udonhedze mafaira kubva pakombuta yeko haashande nemazvo.
- Imwe folda chimiro chinofanira kuteverwa muCodeSandbox.
- Iko kushanda kwebhokisi rejecha rakavanzika rinongowanikwa kune vatengesi.
StackBlitz
StackBlitz iVisual Studio Code-powered online IDE yewebhu maapplication. Iyo puratifomu inopindura uye inochinjika senge desktop desktop. StackBlitz ndeye online IDE inouya yakaremerwa nayo Angular uye React maturusi ebudiriro.
Thinkster.io yakavaka iro rakanakisa purojekiti kuti zviite nyore sezvinobvira kuti utange neAngular yako kana React purojekiti pasina kunetseka nezve kutsamira kuisirwa kana kuvaka marongero. StackBlitz inopa akawanda anoshamisa uye akasiyana maficha asina imwe online kodhi kodhi ine izvozvi. Nekuda kweizvozvo, zvakakosha kuti uongorore StackBlitz mberi uye uwane izvo IDE iyi yepamhepo inopa.
Stackblitz inofananidzwa zvakanyanya neIDE yakazara, kunyanya kana iwe usingakwanise kutaura zvakanaka kune VS kodhi nekuti chishandiso chakavakirwa pairi. Iyo pasuru ine akasiyana maficha anobvumidza iwe kutanga uye kuenderera mberi nekugadzira yakazara-stack application.
Chirongwa ichi chinofambiswa neVisual Studio, iyo inozivikanwa kwazvo pakati pevagadziri. Kugadzirisa pasina Indaneti ndicho chinhu chinonyanya kukosha chepurojekiti. Kuti izvi zvigoneke, timu yeStackblitz yakagadzira in-browser webserver. Paunenge uchinyora, inoisa otomatiki zvinotsamira, inounganidza, masumbu, uye inoita inopisa zvakare.
Premium Version
Cadet, Astronaut, uye Commander anowanikwa mahara, $8/mwedzi, uye $29/mwedzi, zvichiteerana. Astronaut uye Commander inosanganisira akati wandei maficha senge asina muganho akavanzika mapurojekiti, asina muganho faira kurodha, kukoka kune yakakosha timu slack chiteshi, zvichingodaro. Kuti uwane rumwe ruzivo, ona bhodhi repamutemo rekubhadharisa.
Key Features
- Kuwedzera NPM mapakeji kupurojekiti yako.
- Nekuda kweinovhuro mu-browser dev server, unogona kugadzirisa usiri pamhepo.
- Iyo yakagarwa app URL inotibvumidza kuwana (uye kugovera) yedu yekurarama app chero nguva.
- Zvimwe zvinozivikanwa Visual Studio Code maficha anosanganisira Intellisense, Project Search (Cmd/Ctrl+P), Enda kune Tsanangudzo, nevamwe.
Advantages
- Kugona kweFirebase kwekutumira.
- Iyo edhita iri nyore kushandisa uye nekukurumidza zvakanyanya.
- Vashandisi vanokwanisa kuwana package.json, index.html, uye index.js.
- Shareable source code iyo inogonawo kuiswa.
- Rarama tarisisa pane yakakura chikamu peji, ine sarudzo yekuvhura pane imwe peji kana zvichidikanwa.
- Ndichiri Offline, Kugadzirisa
- Smart kupedzisa uye yakagadziridzwa Intellisense.
- Iyo yakakosha yeStackblitz ndeye open source.
payakaipira
- Iwe hauna pesvedzero pamusoro pechivako kana sevhavha yekuvandudza nekuti izvo zvinotungamirwa nekugadzira-react-app command.
- MuReact, yakakosha folda chimiro chinofanirwa kucherechedzwa.
- Izvo hazvigoneke kufomati kodhi otomatiki, kunyangwe zvichikwanisika kuzviita nemaoko.
mhedziso
Mazuva ano, nzvimbo yekutamba yemakodha yakafanana neyatakaona pamusoro inogona kushandiswa kugadzira chero webhu purojekiti. Iko hakuna chikonzero chekuisa anorema IDE paPC yako kana iwe uchigona kuvaka, kugadzirisa, kuyedza, uye kutumira zvakananga kubva pawebhu browser yako.
Sekuona kwangu, StackBlitz ingave yakanyanya kunaka pakati pavo nekuti iwebhu-based IDE inobvumira JavaScript, Angular, uye mamwe mapurojekiti ebudiriro kunze kwebhokisi, pasina chikonzero chekuisa chero nharaunda dzebudiriro senge Node.js, npm, kana Angular. Inopa chiitiko chimwechete sekushandisa Visual Studio Code munharaunda. Muchokwadi, nekuti StackBlitz inofambiswa neVisual Studio Code, inonzwa inokurumidza uye inogoneka senge desktop desktop.
Ndeipi yeCodePen, CodeSandbox, uye StackBlitz ndiyo yako yekushandisa? Tizivise mumashoko.
Abbatyya
Ndatenda nechinyorwa ichi chikuru, pandakangoona stackblitz.com, ndoziva kuti izvi ndizvo zvandinoda.