Lavorando su un progetto complesso, che tu sia un programmatore esperto o una matricola, è praticamente probabile che ti imbatterai in problemi. Quando dividi il tuo progetto in molti moduli, sorgono problemi, rendendo più difficile rintracciare gli errori e trovare soluzioni. In altre circostanze, il debug di singole istanze può essere difficile perché non hai scoperto la soluzione adeguata al problema su cui stai lavorando.
Occasionalmente si presenta anche come un pezzo di codice, che può sembrare complesso in quel momento. JavaScript è uno dei linguaggi basati sul Web estremamente semplice da imparare. Avvia semplicemente il browser desktop e vai su Strumenti per sviluppatori (di solito F12) e il gioco è fatto! Puoi quindi sperimentare con JS senza dover installare o eseguire alcun software complicato.
Per iniziare, tutto ciò che serve è un browser. È meraviglioso avere tutta questa semplicità fuori dagli schemi, ma ci sono occasioni in cui ne hai bisogno di più. Ad esempio, supponi di voler sperimentare una nuova API Web che hai scoperto di recente ma non di voler iniziare un nuovo progetto.
In questo post, confronteremo e confronteremo i tre playground JS più popolari, CodePen, CodeSandbox e StackBlitz. Iniziamo!
CodePen
Gli strumenti di sviluppo web front-end sono in continua evoluzione e gli editor di testo sono una componente importante delle ultime tecnologie che semplificano la vita di uno sviluppatore. Oltre agli editor di testo autonomi come Atom o Notepad ++, negli ultimi anni c'è stata un'esplosione di editor basati su browser che non richiedono l'installazione di programmi e promuovono una maggiore collaborazione.
CodePen è una "comunità online per testare e presentare frammenti di codice HTML, CSS e JavaScript creati dagli utenti" che offre fantastiche opportunità per imparare a scrivere meglio le pagine Web frontend.
CodePen ti offre due "modalità". La prima e più comunemente usata è la Penna. È semplice come fare clic su un pulsante ed essere trasportati direttamente nell'editor. Da lì, puoi accedere a un pannello di anteprima e alle finestre di modifica HTML, CSS e JS di base.
Non esiste un "file system", "IntelliSense" o altro: solo una semplice evidenziazione della sintassi e comandi veloci come Prettify. Nella scheda delle opzioni, puoi selezionare da una gamma ristretta di preprocessori per tutte e tre le lingue (come TypeScript per JS) o aggiungere connessioni a fonti esterne.
Se hai solo bisogno di qualcosa fatto gratuitamente, uno degli editor sarà sufficiente. Suggerirei CodePen per tutto ciò che non richiede molte impostazioni o librerie: semplicemente HTML, CSS e JS con pre-processori opzionali in cima. Se desideri utilizzare il playground per migliorare la tua presenza sui social media o sviluppare un portfolio personale, CodePen è un'opzione migliore.
Versione Premium
Hai qualche altra alternativa tra cui scegliere su CodePen. Se paghi annualmente, puoi ottenere uno dei tre piani premium per $ 12, $ 19 o $ 39 al mese. Puoi creare un numero infinito di penne private, post e raccolte su uno qualsiasi dei tre livelli.
Riceverai anche il badge Pro (una spinta sociale), l'accesso alla modalità di collaborazione dal vivo, nessuna pubblicità e altro ancora. Ci sono anche alcune strategie specifiche per la squadra e altre distinzioni tra livelli. Controlla la loro scheda di fatturazione ufficiale per ulteriori informazioni.
Caratteristiche principali
Oltre a creare HTML, CSS e JavaScript in CodePen, ci sono alcune altre cose che lo distinguono.
- È possibile visualizzare il codice in tempo reale. Non richiede compilazione.
- Sperimentare ti permette di imparare cose nuove.
- Crea piccoli casi di test per cercare e risolvere i problemi.
- Mostra le tue meravigliose opere.
- Crea e conserva le penne per un uso successivo.
- Prova il codice di altri sviluppatori e guardalo in azione.
Vantaggi
- Per cominciare, non ci sono costi.
- Risorse di apprendimento integrate.
- Collabora con gli altri e confronta i progetti per vedere dove possono andare in futuro.
- L'interfaccia utente è semplice da usare e diretta.
Svantaggi
- La libreria del codice è piccola, il completamento automatico del codice è inadeguato. È solo buono per progetti di una pagina e non può gestire nulla di più grande.
- Su CodePen, puoi creare penne private, ma dovrai passare a un abbonamento Pro ($ 9 al mese).
CodiceSandbox
CodeSandbox è un editor di codice basato sul web. Automatizza per te la traspirazione, il confezionamento e la gestione delle dipendenze, consentendoti di creare un nuovo progetto con un solo clic. Dopo aver creato qualcosa di affascinante, puoi condividerlo con altri semplicemente condividendo il sito web.
L'editor è compatibile con qualsiasi progetto JavaScript, sebbene includa alcune funzionalità specifiche di React, come l'opzione per salvare il progetto in un modello create-react-app.
Qualsiasi progetto che crei in CodeSandbox inizia con un modello. Può riguardare una libreria, un framework o un runtime specifico (incluso Node.js) o utilizzare semplicemente tecnologie Web standard. Dopo aver selezionato un modello, vieni inviato all'editor, dove troverai tutti i file necessari e la finestra di anteprima già aperta.
Hai accesso a un "file system" in tutte le sandbox, il che significa che puoi creare nuovi file, utilizzare moduli (inclusi pacchetti NPM) e interagire con risorse statiche. C'è anche la possibilità di modificare i file di configurazione specifici del modello.
Puoi persino costruire i tuoi modelli per il tuo caso d'uso unico, completi di struttura di file e dipendenze, proprio come in un IDE. Poiché lo strumento è collegato a Github, puoi generare rapidamente commit e aprire PR. Puoi distribuire la tua applicazione su ZEIT o Netlify immediatamente.
CodeSandbox Team Pro
CodeSandbox, un'azienda olandese che consente agli sviluppatori di creare una sandbox per lo sviluppo di app Web basata su browser, ha ufficialmente rilasciato una piattaforma di collaborazione che consente ai team di lavorare sul codice nel cloud. Il nuovo prodotto, Team Pro, è una soluzione senza codice creata per team di prodotti completi, che vanno da designer e manager fino a team di controllo qualità (QA) e oltre.
I progetti sono forniti in un'interfaccia intuitiva per chiunque desideri apportare o accettare modifiche a un'applicazione Web, evitando metodi alternativi come inviare note e raccomandazioni agli sviluppatori per eseguire le modifiche, ritrasmetterle per la discussione e ripetere il processo.
Caratteristiche principali
- Un editor di codice basato sul Web e uno strumento prototipo.
- Per l'uso locale, una sandbox può essere scaricata facilmente in un file zip.
- Programmazione viene eseguito in sandbox, che possono essere prontamente condivisi con i colleghi.
Vantaggi
- Un'esperienza utente migliorata e un maggiore controllo sull'editor.
- La funzione di anteprima dal vivo può essere modificata e visualizzata in una finestra separata.
- Il codice viene formattato automaticamente e include una CLI (codesandbox-cli)
- Supporto per moduli npm avanzati.
- Bellissimi messaggi di errore con consigli.
- Migliora l'esperienza di debug fornendo un terminale, un visualizzatore di test e un visualizzatore di problemi migliori.
Svantaggi
- Il consumatore finale è esposto a molte personalizzazioni.
- Il trascinamento dei file da un computer locale non funziona correttamente.
- È necessario seguire una determinata struttura di cartelle in CodeSandbox.
- La funzionalità di una sandbox privata è disponibile solo per gli utenti.
StackBlitz
StackBlitz è un IDE online basato su Visual Studio Code per applicazioni Web. La piattaforma è reattiva e adattabile come la versione desktop. StackBlitz è un IDE online precaricato Angolare e Reagire strumenti di sviluppo.
Thinkster.io ha creato quel fantastico progetto per rendere il più semplice possibile iniziare con il tuo progetto Angular o React senza doversi preoccupare dell'installazione delle dipendenze o delle impostazioni di build. StackBlitz offre molte funzionalità straordinarie e uniche che nessun altro editor di codice online ha in questo momento. Di conseguenza, vale la pena indagare ulteriormente su StackBlitz e scoprire cosa ha da offrire questo IDE online.
Stackblitz è estremamente paragonabile all'IDE completo, soprattutto se non puoi dire addio al codice VS perché lo strumento si basa su di esso. Il pacchetto ha una varietà di funzionalità che ti consentono di iniziare e continuare a creare un'applicazione full-stack.
Il programma è basato su Visual Studio, che è ben noto tra gli sviluppatori. La modifica offline è la caratteristica principale del progetto. Per renderlo possibile, il team di Stackblitz ha creato un server web nel browser. Durante la digitazione, installa automaticamente dipendenze, compila, raggruppa ed esegue il ricaricamento a caldo.
Versione Premium
Cadet, Astronaut e Commander sono disponibili gratuitamente, rispettivamente, $8/mese e $29/mese. Astronaut and Commander include una serie di funzionalità come progetti privati illimitati, caricamenti di file illimitati, invito al canale slack del team principale e così via. Per ulteriori informazioni, consultare l'affissione ufficiale.
Caratteristiche principali
- Aggiunta di pacchetti NPM al tuo progetto.
- Grazie a un nuovo server di sviluppo nel browser, puoi modificare offline.
- Un URL dell'app ospitata che ci consente di accedere (e condividere) la nostra app live in qualsiasi momento.
- Altre importanti funzionalità di Visual Studio Code includono Intellisense, Ricerca progetti (Cmd/Ctrl+P), Vai a definizione e altri.
Vantaggi
- Funzionalità di Firebase per la distribuzione.
- L'editor è davvero facile da usare ed estremamente veloce.
- Gli utenti hanno accesso a package.json, index.html e index.js.
- Codice sorgente condivisibile che può anche essere incorporato.
- Anteprima dal vivo su un'ampia sezione della pagina, con la possibilità di aprire su una pagina diversa, se necessario.
- In modalità offline, modifica
- Completamenti intelligenti e Intellisense migliorato.
- Il cuore di Stackblitz è open source.
Svantaggi
- Non hai influenza sull'edificio o sul server dello sviluppatore perché questi sono gestiti dal comando create-react-app.
- In React, dovrebbe essere osservata una struttura di cartelle fondamentale.
- Non è possibile formattare il codice automaticamente, sebbene sia possibile farlo manualmente.
Conclusione
Al giorno d'oggi, un parco giochi di codifica come quelli che abbiamo visto sopra può essere utilizzato per costruire completamente qualsiasi progetto web. Non è necessario installare ingombranti IDE sul tuo PC quando puoi creare, eseguire il debug, testare e distribuire direttamente dal tuo browser web.
A mio parere, StackBlitz sarebbe il migliore tra questi perché è un IDE basato sul Web che consente JavaScript, Angular e altri progetti di sviluppo immediatamente, senza la necessità di installare alcun ambiente di sviluppo locale come Node.js, npm, o angolare. Offre la stessa esperienza dell'utilizzo di Visual Studio Code in locale. In realtà, poiché StackBlitz è guidato da Visual Studio Code, risulta veloce e versatile come la versione desktop.
Quale tra CodePen, CodeSandbox e StackBlitz è il tuo strumento preferito? Fateci sapere nei commenti.
Abbatiya
Grazie per questo fantastico articolo, una volta che ho visto stackblitz.com, so che è quello che voglio.