[Эта статья была написана Дэвидом Катухе]
Недавно на // BUILD / 2015 мы объявили vorlon.js — открытый, расширяемый, независимый от платформы инструмент для удаленной отладки и тестирования вашего JavaScript. У меня была возможность создать vorlon.JS с помощью талантливых инженеров и технических евангелистов из Microsoft. (Те же самые ребята, которые принесли вам http://www.babylonjs.com )
Vorlon.js работает на node.JS, socket.io и позднем кофе. Я хотел бы поделиться с вами, почему мы сделали это, как включить его в ваш собственный процесс тестирования, а также поделиться некоторыми подробностями в искусстве создания библиотеки JS, подобной этой.
Почему Vorlon.js?
Vorlon.js помогает вам удаленно загружать, проверять, тестировать и отлаживать код JavaScript, работающий на любом устройстве с веб-браузером. Будь то игровая приставка, мобильное устройство или даже холодильник, подключенный к IoT, вы можете удаленно подключить до 50 устройств и выполнять JavaScript на каждом или на всех из них. Идея в том, что команды разработчиков могут также отлаживать вместе — каждый может писать код, и результаты видны всем. В этом проекте у нас был простой девиз: нет нативного кода , нет зависимости от конкретного браузера, только JavaScript , HTML и CSS работают на устройствах по вашему выбору.
Vorlon.js сам по себе является небольшим веб-сервером, который вы можете запустить на своем локальном компьютере или установить на сервере для доступа своей команды, который обслуживает панель управления Vorlon.js (ваш командный центр) и взаимодействует с удаленными устройствами. Установить клиент Vorlon.js на свой веб-сайт или в приложение так же просто, как добавить один тег сценария. Это также расширяемо, где разработчики могут писать плагины, которые добавляют функции как к клиенту, так и к информационной панели, например: обнаружение функций, ведение журнала и отслеживание исключений.
Так почему имя? На самом деле есть две причины. Во-первых, я просто без ума от Babylon 5 (телешоу). Исходя из этого, вторая причина заключается в том, что ворлонцы являются одной из самых мудрых и древних рас вселенной и, таким образом, они полезны в качестве дипломатов между молодыми расами. Их полезность вдохновляет нас: для веб-разработчиков все еще слишком сложно написать JavaScript, который надежно работает на различных устройствах и браузерах. Vorlon.js стремится сделать это немного проще.
Вы упомянули, что у Vorlon.js есть плагины?
Vorlon.js был разработан для того, чтобы вы могли легко расширить панель мониторинга и клиентское приложение, написав или установив дополнительные плагины. Вы можете изменить размер или добавить дополнительные панели на панель инструментов, которые могут двунаправленно взаимодействовать с клиентским приложением. Для начала есть три плагина:
Приставка
Ведение журнала. На вкладке консоли будут передаваться консольные сообщения от клиента на панель инструментов, которую можно использовать для отладки. Все, что зарегистрировано с помощью console.log (), console.warn () или console.error (), появится на панели инструментов. Как и исследователь DOM F12 Dev Tool , вы можете увидеть дерево DOM, выбрать узел (который будет выделен на устройстве, а также обновить или добавить новые свойства CSS).
Интерактивность: Вы также можете взаимодействовать с удаленной веб-страницей, введя код во вход. Введенный код будет оцениваться в контексте страницы.
DOM Explorer. Инспектор DOM показывает вам DOM удаленной веб-страницы. Вы можете проверить DOM, щелкнув узлы, чтобы выделить их на веб-странице хоста, и если вы выберете один, вы также можете просмотреть и изменить его свойства CSS.
ModernizrВкладка Modernizr покажет вам поддерживаемые функции браузера, как сообщает Modernizr . Вы можете использовать это, чтобы определить, какие функции действительно доступны. Это может быть особенно полезно на необычных мобильных устройствах или таких вещах, как игровые приставки.
Как мне это использовать?
Из командной строки вашего узла просто выполните это:
$ npm i -g vorlon
$ vorlon
Теперь у вас есть сервер, работающий на вашем локальном хосте через порт 1337.
Чтобы получить доступ к панели мониторинга, просто перейдите по адресу http: // localhost: 1337 / dashboard / SESSIONID. Где SESSIONID — это идентификатор текущего сеанса панели мониторинга. Это может быть любая строка, которую вы хотите.
Затем вам нужно добавить одну ссылку в ваш клиентский проект:
<script src="http://localhost:1337/vorlon.js?SESSIONID"></script> Обратите внимание, что SESSIONID может быть опущен, и в этом случае он будет автоматически заменен на «default»
И это все! Теперь ваш клиент без проблем отправит отладочную информацию на вашу панель управления. Давайте теперь посмотрим на пример использования реального сайта.
Отладка babylonjs.com с помощью vorlon.js
Давайте использовать www.babylonjs.com для нашего примера. Сначала я должен запустить свой сервер (используя узел start.js внутри папки / server). Затем мне просто нужно добавить эту строку на мой клиентский сайт:
<script src="http://localhost:1337/vorlon.js"></script>
Поскольку я не определяю SESSIONID, я могу просто перейти на http: // localhost: 1337 / dashboard.
Панель инструментов выглядит следующим образом:
Sidenote : браузер, показанный выше, — Project Spartan , новый браузер Microsoft для Windows 10. Вы также можете удаленно протестировать свои веб-приложения на своем Mac, iOS, Android или устройстве Windows @ http://modern.IE . Или попробуйте vorlon.js. Обратитесь к нему: например, я вижу консольные сообщения, что полезно, когда я отлаживаю babylon.js на мобильных устройствах (таких как iOS, Android или Windows Phone).
Я могу нажать на любой узел в DOM Explorer, чтобы получить информацию о свойствах CSS:
На стороне клиента выбранный узел выделяется красной рамкой:
Более того, я могу перейти на вкладку Modernizr, чтобы увидеть возможности моего конкретного устройства:
С левой стороны вы можете увидеть список подключенных в данный момент клиентов, и вы можете использовать кнопку [Идентифицировать клиента] для отображения номера на всех подключенных устройствах.
Еще немного о том, как мы создали vorlon.js
С самого начала мы хотели быть уверены, что vorlon.js остается максимально мобильным и независимым от платформы . Поэтому мы решили использовать технологию с открытым исходным кодом, которая работала в более широком числе сред.
Наша среда разработки была Visual Studio Community, которую вы можете получить бесплатно прямо сейчас. Мы использовали инструменты Node.JS для Visual Studio и Azure для серверной части. Нашим интерфейсом был JavaScript и TypeScript. Если вы не знакомы с машинопись, вы можете узнать , почему мы построили babylon.js с ним здесь . Недавно Angular 2 был построен с использованием TypeScript . Но вам не нужно знать это, чтобы использовать vorlon.js.
Вот глобальная схема того, как это работает:
Вот части со встроенными:
- На сервере node.js размещается страница панели инструментов (обслуживается с помощью экспресс-доставки) и служба
- Сервис использует socket.io для установления прямого соединения как с приборной панелью, так и с различными устройствами.
- Устройства должны ссылаться на простую страницу vorlon.js, обслуживаемую сервером. Он содержит весь клиентский код плагинов, которые взаимодействуют с клиентским устройством и взаимодействуют с приборной панелью через сервер.
-
Каждый плагин разделен на две части:
- Клиентская сторона, используемая для сбора информации и взаимодействия с устройством.
- Сторона панели инструментов, используемая для создания панели команд для плагина внутри панели инструментов
Например, консольный плагин работает следующим образом:
- Клиентская сторона генерирует хук поверх console.log (), console.warn () или console.error (). Этот хук используется для отправки параметров этих функций на панель инструментов. Он также может получать заказы со стороны панели инструментов, которые он будет оценивать
- Сторона приборной панели собирает эти параметры и отображает их на приборной панели.
В результате получается просто удаленная консоль:
Вы можете получить еще лучшее представление о расширяемости vorlon.js, в том числе о том, как создавать собственные плагины здесь .
Что дальше?
Vorlon.js построен на идее расширяемости . Мы призываем вас внести свой вклад! И мы уже о том, как мы могли бы интегрировать vorlonJS в инструменты разработки браузера, а также отладку Web Audio.
Если вы хотите попробовать его, вам достаточно одного щелчка мышью: vorlonjs.com.
Более подробные технические документы можно найти на нашем GitHub .
И прежде чем закрыть эту статью, я просто хочу отдать должное всей основной команде:
- Джастин Гаррет ( @justgar )
- Пьер Лагард ( @pierlag )
- Этьен Марграфф ( @meulta )
- Дэвид Руссе ( @davrous )
- Я ( @deltakosh )