Travagliendu nantu à un prughjettu cumplessu, sì sì un programatore espertu o un novu, quasi prubabilmente averà prublemi. Quandu dividite u vostru prughjettu in parechji moduli, i prublemi si ponenu, rendendu più difficiuli di seguità l'errori è di truvà suluzioni. In altre circustanze, debugging istanze individuali pò esse duru perchè ùn avete micca scupertu a suluzione adatta à u prublema chì avete travagliatu.
Hè ancu accade cum'è un pezzu di codice à l'occasione, chì pò vede cumplessu à u mumentu. JavaScript hè una di e lingue basate in Web chì hè estremamente simplice per amparà. Basta lancià u vostru navigatore di desktop è navigate à Strumenti di sviluppatore (di solitu F12), è avete finitu! Allora pudete sperimentà cù JS senza avè bisognu di stallà o eseguisce un software complicatu.
Per cumincià, tuttu ciò chì avete bisognu hè un navigatore. Hè maravigliu per avè tutta sta simplicità ghjustu fora di a scatula, ma ci sò occasioni quandu avete bisognu di più. Per esempiu, supponi chì vulete sperimentà cù una nova API Web chì avete scupertu recentemente, ma ùn vulete micca inizià un novu prughjettu.
In questu post, paragunemu è cuntrasteremu i trè parchi di ghjocu JS più populari, CodePen, CodeSandbox è StackBlitz. Cuminciamu !
CodePen
I strumenti di sviluppu web di frontend sò sempre in evoluzione, è l'editori di testu sò un grande cumpunente di l'ultime tecnulugia chì facenu a vita di u sviluppatore più simplice. In più di l'editori di testu stand-alone cum'è Atom o Notepad ++, ci hè stata una splusione di editori basati in navigatore in l'ultimi anni chì ùn anu micca bisognu di stallazione di prugramma è prumove una cullaburazione più grande.
CodePen hè una "cumunità in linea per pruvà è presentà snippets di codice HTML, CSS è JavaScript creati da l'utilizatori" chì offre opportunità fantastiche per amparà à scrive megliu pagine web frontend.
CodePen vi dà dui "modi". U primu è più cumunimenti utilizatu hè a Pen. Hè simplice quant'è cliccà un buttone è esse trasportatu ghjustu à l'editore. Da quì, pudete accede à un pannellu di vista previa è ancu à e finestre di edizione HTML, CSS è JS di basa.
Ùn ci hè micca "sistema di fugliale", "IntelliSense" o qualsiasi altra cosa - solu una sintassi simplice è cumandamenti veloci cum'è prettify. In a tabulazione di l'opzioni, pudete selezziunate da una gamma ristretta di preprocessori per e trè lingue (cum'è TypeScript per JS) o aghjunghje cunnessione à fonti esterni.
Sè avete solu bisognu di qualcosa fattu per liberu, unu di l'editori serà abbastanza. Suggeriu CodePen per tuttu ciò chì ùn hà micca bisognu di assai setup o biblioteche - simplice HTML, CSS è JS cù pre-processori opzionali in cima. Se vulete usà u campu di ghjocu per migliurà a vostra presenza in e social media o sviluppà una cartera persunale, CodePen hè una megliu opzione.
Versione Premium
Avete uni pochi di più altirnativa per selezziunà nantu à CodePen. Se paghete annu, pudete uttene unu di i trè piani premium per $ 12, $ 19, o $ 39 ogni mese. Pudete creà un numeru infinitu di penne private, posti è cullezzione nantu à qualsiasi di i trè livelli.
Riceverete ancu u badge Pro (un impulsu suciale), accessu à u modu di collab in diretta, senza publicità, è più. Ci sò ancu certe strategie specifiche di squadra è altre distinzioni cross-tier. Scuprite u so pianu di fatturazione ufficiale per più infurmazione.
Funzioni principali
A parte di creà HTML, CSS, è JavaScript in CodePen, ci sò uni pochi di cose chì u distinguenu.
- A visualizazione in tempu reale di u vostru codice hè pussibule. Ùn hè micca bisognu di compilazione.
- L'esperimentu permette di amparà cose novi.
- Crea casi di teste minuscule per circà è risolve i prublemi.
- Mostra i vostri travaglii meravigliosi.
- Crea è guardà Penne per un usu più tardi.
- Pruvate u codice di l'altri sviluppatori è vede lu in azzione.
vantaghji
- Per cumincià, ùn ci hè micca costu.
- Risorse di apprendimentu integrate.
- Collaborate cù l'altri è paragunate i prughjetti per vede induve ponu andà in u futuru.
- L'interfaccia utente hè simplice d'utilizà è diretta.
Tu me
- A libreria di codici hè chjuca, u cumpletu auto-codice hè inadegwatu. Hè solu bè per i prughjetti di una pagina è ùn pò micca trattà nunda più grande.
- In CodePen, pudete creà penne private, ma avete bisognu di aghjurnà à un membru Pro ($ 9 / mese).
codice sandbox
CodeSandbox hè un editore di codice basatu in u web. Automatizza a transpirazione, l'imballaggio è a gestione di a dependenza per voi, chì vi permette di custruisce un novu prughjettu cun un solu clic. Dopu avè creatu qualcosa affascinante, pudete sparte cù l'altri semplicemente sparte u situ web.
L'editore hè cumpatibile cù qualsiasi prughjetti JavaScript, ancu s'ellu include certe funzioni specifiche di React, cum'è l'opzione per salvà u prugettu in un mudellu di creazione-react-app.
Ogni prughjettu chì custruisce in CodeSandbox principia cù un mudellu. Pò esse sia in relazione cù una biblioteca specifica, framework, o runtime (cumpresu Node.js) o aduprà solu tecnulugia web standard. Dopu avè sceltu un mudellu, vi sò mandati à l'editore, induve truverete tutti i schedarii necessarii è a finestra di vista previa digià aperta.
Avete accessu à un "sistema di schedari" in tutti i Sandboxes, chì significa chì pudete creà novi fugliali, utilizà moduli (cumpresi i pacchetti NPM), è interagisce cù l'assi statichi. Ci hè ancu l'uppurtunità di mudificà i schedarii di cunfigurazione specifichi di mudelli.
Pudete ancu custruisce i vostri mudelli per u vostru casu d'usu unicu, cumpletu cù a struttura di u schedariu è e dipendenze, cum'è in un IDE. Perchè l'uttellu hè ligatu à Github, pudete generà rapidamente commits è apre PR. Pudete implementà a vostra applicazione à ZEIT o Netlify subitu.
CodeSandbox Team Pro
CodeSandbox, un affari olandese chì permette à i sviluppatori di custruisce un sandbox di sviluppu di l'app web basatu in navigatore, hà liberatu ufficialmente una piattaforma di cullaburazione chì permette à e squadre di travaglià in codice in u nuvulu. U novu pruduttu, Team Pro, hè una soluzione senza codice custruita per squadre di produttu cumpletu, chì varieghja da i diseggiani è i gestori à i squadre di assicuranza di qualità (QA) è oltre.
I prughjetti sò furniti in una interfaccia amichevule per tutti quelli chì volenu fà o accettà cambiamenti à una applicazione web, evitendu metudi alternativi cum'è l'inviu di note è raccomandazioni à i sviluppatori per eseguisce i cambiamenti, rinviendu per discussione, è ripite u prucessu.
Funzioni principali
- Un editore di codice basatu in u web è strumentu prototipu.
- Per l'usu lucale, un sandbox pò esse scaricatu facilmente in un schedariu zip.
- prugrammazione hè fattu in sandboxes, chì ponu esse facilmente spartuti cù i culleghi di travagliu.
vantaghji
- Una sperienza d'utilizatore mejorata è un cuntrollu più grande di l'editore.
- A funzione di vista previa in diretta pò esse mudificata è vista in una finestra separata.
- U codice hè furmatu automaticamente è include una CLI (codesandbox-cli)
- Supportu per i moduli npm avanzati.
- Boni missaghji d'errore cù cunsiglii.
- Migliura l'esperienza di debugging fornendu un terminale megliu, un visore di teste è un visore di prublemi.
Tu me
- U cunsumadore finale hè espostu à parechje persunalizazione.
- Drag and drop of files from a local computer ùn funziona micca bè.
- Una certa struttura di cartulare deve esse seguita in CodeSandbox.
- A funziunalità di un sandbox privatu hè dispunibule solu per i patroni.
StackBlitz
StackBlitz hè un IDE in linea alimentatu da Visual Studio Code per applicazioni web. A piattaforma hè cum'è responsiva è adattabile cum'è a versione desktop. StackBlitz hè un IDE in linea chì vene precaricatu Angulare è React strumenti di sviluppu.
Thinkster.io hà custruitu stu prughjettu fantasticu per fà u più simplice pussibule per inizià cù u vostru prughjettu Angular o React senza avè da preoccupassi di a stallazione di dependenza o di custruisce paràmetri. StackBlitz furnisce assai caratteristiche sorprendenti è uniche chì nisun altru editore di codice in linea hà avà. In u risultatu, vale a pena investigà StackBlitz più è scopre ciò chì questu IDE in linea hà da offre.
Stackblitz hè estremamente paragunabile à l'IDE cumpletu, soprattuttu s'ellu ùn pò micca dì addiu à u codice VS perchè l'uttellu hè basatu annantu à questu. U pacchettu hà una varietà di funzioni chì permettenu di inizià è cuntinuà à creà una applicazione full-stack.
U prugramma hè alimentatu da Visual Studio, chì hè ben cunnisciutu trà i sviluppatori. L'edizione offline hè a funzione standout di u prughjettu. Per fà questu pussibule, a squadra Stackblitz hà creatu un servitore web in-browser. Mentre scrivite, stalla automaticamente dipendenze, compila, bundle, è fa ricaricamentu caldu.
Versione Premium
Cadet, Astronaut è Commander sò dispunibuli gratuitamente, $ 8 / mese, è $ 29 / mese, rispettivamente. Astronaut and Commander include una quantità di funzioni cum'è prughjetti privati illimitati, caricamenti di fugliali illimitati, invitu à u canali di slack di a squadra core, è cusì. Per più infurmazione, vede u billing board ufficiale.
Funzioni principali
- Aghjunghjendu pacchetti NPM à u vostru prughjettu.
- Grazie à un novu servitore di sviluppu in u navigatore, pudete edità mentre hè offline.
- Un URL di l'app ospitu chì ci permette di accede (è sparte) a nostra app live in ogni mumentu.
- Altre funzioni notevuli di Visual Studio Code include Intellisense, Project Search (Cmd / Ctrl + P), Vai à Definizione, è altri.
vantaghji
- Capacità di Firebase per l'implementazione.
- L'editore hè veramente faciule d'utilizà è estremamente rapidu.
- L'utilizatori anu accessu à package.json, index.html è index.js.
- Codice surghjente sparte chì pò ancu esse integratu.
- Anteprima live in una grande sezione di a pagina, cù l'opzione per apre in una pagina diversa se ne necessariu.
- Mentre Offline, Editing
- Completamenti intelligenti è Intellisense migliuratu.
- U core di Stackblitz hè fonti apertu.
Tu me
- Ùn avete micca influenza annantu à l'edificiu o u servitore di sviluppatore perchè quelli sò gestiti da u cumandamentu create-react-app.
- In React, deve esse osservata una struttura di cartulare fundamentale.
- Ùn hè micca pussibule di furmà u codice automaticamente, ancu s'ellu hè pussibule di fà manualmente.
cunchiusioni
Oghje, un parcorsu di codificazione cum'è quelli chì avemu vistu sopra pò esse usatu per custruisce cumplettamente qualsiasi prughjettu web. Ùn ci hè micca bisognu di installà IDE ingombranti nantu à u vostru PC quandu pudete custruisce, debug, pruvà è implementà direttamente da u vostru navigatore web.
In u mo parè, StackBlitz seria megliu trà elli perchè hè un IDE basatu in u web chì permette JavaScript, Angular, è altri prughjetti di sviluppu ghjustu fora di a scatula, senza bisognu di installà ambienti di sviluppu lucali cum'è Node.js, npm, o angulare. Fornisce a listessa sperienza cum'è cù Visual Studio Code in u locu. In realità, perchè StackBlitz hè guidatu da Visual Studio Code, si senti cusì veloce è versatile cum'è a versione desktop.
Qualessu di CodePen, CodeSandbox è StackBlitz hè u vostru strumentu per andà? Fateci sapè in i cumenti.
Abbatiya
Grazie per stu grande articulu, una volta chì aghju vistu stackblitz.com, sò chì questu hè ciò chì vogliu.