O le galue i se poloketi lavelave, pe o oe o se fai polokalame poto po'o se tagata fou, e foliga mai o le a e feagai ma fa'afitauli. A e vaevae lau poloketi i le tele o modules, e tulaʻi mai faʻafitauli, ma atili ai ona faigata ona siaki i lalo mea sese ma saili fofo. I isi tulaga, e mafai ona faigata le fa'avasegaina o mea ta'itasi ona e te le'i mauaina le fofo sa'o i le fa'afitauli sa e galue ai.
E tupu foi e pei o se fasi code i nisi taimi, e foliga faigata i le taimi. O le JavaScript o se tasi o gagana fa'avae i luga ole laiga e matua faigofie lava ona a'oa'oina. Na'o le fa'alauiloa o lau su'esu'ega i luga o le komepiuta ma fa'afeiloa'i i Mea Fa'atino (e masani lava F12), ma ua mae'a! E mafai ona e fa'ata'ita'i i le JS e aunoa ma le mana'omia e fa'apipi'i pe fa'agaoioia so'o se polokalama lavelave.
Ina ia amata, pau lava le mea e te manaʻomia o se browser. E manaia le maua o nei faigofie uma mai le pusa, ae e iai taimi e te manaʻomia ai nisi mea. Mo se faʻataʻitaʻiga, faʻapea e te manaʻo e faʻataʻitaʻi i se Web API fou na e mauaina talu ai nei ae e te le manaʻo e amata se galuega fou.
I lenei pou, matou te faʻatusatusa ma faʻatusatusa malae taʻutaʻua JS e tolu, CodePen, CodeSandbox, ma StackBlitz. Tatou amata!
CodePen
O lo'o fa'agasolo pea mea faigaluega o le atina'eina o upegatafa'ilagi pito i luma, ma o fa'atonu tusitusiga o se vaega tele o tekinolosi fa'aonaponei e fa'afaigofie ai le olaga o le tagata atia'e. E ese mai i tusitala tusitusi tutoʻatasi e pei ole Atom poʻo le Notepad ++, o loʻo i ai se paʻu o faʻamaumauga faʻapipiʻi suʻesuʻe i tausaga talu ai e le manaʻomia ai le faʻapipiʻiina o polokalame ma faʻalauteleina le galulue faʻatasi.
O le CodePen o se "fa'alapotopotoga i luga ole laiga mo su'ega ma tu'uina atu HTML, CSS, ma JavaScript code snippets na faia e le tagata fa'aoga" lea e ofoina atu avanoa lelei e a'oa'o ai pe fa'apefea ona tusia itulau pito i luma e sili atu.
O le CodePen e tu'uina atu ia te oe ni "auala" e lua. O le mea muamua ma sili ona masani ona faʻaaogaina o le Pen. E faigofie e pei o le kilikiina o se faamau ma ave sa'o i le faatonu. Mai iina, e mafai ona e mauaina se faʻasalalauga faʻapitoa faʻapea foʻi ma le HTML faavae, CSS, ma le JS faʻasologa windows.
E leai se "faiga faila," "IntelliSense," poʻo se isi lava mea - naʻo le faʻailoga faigofie ma faʻatonuga vave pei o le prettify. I le lisi o filifiliga, e mafai ona e filifili mai se vaega fa'atapula'aina o mea e fai muamua mo gagana uma e tolu (e pei o le TypeScript mo JS) pe fa'aopoopo feso'ota'iga i puna mai fafo.
Afai e te manaʻomia se mea e fai e aunoa ma se totogi, o le a lava se tasi o faatonu. Ou te fautuaina CodePen mo soʻo se mea e le manaʻomia ai le tele o seti poʻo faletusi - naʻo le HTML, CSS, ma le JS faʻatasi ai ma filifiliga muamua-processors i luga. Afai e te manaʻo e faʻaoga le malae taʻalo e faʻaleleia atili ai lau faʻasalalauga faʻasalalau poʻo le atiaeina o se faila patino, CodePen o se filifiliga sili atu.
Premium Version
E iai ni nai au filifiliga e filifili mai luga ole CodePen. Afai e te totogiina i tausaga ta'itasi, e mafai ona e mauaina se tasi o fuafuaga fa'apitoa e tolu mo le $12, $19, po'o le $39 i masina ta'itasi. E mafai ona e fatuina se numera e le gata o peni tumaoti, pou, ma aoina i luga o soʻo se vaega e tolu.
E te mauaina fo'i le pine Pro (se fa'aagafesoota'i fa'aagafesootai), tu'ufa'atasiga tu'ufa'atasi avanoa, leai se fa'asalalauga, ma isi mea. O lo'o iai fo'i ta'iala fa'apitoa a 'au ma isi va'aiga fa'alava. Siaki le latou ofisa pili mo nisi faʻamatalaga.
Features Key
E ese mai i le fatuina o le HTML, CSS, ma le Javascript i CodePen, o loʻo i ai nai mea e tuʻu ese ai.
- E mafai ona va'ai taimi tonu o lau code. E le manaʻomia le tuʻufaʻatasia.
- O le fa'ata'ita'iga e mafai ai ona e a'oa'oina mea fou.
- Fausia ni tama'i su'ega su'ega e su'e ma foia ai fa'afitauli.
- Faaali atu au galuega ofoofogia.
- Fausia ma teu Peni mo le fa'aoga mulimuli.
- Fa'ata'ita'i isi code a le au atia'e ma va'ai i le gaioiga.
tulaga lelei
- E amata, e leai se tau.
- Punaoa a'oa'oga fa'apipi'i.
- Galulue faʻatasi ma isi ma faʻatusatusa poloketi e iloa ai poʻo fea e mafai ona latou o i ai i le lumanaʻi.
- O le UI e faigofie ona faʻaoga ma tuusaʻo.
tulaga le lelei
- E la'ititi le faletusi code, e le'o atoatoa le fa'amae'aina o le code-auto. E na'o le lelei mo poloketi e tasi le itulau ma e le mafai ona taulimaina se mea e sili atu.
- I luga ole CodePen, e mafai ona e faia ni peni tumaoti, ae e manaʻomia lou faʻaleleia i se Pro sui auai ($ 9 / masina).
code sandbox
CodeSandbox ose fa'atonu fa'asinoala i luga ole laiga. Otometi le fa'aliliuina, afifiina, ma pulega fa'alagolago mo oe, fa'atagaina oe e fausia se poloketi fou i le kiliki tasi. A mae'a ona e faia se mea mata'ina, e mafai ona e fa'asoa atu i isi i le na'o le fa'asoaina o le upegatafa'ilagi.
O le faatonu e fetaui ma soʻo se poloketi JavaScript, e ui lava e aofia ai ni vaega faʻapitoa React, e pei o le filifiliga e teu ai le poloketi i se mamanu-react-app template.
So'o se poloketi e te fausia ile CodeSandbox e amata ile fa'ata'ita'iga. E mafai ona fa'afeso'ota'i ile faletusi fa'apitoa, fa'ava'a, po'o le ta'avale (e aofia ai le Node.js) pe fa'aoga na'o tekinolosi i luga ole laiga masani. A maeʻa ona filifilia se faʻataʻitaʻiga, e auina atu oe i le faatonu, lea e te maua uma ai faila manaʻomia ma le faʻamalama faʻaaliga ua uma ona tatala.
E mafai ona e mauaina se "faila faila" i Sandboxes uma, o lona uiga e mafai ona e faia ni faila fou, faʻaoga modules (e aofia ai pusa NPM), ma fegalegaleai ma aseta faʻapitoa. O loʻo iai foʻi le avanoa e faʻaleleia ai faila faʻatulagaina faʻapitoa faʻataʻitaʻiga.
E mafai fo'i ona e fausia au lava fa'ata'ita'iga mo lau fa'aoga tulaga ese-mataupu, fa'amae'a ma faila faila ma fa'alagolago, e pei o le IDE. Talu ai ona o le meafaigaluega e fesoʻotaʻi ma Github, e mafai ona e vave faʻatupu faʻasalalauga ma tatala PRs. E mafai ona e fa'apipi'i lau talosaga i le ZEIT po'o le Netlify i le taimi lava lena.
CodeSandbox Team Pro
CodeSandbox, o se pisinisi Dutch lea e mafai ai e tagata atiaʻe ona fausia se pusa oneone e faʻavae i luga ole laiga i luga o le upega tafaʻilagi, ua faʻasalalau aloaia ai se faʻasalalauga faʻatasi e mafai ai e 'au ona galulue i luga o le code i le ao. O le oloa fou, Team Pro, o se fofo e leai se faʻailoga ua fausia mo 'au oloa atoatoa, e amata mai i tagata mamanu ma pule e ala i 'au faʻamautinoaga lelei (QA) ma tua atu.
Poloketi e tuʻuina atu i se faʻaoga faʻaoga faʻaoga mo soʻo se tasi e manaʻo e fai pe talia suiga i se upega tafaʻilagi, aloese mai isi auala e pei o le lafoina o faʻamatalaga ma fautuaga i tagata atiaʻe e faʻatino suiga, toe pasi atu mo talanoaga, ma toe fai le faagasologa.
Features Key
- Ose fa'atonu fa'ailoga fa'akomepiuta ma mea faigaluega fa'ata'ita'i.
- Mo le fa'aoga i le lotoifale, e mafai ona faigofie ona la'u mai se pusa oneone i se faila zip.
- polokalame e faia i pusa oneone, lea e mafai ona fa'asoa fa'atasi ma tagata faigaluega.
tulaga lelei
- Se fa'aleleia atili o le fa'aoga ma sili atu le pulea o le fa'atonu.
- E mafai ona suia ma va'ai ile fa'amalama e ese mai le fa'aaliga ola.
- O le code e otometi ona faʻapipiʻiina ma e aofia ai le CLI (codesandbox-cli)
- Lagolago mo modules maualuga npm.
- Manaia fe'au sese ma fautuaga.
- E faʻaleleia ai le faʻaogaina o le faʻaogaina e ala i le tuʻuina atu o se pito sili atu, suʻega suʻega, ma faʻasalalauga.
tulaga le lelei
- O le tagata fa'ai'uga fa'atau e fa'aalia i le tele o fa'asinomaga.
- Toso ma faapa'u faila mai se komepiuta fa'apitonu'u e le fa'agaioi lelei.
- E tatau ona mulimulita'i se fausaga faila ile CodeSandbox.
- Ole fa'atinoga ole pusa oneone fa'apitoa e na'o tagata fa'atau.
StackBlitz
StackBlitz o se Visual Studio Code-powered online IDE mo talosaga i luga ole laiga. O le tulaga e tali atu ma fetuutuunai e pei o le desktop version. StackBlitz o se IDE i luga ole laiga e sau muamua i luga Angular ma React meafaigaluega atinae.
Na fausia e Thinkster.io lena galuega manaia ina ia faigofie e mafai ai ona amata i lau Angular poʻo le React poloketi e aunoa ma le popole e uiga i le faʻalagolago i le faʻapipiʻiina poʻo le fausiaina o tulaga. StackBlitz e maua ai le tele o mea ofoofogia ma tulaga ese e leai se isi fa'atonu tulafono fa'ainitaneti o iai i le taimi nei. O se taunuuga, e aoga le suʻesuʻeina atili o StackBlitz ma saili le mea o loʻo ofoina mai e lenei IDE lugalaina.
Stackblitz e matua faʻatusatusa i le IDE atoa, aemaise lava pe a le mafai ona e faʻatofa ile VS code ona o le meafaigaluega e faʻavae i luga. O le afifi o loʻo i ai le tele o foliga e faʻatagaina oe e amata ma faʻaauau le fatuina o se faʻapipiʻi atoa.
O le polokalame e faʻamalosia e Visual Studio, lea e lauiloa i le au atinaʻe. O le fa'asa'oga tu'umotu o le fa'ailoga mata'ina lea o le poloketi. Ina ia mafai lenei mea, na fausia e le au a Stackblitz se 'upega tafaʻilagi i-browser. A'o e lolomi, e otometi lava ona fa'apipi'i fa'alagolago, tu'ufa'atasi, fa'apipi'i, ma toe uta vevela.
Premium Version
Cadet, Astronaut, ma le Ta'ita'i e maua fua, $8/masina, ma le $29/masina. Astronaut ma Commander e aofia ai le tele o foliga e pei o galuega tumaoti e le faʻatapulaʻaina, faʻapipiʻiina faila e le faʻatapulaʻaina, valaʻaulia i le alalaupapa a le au autu, ma isi. Mo nisi fa'amatalaga, va'ai i le ofisa o pili tau tupe.
Features Key
- Fa'aopoopoina afifi NPM i lau poloketi.
- Fa'afetai i se tala fou i-browser dev server, e mafai ona e fa'asa'o a'o le tuusao.
- O se URL fa'aoga fa'afeiloa'i e fa'ataga ai i matou e fa'aoga (ma fa'asoa) a matou polokalama ola i so'o se taimi.
- O isi fa'aaliga iloga o le Visual Studio Code e aofia ai le Intellisense, Project Search (Cmd/Ctrl+P), Alu i le Fa'amatalaga, ma isi.
tulaga lelei
- Avanoa a le Firebase mo le fa'atinoina.
- O le faatonu e matua faigofie lava ona faʻaoga ma matua vave.
- E mafai e tagata fa'aoga ona maua le package.json, index.html, ma le index.js.
- Fa'asoa fa'ailoga puna'oa e mafai fo'i ona fa'apipi'i.
- Va'ai mua'i i luga o se vaega tele o le itulau, ma le filifiliga e tatala i se isi itulau pe a mana'omia.
- A'o Offline, Fa'atonu
- Faʻamaeʻaina atamai ma faʻaleleia Intellisense.
- Ole autu ole Stackblitz ole Avanoa tatala.
tulaga le lelei
- E leai sau a'afiaga i luga o le fale po'o le tagata fa'apipi'i ona o lo'o pulea e le fa'atonuga-react-app.
- I le React, e tatau ona mataituina se fausaga autu o faila.
- E le mafai ona fa'apipi'i fa'akomepiuta, e ui lava e mafai ona fai ma le lima.
iʻuga
I aso nei, o se malae taʻalo e pei o mea na matou vaʻaia i luga e mafai ona faʻaogaina e fausia atoa ai soʻo se upega tafaʻilagi. E leai se mana'oga e fa'apipi'i IDE fa'alavelave i lau PC pe a mafai ona e fau, fa'avasega, fa'ata'ita'i, ma fa'apipi'i sa'o mai lau 'upega tafa'ilagi.
I loʻu manatu, StackBlitz o le a sili ona lelei ia i latou ona o se IDE i luga o le upega tafaʻilagi e mafai ai le JavaScript, Angular, ma isi atinaʻe atinaʻe saʻo mai le atigipusa, e aunoa ma se manaʻoga e faʻapipiʻi soʻo se siosiomaga atinaʻe faʻapitonuʻu pei o Node.js, npm, po o le Angular. E maua ai le poto masani e pei o le faʻaaogaina o le Visual Studio Code i le lotoifale. O le mea moni, ona o StackBlitz o loʻo faʻauluina e le Visual Studio Code, e lagona le vave ma faʻapitoa e pei o le desktop version.
O fea o CodePen, CodeSandbox, ma StackBlitz o lau mea faigaluega? Fa'ailoa mai i fa'amatalaga.
Abbatyya
Faafetai mo lenei tusiga sili, ina ua ou vaai i le stackblitz.com, ou te iloa o le mea lea ou te manaʻo ai.