Share
Nous y avons tous été. Il y a des moments où vous voulez simplement jeter du code JavaScript et voir comment cela fonctionne. Bien sûr, vous pourriez passer par les tracas de:
Il semble que beaucoup de travail soit juste fait de simples tests de code. Heureusement, il existe des outils qui rendent ce type de travail trivial.
Dans ce tutoriel, j'aimerais passer en revue l'un de mes outils préférés pour les tests interactifs en JavaScript, JSBin..
Comme je l'ai mentionné précédemment, dans de nombreux cas, vous devez simplement tester un petit sous-ensemble de code JavaScript. Dans la plupart des cas, la configuration d'un environnement de développement complet pour un tel cas d'utilisation n'a pas vraiment de sens, sauf si vous dépendez clairement du matériel (par exemple, WebRTC) ou faites confiance à un API ou à un produit tiers, le cas échéant. services backend pour accéder avec succès aux informations.
JSBin propose une interface utilisateur basée sur un navigateur dans laquelle vous pouvez entrer:
… Et obtenez un retour immédiat basé sur votre code. En outre, vous pouvez éventuellement inclure un nombre illimité d’instruments courants dans votre code à l’écran, ce qui vous permet également d’exploiter ses capacités. Le principal avantage est le retour d'information en temps réel généré par les mises à jour que vous effectuez..
Regardons ces outils un peu plus près.
JSBin a été créé et est activement maintenu par le développeur respecté Remy Sharp. L'idée de le développer est née de la nécessité de collaborer de manière interactive avec d'autres développeurs pour déboguer le code JavaScript. Depuis, il est devenu un outil robuste qui:
JSBin est également sous licence Open Source, sous licence libérale MIT, permettant aux membres de la communauté de contribuer librement ou de créer leurs propres solutions personnalisées..
JSBin offre une interface utilisateur simple qui divise chaque type de code en panneaux verticaux individuels..
Chaque panneau fournit un mini-IDE qui vous permet de saisir le code et de recevoir un retour immédiat via le Sortie panneau. Par exemple, si j’ajoute le code suivant à la commande HTML panneau:
Rey Bango
Je verrai immédiatement le nouvel élément et le texte rendu dans le Sortie panneau.
Bien entendu, vous pouvez ajouter un nombre illimité d’éléments au balisage pour créer une page rapidement et de manière interactive. Pouvoir styler votre balisage est tout aussi important car, dans certains cas, le code JavaScript que vous testez est explicitement conçu pour manipuler les styles et les règles CSS appliquées à vos éléments. C'est là que le CSS panneau entre en jeu. Il offre une fonctionnalité de style CSS complète, vous permettant ainsi de disposer vos éléments en fonction de vos besoins, même en tirant parti des règles CSS3. Donc, en ajoutant le code suivant:
div couleur: rouge; police: 20px Tahoma, sans serif; bordure: 1px noir uni; largeur: 100px; marge: 30px; rembourrage: 10px; transformer: faire pivoter (15deg); -webkit-transform: rotation (15deg);
… Fournit les résultats suivants:
Jusqu'à présent, le code était simple, mais je dois souligner que l'important n'est pas la complexité du code, mais le fait que vous puissiez recevoir un retour immédiat. Je pourrais facilement récupérer du code plus impliqué, comme celui de la démo CSS Transitions sur le réseau de développeurs Mozilla et l'ajouter à JSBin pour produire un effet similaire pour mon code de test:
div couleur: rouge; police: 20px Tahoma, sans serif; bordure: 1px noir uni; largeur: 100px; marge: 30px; rembourrage: 10px; -moz-transition: largeur 2s, hauteur 2s, couleur de fond 2s, -moz-transform 2s; -webkit-transition: largeur 2s, hauteur 2s, couleur de fond 2s, -webkit-transform 2s; -o-transition: largeur 2s, hauteur 2s, couleur de fond 2s, -o-transform 2s; transition: largeur 2s, hauteur 2s, couleur de fond 2s, transformation 2s; div: hover background-color: #FFCCCC; largeur: 200px; hauteur: 200px; -moz-transform: rotation (180deg); -webkit-transform: rotation (180deg); -o-transformer: faire pivoter (180deg); transformer: faire pivoter (180deg);
Ainsi, alors que je suis plus spécifiquement concentré sur l'aspect JavaScript de JSBin, il est clair que les développeurs Web en général peuvent tirer parti de la nature interactive de l'outil..
Pour moi, le principal avantage de JSBin est la possibilité de tester JavaScript rapidement. Je peux créer du code rapide et sale que je peux tester et ajuster à la volée sans avoir à créer tout un environnement de travail. Bien sûr, la plupart des navigateurs fournissent des outils de développement offrant une console où vous pouvez entrer des extraits rapides, mais ils ne sont pas encore à un point où vous pouvez tester de manière interactive de grandes quantités de code, sans parler de définir des balises personnalisées et stylistiques complémentaires à la sortie.
JSBin's JavaScript panneau vous permet de définir votre code JavaScript personnalisé. Comme prévu, vous avez un accès complet à la langue et à l’API DOM prise en charge par le navigateur. Cela signifie que lorsque j'écris:
Accentsconagua
var myDiv = document.querySelector ("div"); myDiv.innerHTML = "Foo"; il:
div élément que j'ai créé dans le HTML panneauLes résultats sont immédiats, me permettant de déboguer pendant que j'écris le code.
Avoir accès à un langage JavaScript simple est génial, mais il est très courant d'utiliser une bibliothèque d'utilitaires JavaScript telle que jQuery ou un framework complet tel qu'Ember pour résumer les complexités du développement multi-navigateurs ou créer des expériences similaires à celles d'une application dans le navigateur. JSBin résout ce problème en vous permettant d'inclure la plupart des bibliothèques populaires dans votre code de test..
En cliquant sur le Ajouter une bibliothèque L'option de menu fournit une très longue liste de bibliothèques prises en charge pouvant être injectées dans votre projet JSBin. Cela crée une scénario balise dans votre code qui extrait le fichier JavaScript d'un CDN. Sélection "jQuery 2.0.2"de la liste injecte ce qui suit:
… En sélectionnant Backbone ajoute ce qui suit:
Remarquez comment JSBin utilise différents CDN en fonction de l'emplacement des fichiers. La plupart des grands projets sont répertoriés, notamment:
… et beaucoup plus.
Ajouter jQuery me donne un accès complet à toutes les excellentes méthodes et capacités d’aide des bibliothèques. Je peux passer à l’utilisation de sa belle API pour accéder aux éléments DOM et définir les valeurs dans une ligne de code bien chaînée:
$ ("div") .text ("Foo"); Ou bien, je peux aller un peu plus loin et tester une requête Ajax auprès de l'API de Flickr pour récupérer des données JSON et restituer des images basées sur celles-ci:
(function () var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; $ .getJSON (flickerAPI, tags: "mount rainier", tagmode: "any ", format:" json ") .done (function (data) $ .each (data.items, function (i, item) (") .attr (" src ", item.media.m) .appendTo (" div "); if (i === 3) return false;);)) ();
Le code ci-dessus serait rendu comme suit:
La pleine puissance de ces bibliothèques et de ces frameworks ouvre vraiment les scénarios de test que vous pouvez configurer avec JSBin.
Encore une fois, ceci est une liste des bibliothèques et des frameworks les plus populaires disponibles et clairement, certaines niches ne seront tout simplement pas dans la liste. Si vous devez ajouter votre propre bibliothèque personnalisée, la documentation montre comment l’ajouter vous-même..
JSBin est une aide précieuse pour le développement de mon ordinateur et, alors que je me concentre davantage sur les appareils mobiles, je suis heureux de pouvoir continuer à l'utiliser pour tester également ces appareils. A partir de la version trois, JSBin a incorporé une fonctionnalité appelée "rendu en direct" qui agit comme une diffusion simultanée sur plusieurs appareils connectés. Ces périphériques ne sont pas explicitement connectés, mais utilisent plutôt une URL spécifique qui leur permet essentiellement de restituer les résultats simultanément. Vous pouvez voir cette fonctionnalité en action dans la vidéo suivante.
Une autre fonctionnalité importante est la possibilité de créer votre propre compte JSBin sur lequel vous pouvez enregistrer vos bacs pour les consulter et les partager ultérieurement. L'inscription est simple et vous pouvez même utiliser vos informations d'identification Github via la fonctionnalité OAuth de Github..
Le principal avantage de l’inscription est la possibilité de conserver un historique des bacs que vous créez pour pouvoir les consulter ultérieurement..
Pour vraiment avoir une idée de la gamme complète de fonctionnalités offertes par JSBin, je vous invite à vous rendre sur la chaîne Youtube de Remy pour JSBin, où il a travaillé avec brio pour créer des vidéos de tutoriel explorant toutes les excellentes fonctionnalités du service. La FAQ répond également très bien aux questions courantes que vous pourriez avoir..
JSBin est l'un des outils les plus précieux que j'ai trouvés pour le développement de JavaScript. Le fait qu’il soit gratuit et à source ouverte en fait une évidence à ajouter à toute boîte à outils. Et l'engagement continu de Remy envers le service est louable. Tous ces éléments combinés me permettent de faire facilement connaître un tel outil..
