Torniamo a parlare di code editor online. Oggi vogliamo presentarvi CodeSandbox, un'interessante progetto online dedicato allo prototipazione, allo sviluppo e al deploy delle Web App. CodeSandbox supporta nativamente numerosi framework e librerie JavaScript come React, Vue, Angular, Preact, Svelte, CxJS e Dojo, dimostrandosi uno strumento particolarmente completo.
Gli sviluppatori di CodeSandbox hanno individuato e curato fin da subito uno degli aspetti più importanti per chi sviluppa in Javascript: la condivisione del codice. JavaScript dispone infatti di una delle più imponenti community open source della Rete e, ogni giorno, nuove idee vengono condivise sulle varie piattaforme di code sharing.
Ecco perché CodeSandbox è stato dotato di tutte le principali funzionalità di condivisione del codice sia tra gruppi di lavoro, tramite la Classroom Mode, che con team e sviluppatori esterni.
Direttamente da CodeSandbox è possibile generare un URL per condividere in tempo reale il proprio codice, senza che sia necessario scaricare tool dedicati o il codice stesso. Sostanzialmente l'editor, ma potremmo parlare di un vero e proprio IDE, è diviso in vari servizi server, alcuni di essi completamente open source:
- il Client: composto dalla web application;
- il Server con le Phoenix API;
- Nginx: con i vari config file del Web engine;
- Git Extractor: il tool che si occupa di estrarre il codice dai repository di GitHub;
- La CLI (Command Line Interface): il tool da shell che si occupa dell'upload del codice direttamente dal terminale corrente.
CodeSandbox può essere incluso all'interno di un sito web per consentire lo sviluppo collaborativo di un progetto o per distribuire snippet riutilizzabili. Uno dei motti del team di sviluppo è: "essere produttivi ovunque", per questo motivo il progetto fornisce un ventaglio di tool con cui importare, sviluppare, eseguire commit e deploy dalla medesima web app. CodeSandbox sfrutta lo stesso editor di VSCode, Monaco Editor, cosi da garantire il supporto a feature come la "Go to Definition" o la "Replace Occurences" e ovviamente anche a TypeScript.
CodeSandbox può interfacciarsi anche con Jest, cosi da poter eseguire automaticamente il test del proprio codice e mostrare i risultati tramite una pratica interfaccia. In caso di errori rilevati nel sorgente o nelle impostazioni, CodeSandbox mostrerà un messaggio user friendly che spesso conterrà anche la soluzione per risolvere il problema individuato.
Via CodeSandbox