Ke hana nei ʻoe i kahi papahana paʻakikī, inā paha he polokalamu ʻike ʻoe a i ʻole he kanaka hou, ʻaneʻane paha ʻoe e holo i nā pilikia. Ke hoʻokaʻawale ʻoe i kāu papahana i loko o nā modula he nui, e kū mai nā pilikia, e paʻakikī loa ka nānā ʻana i nā hewa a loaʻa nā hopena. Ma nā kūlana ʻē aʻe, paʻakikī paha ka hoʻopau ʻana i nā hihia pākahi no ka mea ʻaʻole ʻoe i ʻike i ka hopena kūpono i ka pilikia āu e hana nei.
Hoʻopuka ʻia ma ke ʻano he ʻāpana code i kekahi manawa, hiki ke nānā paʻakikī i kēlā manawa. ʻO JavaScript kekahi o nā ʻōlelo ma ka Pūnaewele a maʻalahi loa ke aʻo ʻana. E hoʻomaka wale i kāu polokalamu kele pūnaewele a hoʻokele iā Developer Tools (maʻamau F12), a ua pau ʻoe! Hiki iā ʻoe ke hoʻokolohua me JS me ka ʻole e hoʻokomo a hoʻokele paha i kekahi polokalamu paʻakikī.
No ka hoʻomaka ʻana, pono ʻoe i kahi polokalamu kele pūnaewele. Maikaʻi ka loaʻa ʻana o kēia maʻalahi a pau i waho o ka pahu, akā aia kekahi mau manawa e pono ai ʻoe. No ka laʻana, inā makemake ʻoe e hoʻokolohua me kahi API Pūnaewele hou āu i ʻike ai akā ʻaʻole makemake ʻoe e hoʻomaka i kahi papahana hou.
Ma kēia pou, e hoʻohālikelike a hoʻohālikelike mākou i nā kahua pāʻani JS kaulana loa ʻekolu, CodePen, CodeSandbox, a me StackBlitz. E hoʻomaka kākou!
CodePen
Ke ulu mau nei nā mea hana hoʻomohala pūnaewele Frontend, a ʻo nā mea hoʻoponopono kikokikona kekahi mea nui o nā ʻenehana hou e maʻalahi ai ke ola o ka mea hoʻomohala. Ma waho aʻe o nā mea hoʻoponopono kikokikona kū hoʻokahi e like me Atom a i ʻole Notepad ++, ua pahū ʻia nā mea hoʻoponopono i hoʻokumu ʻia i ka polokalamu kele pūnaewele i nā makahiki i hala iho nei ʻaʻole pono e hoʻokomo i ka papahana a hoʻoikaika i ka hui like ʻana.
ʻO CodePen he "kaiāulu pūnaewele no ka hoʻāʻo ʻana a me ka hōʻike ʻana i nā HTML, CSS, a me JavaScript code snippets i haku ʻia e ka mea hoʻohana" e hāʻawi ana i nā manawa kūpono e aʻo ai pehea e kākau maikaʻi ai i nā ʻaoʻao pūnaewele.
Hāʻawi ʻo CodePen iā ʻoe i ʻelua "mode". ʻO ka mea mua a hoʻohana pinepine ʻia ʻo ia ka Pen. He mea maʻalahi ia e like me ke kaomi ʻana i kahi pihi a lawe pololei ʻia i ka mea hoʻoponopono. Mai laila mai, hiki iā ʻoe ke komo i kahi pānaʻi ʻike a me ka HTML kumu, CSS, a me JS hoʻoponopono windows.
ʻAʻohe "pūnaewele waihona," "IntelliSense," a i ʻole kekahi mea ʻē aʻe - ʻo ka hōʻailona syntax maʻalahi a me nā kauoha wikiwiki e like me prettify. Ma ka ʻaoʻao koho, hiki iā ʻoe ke koho mai kahi ʻāpana o nā preprocessors no nā ʻōlelo ʻekolu (e like me TypeScript no JS) a i ʻole e hoʻohui i nā pilina i nā kumu waho.
Inā makemake wale ʻoe i kekahi mea me ka manuahi, e lawa paha kekahi o nā mea hoʻoponopono. Manaʻo wau i ka CodePen no kekahi mea ʻaʻole pono i ka nui o ka hoʻonohonoho a i ʻole nā hale waihona puke - HTML wale nō, CSS, a me JS me nā koho pre-processors ma luna. Inā makemake ʻoe e hoʻohana i ke kahua pāʻani e hoʻomaikaʻi i kou noho ʻana i ka ʻoihana pūnaewele a i ʻole e hoʻomohala i kahi kōpili pilikino, ʻoi aku ka maikaʻi o CodePen.
ʻ Versionlelo Pūnaewele
He mau koho hou aʻe kāu e koho ai ma CodePen. Inā uku ʻoe i kēlā me kēia makahiki, hiki iā ʻoe ke loaʻa kekahi o ʻekolu mau hoʻolālā premium no $12, $19, a i ʻole $39 i kēlā me kēia mahina. Hiki iā ʻoe ke hana i kahi helu pau ʻole o nā peni pilikino, nā pou, a me nā hōʻiliʻili ma kekahi o nā pae ʻekolu.
E loaʻa nō hoʻi iā ʻoe ka hōʻailona Pro (he hoʻoikaika kaiapili), ke komo ʻana i ka mode collab ola, ʻaʻohe hoʻolaha, a me nā mea hou aku. Aia kekahi mau hoʻolālā kikoʻī o ka hui a me nā ʻokoʻa cross-tier ʻē aʻe. E nānā i kā lākou papa helu pili kālā no ka ʻike hou aku.
Key Features
Ma waho aʻe o ka hana ʻana i HTML, CSS, a me JavaScript ma CodePen, aia kekahi mau mea e hoʻokaʻawale iā ia.
- Hiki ke nānā manawa maoli i kāu code. ʻAʻole pono ia i ka hui ʻana.
- ʻO ka hoʻokolohua hiki iā ʻoe ke aʻo i nā mea hou.
- E hana i nā hihia hoʻāʻo liʻiliʻi e nānā a hoʻoponopono i nā pilikia.
- E hoike mai i kau mau hana kupanaha.
- Hana a mālama i nā peni no ka hoʻohana ʻana ma hope.
- E ho'āʻo i nā code haku polokalamu ʻē aʻe a ʻike i ka hana.
pono
- E hoʻomaka, ʻaʻohe kumu kūʻai.
- Nā kumuwaiwai aʻo i kūkulu ʻia.
- E hui pū me nā mea ʻē aʻe a hoʻohālikelike i nā papahana e ʻike i kahi e hiki ai iā lākou ke hele i ka wā e hiki mai ana.
- He maʻalahi ka UI e hoʻohana a pololei.
keakea
- He liʻiliʻi ka waihona code, ʻaʻole lawa ka hoʻopau ʻana i nā code auto. Maikaʻi wale ia no nā papahana ʻaoʻao hoʻokahi a ʻaʻole hiki ke mālama i kekahi mea nui aʻe.
- Ma CodePen, hiki iā ʻoe ke hana i nā peni pilikino, akā pono ʻoe e hoʻonui i kahi lālā Pro ($ 9 / mahina).
Pāʻālua Code
ʻO CodeSandbox kahi hoʻoponopono code ma ka pūnaewele. Hoʻohana ia i ka transpiring, packaging, a me ka hoʻokele hilinaʻi iā ʻoe, e ʻae iā ʻoe e kūkulu i kahi papahana hou me kahi kaomi hoʻokahi. Ma hope o kāu hana ʻana i kahi mea hoihoi, hiki iā ʻoe ke kaʻana like me nā poʻe ʻē aʻe ma ke kaʻana wale ʻana i ka pūnaewele.
Ua kūpono ka mea hoʻoponopono me nā papahana JavaScript, ʻoiai aia kekahi mau hiʻohiʻona React-specific, e like me ke koho e mālama i ka papahana i loko o kahi template create-react-app.
Hoʻomaka nā papahana āu e kūkulu ai ma CodeSandbox me kahi laʻana. Hiki iā ia ke pili i kahi waihona kikoʻī, framework, a i ʻole runtime (me Node.js) a i ʻole e hoʻohana i nā ʻenehana pūnaewele maʻamau. Ma hope o ke koho ʻana i kahi laʻana, hoʻouna ʻia ʻoe i ka mea hoʻoponopono, kahi āu e ʻike ai i nā faila pono āpau a ua wehe ʻia ka puka aniani.
Loaʻa iā ʻoe kahi "pūnaewele waihona" ma nā Sandbox a pau, ʻo ia hoʻi, hiki iā ʻoe ke hana i nā faila hou, hoʻohana i nā modules (me nā pūʻolo NPM), a me ka launa pū me nā waiwai static. Aia kekahi manawa e hoʻololi i nā faila hoʻonohonoho kikoʻī kikoʻī.
Hiki paha iā ʻoe ke kūkulu i kāu mau hiʻohiʻona no kāu hihia hoʻohana kūʻokoʻa, piha me ka hoʻolālā faila a me nā hilinaʻi, e like me ka IDE. No ka mea pili ka hāmeʻa iā Github, hiki iā ʻoe ke hana wikiwiki i nā hana a wehe i nā PR. Hiki iā ʻoe ke kau i kāu noi iā ZEIT a i ʻole Netlify i kēia manawa.
CodeSandbox Team Pro
ʻO CodeSandbox, kahi ʻoihana Dutch e hiki ai i nā mea hoʻomohala ke kūkulu i kahi pahu lepo hoʻomohala polokalamu kele pūnaewele, ua hoʻokuʻu kūhelu i kahi kahua hui e hiki ai i nā hui ke hana ma ke code ma ke ao. ʻO ka huahana hou, ʻo Team Pro, he hopena no-code i kūkulu ʻia no nā hui huahana piha, mai nā mea hoʻolālā a me nā mana ma o nā hui hōʻoia maikaʻi (QA) a ma waho.
Hāʻawi ʻia nā papahana ma kahi pānaʻi hoʻohana no ka poʻe makemake e hana a ʻae paha i nā hoʻololi i kahi palapala noi pūnaewele, e pale ana i nā ala ʻē aʻe e like me ka hoʻouna ʻana i nā memo a me nā ʻōlelo paipai i nā mea hoʻomohala e hoʻokō i nā loli, e hoʻihoʻi iā lākou no ke kūkākūkā ʻana, a me ka hana hou ʻana i ke kaʻina hana.
Key Features
- He mea hoʻoponopono code pūnaewele a me ka mea hana prototype.
- No ka hoʻohana kūloko, hiki ke hoʻoiho maʻalahi i kahi pahu one ma kahi faila zip.
- iaaiey hana ʻia i loko o nā pahu one, hiki ke kaʻana like me nā hoa hana.
pono
- ʻO kahi ʻike hoʻohana i hoʻomaikaʻi ʻia a ʻoi aku ka mana ma luna o ka mea hoʻoponopono.
- Hiki ke hoʻololi a nānā ʻia ka hiʻohiʻona ʻike ola ma kahi pukaaniani ʻokoʻa.
- Hoʻopili ʻia ke code a loaʻa kahi CLI (codesandbox-cli)
- Kākoʻo no nā modula npm kiʻekiʻe.
- Nā memo hewa maikaʻi me nā ʻōlelo paipai.
- Hoʻomaikaʻi ia i ka ʻike debugging ma o ka hāʻawi ʻana i kahi terminal ʻoi aku ka maikaʻi, ka nānā hoʻāʻo, a me ka nānā hoʻopuka.
keakea
- Hōʻike ka mea kūʻai hope i nā mea pilikino he nui.
- ʻAʻole holo pono ke kauo a hoʻokuʻu i nā faila mai kahi kamepiula kūloko.
- Pono e hahai ʻia kekahi ʻano waihona ma CodeSandbox.
- Loaʻa ka hana o kahi pahu huna pilikino i nā mea kūʻai aku.
ʻO StackBlitz
ʻO StackBlitz kahi IDE pūnaewele i mana ʻia e Visual Studio Code no nā noi pūnaewele. ʻO ka paepae e like me ka pane a hiki ke hoʻololi e like me ka mana o ka papa kuhikuhi. ʻO StackBlitz kahi IDE pūnaewele i hele mua ʻia me Angular a me React nā mea hana hoʻomohala.
Ua kūkulu ʻo Thinkster.io i kēlā papahana maikaʻi loa e maʻalahi e hoʻomaka me kāu papahana Angular a i ʻole React me ka hopohopo ʻole e pili ana i ka hoʻonohonoho hilinaʻi a kūkulu ʻana i nā hoʻonohonoho. Hāʻawi ʻo StackBlitz i nā hiʻohiʻona kupaianaha a ʻokoʻa ʻaʻohe mea hoʻoponopono code pūnaewele i kēia manawa. ʻO ka hopena, he mea pono ke noiʻi hou aku iā StackBlitz a ʻike i ka mea a kēia IDE pūnaewele e hāʻawi ai.
Hoʻohālikelike loa ʻia ʻo Stackblitz i ka IDE piha, ʻoiai inā ʻaʻole hiki iā ʻoe ke haʻi aloha i ka code VS no ka mea ua hoʻokumu ʻia ka mea hana. Loaʻa i ka pūʻolo nā hiʻohiʻona like ʻole e hiki ai iā ʻoe ke hoʻomaka a hoʻomau i ka hana ʻana i kahi noi piha.
Hoʻohana ʻia ka papahana e Visual Studio, i ʻike nui ʻia i waena o nā mea hoʻomohala. ʻO ka hoʻoponopono pahemo ka hiʻohiʻona o ka papahana. No ka hana ʻana i kēia, ua hana ka hui ʻo Stackblitz i kahi kikowaena pūnaewele i loko o ka polokalamu kele pūnaewele. Ke kākau ʻoe, hoʻokomo ʻokoʻa ia i nā hilinaʻi, hōʻuluʻulu, puʻupuʻu, a hana hou i ka wela.
ʻ Versionlelo Pūnaewele
Loaʻa ka Cadet, Astronaut, a me Commander no ka manuahi, $8/mahina, a me $29/mahina. Loaʻa iā Astronaut a me Commander kekahi mau hiʻohiʻona e like me nā papahana pilikino palena ʻole, ka hoʻouka ʻana i nā faila palena ʻole, kono ʻia i ke kahawai slack hui nui, a pēlā aku. No ka ʻike hou aku, e ʻike i ka papa hoʻolimalima pili.
Key Features
- Hoʻohui i nā pūʻolo NPM i kāu papahana.
- Mahalo i kahi server dev in-browser, hiki iā ʻoe ke hoʻoponopono ma waho.
- He URL polokalamu hoʻokipa e hiki ai iā mākou ke komo (a kaʻana like) i kā mākou polokalamu ola i kēlā me kēia manawa.
- ʻO nā hiʻohiʻona ʻē aʻe ʻo Visual Studio Code me Intellisense, Huli Project (Cmd/Ctrl+P), E hele i ka wehewehe, a me nā mea ʻē aʻe.
pono
- Nā mana o Firebase no ka hoʻolālā.
- He maʻalahi ka hoʻoponopono a me ka wikiwiki loa.
- Hiki i nā mea hoʻohana ke komo i package.json, index.html, a me index.js.
- Hiki ke hoʻokomo pū ʻia ke code kumu like.
- Nānā mua ma kahi ʻāpana nui o ka ʻaoʻao, me ke koho e wehe i kahi ʻaoʻao ʻē aʻe inā pono.
- ʻOiai Offline, Hoʻoponopono
- Hoʻopau akamai a hoʻomaikaʻi ʻia ʻo Intellisense.
- ʻO ke kumu o Stackblitz hamama kumu.
keakea
- ʻAʻohe ou mana ma luna o ka hale a i ʻole ke kikowaena mea hoʻomohala no ka mea mālama ʻia ia mau mea e ke kauoha create-react-app.
- Ma React, pono e nānā ʻia kahi ʻano waihona waihona.
- ʻAʻole hiki ke hōʻano maʻalahi i ka code, ʻoiai hiki ke hana me ka lima.
Panina
I kēia mau lā, hiki ke hoʻohana ʻia kahi kahua pāʻani coding e like me nā mea a mākou i ʻike ai ma luna nei e kūkulu pono i kekahi papahana pūnaewele. ʻAʻohe pono e hoʻokomo i nā IDE paʻakikī ma kāu PC ke hiki iā ʻoe ke kūkulu, debug, hoʻāʻo, a hoʻoili pololei mai kāu polokalamu kele pūnaewele.
I koʻu manaʻo, ʻoi aku ka maikaʻi o StackBlitz i waena o lākou no ka mea he IDE pūnaewele ia e hiki ai iā JavaScript, Angular, a me nā papahana hoʻomohala ʻē aʻe ma waho o ka pahu, me ka pono ʻole e hoʻokomo i nā wahi hoʻomohala kūloko e like me Node.js, npm, a i ʻole Angular. Hāʻawi ia i ka ʻike like me ka hoʻohana ʻana i ka Visual Studio Code ma ka ʻāina. ʻO ka ʻoiaʻiʻo, no ka mea, ke alakaʻi ʻia nei ʻo StackBlitz e Visual Studio Code, manaʻo ia e like me ka wikiwiki a me ka maʻalahi e like me ka papa kuhikuhi.
ʻO wai o CodePen, CodeSandbox, a me StackBlitz kāu mea e hele ai? E haʻi mai iā mākou ma nā manaʻo.
ʻO Abbatyya
Mahalo i kēia ʻatikala nui, i ka manawa aʻu i ʻike ai i stackblitz.com, ʻike wau ʻo ia kaʻu makemake.