Ka shaqaynta mashruuc adag, haddii aad tahay barnaamij-waxbarasheed khibrad leh ama mid cusub, waxa ay u badan tahay in aad la kulmi doonto dhibaatooyin. Markaad mashruucaaga u kala qaybiso qaybo badan, arrimo ayaa soo baxa, taas oo adkeynaysa in la raadiyo khaladaadka oo xal loo helo. Xaalado kale, qaladka dhacdooyinka gaarka ah waxay noqon kartaa mid adag sababtoo ah ma aadan helin xalka saxda ah ee dhibaatada aad ka shaqeyneysay.
Waxa kale oo ay u dhacdaa sidii gabal kood marmar, kaas oo u ekaan kara mid adag wakhtigaas. JavaScript waa mid ka mid ah luqadaha ku saleysan Shabakadda ee aadka u fudud in la barto. Si fudud u fur biraawsarkaaga miiska oo u gudub Aaladaha Horumarinta (badanaa F12), oo waad dhammaysay! Waxaad markaa tijaabin kartaa JS adigoon u baahnayn inaad rakibto ama socodsiiso wax software adag ah.
Si aad u bilowdo, waxa kaliya ee aad u baahan tahay waa browser. Waa wax cajiib ah in dhammaan fududaantan isla markiiba laga helo sanduuqa, laakiin waxaa jira marar aad u baahan tahay wax badan. Tusaale ahaan, ka soo qaad inaad rabto inaad tijaabiso Web API cusub oo aad dhawaan heshay laakiin aadan rabin inaad bilowdo mashruuc cusub.
Maqaalkan, waxaanu is barbardhigi doonaa oo isbarbar dhigi doonaa saddexda garoon ee ugu caansan JS, CodePen, CodeSandbox, iyo StackBlitz. Aan bilowno!
CodePen
Qalabka horumarinta webka ee Frontend had iyo jeer waa horumarayaan, iyo tifaftirayaasha qoraalku waa qayb weyn oo ka mid ah tignoolajiyada ugu dambeeyay ee ka dhigaya horumariyaha noloshiisa mid fudud. Marka laga reebo tafatirayaasha keligood ah sida Atom ama Notepad ++, waxaa jiray qarax tifaftirayaasha browser-ku-salaysan sannadihii la soo dhaafay kuwaas oo aan u baahnayn rakibidda barnaamijka oo kor u qaadaya wadashaqeyn weyn.
CodePen waa "bulshada khadka tooska ah ee tijaabinta iyo soo bandhigida isticmaale-abuuray HTML, CSS, iyo JavaScript qaybo code" oo bixiya fursado cajiib ah oo lagu barto sida loo qoro boggaga hore ee shabakada.
CodePen wuxuu ku siinayaa laba "hab" Ka ugu horreeya uguna badan ee la isticmaalo waa Qalinka. Way fududahay sida adigoo gujinaya badhanka oo si toos ah loogu qaadayaa tafatiraha. Halkaa, waxaad ka heli kartaa guddi horudhac ah iyo sidoo kale HTML aasaasiga ah, CSS, iyo daaqadaha tafatirka JS.
Ma jiro "nidaamka faylka," "IntelliSense," ama wax kale - kaliya muujinta syntax fudud iyo amarro degdeg ah sida prettify. Xulashada tab, waxaad ka dooran kartaa horudhacyaal xaddidan oo kala duwan dhammaan saddexda luqadood (sida TypeScript ee JS) ama waxaad ku dari kartaa xiriirinta ilaha dibadda.
Haddii aad u baahan tahay kaliya wax lagu sameeyo bilaash, mid ka mid ah tifaftirayaasha ayaa ku filnaan doona. Waxaan u soo jeedin lahaa CodePen wax kasta oo aan u baahnayn wax badan oo habayn ama maktabado - si fudud HTML, CSS, iyo JS oo leh ikhtiyaari hore-processors ee sare. Haddii aad rabto inaad ka faa'ideysato goobta ciyaarta si aad u horumariso joogitaankaaga warbaahinta bulshada ama aad u horumariso faylal shakhsiyeed, CodePen waa ikhtiyaarka ugu fiican.
Nooca Premium
Waxaad haysataa dhawr door oo kale oo aad ka dooran karto CodePen. Haddii aad bixiso sannadkii, waxaad heli kartaa mid ka mid ah saddexda qorshe ee caymiska ah $12, $19, ama $39 bishiiba. Waxaad samayn kartaa tiro aan xad lahayn oo ah qalimaan gaar ah, dhejisyo, iyo ururin mid kasta oo ka mid ah saddexda heer.
Waxa kale oo aad heli doontaa summada Pro (kor u qaadida bulsheed), gelitaanka habka wada shaqaynta tooska ah, xayaysiis la'aan, iyo in ka badan. Waxa kale oo jira xeelado koox-gaar ah oo gaar ah iyo kala duwanaansho kale oo heer-sare ah. Ka eeg guddida qaansheegadka rasmiga ah wixii macluumaad dheeraad ah
Features Key
Marka laga reebo abuurista HTML, CSS, iyo JavaScript ee CodePen, waxaa jira dhowr waxyaalood oo kale oo gooni ah.
- Daawashada wakhtiga dhabta ah ee koodkaaga waa suurtagal. Uma baahna isku dubarid.
- Tijaabadu waxay kuu ogolaanaysaa inaad barato waxyaabo cusub.
- Abuur kiisas tijaabo oo yaryar si aad u raadiso oo aad wax uga qabato dhibaatooyinka.
- Muuji shuqulladaada yaabka leh.
- Abuur oo kaydi Qalimaan si hadhow loo isticmaalo.
- Isku day koodka horumariyeyaasha kale oo arag isagoo ficil ku jira.
Faa'iidada
- Si loo bilaabo, ma jiraan wax kharash ah.
- Ilaha waxbarashada lagu dhex dhisay.
- La kaasho kuwa kale oo barbar dhig mashaariicda si aad u aragto halka ay aadi karaan mustaqbalka.
- UI waa fududahay in la isticmaalo oo toos ah.
Qasaaraha
- Maktabada koodku waa yar yahay, buuxinta koodka iswada ah kuma filna. Waxay u fiican tahay mashaariicda hal bog ka kooban mana xamili karto wax ka weyn.
- On CodePen, waxaad ka abuuri kartaa qalimaan gaar ah, laakiin waxaad u baahan doontaa inaad u cusboonaysiiso xubinimada Pro ($9/bishii).
sanduuqa sanduuqa code
CodeSandbox waa tifaftire kood ku salaysan mareegaha. Waxay otomaatig u tahay soo gudbinta, baakaynta, iyo maamulka ku-tiirsanaanta, taasoo kuu oggolaanaysa inaad dhisto mashruuc cusub oo hal gujin ah. Ka dib markaad abuurto wax soo jiidasho leh, waxaad la wadaagi kartaa kuwa kale adigoo si fudud u wadaagaya mareegaha.
Tifaftiruhu wuxuu la jaan qaadayaa mashruuc kasta oo JavaScript ah, in kasta oo ay ku jiraan astaamo gaar ah oo falcelin-celin ah, sida ikhtiyaarka lagu badbaadinayo mashruuca qaab-abuur-celin-app.
Mashruuc kasta oo aad ku dhisto CodeSandbox wuxuu ku bilaabmaa qaab-dhismeedka. Waxay la xidhiidhi kartaa maktabad gaar ah, qaab-dhismeedka, ama runtime (ay ku jirto Node.js) ama waxay isticmaali kartaa tignoolajiyada shabakada caadiga ah. Ka dib markii aad doorato template, waxaa laguu soo diri tifaftiraha, halkaas oo aad ka heli doontaa dhammaan faylasha lagama maarmaanka ah iyo daaqada horudhac ah oo hore u furmay.
Waxaad geli kartaa "nidaamka faylka" dhammaan Sanduuqyada Sanduuqyada, taas oo macnaheedu yahay inaad abuuri karto faylal cusub, isticmaal qaybo (oo ay ku jiraan xirmooyinka NPM), oo aad la falgasho hantida taagan. Waxa kale oo jirta fursad ah in wax laga beddelo faylalka qaabeynta u gaarka ah template-ka.
Waxa laga yaabaa inaad xitaa u dhisto habab adiga kuu gaar ah kiiskaaga gaarka ah, oo u dhamaystiran qaab-dhismeedka faylka iyo ku-tiirsanaanta, sida IDE-ga. Sababtoo ah qalabku wuxuu ku xiran yahay Github, waxaad si degdeg ah u abuuri kartaa ballanqaad oo aad furto PRs. Waxaad codsigaaga geyn kartaa ZEIT ama Netlify isla markaaba.
Kooxda CodeSandbox Pro
CodeSandbox, oo ah ganacsi Nederlaan ah oo u oggolaanaya horumariyeyaasha inay dhisaan sanduuqa horumarinta app webka ee browser-ku-saleysan, ayaa si rasmi ah u sii daayay madal wadashaqeyn oo u oggolaaneysa kooxaha inay ku shaqeeyaan koodka daruuraha. Alaabada cusub, Kooxda Pro, waa xal aan-kood ah oo loo dhisay kooxo wax soo saar oo dhammaystiran, oo u dhexeeya naqshadeeyayaasha iyo maamulayaasha iyada oo loo marayo kooxaha hubinta tayada (QA) iyo wixii ka dambeeya.
Mashruucyada waxaa lagu bixiyaa is-dhexgal isticmaale-saaxiibtinimo ah qof kasta oo raba inuu sameeyo ama aqbalo isbeddellada arjiga shabakadda, ka fogaanshaha hababka kale sida u dirida qoraallada iyo talooyinka horumariyeyaasha si ay u fuliyaan isbeddellada, dib ugu soo celinta wadahadalka, iyo ku celcelinta habka.
Features Key
- Tifaftir kood ku salaysan mareegaha iyo aaladaha tusaalaha
- Isticmaalka gudaha, sanduuqa ciid ayaa si fudud loogu soo dejisan karaa faylka zip-ka.
- barnaamijyada waxa lagu sameeyaa sanduuqyo ciid ah, kuwaas oo si diyaar ah loola wadaagi karo asxaabta.
Faa'iidada
- Khibrad isticmaale oo la wanaajiyey iyo xakameyn weyn oo lagu hayo tifaftiraha.
- Muuqaalka muuqaalka tooska ah waa la beddeli karaa oo lagu arki karaa daaqad gaar ah.
- Koodhka si toos ah ayaa loo qaabeeyey waxaana ku jira CLI (codesandbox-cli)
- Taageerada modules npm horumarsan.
- Farriimaha khaladka fiican oo leh talooyin
- Waxay wanaajisaa waayo-aragnimada wax-ka-hortagga iyadoo bixisa terminal ka wanaagsan, tijaabiye, iyo arrin daawade.
Qasaaraha
- Macaamilka ugu dambeeya wuxuu la kulmaa shaqsiyaynta badan.
- Jiid iyo ka ridi faylalka kombayutarka maxaliga ah si sax ah uma shaqeeyo.
- Qaab dhismeedka gal gaar ah waa in lagu raacaa CodeSandbox.
- Shaqaynta sanduuqa ciid gaar ahaaneed waxa heli kara macaamiisha
StackBlitz
StackBlitz waa IDE khadka tooska ah ee Codsiyada Studio-ga ee codsiyada webka. Madalku waa mid u jawaaba oo la qabsan kara sida nooca desktop-ka. StackBlitz waa IDE online ah oo horay loo sii raray Xaglo iyo falcelin qalabka horumarinta.
Thinkster.io waxay dhistay mashruucaas cajiibka ah si ay ugu fududaato sida ugu macquulsan ee lagu bilaabi karo mashruucaaga xagal ama falcelinta adoon ka welwelin rakibaadda ku tiirsanaanta ama dhisitaanka goobaha. StackBlitz wuxuu bixiyaa astaamo badan oo cajiib ah oo gaar ah oo aan lahayn tifaftiraha koodka khadka tooska ah hadda. Natiijo ahaan, waxaa habboon in la sii baaro StackBlitz oo la ogaado waxa IDE-ga khadka tooska ah uu bixiyo.
Stackblitz aad buu ula mid yahay IDE-ga oo dhammaystiran, gaar ahaan haddii aadan macsalaamayn karin koodhka VS sababtoo ah qalabku isagaa ku salaysan. Xirmadu waxay leedahay sifooyin kala duwan oo kuu oggolaanaya inaad bilowdo oo aad sii waddo abuurista codsi buuxa.
Barnaamijka waxaa ku shaqeeya Visual Studio, kaas oo caan ka ah horumariyeyaasha. Tafatirka khadka tooska ah waa muuqaalka muuqda ee mashruuca. Si tan loo suurto geliyo, kooxda Stackblitz waxay abuureen browser-ka shabakadeed. Markaad wax ku qorto, waxay si toos ah u rakibtaa ku-tiirsanaanta, ururinaysaa, xidhmooyinkeeda, oo waxay samaynaysaa dib u dejin kulul.
Nooca Premium
Cadet, Astronaut, iyo Taliyaha ayaa lagu heli karaa bilaash, $8/bishii, iyo $29/bishii, siday u kala horreeyaan. Astronaut iyo Taliyaha waxa ku jira tiro astaamo ah sida mashaariic gaar ah oo aan xadidnayn, galitaanka faylalka aan xadidnayn, martiqaad kanaalka caajiska ah ee kooxda aasaasiga ah, iyo wixii la mid ah. Wixii macluumaad dheeraad ah, eeg guddiga qaansheegadka ee rasmiga ah.
Features Key
- Ku darida xirmooyinka NPM mashruucaaga.
- Thanks to novel in-browser dev server, waxaad wax ka beddeli kartaa adigoo offline ah.
- URL abka la marti galiyay oo noo ogolanaya inaanu galno (oo wadaagno) abkayaga si toos ah wakhti kasta.
- Tilmaamaha kale ee Visual Studio Code ee caanka ah waxaa ka mid ah Intellisense, Project Search (Cmd/Ctrl+P), Go to Definition, iyo kuwo kale.
Faa'iidada
- Awoodaha Firebase ee geynta
- Tifaftiruhu runtii waa fududahay in la isticmaalo oo aad u degdeg badan.
- Isticmaalayaashu waxay marin u heli karaan pack.json, index.html, iyo index.js.
- Koodhka isha la wadaagi karo oo sidoo kale lagu dhex dari karo
- Aragtida tooska ah ee qayb weyn oo ka mid ah bogga, oo leh ikhtiyaarka lagu furo bog kale haddii loo baahdo.
- Inta Aan Khadka Lahayn, Tafatirin
- Dhammaystir wanaagsan iyo indheergaradnimada la hagaajiyay.
- Xudunta u ah Stackblitz waa ilo furan.
Qasaaraha
- Saamayn kuma lihid dhismaha ama serfarka horumariyaha sababtoo ah kuwa waxaa maamula amarka-crea-react-app.
- Falcelinta, qaab-dhismeedka galka aasaasiga ah waa in la ilaaliyaa.
- Suurtagal maaha in si toos ah loo qaabeeyo koodka, in kasta oo ay suurtogal tahay in gacanta lagu sameeyo.
Ugu Dambeyn
Maalmahan, garoon codeed sida kuwa aan kor ku soo aragnay ayaa laga yaabaa in loo isticmaalo in si buuxda loo dhiso mashruuc kasta oo shabakad ah. Looma baahna in lagu rakibo IDE-yada dhibka badan kombuyutarkaaga marka aad dhisi karto, ka saari karto, tijaabin karto, oo aad si toos ah uga diri karto biraawsarkaaga.
Fikradayda, StackBlitz ayaa ugu fiicnaan lahayd iyaga dhexdooda sababtoo ah waa IDE-ku-salaysan webka kaas oo u oggolaanaya JavaScript, Angular, iyo mashaariicda kale ee horumarinta si sax ah sanduuqa, iyada oo aan loo baahnayn in lagu rakibo deegaan horumarineed oo maxalli ah sida Node.js, npm, ama xagal. Waxay bixisaa khibrad la mid ah isticmaalka Visual Studio Code gudaha. Xaqiiqda, sababtoo ah StackBlitz waxaa wata Visual Studio Code, waxay dareemeysaa mid dhakhso badan oo la taaban karo sida nooca desktop-ka.
Midkee ka mid ah CodePen, CodeSandbox, iyo StackBlitz ayaa ah qalabka aad tagto? Noogu sheeg faallooyinka.
Abbatyya
Waad ku mahadsan tahay maqaalkan weyn, mar aan arkay stackblitz.com, waan ogahay in tani ay tahay waxa aan rabo.