Share
Recientemente, en // BUILD / 2015, anunciamos Vorlon.js, una herramienta de código abierto, extensible y independiente de la plataforma para depurar y probar su JavaScript de forma remota. Tuve la oportunidad de crear Vorlon.js con la ayuda de algunos ingenieros talentosos y evangelistas de la tecnología en Microsoft (los mismos tipos que te trajeron Babylon.js).
Vorlon.js funciona con Node.js, Socket.IO y café nocturno. Me gustaría compartir con ustedes por qué lo hicimos y cómo incorporarlo a su propio flujo de trabajo de prueba, así como compartir algunos detalles más sobre el arte de construir una biblioteca de JavaScript como esta..
Vorlon.js lo ayuda a cargar, inspeccionar, probar y depurar de forma remota el código JavaScript que se ejecuta en cualquier dispositivo con un navegador web. Ya sea una consola de juegos, un dispositivo móvil o incluso un refrigerador conectado a IoT, puede conectar de forma remota hasta 50 dispositivos y ejecutar JavaScript en cada uno de ellos.
La idea aquí es que los equipos de desarrollo también pueden depurar juntos: cada persona puede escribir código y los resultados son visibles para todos. Teníamos un lema simple en este proyecto: Sin código nativo, sin dependencia a un navegador específico, solo JavaScript, HTML y CSS ejecutándose en los dispositivos de su elección..
Vorlon.js en sí es un pequeño servidor web que puede ejecutar desde su máquina local, o instalar en un servidor para que su equipo acceda, que sirva al panel de control de Vorlon.js (su centro de comando) y se comunique con los dispositivos remotos..
Instalar el cliente Vorlon.js en su sitio web o aplicación es tan fácil como agregar una única etiqueta de script. También es extensible, por lo que los desarrolladores pueden escribir complementos que agregan funciones tanto al cliente como al tablero, como la detección de funciones, el registro y el seguimiento de excepciones..
Entonces, ¿por qué el nombre? En realidad hay dos razones. La primera es porque estoy loco por Babylon 5 (el programa de televisión). Basado en esto, la segunda razón es porque los Vorlons son una de las razas más sabias y antiguas del universo y, por lo tanto, son útiles como diplomáticos entre razas más jóvenes. Su utilidad es lo que nos inspiró: para desarrolladores web, todavía es demasiado difícil escribir JavaScript que funcione de manera confiable en los distintos dispositivos y navegadores. Vorlon.js busca hacerlo un poco más fácil..
Vorlon.js ha sido diseñado para que pueda extender fácilmente el panel de control y la aplicación cliente escribiendo o instalando complementos adicionales. Puede cambiar el tamaño o agregar paneles adicionales al panel de control que pueden comunicarse bidireccionalmente con la aplicación cliente. Hay tres complementos para empezar:
Registro: la pestaña de la consola transmitirá los mensajes de la consola desde el cliente al panel de control que puede usar para la depuración. Cualquier cosa registrada con console.log (), console.warn () o console.error () Aparecerá en el panel de control. Como el F12 Dev Tool DOM explorer, puede ver el árbol DOM, seleccionar un nodo (que se resaltará en el dispositivo y actualizar o agregar nuevas propiedades CSS).
Interactividad: también puede interactuar con la página web remota escribiendo un código en la entrada. El código ingresado será evaluado en el contexto de la página..
El inspector de DOM le muestra el DOM de la página web remota. Puede inspeccionar el DOM, hacer clic en los nodos para resaltarlos en la página web del host y, si selecciona uno, también puede ver y modificar sus propiedades CSS.
La pestaña Modernizr le mostrará las funciones de navegador compatibles según lo informado por Modernizr. Puede usar esto para determinar qué características están realmente disponibles. Esto puede ser particularmente útil en dispositivos móviles inusuales, o cosas como consolas de juegos.
Desde la línea de comando de tu nodo, simplemente ejecuta esto:
$ npm i -g vorlon $ vorlon
Ahora tiene un servidor ejecutándose en su localhost en el puerto 1337. Para obtener acceso al panel de control, simplemente vaya a http: // localhost: 1337 / dashboard / SESSIONID, donde ID DE SESIÓN es el id para la sesión del tablero actual. Esto puede ser cualquier cadena que desee.
A continuación, debe agregar una sola referencia en el proyecto de su cliente:
Tenga en cuenta que ID DE SESIÓN se puede omitir y, en este caso, se reemplazará automáticamente por "predeterminado".
¡Y eso es! Ahora su cliente enviará información de depuración a su panel de manera transparente. Ahora veamos un ejemplo usando un sitio real.
Usemos http://www.babylonjs.com/ para nuestro ejemplo. Primero, tengo que iniciar mi servidor (usando node start.js dentro de /servidor carpeta). Entonces, solo tengo que agregar esta línea a mi sitio de cliente:
Porque no estoy definiendo un ID DE SESIÓN, Solo puedo ir a http: // localhost: 1337 / dashboard. El tablero se ve así:
Nota al margen: El navegador que se muestra arriba es Microsoft Edge (anteriormente conocido como Project Spartan), el nuevo navegador de Microsoft para Windows 10. También puede probar sus aplicaciones web de forma remota en su dispositivo Mac, iOS, Android o Windows @ http: // dev .modern.ie /. O prueba Vorlon.js también.
De nuevo: puedo ver los mensajes de la consola, por ejemplo, lo que es útil cuando depuro Babylon.js en dispositivos móviles (como iOS, Android o Windows Phone). Puedo hacer clic en cualquier nodo en el Explorador de DOM para obtener información sobre las propiedades de CSS:
En el lado del cliente, el nodo seleccionado se resalta con un borde rojo:
Por otra parte, puedo cambiar a la Modernizar pestaña para ver las capacidades de mi dispositivo específico:
En el lado izquierdo, puede ver la lista de clientes conectados actualmente y puede usar la Identificar un cliente Botón para mostrar un número en cada dispositivo conectado.
Desde el principio, quisimos estar seguros de que Vorlon.js se mantiene como primer móvil y plataforma agnóstica como sea posible. Así que decidimos utilizar tecnología de código abierto que funcionaba en una mayor cantidad de entornos..
Nuestro entorno de desarrollo era Visual Studio Community, que puedes obtener gratis ahora. Utilizamos las herramientas Node.js para Visual Studio y Azure para el back-end. Nuestro front-end fue JavaScript y TypeScript. Si no está familiarizado con TypeScript, puede saber por qué hemos creado Babylon.js con esta publicación de blog. Recientemente Angular 2 ha sido construido con TypeScript. Pero no tienes que saberlo para usar Vorlon.js.
Aquí hay un esquema global de cómo funciona:
Aquí están las partes con las que lo construimos:
Por ejemplo, el complemento de la consola funciona de esta manera:
Accentsconagua
console.log (), console.warn () o console.error (). Este gancho se utiliza para enviar los parámetros de estas funciones al panel de control. También puede recibir pedidos del lado del tablero de instrumentos que evaluará..El resultado es simplemente una consola remota:
Puede comprender mejor la extensibilidad de Vorlon.js, incluida la forma de crear sus propios complementos, en el sitio web Vorlon.js..
Vorlon.js se basa en la idea de extensibilidad. ¡Te animamos a contribuir! Y ya estamos pensando en cómo podríamos integrar Vorlon.js en las herramientas de desarrollo del navegador, así como en la depuración de audio web..
Si quieres probarlo, estás a solo un clic: vorlonjs.com. Y los documentos más técnicos están en nuestro GitHub.
Puede que te sorprenda un poco, pero Microsoft tiene un montón de aprendizaje gratuito sobre muchos temas de código abierto de JavaScript, y estamos en la misión de crear mucho más con Microsoft Edge. Echa un vistazo a mi propia:
O la serie de aprendizaje de nuestro equipo:
Y algunas herramientas gratuitas: Visual Studio Community, Azure Trial y herramientas de prueba en varios navegadores para Mac, Linux o Windows.
Este artículo es parte de la serie web dev tech de Microsoft. Estamos muy contentos de compartir Microsoft Edge y lo nuevo Motor de renderizado EdgeHTML con usted. Obtenga máquinas virtuales gratuitas o realice pruebas a distancia en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.
