Ag obair air pròiseact iom-fhillte, ge bith a bheil thu nad phrògramadair eòlach no nad eòlaiche, tha e coltach gum bi thu a’ ruith thairis air duilgheadasan. Nuair a roinneadh tu do phròiseact ann am mòran mhodalan, bidh cùisean ag èirigh, ga dhèanamh nas duilghe lorg fhaighinn air mearachdan agus fuasglaidhean a lorg. Ann an suidheachaidhean eile, dh’ fhaodadh gum bi e duilich suidheachaidhean fa-leth a dhearbhadh leis nach do lorg thu am fuasgladh ceart air an duilgheadas air a bheil thu ag obair.
Bidh e cuideachd a 'tachairt mar phìos còd uaireannan, a dh' fhaodadh a bhith a 'coimhead iom-fhillte aig an àm. Tha JavaScript mar aon de na cànanan stèidhichte air an lìon a tha gu math sìmplidh ionnsachadh. Dìreach cuir air bhog am brabhsair deasg agad agus seòladh gu Innealan Luchd-leasachaidh (F12 mar as trice), agus tha thu deiseil! Faodaidh tu an uairsin feuchainn air JS gun a bhith feumach air bathar-bog iom-fhillte sam bith a stàladh no a ruith.
Gus tòiseachadh, chan eil agad ach brobhsair. Tha e mìorbhaileach an sìmplidheachd seo gu lèir a bhith a-mach às a’ bhogsa, ach bidh amannan ann nuair a bhios feum agad air barrachd. Mar eisimpleir, is dòcha gu bheil thu airson feuchainn air API Lìn ùr a lorg thu o chionn ghoirid ach nach eil thu airson pròiseact ùr a thòiseachadh.
Anns an dreuchd seo, nì sinn coimeas agus coimeas eadar na trì raointean-cluiche JS as mòr-chòrdte, CodePen, CodeSandbox, agus StackBlitz. Feuch an tòisich sinn!
CodePen
Tha innealan leasachaidh lìn Frontend an-còmhnaidh ag atharrachadh, agus tha luchd-deasachaidh teacsa nam pàirt mhòr de na teicneòlasan as ùire a nì beatha leasaiche nas sìmplidhe. A bharrachd air luchd-deasachaidh teacsa leotha fhèin leithid Atom no Notepad ++, tha spreadhadh air a bhith ann de luchd-deasachaidh stèidhichte air brabhsair anns na bliadhnachan mu dheireadh nach eil feumach air stàladh phrògraman agus a bhrosnaicheas barrachd co-obrachaidh.
Tha CodePen na “choimhearsnachd air-loidhne airson a bhith a’ dèanamh deuchainn agus a ’taisbeanadh chriomagan còd HTML, CSS, agus JavaScript a chruthaich luchd-cleachdaidh” a bheir seachad cothroman air leth airson ionnsachadh mar a sgrìobhas tu duilleagan lìn aghaidh nas fheàrr.
Bheir CodePen dhut dà “mhodh.” Is e a’ chiad fhear agus as cumanta am peann. Tha e cho sìmplidh ri bhith a’ briogadh air putan agus ga ghiùlan dìreach chun neach-deasachaidh. Às an sin, gheibh thu cothrom air pannal ro-shealladh a bharrachd air uinneagan deasachaidh HTML, CSS agus JS bunaiteach.
Chan eil “siostam faidhle,” “IntelliSense,” no dad sam bith eile ann - dìreach soilleireachadh co-chòrdadh sìmplidh agus òrdughan luath mar prettify. Anns an taba roghainnean, faodaidh tu taghadh bho raon cuibhrichte de ro-phròiseasan airson na trì cànanan (leithid TypeScript airson JS) no ceanglaichean a chuir ri stòran taobh a-muigh.
Mura h-eil feum agad ach air dad a dhèanamh an-asgaidh, bidh an dàrna cuid den luchd-deasachaidh gu leòr. Bhithinn a’ moladh CodePen airson rud sam bith nach eil feumach air tòrr rèiteachaidh no leabharlannan - dìreach HTML, CSS, agus JS le ro-phròiseasan roghnach air a’ mhullach. Ma tha thu airson an raon-cluiche a chleachdadh gus do làthaireachd meadhanan sòisealta adhartachadh no pasgan pearsanta a leasachadh, tha CodePen na roghainn nas fheàrr.
Premium Version
Tha beagan roghainnean eile agad airson taghadh bho CodePen. Ma phàigheas tu gach bliadhna, gheibh thu aon de thrì prìomh phlanaichean airson $12, $19, no $39 gach mìos. Faodaidh tu àireamh neo-chrìochnach de phinn, phuist agus cruinneachaidhean prìobhaideach a chruthachadh air gin de na trì ìrean.
Gheibh thu cuideachd baidse Pro (àrdachadh sòisealta), ruigsinneachd modh co-obrachaidh beò, gun sanasachd, agus barrachd. Tha cuideachd ro-innleachdan sònraichte ann airson sgioba agus eadar-dhealachaidhean thar-ìrean eile. Thoir sùil air a’ bhòrd cunntais oifigeil aca airson tuilleadh fiosrachaidh.
pRÌOMH CHOMHARRAN
A bharrachd air cruthachadh HTML, CSS, agus JavaScript ann an CodePen, tha beagan rudan eile ann a tha ga chuir air leth.
- Tha e comasach do chòd fhaicinn ann an àm fìor. Chan eil feum air cruinneachadh.
- Leigidh an deuchainn leat rudan ùra ionnsachadh.
- Cruthaich cùisean deuchainn beaga bìodach gus duilgheadasan a lorg agus dèiligeadh riutha.
- Seall na h-obraichean iongantach agad.
- Cruthaich agus stòraich pinn airson an cleachdadh nas fhaide air adhart.
- Feuch còd luchd-leasachaidh eile agus faic e ann an gnìomh.
buannachdan
- Airson tòiseachadh, chan eil cosgais ann.
- Goireasan ionnsachaidh togte.
- Co-obraich le daoine eile agus dèan coimeas eadar pròiseactan gus faicinn càite an tèid iad san àm ri teachd.
- Tha an UI sìmplidh a chleachdadh agus furasta.
Eas-bhuannachdan
- Tha an leabharlann còd beag, chan eil crìochnachadh còd fèin-ghluasadach iomchaidh. Tha e dìreach math airson pròiseactan aon-dhuilleag agus chan urrainn dha dad nas motha a làimhseachadh.
- Air CodePen, faodaidh tu pinn prìobhaideach a chruthachadh, ach feumaidh tu àrdachadh gu ballrachd Pro ($ 9 / mìos).
bogsa gainmhich còd
Tha CodeSandbox na dheasaiche còd stèidhichte air an lìon. Bidh e a’ dèanamh fèin-ghluasad air tar-chuir, pacadh, agus riaghladh eisimeileachd dhut, a’ toirt cothrom dhut pròiseact ùr a thogail le aon bhriogadh. Às deidh dhut rudeigin inntinneach a chruthachadh, faodaidh tu a roinneadh le daoine eile le bhith dìreach a’ roinn an làrach-lìn.
Tha an deasaiche co-chòrdail ri pròiseactan JavaScript sam bith, ged a tha e a’ toirt a-steach cuid de fheartan sònraichte React, leithid an roghainn am pròiseact a shàbhaladh ann an teamplaid cruthaich-react-app.
Tòisichidh pròiseact sam bith a thogas tu ann an CodeSandbox le teamplaid. Faodaidh e ceangal a dhèanamh ri leabharlann sònraichte, frèam-obrach, no ùine ruith (a’ gabhail a-steach Node.js) no cleachd teicneòlasan lìn àbhaisteach. Às deidh dhut teamplaid a thaghadh, thèid do chuir chun neach-deasachaidh, far am faigh thu a h-uile faidhle riatanach agus an uinneag ro-shealladh fosgailte mu thràth.
Tha cothrom agad air “siostam faidhle” anns a h-uile bogsa gainmhich, a tha a’ ciallachadh gum faod thu faidhlichean ùra a chruthachadh, modalan a chleachdadh (a’ toirt a-steach pasganan NPM), agus eadar-obrachadh le maoin statach. Tha cothrom ann cuideachd na faidhlichean rèiteachaidh a tha sònraichte don teamplaid atharrachadh.
Faodaidh tu eadhon na teamplaidean agad fhèin a thogail airson a’ chùis cleachdaidh shònraichte agad, le structar faidhle agus eisimeileachd, gu math coltach ri IDE. Leis gu bheil an inneal ceangailte ri Github, faodaidh tu geallaidhean a ghineadh gu sgiobalta agus PRn fhosgladh. Faodaidh tu an tagradh agad a chuir gu ZEIT no Netlify anns a’ bhad.
Sgioba CodeSandbox Pro
Tha CodeSandbox, gnìomhachas Duitseach a leigeas le luchd-leasachaidh bogsa gainmhich leasachaidh app lìn stèidhichte air brabhsair, air àrd-ùrlar co-obrachaidh fhoillseachadh gu h-oifigeil a leigeas le sgiobaidhean obrachadh air còd san sgòth. Tha an toradh ùr, Team Pro, na fhuasgladh gun chòd a chaidh a thogail airson sgiobaidhean toraidh iomlan, bho luchd-dealbhaidh agus manaidsearan gu sgiobaidhean gealltanas càileachd (QA) agus nas fhaide air falbh.
Tha pròiseactan air an toirt seachad ann an eadar-aghaidh furasta a chleachdadh airson neach sam bith a tha airson atharrachaidhean a dhèanamh no gabhail ri tagradh lìn, a’ seachnadh dhòighean eile leithid a bhith a’ cur notaichean agus molaidhean gu luchd-leasachaidh gus na h-atharrachaidhean a chuir an gnìomh, gan toirt air ais airson deasbad, agus ag ath-aithris a’ phròiseas.
pRÌOMH CHOMHARRAN
- Deasaiche còd stèidhichte air an lìon agus inneal prototype.
- Airson cleachdadh ionadail, faodar bogsa gainmhich a luchdachadh sìos gu furasta ann am faidhle zip.
- Programming air a dhèanamh ann am bogsaichean gainmhich, a dh'fhaodar a roinn gu furasta le luchd-obrach.
buannachdan
- Eòlas cleachdaiche nas fheàrr agus barrachd smachd air an deasaiche.
- Faodar am feart ro-shealladh beò atharrachadh agus fhaicinn ann an uinneag air leth.
- Tha an còd air a chruth gu fèin-ghluasadach agus a’ toirt a-steach CLI (codesandbox-cli)
- Taic airson modalan npm adhartach.
- Teachdaireachdan mearachd math le molaidhean.
- Bidh e ag adhartachadh an eòlas deasbaid le bhith a’ toirt seachad inneal-crìochnachaidh nas fheàrr, neach-seallaidh deuchainn, agus neach-seallaidh cùis.
Eas-bhuannachdan
- Tha an neach-cleachdaidh deireannach fosgailte do dh’ iomadh pearsanachadh.
- Chan eil slaodadh is leigeil às faidhlichean bho choimpiutair ionadail ag obrachadh ceart.
- Feumar structar pasgan sònraichte a leantainn ann an CodeSandbox.
- Chan eil gnìomhachd bogsa gainmhich prìobhaideach ri fhaighinn ach le luchd-taic.
StacBlitz
Tha StackBlitz na IDE air-loidhne le cumhachd Code Studio Visual airson tagraidhean lìn. Tha an àrd-ùrlar cho freagairteach agus cho sùbailte ris an dreach deasg. Is e IDE air-loidhne a th’ ann an StackBlitz a thig ro-luchdaichte leis Angular agus React innealan leasachaidh.
Thog Thinkster.io am pròiseact sgoinneil sin gus a dhèanamh cho sìmplidh ‘s a ghabhas airson tòiseachadh leis a’ phròiseact Angular or React agad gun a bhith draghail mu stàladh eisimeileachd no suidheachadh togail. Tha StackBlitz a’ toirt seachad mòran fheartan iongantach is sònraichte nach eil aig neach-deasachaidh còd air-loidhne sam bith eile an-dràsta. Mar thoradh air an sin, is fhiach tuilleadh sgrùdaidh a dhèanamh air StackBlitz agus faighinn a-mach dè a tha aig an IDE air-loidhne seo ri thabhann.
Tha Stackblitz gu math coltach ris an IDE iomlan, gu sònraichte mura h-urrainn dhut soraidh slàn le còd VS leis gu bheil an inneal stèidhichte air. Tha grunn fheartan anns a’ phacaid a leigeas leat tòiseachadh agus leantainn air adhart a’ cruthachadh tagradh làn-chruach.
Tha am prògram air a stiùireadh le Visual Studio, a tha ainmeil am measg luchd-leasachaidh. Is e deasachadh far-loidhne feart sònraichte a’ phròiseict. Gus seo a dhèanamh comasach, chruthaich sgioba Stackblitz frithealaiche lìn sa bhrobhsair. Mar a bhios tu a’ sgrìobhadh, bidh e gu fèin-obrachail a’ stàladh eisimeileachd, a’ cur ri chèile, a’ pasgadh, agus a’ dèanamh ath-luchdachadh teth.
Premium Version
Tha Cadet, Astronaut, agus Commander rim faighinn an-asgaidh, $ 8 / mìos, agus $ 29 / mìos, fa leth. Tha Astronaut and Commander a’ toirt a-steach grunn fheartan leithid pròiseactan prìobhaideach gun chrìoch, luchdachadh suas faidhle gun chrìoch, cuireadh gu sianal slack sgioba bunaiteach, agus mar sin air adhart. Airson tuilleadh fiosrachaidh, faic am bòrd-cunntais oifigeil.
pRÌOMH CHOMHARRAN
- A’ cur pacaidean NPM ris a’ phròiseact agad.
- Taing do fhrithealaiche dev in-browser ùr, faodaidh tu deasachadh fhad ‘s a tha thu far-loidhne.
- URL app aoigheachd a leigeas leinn faighinn chun app beò againn (agus a cho-roinn) aig àm sam bith.
- Tha feartan sònraichte Còd Stiùidio Lèirsinneach eile a’ toirt a-steach Intellisense, Rannsachadh Pròiseact (Cmd / Ctrl + P), Rach gu Mìneachadh, agus feadhainn eile.
buannachdan
- Comasan Firebase airson cleachdadh.
- Tha an deasaiche gu math furasta a chleachdadh agus gu math sgiobalta.
- Tha cothrom aig luchd-cleachdaidh air package.json, index.html, agus index.js.
- Còd stòr a ghabhas roinneadh a dh’ fhaodar a chuir a-steach cuideachd.
- Ro-shealladh beò air earrann mhòr den duilleag, leis an roghainn fosgladh air duilleag eile ma tha sin riatanach.
- Fhad ‘s a tha e far-loidhne, Deasachadh
- Crìochnachaidhean snasail agus Intellisense leasaichte.
- Tha cridhe Stackblitz open source.
Eas-bhuannachdan
- Chan eil buaidh agad air an togalach no air frithealaiche an leasaiche oir tha iad sin air an riaghladh leis an àithne create-react-app.
- Ann an React, bu chòir cumail ri structar pasgan bunaiteach.
- Chan eil e comasach cruth a chuir air còd gu fèin-ghluasadach, ged a tha e comasach a dhèanamh le làimh.
Co-dhùnadh
An-diugh, faodar raon-cluiche còdaidh mar an fheadhainn a chunnaic sinn gu h-àrd a chleachdadh gus pròiseact lìn sam bith a thogail gu tur. Cha bhith feum air IDEan trom a chuir a-steach air do PC nuair as urrainn dhut togail, dì-bhugachadh, deuchainn agus cleachdadh gu dìreach bhon bhrobhsair lìn agad.
Nam bheachd-sa, bhiodh StackBlitz na b’ fheàrr nam measg oir is e IDE stèidhichte air an lìon a th ’ann a leigeas le JavaScript, Angular, agus pròiseactan leasachaidh eile a-mach às a’ bhogsa, gun fheum air àrainneachdan leasachaidh ionadail leithid Node.js, npm, a chuir a-steach. or Angular. Tha e a’ toirt seachad an aon eòlas ri bhith a’ cleachdadh Visual Studio Code gu h-ionadail. Ann an da-rìribh, leis gu bheil StackBlitz air a stiùireadh le Visual Studio Code, tha e a’ faireachdainn cho luath agus cho ioma-chruthach ris an dreach deasg.
Dè de CodePen, CodeSandbox, agus StackBlitz a th’ anns an inneal agad? Leig fios dhuinn anns na beachdan.
Abbatyya
Tapadh leibh airson an artaigil sgoinneil seo, aon uair ‘s gum faca mi stackblitz.com, tha fios agam gur e seo a tha mi ag iarraidh.