Share
Siamo stati tutti lì. Ci sono volte in cui vuoi semplicemente lanciare qualche codice JavaScript e vedere come funziona. Certo, potresti passare attraverso il fastidio di:
Sembra un sacco di lavoro, basta fare un semplice test del codice. Per fortuna ci sono strumenti che rendono questo tipo di lavoro banale.
In questo tutorial, vorrei esaminare uno dei miei strumenti preferiti per il test interattivo di JavaScript, JSBin.
Come accennato in precedenza, in molti casi è sufficiente testare un piccolo sottoinsieme di codice JavaScript. La creazione di un intero ambiente di sviluppo per un tale caso d'uso, nella maggior parte dei casi, non ha molto senso a meno che non vi sia una chiara dipendenza dall'hardware (ad esempio WebRTC) o affidamento su un'API o un prodotto di terze parti in cui è necessario servizi di back-end per accedere correttamente alle informazioni.
Che cosa offre JSBin è un'interfaccia utente basata su browser in cui è possibile inserire:
... e ottieni un feedback immediato in base al tuo codice. Inoltre, puoi opzionalmente includere qualsiasi numero di framework popolari nel tuo codice su schermo, permettendoti di sfruttare anche le funzionalità del framework. Il vantaggio principale è il feedback in tempo reale che ottieni dagli aggiornamenti che fai.
Diamo un'occhiata a questi strumenti un po 'più da vicino.
JSBin è stato creato ed è gestito attivamente dal famoso sviluppatore Remy Sharp. L'idea di svilupparlo è nata dalla necessità di collaborare in modo interattivo con altri sviluppatori per eseguire il debug del codice JavaScript. Da allora è maturato in uno strumento robusto che:
JSBin è anche open source sotto licenza liberale del MIT che consente ai membri della comunità di contribuire liberamente ad esso o di forchettarlo per creare le proprie soluzioni personalizzate.
JSBin offre un'interfaccia utente semplice che suddivide ciascun tipo di codice in singoli pannelli verticali.
Ogni pannello fornisce un mini-IDE che consente di inserire il codice e ricevere un feedback immediato tramite Produzione pannello. Ad esempio, se aggiungo il seguente codice al HTML pannello:
Rey Bango
Vedrò immediatamente il nuovo elemento e il rendering del testo nel Produzione pannello.
Naturalmente, è possibile aggiungere qualsiasi numero di elementi alla marcatura consentendo di creare una pagina in modo rapido e interattivo. Essere in grado di modificare lo stile del tuo markup è ugualmente importante poiché in alcuni casi, il codice JavaScript che stai testando è esplicitamente progettato per manipolare stili e regole CSS applicate ai tuoi elementi. Ecco dove il CSS entra in campo. Offre funzionalità di stile CSS completo, in modo da poter disporre i tuoi elementi in base alle tue esigenze, sfruttando anche le regole CSS3. Quindi aggiungendo il seguente codice:
div colore: rosso; font: 20px Tahoma, sans-serif; bordo: 1px solido nero; larghezza: 100 px; margine: 30 px; imbottitura: 10px; transform ruotare (15deg); -webkit-transform: rotate (15deg);
... fornisce i seguenti risultati:
Finora, il codice è stato semplice, ma ho bisogno di sottolineare che la cosa importante qui non è la complessità del codice ma il fatto che tu sia in grado di ricevere un feedback immediato. Potrei facilmente prendere il codice più coinvolto, come quello della demo CSS Transitions sulla Mozilla Developer Network e aggiungerlo in JSBin per produrre un effetto simile per il mio codice di test:
div colore: rosso; font: 20px Tahoma, sans-serif; bordo: 1px solido nero; larghezza: 100 px; margine: 30 px; imbottitura: 10px; -moz-transition: width 2s, height 2s, background-color 2s, -moz-transform 2s; -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s; -o-transizione: larghezza 2s, altezza 2s, background-color 2s, -o-transform 2s; transizione: larghezza 2s, altezza 2s, background-color 2s, transform 2s; div: hover background-color: #FFCCCC; larghezza: 200px; height: 200px; -moz-transform: rotate (180 °); -webkit-transform: rotate (180 °); -o-transform: rotate (180 °); transform rotazione (180 °);
Quindi, mentre sono più specificamente focalizzato sull'aspetto JavaScript di JSBin, è chiaro che gli sviluppatori web in generale possono beneficiare della natura interattiva dello strumento.
Per me, il vantaggio principale di JSBin è la capacità di testare rapidamente JavaScript. Sono in grado di elaborare codice veloce e sporco che posso testare e regolare al volo senza la necessità di creare un intero ambiente di lavoro. Certo, la maggior parte dei browser fornisce strumenti di sviluppo che offrono una console in cui è possibile inserire rapidamente snippet ma non sono ancora al punto in cui è possibile testare in modo interattivo grandi quantità di codice, e tanto meno definire markup e stili personalizzati complementari all'output.
JSBin di JavaScript pannello è dove sei in grado di definire il tuo codice JavaScript personalizzato. Come previsto, hai pieno accesso alla lingua e all'API DOM supportata dal browser. Questo significa che quando scrivo:
Accentsconagua
var myDiv = document.querySelector ("div"); myDiv.innerHTML = "Foo"; esso:
div elemento che ho creato nel HTML pannelloI risultati sono immediati, permettendomi di eseguire il debug mentre sto scrivendo il codice.
Avere accesso a plain ole JavaScript è ottimo, ma è molto comune utilizzare una libreria di utility JavaScript come jQuery o un framework completo come Ember per astrarre le complessità dello sviluppo cross-browser o creare esperienze simili a app nel browser. JSBin risolve questo problema consentendo di includere la maggior parte delle librerie più popolari nel codice di test.
Cliccando sul Aggiungi libreria l'opzione di menu fornisce un elenco molto lungo di librerie supportate che possono essere inserite nel progetto JSBin. Ciò che fa è creare un copione inserisci il codice che estrae il file JavaScript da un CDN. Selezione "jQuery 2.0.2"dalla lista inietta quanto segue:
... mentre si seleziona Backbone aggiunge quanto segue:
Si noti come JSBin utilizza CDN diversi in base a dove sono disponibili i file. La maggior parte dei progetti di grandi nomi sono elencati, tra cui:
… e tanti altri.
L'aggiunta di jQuery mi dà pieno accesso a tutti i metodi e le capacità di supporto eccellenti di tutte le librerie. Posso passare a utilizzare la sua API piacevole e concisa per accedere agli elementi DOM e impostare i valori in una riga di codice ben concatenata:
$ ("div") .text ("Foo"); Oppure, posso fare un po 'di più e testare una richiesta Ajax all'API di Flickr per recuperare i dati JSON e renderizzare le immagini basandoci su:
(function () var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; $ .getJSON (flickerAPI, tags: "mount rainier", tagmode: "any ", formato:" json ") .done (function (data) $ .each (data.items, function (i, item) $ ("![]()
") .attr (" src ", item.media.m) .appendTo (" div "); if (i === 3) return false;););) (); Il codice sopra dovrebbe essere il seguente:
Avere tutta la potenza di queste librerie e framework apre davvero gli scenari di test che puoi configurare con JSBin.
Ancora una volta, questo è un elenco delle librerie e dei framework più popolari disponibili e chiaramente, alcuni di nicchia non saranno nella lista. Se è necessario aggiungere la propria libreria personalizzata, la documentazione mostra come è possibile aggiungerla in proprio.
Trovo che JSBin sia inestimabile per lo sviluppo del mio desktop e mentre passerò a concentrarmi sui dispositivi mobili, sono lieto di vedere che potrò continuare a usarlo per testare anche su quei dispositivi. A partire dalla terza versione, JSBin ha incorporato una funzionalità chiamata "live rendering" che funge da simulcast su più dispositivi connessi. Questi dispositivi non sono esplicitamente connessi ma, al contrario, sfruttano un URL specifico che consente loro di eseguire essenzialmente il rendering dei risultati nello stesso momento. Puoi vedere questa funzione in azione nel seguente video.
Un'altra caratteristica importante è la possibilità di creare il proprio account JSBin in cui è possibile salvare i propri contenitori per riferimento futuro e condivisione. La registrazione è semplice e puoi anche sfruttare le tue credenziali Github tramite la funzionalità OAuth di Github.
Il vantaggio principale della registrazione è la possibilità di conservare una cronologia dei contenitori che si creano in modo da poterli rivisitare in un secondo momento.
Per avere un'idea dell'ampiezza della funzionalità offerta da JSBin, ti invito a visitare il canale Youtube di Remy per JSBin, dove ha fatto un lavoro sbalorditivo creando video tutorial che esplorano tutte le eccellenti funzionalità del servizio. Le FAQ fanno anche un ottimo lavoro nel rispondere a domande comuni che potresti avere.
JSBin è uno dei miei strumenti più preziosi che ho trovato per lo sviluppo di JavaScript. Il fatto che sia gratuito e open source lo rende un gioco da ragazzi da aggiungere a qualsiasi toolkit. E il costante impegno di Remy per il servizio è encomiabile. Tutto questo combinato, mi rende facile spargere la voce su un così grande strumento.
