Travay sou yon pwojè konplèks, si ou se yon pwogramè ki gen eksperyans oswa yon elèv nevyèm ane, ou pral nòmalman gen anpil chans rankontre pwoblèm. Lè ou divize pwojè ou a an plizyè modil, pwoblèm parèt, sa ki fè li pi difisil pou swiv erè epi jwenn solisyon. Nan lòt sikonstans, debogaj ka endividyèl yo ka difisil paske ou pa te dekouvri solisyon an apwopriye a pwoblèm ou te ap travay sou.
Li rive tou kòm yon moso nan kòd nan okazyon, ki ka sanble konplèks nan moman an. JavaScript se youn nan lang ki baze sou Entènèt ki trè senp pou aprann. Senpleman lanse navigatè Desktop ou a epi navige nan Zouti Developer (anjeneral F12), epi w ap fini! Lè sa a, ou ka fè eksperyans ak JS san ou pa bezwen enstale oswa kouri nenpòt lojisyèl konplike.
Pou kòmanse, tout sa ou bezwen se yon navigatè. Li se bèl bagay yo gen tout senplisite sa a soti nan bwat la, men gen okazyon lè ou bezwen plis. Pa egzanp, sipoze ou vle fè eksperyans ak yon nouvo API Web ke ou fèk dekouvri men ou pa vle kòmanse yon nouvo pwojè.
Nan pòs sa a, nou pral konpare ak kontras twa lakou rekreyasyon JS ki pi popilè yo, CodePen, CodeSandbox, ak StackBlitz. An n kòmanse!
CodePen
Zouti devlòpman entènèt frontend yo toujou evolye, ak editè tèks yo se yon gwo eleman nan dènye teknoloji yo ki fè lavi yon pwomotè pi senp. Apa de editè tèks otonòm tankou Atom oswa Notepad ++, te gen yon eksplozyon nan editè ki baze sou navigatè nan dènye ane yo ki pa mande pou enstalasyon pwogram ak ankouraje pi gwo kolaborasyon.
CodePen se yon "kominote sou entènèt pou teste ak prezante fragments kòd HTML, CSS, ak JavaScript itilizatè yo kreye" ki ofri opòtinite kokenn pou aprann kijan pou ekri paj entènèt entèfas pi byen.
CodePen ba ou de "mòd." Premye a ak pi souvan itilize se Pen an. Li senp tankou klike sou yon bouton epi yo te transpòte dwat nan editè a. Soti nan la, ou ka jwenn aksè nan yon panèl preview kòm byen ke HTML debaz, CSS, ak JS koreksyon fenèt yo.
Pa gen okenn "sistèm fichye," "IntelliSense," oswa nenpòt lòt bagay - jis senp sentaks en ak kòmandman rapid tankou prettify. Nan tab la opsyon, ou ka chwazi nan yon seri restriksyon nan preproseseur pou tout twa lang (tankou TypeScript pou JS) oswa ajoute koneksyon ak sous ekstèn.
Si w sèlman bezwen fè anyen gratis, youn nan editè yo ap sifi. Mwen ta sijere CodePen pou nenpòt bagay ki pa mande pou yon anpil nan konfigirasyon oswa bibliyotèk - tou senpleman HTML, CSS, ak JS ak opsyonèl pre-prosesè sou tèt. Si ou vle itilize lakou rekreyasyon an pou amelyore prezans medya sosyal ou oswa pou devlope yon pòtfolyo pèsonèl, CodePen se yon pi bon opsyon.
Premium Version
Ou gen kèk lòt altènativ pou chwazi nan CodePen. Si w peye chak ane, ou ka jwenn youn nan twa plan prim pou $12, $19, oswa $39 chak mwa. Ou ka kreye yon kantite enfini plim prive, pòs, ak koleksyon sou nenpòt nan twa nivo yo.
Ou pral resevwa tou badj Pro a (yon ogmantasyon sosyal), aksè mòd kolab ap viv, pa gen piblisite, ak plis ankò. Genyen tou sèten estrateji ekip espesifik ak lòt distenksyon kwa-niveau. Tcheke tablo bòdwo ofisyèl yo pou plis enfòmasyon.
Key Features
Akote de kreye HTML, CSS, ak JavaScript nan CodePen, gen kèk lòt bagay ki mete li apa.
- Gade an tan reyèl nan kòd ou a posib. Li pa mande pou konpilasyon.
- Eksperyans pèmèt ou aprann nouvo bagay.
- Kreye ti ka tès pou chèche ak adrese pwoblèm.
- Montre bèl travay ou yo.
- Kreye epi estoke Pens pou itilize pita.
- Eseye kòd lòt devlopè yo epi wè li an aksyon.
Avantaj
- Pou kòmanse, pa gen okenn pri.
- Resous aprantisaj entegre.
- Kolabore ak lòt moun epi konpare pwojè yo pou wè ki kote yo ka ale nan lavni.
- UI a se senp pou itilize ak senp.
Enkonvenyans
- Bibliyotèk kòd la piti, ranpli oto-kod pa apwopriye. Li jis bon pou pwojè yon paj epi li pa ka okipe anyen ki pi gwo.
- Sou CodePen, ou ka kreye plim prive, men w ap bezwen ajou nan yon manm Pro ($ 9/mwa).
kòd sandbox
CodeSandbox se yon editè kòd ki baze sou entènèt. Li otomatize transpirasyon, anbalaj, ak jesyon depandans pou ou, sa ki pèmèt ou bati yon nouvo pwojè ak yon sèl klike sou. Apre ou fin kreye yon bagay kaptivan, ou ka pataje li ak lòt moun lè w tou senpleman pataje sit entènèt la.
Editè a konpatib ak nenpòt pwojè JavaScript, byenke li gen ladan kèk karakteristik espesifik React, tankou opsyon pou sove pwojè a nan yon modèl kreye-react-app.
Nenpòt pwojè ou bati nan CodeSandbox kòmanse ak yon modèl. Li ka swa gen rapò ak yon bibliyotèk espesifik, kad, oswa ègzekutabl (ki gen ladan Node.js) oswa itilize tou senpleman teknoloji entènèt estanda. Apre w fin chwazi yon modèl, yo voye w bay editè a, kote w ap jwenn tout fichye ki nesesè yo ak fenèt aperçu ki deja louvri.
Ou gen aksè a yon "sistèm fichye" nan tout Sandboxes, ki vle di ou ka kreye nouvo fichye, itilize modil (ki gen ladan pakè NPM), epi kominike avèk byen estatik. Genyen tou opòtinite pou modifye dosye yo konfigirasyon modèl-espesifik.
Ou ka menm konstwi modèl pwòp ou a pou ka itilizasyon inik ou a, konplè ak estrikti dosye ak depandans, anpil tankou nan yon IDE. Paske zouti a lye ak Github, ou ka byen vit jenere komèt epi louvri PR. Ou ka deplwaye aplikasyon w lan nan ZEIT oswa Netlify touswit.
CodeSandbox Ekip Pro
CodeSandbox, yon biznis Olandè ki pèmèt devlopè yo konstwi yon sandbox devlopman aplikasyon entènèt ki baze sou navigatè, te pibliye ofisyèlman yon platfòm kolaborasyon ki pèmèt ekip yo travay sou kòd nan nwaj la. Nouvo pwodwi a, Team Pro, se yon solisyon san kòd ki bati pou ekip pwodwi konplè, sòti nan konsèpteur ak administratè yo nan ekip asirans kalite (QA) ak pi lwen.
Pwojè yo bay nan yon koòdone fasil pou itilizatè pou nenpòt moun ki vle fè oswa aksepte chanjman nan yon aplikasyon entènèt, evite metòd altènatif tankou voye nòt ak rekòmandasyon bay devlopè pou egzekite chanjman yo, pase yo tounen pou diskisyon, ak repete pwosesis la.
Key Features
- Yon editè kòd ki baze sou entènèt ak zouti pwototip.
- Pou itilizasyon lokal, yon sandbox ka telechaje fasil nan yon fichye postal.
- Programming se fè nan bwat sab, ki ka fasilman pataje ak kòlèg travay.
Avantaj
- Yon eksperyans itilizatè amelyore ak pi gwo kontwòl sou editè a.
- Karakteristik aperçu ap viv la ka modifye ak wè nan yon fenèt separe.
- Kòd la otomatikman fòma epi li gen ladan yon CLI (codesandbox-cli)
- Sipò pou modil npm avanse.
- Bèl mesaj erè ak rekòmandasyon.
- Li amelyore eksperyans debogaj la lè li bay yon pi bon tèminal, visualiseur tès, ak visualiseur pwoblèm.
Enkonvenyans
- Konsomatè final la ekspoze a anpil pèsonalizasyon.
- Trennen ak gout nan dosye ki soti nan yon òdinatè lokal pa opere byen.
- Yon sèten estrikti katab dwe swiv nan CodeSandbox.
- Fonksyonalite yon sandbox prive disponib sèlman pou kliyan yo.
StackBlitz
StackBlitz se yon IDE sou entènèt ki mache ak kòd Visual Studio pou aplikasyon entènèt. Platfòm lan reponn ak adaptab menm jan ak vèsyon Desktop la. StackBlitz se yon IDE sou entènèt ki vini pre-chaje ak Angilè ak reyaji zouti devlopman.
Thinkster.io te bati kokenn pwojè sa a pou fè li pi senp ke posib pou kòmanse ak pwojè Angular oswa React ou a san yo pa bezwen enkyete sou enstalasyon depandans oswa bati anviwònman. StackBlitz bay yon anpil nan karakteristik etonan ak inik ke okenn lòt editè kòd sou entènèt pa gen kounye a. Kòm yon rezilta, li entérésan pou envestige StackBlitz pi lwen epi dekouvri kisa IDE sou entènèt sa a gen pou l ofri.
Stackblitz trè konparab ak IDE konplè a, sitou si ou pa ka di orevwa nan kòd VS paske zouti a baze sou li. Pake a gen yon varyete de karakteristik ki pèmèt ou kòmanse ak kontinye kreye yon aplikasyon konplè.
Pwogram nan se Powered by Visual Studio, ki se byen li te ye nan mitan devlopè yo. Offline koreksyon se karakteristik rekòmandasyon pwojè a. Pou fè sa posib, ekip Stackblitz la te kreye yon sèvè entènèt nan navigatè a. Pandan w tape, li otomatikman enstale depandans, konpile, pake, epi fè rechajman cho.
Premium Version
Cadet, Astronout, ak Commander yo disponib gratis, $8/mwa, ak $29/mwa, respektivman. Astronot ak Commander gen ladann yon kantite karakteristik tankou pwojè prive san limit, telechaje dosye san limit, envite nan chanèl slack ekip debaz, ak sou sa. Pou plis enfòmasyon, gade biwo fakturasyon ofisyèl la.
Key Features
- Ajoute pakè NPM nan pwojè ou a.
- Mèsi a yon nouvo sèvè devlopman nan navigatè a, ou ka edite pandan w pa konekte.
- Yon URL aplikasyon ki anime ki pèmèt nou jwenn aksè (ak pataje) aplikasyon an ap viv la nenpòt ki lè.
- Lòt karakteristik ki remakab Kòd Visual Studio gen ladan Intellisense, Rechèch Pwojè (Cmd/Ctrl + P), Ale nan Definisyon, ak lòt moun.
Avantaj
- Kapasite Firebase pou deplwaman.
- Editè a se reyèlman fasil yo sèvi ak ak trè rapid.
- Itilizatè yo gen aksè a package.json, index.html, ak index.js.
- Kòd sous pataje ki kapab tou entegre.
- Live preview sou yon gwo seksyon nan paj la, ak opsyon pou ouvri sou yon paj diferan si sa nesesè.
- Pandan w pa konekte, koreksyon
- Fini entelijan ak Intellisense amelyore.
- Nwayo Stackblitz se louvri sous.
Enkonvenyans
- Ou pa gen enfliyans sou bilding lan oswa sèvè pwomotè a paske yo jere pa lòd la kreye-react-app.
- Nan React, yo ta dwe obsève yon estrikti katab fondamantal.
- Li pa posib fòma kòd otomatikman, byenke li posib pou fè li manyèlman.
konklizyon
Sèjousi, yon lakou rekreyasyon kod tankou sa yo nou te wè pi wo a ka itilize pou konstwi konplètman nenpòt pwojè entènèt. Pa gen okenn bezwen enstale IDE ankonbran sou PC ou lè ou ka bati, debogaj, teste, ak deplwaye dirèkteman nan navigatè entènèt ou a.
Dapre mwen, StackBlitz ta pi bon nan mitan yo paske li se yon IDE ki baze sou entènèt ki pèmèt JavaScript, Angilè, ak lòt pwojè devlopman imedyatman soti nan bwat la, san yo pa bezwen enstale nenpòt anviwònman devlopman lokal tankou Node.js, npm, oswa angilè. Li bay menm eksperyans ak lè l sèvi avèk Visual Studio Code lokalman. An reyalite, paske StackBlitz kondwi pa Visual Studio Code, li santi l osi vit ak versatile kòm vèsyon an Desktop.
Kiyès nan CodePen, CodeSandbox, ak StackBlitz se zouti ou ale? Fè nou konnen nan kòmantè yo.
Abbatyya
Mèsi pou gwo atik sa a, yon fwa mwen te wè stackblitz.com, mwen konnen sa a se sa mwen vle.