Table of Contents[Veşartin][Rêdan]
Li ser projeyek tevlihev bixebitin, gelo hûn bernamenûsek bi ezmûn an xwendekarek nû bin, hûn ê bi rastî bi pirsgirêkan re rû bi rû bimînin. Gava ku hûn projeya xwe li gelek modulan dabeş dikin, pirsgirêk derdikevin, şopandina xeletiyan û dîtina çareseriyan dijwartir dike. Di rewşên din de, jihevxistina mînakên kesane dibe ku dijwar be ji ber ku we çareseriya rast a pirsgirêka ku we li ser dixebitî nedîtiye.
Ew di heman demê de wekî perçeyek kodê jî çêdibe, ku dibe ku wê demê tevlihev xuya bike. JavaScript yek ji wan zimanên web-based e ku fêrbûna pir hêsan e. Tenê geroka xweya sermaseyê bidin destpêkirin û biçin Amûrên Pêşdebir (bi gelemperî F12), û hûn qediyan! Dûv re hûn dikarin bi JS biceribînin bêyî ku hûn nermalava tevlihev saz bikin an bimeşînin.
Ji bo ku hûn dest pê bikin, hemî ku hûn hewce ne gerokek e. Gelekî xweş e ku meriv vê sadebûnê rast derxe holê, lê carinan carinan jî hene ku hûn bêtir hewce ne. Mînakî, bifikirin ku hûn dixwazin bi Web API-ya nû ya ku we vê dawiyê kifş kiriye biceribînin lê hûn naxwazin projeyek nû dest pê bikin.
Di vê postê de, em ê sê lîstikên herî populer ên JS, CodePen, CodeSandbox, û StackBlitz bidin ber hev û berevajî bikin. Werin em dest pê bikin!
CodePen
Amûrên pêşkeftina webê ya Frontend her gav pêşve diçin, û edîtorên nivîsê hêmanek mezin a teknolojiyên herî dawî ne ku jiyana pêşdebiran hêsantir dike. Ji xeynî edîtorên nivîsê yên serbixwe yên wekî Atom an Notepad ++, di van salên dawî de teqînek edîtorên gerok-based heye ku hewcedarî sazkirina bernameyê ne û hevkariyek mezintir pêşve dike.
CodePen "civakek serhêl e ji bo ceribandin û pêşkêşkirina perçeyên kodê yên HTML, CSS, û JavaScript-a ku ji hêla bikarhêner ve hatî afirandin" de ye ku fersendên fantastîk pêşkêşî dike da ku fêr bibe ka meriv çawa rûpelên malperê yên pêşîn çawa çêtir dinivîse.
CodePen du "mode" dide we. Yekemîn û herî zêde tê bikaranîn Pênûs e. Ew qas hêsan e ku bişkokek bikirtînin û rast berbi edîtorê ve were veguheztin. Ji wir, hûn dikarin bigihîjin panelek pêşdîtinê û hem jî paceyên guherandinê yên bingehîn ên HTML, CSS, û JS.
"Pergala pelan," "IntelliSense," an tiştek din tune - tenê ronîkirina hevoksaziya hêsan û fermanên bilez ên mîna prettify. Di tabloya vebijarkan de, hûn dikarin ji rêzek sînorkirî ya pêşprocessoran ji bo her sê zimanan hilbijêrin (wek TypeScript ji bo JS) an jî girêdanan bi çavkaniyên derveyî ve zêde bikin.
Heke hûn tenê hewce ne ku tiştek belaş were kirin, yek ji edîtoran dê bes be. Ez CodePen-ê ji bo her tiştê ku hewcedariya pir sazûman an pirtûkxaneyan nake pêşniyar dikim - bi tenê HTML, CSS, û JS bi pêş-pêvajoyên vebijarkî li jor. Heke hûn dixwazin qada lîstikê bikar bînin da ku hebûna xweya medyaya civakî baştir bikin an portfoliyonek kesane pêşve bibin, CodePen vebijarkek çêtir e.
Guhertoya Premium
Hûn çend alternatîfên din hene ku hûn li ser CodePen hilbijêrin. Ger hûn salane bidin, hûn dikarin her mehê yek ji sê plansaziyên premium bi $12, $19, an $39 bistînin. Hûn dikarin li ser yek ji sê qatan hejmarek bêdawî pênûs, post û berhevokên taybet biafirînin.
Her weha hûn ê nîşana Pro (pêşveçûnek civakî), gihîştina moda hevkariya zindî, bê reklam û hêj bêtir bistînin. Di heman demê de hin stratejiyên tîmê-taybet û cûdahiyên din ên xaçê jî hene. Ji bo bêtir agahdarî li panela billing fermî ya wan binihêrin.
Key Features
Ji bilî afirandina HTML, CSS, û JavaScript di CodePen de, çend tiştên din hene ku wê ji hev vediqetînin.
- Dîtina rast-demê ya koda we gengaz e. Ew berhevkirinê hewce nake.
- Ceribandin dihêle hûn tiştên nû fêr bibin.
- Dozên ceribandinê yên piçûk biafirînin ku li pirsgirêkan bigerin û çareser bikin.
- Karên xwe yên hêja nîşan bidin.
- Ji bo karanîna paşê pênûsan biafirînin û hilînin.
- Koda pêşdebirên din biceribînin û wê di çalakiyê de bibînin.
Feyda
- Ji bo destpêkê, lêçûnek tune.
- Çavkaniyên fêrbûnê yên çêkirî.
- Bi yên din re hevkariyê bikin û projeyan bidin ber hev da ku bibînin ku ew dikarin di pêşerojê de biçin ku derê.
- UI bi karanîna hêsan û rasterast e.
dezawantajên
- Pirtûkxaneya kodê piçûk e, temamkirina koda otomatîkî ne bes e. Ew tenê ji bo projeyên yek-rûpelî baş e û nikare tiştek mezintir bigire.
- Li ser CodePen, hûn dikarin pênûsên taybet biafirînin, lê hûn ê hewce bikin ku hûn bi endametiyek Pro (9 $ / meh) nûve bikin.
koda sandbox
CodeSandbox edîtorek kodê-based web e. Ew ji bo we veguheztin, pakkirin, û rêveberiya girêdayîbûnê otomatîk dike, ku dihêle hûn bi yek klîk projeyek nû ava bikin. Piştî ku we tiştek balkêş çêkir, hûn dikarin wê bi yên din re bi tenê parvekirina malperê parve bikin.
Edîtor bi her projeyên JavaScript-ê re hevaheng e, her çend ew hin taybetmendiyên React-taybetî vedihewîne, wek vebijarka hilanîna projeyê di şablonek çêbikin-react-app.
Her projeyek ku hûn di CodeSandbox de ava dikin bi şablonek dest pê dike. Ew dikare bi pirtûkxaneyek taybetî, çarçoveyek, an dema xebitandinê (tevî Node.js) re têkildar be an jî teknolojiyên webê yên standard bikar bîne. Piştî ku şablonek hilbijêrin, hûn ji edîtorê re têne şandin, li wir hûn ê hemî pelên pêwîst bibînin û pencereya pêşdîtinê jixwe vekirî ye.
Hûn di hemî Sandboxan de gihîştina "pergalek pelan" heye, ku tê vê wateyê ku hûn dikarin pelên nû biafirînin, modulan (tevî pakêtên NPM-ê) bikar bînin, û bi hebûnên statîk re têkilî daynin. Di heman demê de fersendek heye ku hûn pelên mîhengê yên şablonê biguhezînin.
Tewra hûn dikarin ji bo karanîna xweya yekta şablonên xwe ava bikin, bi strukturên pelan û girêdayîbûnê, mîna di IDE de, temam bikin. Ji ber ku amûr bi Github-ê ve girêdayî ye, hûn dikarin bi lez peywiran biafirînin û PR-an vekin. Hûn dikarin tavilê serîlêdana xwe li ZEIT an Netlify bicîh bikin.
CodeSandbox Team Pro
CodeSandbox, karsaziyek Hollandî ya ku destûrê dide pêşdebiran ku sandboxek pêşkeftina serîlêdana webê-based gerokê ava bikin, bi fermî platformek hevkariyê derxistiye ku destûrê dide tîmê ku li ser kodê di ewr de bixebitin. Hilbera nû, Team Pro, çareseriyek bê-kod e ku ji bo tîmên hilbera bêkêmasî hatî çêkirin, ji sêwiraner û rêveberan bi tîmên ewlehiya kalîteyê (QA) û pê ve.
Proje ji bo her kesê ku bixwaze guheztinên serîlêdanek malperê çêbike an qebûl bike, proje di navbeynek bikarhêner-heval de têne peyda kirin, ji rêbazên alternatîf ên wekî şandina not û pêşniyaran ji pêşdebiran re ji bo pêkanîna guhertinan, vegerandina wan ji bo nîqaşê, û dubarekirina pêvajoyê, têne peyda kirin.
Key Features
- Edîtorek kodê û amûrek prototîpa-based web.
- Ji bo karanîna herêmî, sandboxek dikare di pelek zip de bi hêsanî were dakêşandin.
- Programming di sandboxan de tê kirin, ku dibe ku bi hêsanî bi hevkaran re were parve kirin.
Feyda
- Ezmûnek bikarhênerek çêtir û kontrolek mezintir li ser edîtorê.
- Taybetmendiya pêşdîtina zindî dikare were guheztin û di pencereyek cihê de were dîtin.
- Kod bixweber tê format kirin û CLI (codesandbox-cli) tê de heye
- Piştgiriya ji bo modulên npm yên pêşkeftî.
- Peyamên çewtiyê yên xweş bi pêşniyaran.
- Ew bi peydakirina termînalek çêtir, temaşevanek ceribandinê û temaşevanek pirsgirêkê ezmûna xeletkirinê baştir dike.
dezawantajên
- Xerîdarê paşîn bi gelek kesanebûnê re rû bi rû dimîne.
- Kaşkirin û daxistina pelan ji komputerek herêmî bi rêkûpêk naxebite.
- Pêdivî ye ku di CodeSandbox de strukturek peldankek diyarkirî were şopandin.
- Karbidestiya sandboxek taybet tenê ji patronan re heye.
StackBlitz
StackBlitz ji bo serîlêdanên webê IDE-ya serhêl a bi koda Visual Studio-yê ye. Platform bi qasî guhertoya sermaseyê bersivdar û adapteyî ye. StackBlitz IDE-ya serhêl e ku pê ve tê barkirin Angular û React amûrên pêşveçûnê.
Thinkster.io wê projeya fantastîk ava kir da ku ew bi qasî ku pêkan hêsan bike ku hûn bi projeya xweya Angular an React re dest pê bikin bêyî ku hûn li ser sazkirina girêdayîbûnê an mîhengan çêbikin. StackBlitz gelek taybetmendiyên ecêb û bêhempa peyda dike ku nuha tu edîtorek kodê serhêl a din tune. Wekî encamek, hêja ye ku meriv StackBlitz bêtir lêkolîn bike û kifş bike ka vê IDE-ya serhêl çi pêşkêşî dike.
Stackblitz bi tevahî IDE-ê re zehf tê berhev kirin, nemaze heke hûn nikaribin xatir ji koda VS bibêjin ji ber ku amûr li ser bingeha wê ye. Pakêtê xwedan taybetmendiyên cûrbecûr hene ku dihêle hûn dest bi afirandina serîlêdanek tije-stack bikin û bidomînin.
Bername ji hêla Visual Studio ve, ku di nav pêşdebiran de navdar e, tête hêz kirin. Guhertina negirêdayî taybetmendiya berbiçav a projeyê ye. Ji bo ku ev gengaz bibe, tîmê Stackblitz serverek nav-gerokê çêkir. Gava ku hûn dinivîsin, ew bixweber pêwendiyan saz dike, berhev dike, berhev dike, û barkirina germ dike.
Guhertoya Premium
Cadet, Astronaut, û Fermandar bi rêzê, 8 $ / mehê, û 29 $ / mehê belaş têne peyda kirin. Astronaut and Commander gelek taybetmendî dihewîne mîna projeyên taybet ên bêsînor, barkirina pelên bêsînor, vexwendina kanala slack ya tîmê bingehîn, û hwd. Ji bo bêtir agahdarî, li panelê billing fermî bibînin.
Key Features
- Zêdekirina pakêtên NPM li projeya xwe.
- Spas ji serverek dev-geroka romanê, hûn dikarin dema negirêdayî biguherînin.
- URLek serîlêdana mêvandar a ku destûrê dide me ku em her dem bigihîjin (û parve bikin) sepana xweya zindî.
- Taybetmendiyên din ên navdar ên Visual Studio Code Intellisense, Project Search (Cmd / Ctrl + P), Go to Definition, û yên din hene.
Feyda
- Kapasîteyên Firebase ji bo bicîhkirinê.
- Edîtor bi rastî karanîna hêsan e û pir zû ye.
- Bikarhêner gihîştina pakêt.json, index.html, û index.js hene.
- Koda çavkaniyê ya parvekirî ya ku di heman demê de dikare were bicîh kirin.
- Pêşniyara zindî li ser beşek mezin a rûpelê, bi vebijarka ku ger hewce bike li ser rûpelek cûda veke.
- Dema Offline, Verastkirin
- Temamkirinên biaqil û Intellisense çêtir.
- Bingeha Stackblitz e çavkaniya vekirî.
dezawantajên
- Bandora we li ser avahî an servera pêşdebir nîne ji ber ku ew ji hêla fermana create-react-app ve têne rêve kirin.
- Di React de, pêdivî ye ku avahiyek peldanka bingehîn were dîtin.
- Ne gengaz e ku kodê bixweber format bike, her çend gengaz e ku meriv wiya bi destan jî bike.
Xelasî
Naha, qada lîstika kodkirinê ya mîna yên ku me li jor dîtiye, dibe ku ji bo avakirina her projeyek malperê bi tevahî were bikar anîn. Dema ku hûn dikarin rasterast ji geroka xweya webê ava bikin, debug bikin, ceribandin û bicîh bikin ne hewce ye ku hûn IDE-yên giran li ser PC-ya xwe saz bikin.
Bi dîtina min, StackBlitz dê di nav wan de çêtirîn be ji ber ku ew IDE-ya-based web-ê ye ku destûrê dide JavaScript, Angular, û projeyên pêşkeftinê yên din rast ji qutikê, bêyî ku hewce bike ku hûn hawîrdorên pêşkeftina herêmî yên wekî Node.js, npm saz bikin, an Angular. Ew heman ezmûnê peyda dike ku bi karanîna koda Visual Studio-yê herêmî bikar tîne. Di rastiyê de, ji ber ku StackBlitz ji hêla Visual Studio Code ve tê rêve kirin, ew wekî guhertoya sermaseyê zû û jêhatî hîs dike.
Kîjan ji CodePen, CodeSandbox, û StackBlitz amûra weya çûnê ye? Di şîroveyan de ji me re agahdar bikin.
Abbatyya
Spas ji bo vê gotara hêja, gava ku min stackblitz.com dît, ez dizanim tiştê ku ez dixwazim ev e.