Laborante pri kompleksa projekto, ĉu vi estas sperta programisto aŭ komencanto, vi preskaŭ verŝajne renkontos problemojn. Kiam vi dividas vian projekton en multajn modulojn, aperas problemoj, kio malfaciligas spuri erarojn kaj trovi solvojn. En aliaj cirkonstancoj, sencimigi individuajn okazojn povas esti malfacila ĉar vi ne malkovris la taŭgan solvon al la problemo, pri kiu vi laboris.
Ĝi ankaŭ okazas kiel peco de kodo foje, kiu povas aspekti kompleksa tiutempe. JavaScript estas unu el la TTT-bazitaj lingvoj, kiu estas ekstreme simple lernebla. Simple lanĉu vian labortablan retumilon kaj navigu al Programiloj (kutime F12), kaj vi finis! Vi tiam povas eksperimenti kun JS sen neceso instali aŭ ruli ajnan komplikan programaron.
Por komenci, vi bezonas nur retumilon. Estas mirinde havi ĉi tiun ĉi simplecon tuj el la skatolo, sed estas okazoj kiam vi bezonas pli. Ekzemple, supozu, ke vi volas eksperimenti kun nova TTT-API, kiun vi lastatempe malkovris sed ne volas komenci novan projekton.
En ĉi tiu afiŝo, ni komparos kaj kontrastos la tri plej popularajn JS-ludejojn, CodePen, CodeSandbox kaj StackBlitz. Ni komencu!
CodePen
Interretaj disvolvaj iloj ĉiam evoluas, kaj tekstredaktiloj estas granda komponanto de la plej novaj teknologioj, kiuj simpligas la vivon de programisto. Krom memstaraj tekstredaktiloj kiel ekzemple Atom aŭ Notepad ++, okazis eksplodo de retumiloj bazitaj en la lastaj jaroj, kiuj ne postulas programinstaladon kaj antaŭenigas pli grandan kunlaboron.
CodePen estas "interreta komunumo por testi kaj prezenti uzantkreitajn HTML, CSS kaj JavaScript-kodfragmentojn" kiu ofertas mirindajn ŝancojn lerni kiel pli bone skribi fasajn retpaĝojn.
CodePen donas al vi du "reĝimojn". La unua kaj plej ofte uzata estas la Plumo. Ĝi estas tiel simpla kiel klaki butonon kaj esti transportita rekte al la redaktilo. De tie, vi povas aliri antaŭrigardan panelon same kiel bazajn redaktajn fenestrojn HTML, CSS kaj JS.
Ne ekzistas "dosiersistemo", "IntelliSense" aŭ io alia - nur simpla sintaksa reliefigo kaj rapidaj komandoj kiel prettify. En la agorda langeto, vi povas elekti el limigita gamo de antaŭprocesiloj por ĉiuj tri lingvoj (kiel TypeScript por JS) aŭ aldoni ligojn al eksteraj fontoj.
Se vi nur bezonas ion faritan senpage, ĉiu el la redaktiloj sufiĉos. Mi sugestus CodePen por ĉio, kio ne postulas multajn aranĝojn aŭ bibliotekojn - simple HTML, CSS kaj JS kun laŭvolaj antaŭprocesiloj supre. Se vi volas uzi la ludejon por plibonigi vian socian amaskomunikilaron aŭ evoluigi personan biletujon, CodePen estas pli bona elekto.
Premium Versio
Vi havas kelkajn pliajn alternativojn por elekti sur CodePen. Se vi pagas ĉiujare, vi povas akiri unu el tri superaj planoj por $12, $19 aŭ $39 ĉiumonate. Vi povas krei senfinan nombron da privataj skribiloj, afiŝoj kaj kolektoj sur iu el la tri niveloj.
Vi ankaŭ ricevos la Pro-insignon (socia akcelo), vivkunlaborreĝimon aliron, neniun reklamadon, kaj pli. Ekzistas ankaŭ certaj teamspecifaj strategioj kaj aliaj trans-nivelaj distingoj. Rigardu ilian oficialan fakturan tabulon por pliaj informoj.
Ŝlosilo Elstaraĵoj
Krom krei HTML, CSS kaj JavaScript en CodePen, estas kelkaj pliaj aferoj, kiuj apartigas ĝin.
- Realtempa spektado de via kodo eblas. Ĝi ne postulas kompilon.
- Eksperimentado permesas vin lerni novajn aferojn.
- Kreu etajn provojn por serĉi kaj trakti problemojn.
- Montru viajn mirindajn verkojn.
- Kreu kaj konservu Plumojn por posta uzo.
- Provu la kodon de aliaj programistoj kaj vidu ĝin en ago.
Avantaĝoj
- Por komenci, ne estas kosto.
- Enkonstruitaj lernaj rimedoj.
- Kunlaboru kun aliaj kaj komparu projektojn por vidi kien ili povas iri estonte.
- La UI estas simpla uzebla kaj simpla.
malavantaĝoj
- La kodbiblioteko estas malgranda, aŭto-koda kompletigo estas neadekvata. Ĝi estas nur bona por unupaĝaj projektoj kaj ne povas pritrakti ion pli grandan.
- Sur CodePen, vi povas krei privatajn plumojn, sed vi devos ĝisdatigi al Profesia membreco ($ 9/monato).
KodoSandbox
CodeSandbox estas ret-bazita kodredaktilo. Ĝi aŭtomatigas transpiradon, pakadon kaj dependecan administradon por vi, permesante al vi konstrui novan projekton per unu klako. Post kiam vi kreis ion fascinan, vi povas dividi ĝin kun aliaj simple dividante la retejon.
La redaktilo estas kongrua kun iuj JavaScript-projektoj, kvankam ĝi inkluzivas iujn specifajn funkciojn de React, kiel la eblon konservi la projekton en ŝablonon krei-reagi-apon.
Ajna projekto, kiun vi konstruas en CodeSandbox, komenciĝas per ŝablono. Ĝi povas aŭ rilati al specifa biblioteko, kadro aŭ rultempo (inkluzive de Node.js) aŭ uzi simple normajn retajn teknologiojn. Elektinte ŝablonon, vi estas sendita al la redaktilo, kie vi trovos ĉiujn necesajn dosierojn kaj la antaŭrigardan fenestron jam malfermita.
Vi havas aliron al "dosiersistemo" en ĉiuj Sandboxes, kio signifas, ke vi povas krei novajn dosierojn, uzi modulojn (inkluzive de NPM-pakaĵoj) kaj interagi kun statikaj aktivoj. Ankaŭ ekzistas la ŝanco modifi la ŝablono-specifajn agordajn dosierojn.
Vi eĉ povas konstrui viajn proprajn ŝablonojn por via unika uzokazo, kompleta kun dosierstrukturo kaj dependecoj, tre kiel en IDE. Ĉar la ilo estas ligita al Github, vi povas rapide generi komitojn kaj malfermi PR-ojn. Vi povas deploji vian aplikaĵon al ZEIT aŭ Netlify tuj.
CodeSandbox Team Pro
CodeSandbox, nederlanda komerco kiu permesas al programistoj konstrui retumilon bazitan sur retumila disvolva sablokesto, oficiale publikigis kunlaboran platformon, kiu permesas al teamoj labori pri kodo en la nubo. La nova produkto, Team Pro, estas senkoda solvo konstruita por kompletaj produktaj teamoj, kiuj iras de dizajnistoj kaj administrantoj tra teamoj pri kvalito (QA) kaj pretere.
Projektoj estas disponigitaj en uzant-amika interfaco por ĉiu, kiu deziras fari aŭ akcepti ŝanĝojn al TTT-apliko, evitante alternativajn metodojn kiel sendi notojn kaj rekomendojn al programistoj por efektivigi la ŝanĝojn, redoni ilin por diskuto kaj ripetante la procezon.
Ŝlosilo Elstaraĵoj
- Ret-bazita kodredaktilo kaj prototipa ilo.
- Por loka uzo, sablokesto povas esti elŝutita facile en zip-dosiero.
- programado estas farita en sablokestoj, kiuj povas esti facile dividitaj kun kunlaborantoj.
Avantaĝoj
- Plibonigita sperto de uzanto kaj pli granda kontrolo de la redaktilo.
- La viva antaŭrigarda funkcio povas esti modifita kaj rigardata en aparta fenestro.
- La kodo estas aŭtomate formatita kaj inkluzivas CLI (codesandbox-cli)
- Subteno por altnivelaj npm-moduloj.
- Belaj erarmesaĝoj kun rekomendoj.
- Ĝi plibonigas la sencimigan sperton provizante pli bonan terminalon, testan spektilon kaj eldonan spektilon.
malavantaĝoj
- La fina konsumanto estas elmontrita al multaj personigoj.
- Treni kaj faligi dosierojn de loka komputilo ne funkcias ĝuste.
- Certa dosierujo-strukturo devas esti sekvita en CodeSandbox.
- La funkcieco de privata sablokesto estas disponebla nur por patronoj.
StackBlitz
StackBlitz estas interreta IDE funkciigita de Visual Studio Code por TTT-aplikoj. La platformo estas same respondema kaj adaptebla kiel la labortabla versio. StackBlitz estas interreta IDE kun kiu venas antaŭŝarĝita Angula kaj Reagi iloj de disvolviĝo.
Thinkster.io konstruis tiun mirindan projekton por fari ĝin kiel eble plej simpla komenci kun via Angular aŭ React projekto sen devi zorgi pri dependeca instalado aŭ konstrui agordojn. StackBlitz provizas multajn mirindajn kaj unikajn funkciojn, kiujn neniu alia interreta kodredaktilo havas nun. Kiel rezulto, indas esplori StackBlitz plu kaj malkovri kion ĉi tiu interreta IDE havas por proponi.
Stackblitz estas ege komparebla al la kompleta IDE, precipe se vi ne povas adiaŭi VS-kodon ĉar la ilo baziĝas sur ĝi. La pakaĵo havas diversajn funkciojn, kiuj ebligas al vi komenci kaj daŭrigi krei plenan aplikaĵon.
La programo estas funkciigita de Visual Studio, kiu estas konata inter programistoj. Senreta redaktado estas la elstara trajto de la projekto. Por fari tion ebla, la Stackblitz-teamo kreis en-retumilon retservilon. Dum vi tajpas, ĝi aŭtomate instalas dependecojn, kompilas, pakaĵojn kaj faras varman reŝargiĝon.
Premium Versio
Kadeto, Astronaŭto kaj Komandanto disponeblas senpage, 8 USD/monate kaj 29 USD/monate, respektive. Astronaŭto kaj Komandanto inkluzivas kelkajn funkciojn kiel senlimajn privatajn projektojn, senlimajn dosierojn alŝutojn, inviti al kerna teamo malstreĉa kanalo, ktp. Por pliaj informoj, vidu la oficiala faktura tabulo.
Ŝlosilo Elstaraĵoj
- Aldonante NPM-pakaĵojn al via projekto.
- Danke al nova en-retumila dev-servilo, vi povas redakti dum eksterrete.
- Gastigita aplika URL, kiu ebligas al ni aliri (kaj kunhavigi) nian vivan apon iam ajn.
- Aliaj rimarkindaj funkcioj de Visual Studio Code inkluzivas Intellisense, Projekto-Serĉo (Cmd/Ctrl+P), Iru al Difino kaj aliaj.
Avantaĝoj
- La kapabloj de Firebase por deplojo.
- La redaktilo estas vere facile uzebla kaj ege rapida.
- Uzantoj havas aliron al package.json, index.html kaj index.js.
- Kundividebla fontkodo kiu ankaŭ povas esti enigita.
- Viva antaŭrigardo sur granda sekcio de la paĝo, kun la eblo malfermiĝi sur malsama paĝo se necese.
- Dum eksterrete, Redaktado
- Inteligentaj kompletigoj kaj plibonigita Intellisense.
- La kerno de Stackblitz estas malferma fonto.
malavantaĝoj
- Vi ne havas influon sur la konstruaĵo aŭ la programisto-servilo ĉar tiuj estas administritaj per la komando create-react-app.
- En React, fundamenta dosierujo-strukturo devus esti observita.
- Ne eblas aŭtomate formati kodon, kvankam eblas fari ĝin permane.
konkludo
Nuntempe, koda ludejo kiel tiuj, kiujn ni vidis supre, povas esti uzata por tute konstrui ajnan retprojekton. Ne necesas instali maloportunajn IDEojn sur via komputilo kiam vi povas konstrui, sencimigi, testi kaj disfaldi rekte de via retumilo.
Laŭ mi, StackBlitz estus plej bona inter ili ĉar ĝi estas ret-bazita IDE kiu permesas JavaScript, Angular, kaj aliajn evoluigajn projektojn tuj el la skatolo, sen neceso instali iujn ajn lokajn evoluajn mediojn kiel Node.js, npm, aŭ Angula. Ĝi provizas la saman sperton kiel uzi Visual Studio Code loke. En realeco, ĉar StackBlitz estas pelita de Visual Studio Code, ĝi sentas tiel rapida kaj diverstalenta kiel la labortabla versio.
Kiu el CodePen, CodeSandbox kaj StackBlitz estas via irebla ilo? Informu nin en la komentoj.
Abbatyya
Dankon pro ĉi tiu bonega artikolo, kiam mi vidis stackblitz.com, mi scias, ke ĉi tio estas kion mi volas.