Na-arụ ọrụ dị mgbagwoju anya, ma ị bụ onye mmemme nwere ahụmahụ ma ọ bụ onye ọhụrụ, ọ fọrọ nke nta ka ọ bụrụ na ị ga-enwe nsogbu. Mgbe ị na-ekewa ọrụ gị n'ime ọtụtụ modul, nsogbu na-ebilite, na-eme ka ọ dịkwuo ike ịchọta njehie na ịchọta ngwọta. N'ọnọdụ ndị ọzọ, imezi ihe n'otu n'otu nwere ike isi ike n'ihi na ị chọpụtabeghị ụzọ kwesịrị ekwesị maka nsogbu ahụ ị na-arụ ọrụ.
Ọ na-apụtakwa dị ka mpempe koodu n'oge, nke nwere ike ịdị mgbagwoju anya n'oge ahụ. Javascript bụ otu n'ime asụsụ ndị dabere na Weebụ nke dị oke mfe ịmụta. Naanị malite ihe nchọgharị desktọpụ gị wee gaa na Ngwaọrụ Mmepụta (na-abụkarị F12), ị mechara! Ị nwere ike ịnwale JS na-enweghị mkpa ịwụnye ma ọ bụ mee ngwa ngwa ọ bụla mgbagwoju anya.
Iji malite, naanị ihe ị chọrọ bụ ihe nchọgharị. Ọ bụ ihe magburu onwe ya ịnweta ihe a niile dị mfe ozugbo na igbe, mana enwere oge mgbe ịchọrọ karịa. Dịka ọmụmaatụ, were ya na ịchọrọ iji API Weebụ ọhụrụ nke ị chọpụtala na nso nso a mana ị chọghị ịmalite ọrụ ọhụrụ.
Na post a, anyị ga-atụnyere ma tụnye ọdịiche dị n'ebe egwuregwu JS atọ kachasị ewu ewu, CodePen, CodeSandbox, na StackBlitz. Ka anyị malite!
CodePen
Ngwá ọrụ mmepe webụ Frontend na-agbanwe mgbe niile, ndị editọ ederede bụ nnukwu akụkụ nke teknụzụ kachasị ọhụrụ na-eme ka ndụ onye nrụpụta dị mfe. Ewezuga ndị na-edezi ederede kwụ ọtọ dị ka Atom ma ọ bụ Notepad ++, enweela mgbawa nke ndị na-edezi ihe nchọgharị n'afọ ndị na-adịbeghị anya na-achọghị ntinye mmemme ma kwalite mmekorita ka ukwuu.
CodePen bụ "ogbe dị n'ịntanetị maka ịnwale na igosi HTML, CSS, na Javascript koodu snippets nke onye ọrụ mepụtara" nke na-enye ohere dị egwu ịmụta ka esi ede ibe weebụ n'ihu nke ọma.
CodePen na-enye gị "ụdịdị" abụọ. Nke mbụ na nke a na-ejikarị bụ Pen. Ọ dị mfe dị ka ịpị bọtịnụ na ibuga ya na onye ndezi. Site n'ebe ahụ, ị nwere ike ịnweta panel nlele yana HTML, CSS, na JS na-edezi windo.
Enweghị “sistemụ faịlụ,” “IntelliSense,” ma ọ bụ ihe ọ bụla ọzọ - naanị ịkọwapụta syntax dị mfe yana iwu ngwa ngwa dị ka mma. Na taabụ nhọrọ, ị nwere ike họrọ site na mmachi nke preprocessors maka asụsụ atọ niile (dị ka TypeScript maka JS) ma ọ bụ tinye njikọ na isi mmalite mpụga.
Ọ bụrụ na ịchọrọ naanị ihe ọ bụla emere n'efu, nke ọ bụla n'ime ndị editọ ga-ezuru ya. M ga-atụ aro CodePen maka ihe ọ bụla na-achọghị ọtụtụ nhazi ma ọ bụ ọba akwụkwọ - naanị HTML, CSS, na JS nwere ndị na-ebu ụzọ nhazi nhọrọ n'elu. Ọ bụrụ n’ịchọrọ iji ebe egwuregwu iji meziwanye ọnụnọ mgbasa ozi ọha gị ma ọ bụ mepụta pọtụfoliyo nkeonwe, CodePen bụ nhọrọ ka mma.
Adịghị elu Version
Ị nwere ụzọ ọzọ ole na ole ịhọrọ site na CodePen. Ọ bụrụ na ị na-akwụ ụgwọ kwa afọ, ị nwere ike nweta otu n'ime atụmatụ adịchaghị atọ maka $12, $19, ma ọ bụ $39 kwa ọnwa. Ị nwere ike ịmepụta ọnụ ọgụgụ na-enweghị ngwụcha nke pensụl, akwụkwọ ozi, na mkpokọta na nke ọ bụla n'ime ọkwa atọ ahụ.
Ị ga-enwetakwa baajị Pro (nkwalite mmekọrịta mmadụ na ibe ya), ịnweta ọnọdụ imekọ ọnụ, enweghị mgbasa ozi na ndị ọzọ. Enwekwara ụfọdụ atụmatụ otu kpọmkwem na ndịiche n'ọkwa ndị ọzọ. Lelee bọọdụ ịgba ụgwọ gọọmentị ha maka ozi ndị ọzọ.
Key Atụmatụ
Ewezuga imepụta HTML, CSS na Javascript na CodePen, enwere ihe ole na ole na-edobe ya iche.
- Enwere ike ịlele koodu gị ozugbo. Ọ dịghị achọ nchịkọta.
- Nnwale na-enye gị ohere ịmụta ihe ọhụrụ.
- Mepụta obere ikpe nnwale iji chọọ ma dozie nsogbu.
- Gosipụta ọmarịcha ọrụ gị.
- Mepụta ma chekwaa pensụl maka ojiji emechaa.
- Nwalee koodu ndị nrụpụta ndị ọzọ wee hụ na ọ na-arụ ọrụ.
uru
- Iji malite, ọ dịghị ọnụ ahịa ọ bụla.
- Ngwa mmụta arụnyere n'ime ya.
- Soro ndị ọzọ na-arụkọ ọrụ wee tulee ọrụ ka ịhụ ebe ha nwere ike ịga n'ọdịnihu.
- UI dị mfe iji yana kwụ ọtọ.
ọghọm
- Ọbá akwụkwọ koodu ahụ pere mpe, imecha koodu akpaaka ezughị oke. Ọ dị mma naanị maka ọrụ otu ibe na enweghị ike ijikwa ihe ọ bụla buru ibu.
- Na CodePen, ị nwere ike ịmepụta pensụl nzuzo, mana ị ga-ebuli elu na otu Pro ($ 9 / ọnwa).
koodu sandbox
CodeSandbox bụ onye ndezi koodu dabere na webụ. Ọ na-emezigharị transpiring, nkwakọ ngwaahịa na njikwa dabere maka gị, na-enye gị ohere iji otu ọpịpị rụọ ọrụ ọhụrụ. Mgbe ịmechara ihe na-adọrọ mmasị, ị nwere ike ịkọrọ ya ndị ọzọ site na ịkesa weebụsaịtị.
Onye nchịkọta akụkọ dakọtara na ọrụ Javascript ọ bụla, n'agbanyeghị na ọ gụnyere ụfọdụ njirimara React-kpọmkwem, dị ka nhọrọ iji chekwaa ọrụ ahụ na ndebiri ngwa-mere-react-react.
Ọrụ ọ bụla ị wuru na CodeSandbox na-amalite site na ndebiri. Ọ nwere ike ịmetụta ọbá akwụkwọ akọwapụtara, usoro, ma ọ bụ oge ojiri gaa (gụnyere Node.js) ma ọ bụ jiri naanị teknụzụ weebụ ọkọlọtọ. Mgbe ịhọrọchara ndebiri, a ga-eziga gị na onye editọ, ebe ị ga-ahụ faịlụ niile dị mkpa yana mpio nlele meghere.
Ị nwere ike ịnweta "sistemụ faịlụ" na igbe igbe niile, nke pụtara na ị nwere ike ịmepụta faịlụ ọhụrụ, jiri modul (gụnyere ngwugwu NPM), wee soro akụ dị iche iche na-emekọrịta ihe. Enwekwara ohere iji gbanwee faịlụ nhazi nke template-kpọmkwem.
Ị nwere ike wuo ndebiri nke gị maka ihe eji eme ihe pụrụ iche, juputara na nhazi faịlụ na ndabere, dị ka ọ dị na IDE. N'ihi na ejikọrọ ngwá ọrụ ahụ na Github, ị nwere ike ịmepụta ngwa ngwa ma mepee PRs. Ị nwere ike ibuga ngwa gị na ZEIT ma ọ bụ Netlify ozugbo.
CodeSandbox Team Pro
CodeSandbox, azụmahịa Dutch nke na-enye ndị mmepe ohere iwu igbe mmepe ngwa weebụ dabere na ihe nchọgharị, ewepụtala usoro mmekorita nke na-enye ndị otu aka ịrụ ọrụ na koodu na igwe ojii. Ngwaahịa ọhụrụ ahụ, Team Pro, bụ usoro enweghị koodu e wuru maka otu ngwaahịa zuru oke, sitere na ndị nrụpụta na ndị njikwa site na otu mmesi obi ike (QA) na karịa.
A na-enye oru ngo na interface enyi na enyi maka onye ọ bụla chọrọ ime ma ọ bụ nabata mgbanwe na ngwa weebụ, na-ezere ụzọ ndị ọzọ dị ka izipu ndetu na ndụmọdụ nye ndị mmepe iji mee mgbanwe ndị ahụ, ịnyeghachi ha azụ maka mkparịta ụka, na imegharị usoro ahụ.
Key Atụmatụ
- Ihe ndezi koodu dabere na ngwa ọrụ prototype.
- Maka ojiji mpaghara, enwere ike ibudata igbe aja n'ụzọ dị mfe na faịlụ zip.
- Programming a na-eme ya na igbe ájá, nke enwere ike ịkọrọ ndị ọrụ ibe ya ngwa ngwa.
uru
- Ahụmịhe onye ọrụ emelitere yana njikwa ka ukwuu n'isi onye ndezi.
- Enwere ike gbanwee ma lelee njirimara nlele dị ndụ na mpio dị iche.
- A na-ahazi koodu ahụ na-akpaghị aka ma tinye CLI (codesandbox-cli)
- Nkwado maka modul npm dị elu.
- Ozi mperi mara mma nwere ntụnye.
- Ọ na-eme ka ahụmịhe nrụzi ahụ dịkwuo mma site n'inye ọnụ ahịa kacha mma, ihe nlele ule na onye na-ekiri ihe.
ọghọm
- A na-ekpughere onye ahịa njedebe n'ọtụtụ ahaziri onwe ya.
- Dọrọ na dobe faịlụ site na kọmpụta mpaghara anaghị arụ ọrụ nke ọma.
- A ga-agbasorịrị ụfọdụ nhazi nchekwa na CodeSandbox.
- Ọrụ igbe ájá nkeonwe dị naanị ndị na-azụ ahịa.
StackBlitz
StackBlitz bụ IDE n'ịntanetị na-akwado Visual Studio Code maka ngwa weebụ. Ikpo okwu na-anabata ma na-emegharị dịka ụdị desktọpụ. StackBlitz bụ IDE dị n'ịntanetị nke na-ebubu ya Angular na React ngwá ọrụ mmepe.
Thinkster.io wuru ọmarịcha ọrụ ahụ iji mee ka ọ dị mfe dịka o kwere mee ịmalite na ọrụ Angular ma ọ bụ React gị na-enweghị ichegbu onwe gị maka ntinye ndabere ma ọ bụ wuo ntọala. StackBlitz na-enye ọtụtụ atụmatụ dị ịtụnanya na pụrụ iche nke ọ nweghị onye ndezi koodu ịntanetị nwere ugbu a. N'ihi ya, ọ bara uru inyocha StackBlitz n'ihu wee chọpụta ihe IDE ịntanetị a nwere inye.
Stackblitz dị oke atụnyere IDE zuru oke, ọkachasị ma ọ bụrụ na ịnweghị ike ịsị koodu VS n'ihi na ngwaọrụ ahụ dabere na ya. Ngwungwu ahụ nwere atụmatụ dị iche iche na-enye gị ohere ịmalite ma gaa n'ihu na-emepụta ngwa nchịkọta zuru ezu.
A na-akwado mmemme a site na Visual Studio, nke a ma ama n'etiti ndị mmepe. Ndozi na-anọghị n'ịntanetị bụ njirimara pụtara ìhè nke oru ngo. Iji mee ka nke a kwe omume, ndị otu Stackblitz mepụtara sava weebụ n'ime ihe nchọgharị. Ka ị na-apịpị, ọ na-arụnye ndabere na-akpaghị aka, na-achịkọta, ùkwù, ma na-ebugharị ọkụ.
Adịghị elu Version
Cadet, Astronaut, na Commander dị maka n'efu, $8 / ọnwa, na $29 / ọnwa, n'otu n'otu. Astronaut na Commander gụnyere ọtụtụ atụmatụ dị ka ọrụ nzuzo na-akparaghị ókè, nbudata faịlụ na-akparaghị ókè, ịkpọ oku na ọwa slack otu isi, na ndị ọzọ. Maka ozi ndị ọzọ, hụ bọọdụ ịgba ụgwọ gọọmentị.
Key Atụmatụ
- Na-agbakwụnye ngwugwu NPM na ọrụ gị.
- Daalụ maka sava dev in-browser novel, ị nwere ike dezie mgbe ị na-anọghị n'ịntanetị.
- Ngwa URL akwadoro nke na-enye anyị ohere ịnweta (ma kesaa) ngwa anyị dị ndụ n'oge ọ bụla.
- Njirimara Koodu Visual Studio ndị ọzọ ama ama gụnyere Intellisense, Nchọ ọrụ (Cmd/Ctrl+P), Gaa na nkọwapụta, na ndị ọzọ.
uru
- Ike nke Firebase maka ibunye.
- Onye nchịkọta akụkọ dị mfe iji yana ngwa ngwa.
- Ndị ọrụ nwere ohere pack.json, index.html, na index.js.
- Koodu isi mmalite nwere ike kekọrịta nke nwekwara ike itinye.
- Nhụchalụ dị ndụ na akụkụ buru ibu nke ibe ahụ, yana nhọrọ imeghe na ibe dị iche ma ọ dị mkpa.
- Mgbe Na-anọghị n'ịntanetị, Na-edezi
- Emecha nke ọma yana Intellisense emelitere.
- Isi nke Stackblitz bụ Isi mmalite.
ọghọm
- Ị nweghị mmetụta n'ebe ụlọ ahụ ma ọ bụ ihe nkesa na-emepụta ihe n'ihi na ndị a na-achịkwa iwu ike-react-app.
- N'ime nzaghachi, ekwesịrị ịhụ usoro nchekwa nchekwa dị mkpa.
- Ọ gaghị ekwe omume ịhazi koodu na-akpaghị aka, n'agbanyeghị na ọ ga-ekwe omume iji aka mee ya.
mmechi
N'oge a, ebe egwuregwu koodu dị ka nke anyị hụrụ n'elu nwere ike iji wuo ọrụ webụ ọ bụla kpamkpam. Ọ dịghị mkpa ịwụnye IDE ndị na-adịghị mma na PC gị mgbe ị nwere ike iwulite, ihichapụ, nwalee ma bugharịa ozugbo site na ihe nchọgharị weebụ gị.
N'uche nke m, StackBlitz ga-akacha mma n'etiti ha n'ihi na ọ bụ IDE dabeere na weebụ nke na-enye ohere JavaScript, Angular, na ọrụ mmepe ndị ọzọ ozugbo na igbe ahụ, na-enweghị mkpa ịwụnye gburugburu mmepe obodo dị ka Node.js, npm, ma ọ bụ Angular. Ọ na-enye otu ahụmịhe dị ka iji Visual Studio Code na mpaghara. N'ezie, n'ihi na StackBlitz bụ Visual Studio Code na-achị ya, ọ na-adị ya ngwa ngwa yana ngwa ngwa dị ka ụdị desktọpụ.
Kedu nke CodePen, CodeSandbox na StackBlitz bụ ngwá ọrụ ị ga-eji? Mee ka anyị mara na nkọwa.
Abbatyya
Daalụ maka nnukwu akụkọ a, ozugbo m hụrụ stackblitz.com, amaara m na nke a bụ ihe m chọrọ.