Por qué creamos Vorlon.js y cómo usarlo para depurar su JavaScript de forma remota

Por qué creamos Vorlon.js y cómo usarlo para depurar su JavaScript de forma remota

Recientemente en //CONSTRUIR/ 2015 anunciamos vorlon.js – una herramienta de código abierto, extensible e 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 tecnológicos de Microsoft (los mismos que te trajeron http://www.babylonjs.com/).
Vorlon.js funciona con node.JS, socket.io y café nocturno. Me gustaría compartir con ustedes por qué lo hicimos, cómo incorporarlo en su propio flujo de trabajo de prueba y también compartir algunos detalles más sobre el arte de construir una biblioteca JS como esta.

¿Por qué Vorlon.js?

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 todos o en todos ellos. La idea aquí es que los equipos de desarrollo también puedan 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 JavaScriptHTML y CSS ejecutándose en los dispositivos de su elección.

Vorlon.js en sí mismo es un pequeño servidor web que puede ejecutar desde su máquina local o instalar en un servidor para que acceda su equipo, que sirve al tablero de Vorlon.js (su centro de comando) y se comunica con los dispositivos remotos. Instalar el cliente Vorlon.js en su sitio web o aplicación es tan fácil como agregar una sola etiqueta de secuencia de comandos. También es extensible donde los desarrolladores pueden escribir complementos que agregan funciones tanto al cliente como al tablero, por ejemplo: detección de funciones, registro y seguimiento de excepciones.

Entonces, ¿por qué el nombre? En realidad, hay dos razones. La primera es porque estoy loco por Babilonia 5 (El programa de televisión). Con base en esto, la segunda razón es porque el Vorlons son una de las razas más sabias y antiguas del universo y, por lo tanto, son útiles como diplomáticos entre las razas más jóvenes. Su utilidad es lo que nos inspiró: para los desarrolladores web, todavía es demasiado difícil escribir JavaScript que funcione de manera confiable en los diversos dispositivos y navegadores. Vorlon.js busca hacerlo un poco más fácil.

¿Mencionó que Vorlon.js tiene complementos?

Vorlon.js se ha diseñado para que pueda ampliar el panel de control y la aplicación cliente fácilmente escribiendo o instalando complementos adicionales. Puede cambiar el tamaño o agregar paneles adicionales al tablero que pueden comunicarse bidireccionalmente con la aplicación cliente. Hay tres complementos para empezar:

Consola

Registro: la pestaña de la consola transmitirá mensajes de la consola desde el cliente al tablero que puede usar para la depuración. Todo lo que se registre con console.log(), console.warn() o console.error() aparecerá en el tablero. Como el Herramienta de desarrollo F12 Explorador DOM, 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 código en la entrada. El código ingresado se evaluará en el contexto de la página.

Explorador DOM

El inspector DOM le muestra el DOM de la página web remota. Puede inspeccionar el DOM, hacer clic en los nodos los resaltará en la página web del host y, si selecciona uno, también puede ver y modificar sus propiedades css.

modernizar

La pestaña Modernizr le mostrará las funciones de navegador compatibles según lo informado por modernizar. Puede usar esto para determinar qué características están realmente disponibles. Esto podría ser particularmente útil en dispositivos móviles inusuales o cosas como consolas de juegos.

¿Como lo uso?

Desde la línea de comando de su nodo, simplemente ejecute esto:

€ npm i -g vorlon 
€ vorlon 

Ahora tiene un servidor ejecutándose en su host local en el puerto 1337.

Para obtener acceso al tablero, simplemente navegue hasta http://localhost:1337/panel/ID DE SESIÓN, donde SESSIONID es el ID de la sesión de panel actual. Esta puede ser cualquier cadena que desee.

Luego debe agregar una sola referencia en su proyecto de cliente:

<script src="http://localhost:1337/vorlon.js/SESSIONID"></script>

Tenga en cuenta que se puede omitir SESSIONID y, en este caso, se reemplazará automáticamente por «predeterminado».

¡Y eso es! Ahora su cliente enviará información de depuración a su tablero sin problemas. Ahora echemos un vistazo a un ejemplo utilizando un sitio real.

Depuración de Babylonjs.com con Vorlon.js

usemos http://www.babylonjs.com/ para nuestro ejemplo. Primero, tengo que iniciar mi servidor (usando el nodo start.js dentro de la carpeta /server). Luego, solo tengo que agregar esta línea a mi sitio de cliente:

<script src="http://localhost:1337/vorlon.js"></script> 

Como no estoy definiendo un SESSIONID, solo puedo ir a http://localhost:1337/panel

El tablero se ve así:

Nota al margen: El navegador que se muestra arriba es Microsoft Edge (anteriormente conocido como proyecto espartano), 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.

Volviendo a eso: puedo ver los mensajes de la consola, por ejemplo, lo cual es útil cuando depuro babylon.js en dispositivos móviles (como iOS, Android o Windows Phone).
Puedo hacer clic en cualquier nodo en DOM Explorer para obtener información sobre las propiedades de CSS:

En el lado del cliente, el nodo seleccionado se resalta con un borde rojo:

Además, puedo cambiar a la pestaña Modernizr para ver las capacidades de mi dispositivo específico:

En el lado izquierdo, puede ver la lista de clientes actualmente conectados y puede usar el [Identify a client] botón para mostrar un número en todos los dispositivos conectados.

Un poco más sobre cómo construimos Vorlon.js

Desde el principio, queríamos asegurarnos de que vorlon.js permaneciera como móvil primero y independiente de la plataforma como sea posible. Así que decidimos usar tecnología de código abierto que funcionara en una cantidad más amplia de entornos.

Nuestro entorno de desarrollo fue Visual Studio Community, que puede conseguir gratis ahora. usamos el Herramientas Node.JS para Visual Studio y Azure para el back-end. Nuestro front-end era JavaScript y TypeScript. Si no está familiarizado con TypeScript, puede saber por qué hemos creado babylon.js con él. aquí. Hace poco 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:

Estas son las piezas con las que hemos construido:

  • A nodo.js el servidor aloja una página de tablero (servida usando express) y un servicio
  • El servicio está usando socket.io para establecer una conexión directa tanto con el salpicadero como con los distintos dispositivos
  • Los dispositivos deben hacer referencia a una página vorlon.js simple servida por el servidor. Contiene todo el código del cliente de los complementos que interactúan con el dispositivo del cliente y se comunican con el tablero a través del servidor.
  • Cada complemento se divide en dos partes:
  • El lado del cliente, utilizado para capturar información e interactuar con el dispositivo.
  • El lado del tablero, utilizado para generar un panel de comando para el complemento dentro del tablero

Por ejemplo, el complemento de la consola funciona de esta manera:

  • El lado del cliente genera un gancho encima de console.log(), console.warn() o console.error(). Este enlace se utiliza para enviar los parámetros de estas funciones al tablero. También puede recibir órdenes del lado del tablero que evaluará
  • El lado del tablero reúne estos parámetros y los muestra en el tablero

El resultado es simplemente una consola remota:

Puede obtener una mejor comprensión de la extensibilidad de vorlon.js, incluido cómo crear sus propios complementos. aquí.

¿Que sigue?

Vorlon.js se basa en la idea de extensibilidad. ¡Te animamos a contribuir! Y ya estamos sobre cómo podríamos integrar vorlonJS en las herramientas de desarrollo del navegador, así como en la depuración de audio web.

Si quieres probarlo, estás a un clic de distancia: vorlonjs.com

Y los documentos más técnicos están aquí en nuestro GitHub.

Más prácticas con JavaScript

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 tenemos la misión de crear mucho más con Borde de Microsoft. Echa un vistazo a la mía:

O la serie de aprendizaje de nuestro equipo:

Y algunas herramientas gratuitas: Comunidad de Visual Studio, Prueba de Azurey herramientas de prueba de navegador cruzado para Mac, Linux o Windows.

Este artículo es parte de la serie de tecnología de desarrollo web de Microsoft. Estamos emocionados de compartir Borde de Microsoft y el nuevo Motor de renderizado EdgeHTML contigo. Obtenga máquinas virtuales gratuitas o realice pruebas de forma remota en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/

(dpe)

#Por #qué #creamos #Vorlonjs #cómo #usarlo #para #depurar #JavaScript #forma #remota

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *