Share
Lors du discours liminaire prononcé lors de la récente conférence // BUILD 2015, notre équipe de Microsoft a publié Vorlon.js, un outil de débogage de votre site Web..
Vorlon.js est principalement composé d’un tableau de bord qui affiche les données provenant de votre site. Pour que cela fonctionne, il vous suffit de référencer un script dans le code de votre site.
Nous (Pierre Lagarde, David Catuhe, David Rousset et moi-même) avons construit ceci principalement pour aider les développeurs web à déboguer leurs sites web appareils mobiles. Bien entendu, des solutions propriétaires existent déjà, telles que les outils de développement Chrome permettant de déboguer Chrome Mobile, l’équivalent de Safari, Visual Studio pour Internet Explorer ou même Weinre; mais aucun de ceux-ci n'est vraiment indépendant de la technologie et des plates-formes.
C’est le vide que nous voulions combler avec Vorlon.js.
Vous pouvez installer Vorlon.js à partir de npm ou en clonant le référentiel GitHub et en utilisant gulp pour le rendre prêt à être utilisé..
Vous trouverez plus d’informations à ce sujet sur notre site Web ou sur le blog écrit par mon ami David.
Pour créer un plugin pour Vorlon, vous pouvez utiliser TypeScript ou le faire directement avec JavaScript..
Je vais vous donner le code JavaScript et le code TypeScript, afin que vous puissiez le lire dans votre langue préférée!
Dans cet article, j'ai choisi de créer un plugin qui obtiendra des informations sur le périphérique. Ceci est basé sur le site http://mydevice.io/ créé par Raphaël Goetter. Pour rester simple, je n’obtiendrai que les données du Tailles section de la Mon écran Catégorie.
Lorsque ce plugin est activé, le tableau de bord Vorlon.js affiche les informations de taille provenant du client..
Avant d’entrer dans les détails, regardez cette vidéo rapide qui vous montre ce que nous allons créer..
Dans cette vidéo, je fais une démonstration sur un navigateur de bureau, mais cela fonctionne évidemment aussi sur un téléphone portable ou une tablette..
Un plugin Vorlon.js n'est rien d'autre que du code HTML, CSS et JavaScript. Votre plugin récupère les données du client et les envoie au serveur pour les afficher sur le tableau de bord..
Cela signifie que vous pouvez d'abord le faire sans Vorlon.js, tout écrire sur un projet Web simple, puis l'inclure dans l'architecture du plugin Vorlon.js..
Notre plugin obtiendra des informations relatives à la taille du client et les affichera dans une liste HTML. Il actualisera également les données lors du redimensionnement du navigateur. Vous pouvez voir l'exemple complet courir ici (ce n'est pas joli, mais fait le travail!).
Le code HTML est assez léger:
Mon écran
- CSS device-width:
- Hauteur du périphérique CSS:
- JS screen.width:
- JS window.innerWidth:
- JS body.clientWidth:
- JS screen.availWidth:
Il utilise le fichier control.css suivant:
.deviceinfo-container font-family: "Verdana", "Comic Sans MS"; .deviceinfo-container h2 font-weight: normal; .deviceinfo-container ul li font-weight: bold; .deviceinfo-container ul span font-weight: normal;
Et le code JavaScript récupère les données une fois la page chargée et chaque fois que la fenêtre est redimensionnée et met à jour la liste:
Accentsconagua
(function () var calcul = function () document.getElementById ('devicewidth'). innerText = document.documentElement.clientWidth + 'px'; document.getElementById ('deviceheight'). innerText = document.documentElement.clientHeight + 'px'; document.getElementById ('screenwidth'). innerText = screen.width + 'px' ;; document.getElementById ('windowinnerwidth'). innerText = window.innerWidth + 'px'; document.getElementById ('windowinnerwidth'). innerText = window.innerWidth + 'px'; document.getElementById ('bodyclientwidth') ) .innerText = document.body.clientWidth + 'px'; document.getElementById ('screenavailwidth'). innerText = screen.availWidth + 'px';; window.onresize = fonction (événement) compute ();; document.addEventListener ("DOMContentLoaded", calcul);) ();Donc, jusqu’à présent, nous n’écrivons que du code Web simple et classique. Voyons maintenant comment transformer cela en un plugin Vorlon.js!
Dans Vorlon.js, un plugin est une classe JavaScript qui hérite de la classe Plugin. Le code minimum contient un constructeur et le getID une fonction.
var __extends = this .__ extend || fonction (d, b) for (var p dans b) if (b.hasOwnProperty (p)) d [p] = b [p]; fonction __ () this.constructor = d; __. prototype = b.prototype; d.prototype = new __ (); ; var VORLON; (fonction (VORLON) var MyDeviceInfo = (fonction (_super) __extends (MyDeviceInfo, _super); fonction MyDeviceInfo () _super.call (this, "mydeviceinfo", "control.html", "control.cht"); this._ready = true; MyDeviceInfo.prototype.getID = function () return "MYDEVICEINFO";; return MyDeviceInfo;) (Plugin); VORLON.MyDeviceInfo = MyDeviceInfo; // Enregistrez le plugin avec vorlon core Core.RegisterPlugin (new MyDeviceInfo ());) (VORLON || (VORLON = ));
module VORLON classe d'exportation MyDeviceInfo étend le plugin constructor () super ("mydeviceinfo", "control.html", "control.css"); this._ready = true; public getID (): string return "MYDEVICEINFO"; // Enregistrez le plugin avec vorlon core Core.RegisterPlugin (new MyDeviceInfo ()); L'ID est simplement une chaîne que vous pouvez choisir. Vous en aurez besoin lorsque vous ajouterez votre plugin au tableau de bord.
Le constructeur appelle le super fonction et lui donne son nom, les fichiers control.html et control.css. C'est une condition préalable pour qu'il connaisse ces fichiers et les charge si nécessaire.
La dernière ligne de code enregistre le plug-in dans la liste gérée par le Core. Le rôle principal est de gérer toutes les communications et tous les échanges de données entre le client et le tableau de bord..
Chaque fois qu'il charge un plug-in, le tableau de bord crée un nouvel onglet dans le volet de droite. C'est un espace de rendu pour votre plugin.
La partie mise en page d'un plugin Vorlon.js est contenue dans un fichier HTML. Dans l'exemple que nous allons créer, cela s'appelle control.html, qui est une convention dans les plugins Vorlon.js. Il n'est pas affiché par défaut, vous devez donc le gérer dans votre code de plugin. Ceci est fait en utilisant _insertHtmlContentAsync et généralement dans le startDashboardSide une fonction.
startDashboardSide est appelé lorsque le tableau de bord instancie votre plugin côté serveur. Il n'a qu'un paramètre, qui est la div HTML où vous pouvez rendre votre contrôle. Fondamentalement, c'est la div qui est affichée sur l'onglet de votre plugin.
_insertHtmlContentAsync est une aide qui charge de manière asynchrone tous les fichiers que vous avez donnés lors de la construction du plugin. Le premier argument est le rendu div, et le second est une fonction de rappel qui vous donne le div chargé une fois que tout est terminé.
MyDeviceInfo.prototype.startDashboardSide = function (div) if (div === void 0) div = null; this._insertHtmlContentAsync (div, function (filledDiv) // données de charge); ;
startDashboardSide public (div: HTMLDivElement = null): void this._insertHtmlContentAsync (div, (filledDiv) => // données de charge)
Dans la partie control.html, il vous suffit de supprimer la référence JavaScript, ce qui entraîne le code suivant:
Mon écran
- CSS device-width:
- Hauteur du périphérique CSS:
- JS screen.width:
- JS window.innerWidth:
- JS body.clientWidth:
- JS screen.availWidth:
Ainsi, maintenant que vous rendez le modèle de contrôle dans le tableau de bord, vous devez lui envoyer les données à partir du client. Sur le code initial, cela a été fait sur la même page. Maintenant, vous devez tout emballer et l'envoyer.
Tout le processus de communication est géré pour vous. Vous devez seulement créer un objet contenant des données et appeler la fonction correcte. C'est un assistant disponible en Core.Messenger nommé sendRealTimeMessage.
dans le MyDeviceInfo classe nous ajoutons une fonction personnalisée nommée sendClientData. Il recevra toutes les informations de taille actuelle et l'enverra.
MyDeviceInfo.prototype.sendClientData = function () var data = "devicewidth": document.documentElement.clientWidth, "deviceheight": document.documentElement.clientHeight, "screenwidth": screen.width, "windowinnerwidth": window.innerWidth, "bodyclientwidth": document.body.clientWidth, "screenavailwidth": screen.availWidth; VORLON.Core.Messenger.sendRealtimeMessage (this.getID (), data, 0 / * Client * /); ;
public sendClientData (): void var data = "devicewidth": document.documentElement.clientWidth, "deviceheight": document.documentElement.clientHeight, "screenwidth": screen.width, "windowinnerwidth": window.innerWidth, "bodyclientwidth" : document.body.clientWidth, "screenavailwidth": screen.availWidth; Core.Messenger.sendRealtimeMessage (this.getID (), data, RuntimeSide.Client);
SendRealtimeMessage a trois paramètres obligatoires:
getID une fonction) Cette fonction doit être appelée chaque fois que le tableau de bord le demande (lorsque l'utilisateur bascule sur ce client, par exemple) et chaque fois que la taille du navigateur change..
Nous ajoutons le startClientSidefonction qui sera appelée à l’initialisation du client pour s’inscrire à la window.onresize un événement:
MyDeviceInfo.prototype.startClientSide = function () var que = ceci; window.onresize = function (event) that.sendClientData (); ; ;
public startClientSide (): void var que = ceci; window.onresize = (event) => that.sendClientData (); ;
Chaque fois que l'utilisateur modifie la taille du navigateur, ce code envoie les nouvelles informations au tableau de bord..
Et enfin, nous devons ajouter le rafraîchir une fonction. Il sera appelé à chaque fois que le tableau de bord a besoin des informations actuelles du client..
MyDeviceInfo.prototype.refresh = function () this.sendClientData (); ;
public refresh (): void this.sendClientData ();
Et c'est tout!
Maintenant que les données sont envoyées du client au tableau de bord, vous devez toujours les gérer de l'autre côté..
Pour ce faire, vous pouvez utiliser le onRealtimeMessageReceivedFromClientSide une fonction. Il est appelé chaque fois que le client envoie un message via le Core.Messenger. Il a seulement un paramètre, dans lequel vous obtenez l'objet que vous avez envoyé.
Dans cet exemple, il suffit d'utiliser chaque valeur et de définir le bon élément DOM pour mettre à jour la liste avec les nouvelles valeurs..
MyDeviceInfo.prototype.onRealtimeMessageReceivedFromClientSide = function (receiveObject) document.getElementById ('devicewidth'). InnerText = createdObject.devicewidth + 'px'; document.getElementById ('deviceheight'). innerText = createdObject.deviceheight + 'px'; document.getElementById ('largeur de l'écran'). innerText = createdObject.screenwidth + 'px'; ; document.getElementById ('windowinnerwidth'). innerText = receiveObject.windowinnerwidth + 'px'; document.getElementById ('bodyclientwidth'). innerText = receiveObject.bodyclientwidth + 'px'; document.getElementById ('screenavailwidth'). innerText = createdObject.screenavailwidth + 'px'; ;public onRealtimeMessageReceivedFromClientSide (receiveObject: any): void document.getElementById ('devicewidth'). innerText = createdObject.devicewidth + 'px'; document.getElementById ('deviceheight'). innerText = createdObject.deviceheight + 'px'; document.getElementById ('screenwidth'). innerText = createdObject.screenwidth + 'px' ;;; document.getElementById ('windowinnerwidth'). innerText = receiveObject.windowinnerwidth + 'px'; document.getElementById ('bodyclientwidth'). innerText = receiveObject.bodyclientwidth + 'px'; document.getElementById ('screenavailwidth'). innerText = createdObject.screenavailwidth + 'px'; Pour pouvoir tester ce plugin, vous devez suivre quelques étapes simples..
Si vous avez choisi TypeScript, vous devrez utiliser un outil tel que le compilateur TypeScript disponible sur npm, ou vous intégrer au processus gulp en modifiant le fichier gulpfile.js disponible dans le / Plugins dossier.
Une fois la compilation de TypeScript vers JavaScript terminée, vous devez minifier votre fichier JS. Il est important que vous utilisiez cette convention:
La deuxième étape consiste à copier tous vos fichiers dans le répertoire. / Serveur / public / vorlon / plugins dossier. Là vous devez créer un dossier en utilisant votre nom de plugin et tout mettre dessous. Cela inclut vos fichiers HTML, CSS et JavaScript.
Voici comment cela est fait pour le plugin que nous créons dans cet article:
La prochaine étape consiste à enregistrer votre plugin sur le serveur. Pour ce faire, ajoutez une ligne dans le Server / public / catalog.json fichier:
"IncludeSocketIO": true, "plugins": ["id": "CONSOLE", "name": "Console interactive", "panneau": "en bas", "nomdossier": "interactiveConsole", "id ":" DOM "," nom ":" Explorateur Dom "," panneau ":" haut "," nomdossier ":" domExplorer ", " id ":" MODERNIZR "," nom ":" Modernizr "," panneau ":" bas "," nomdossier ":" modernizrReport ", " id ":" OBJEXPLORER "," nom ":" Obj. Explorer "," panneau ":" haut "," nomdossier ":" objectExplorer " , "id": "MYDEVICEINFO", "nom": "Informations sur mon périphérique", "panneau": "haut", "nom de pliage": "mydeviceinfo"]
Vous pouvez trouver plus d'informations à ce sujet dans la documentation de Vorlon.js.
Ouvrez une ligne de commande sur le /Serveur dossier et exécutez la commande suivante:
noeud serveur.js
Enfin, lancez un client référençant votre instance locale Vorlon.js. Vous pouvez utiliser l'exemple fourni dans la / Plugins / samples dossier.
Parcourez le tableau de bord à l'aide de http: // localhost: 1337 / dashboard / default.
Et… rock'n'roll!
Vous pouvez essayer de changer la taille du navigateur dans lequel vous affichez votre code client et vous le verrez changer en direct sur le tableau de bord..
Facile, n'est-ce pas?
J'espère illustrer à quel point il est facile de créer un plugin. Vous devez vraiment vous en approcher comme écrire du code Web classique et le diviser en deux parties:
Vorlon.js n'est pas seulement notre projet, il vous appartient également. Je suis à peu près sûr que vous aurez beaucoup d’idées de plugins, et nous serons heureux de les intégrer au projet..
N'hésitez pas à fourcher https://github.com/MicrosoftDX/Vorlonjs et à nous envoyer des demandes de tirage avec vos créations!
Vous pouvez trouver l'échantillon complet sur GitHub.
Si vous avez des questions sur cet article ou sur Vorlon.js, n'hésitez pas à me contacter sur Twitter..
Microsoft propose un grand nombre d’apprentissage gratuit sur de nombreuses rubriques JavaScript open-source et nous avons pour mission de créer beaucoup plus avec Microsoft Edge. En voici quelques unes à consulter:
Et quelques outils gratuits pour commencer: Code Visual Studio, Azure Trial et outils de test inter-navigateurs, tous disponibles pour Mac, Linux ou Windows..
Cet article fait partie de la série Web de développement Web de Microsoft. Nous sommes ravis de partager Microsoft Edge et le nouveau Moteur de rendu EdgeHTML avec toi. Obtenez des machines virtuelles gratuites ou testez à distance sur votre appareil Mac, iOS, Android ou Windows @ http://dev.modern.ie/.
