Один мир — один фронтенд или первый авиационный прибор на HTML
Доброго дня, коллеги! Еще одного доброго дня который быстро промелькнет, уйдет в прошлое и подарит миру еще один шаг вперед. Какой будет завтра фронтенд разработка к которой мы идем, делая посильный вклад в развитие открытой платформы?
Для того что бы понять будущее давайте обратимся к прошлому… Изучая и анализируя пройденный человечеством путь мы увидим как крепнущая нить унификации проходит через всю историю.
Унификация — распространённый и эффективный метод устранения излишнего многообразия, является разновидностью систематизации и преследует цель распределения предметов в чёткую систему, удобную для пользования. (c) Wikipedia
Унификация добилась весьма серьезных успехов в политике, авиа и автостроении, инженерных решениях и электронике.
Европа в 18 веке:
Европа сейчас:
Факты:
- Все современные пассажирские самолеты похожи. Тяжело отличить Boeing от Airbus, но изначально разнообразие форм было потрясяющим. Просто взгляните на эти недоразумения, некоторые похожи на Adobe Flex и GWT =)
- Еще 200 лет назад в Европе существовало более 50 отдельных княжеств и государств. Сегодня? — Евросоюз, минимум границ, интеграция;
- Вам нравятся унифицированные патроны для электрических лампочек? Правда удобно? Сначала их было куда больше, но…
В тот момент, когда человечество накапливает достаточное количество знаний в определенной области — замедляется поиск возможных решений и вместе с этим сокращается типовое разнообразие. Остаются самые популярные, эффективные и стойкие решения. Этот барьер, этап актуален для любой области — будь то политика, транспорт или инженерное дело. Актуально это и для программирования.
Унификация и UI
Мы разрабатываем ПО уже 60 лет при этом такая типовая задача как описание интерфейса все еще не имеет единого решения, хотя в последнее время стало заметным решение претендующее на роль долгожданного стандарта. Эту технологию используют миллионы людей ежедневно — это HTML.
И если вы скажете:»HTML это всего лишь язык описания веб страниц!», — я с уверенностью отвечу, что это уже давно не так, что вы многое пропустили.
HTML сегодня — самая популярная платформа для создания UI и он продолжает набирать обороты. Firefox OS, Tizen, Smart TV, Chrome OS, Windows 8 — вот краткий список операционных систем которые поддерживают HTML/JS, как основную платформу разработки приложений. Количество устройств использующих открытый фронтенд растет и это понятно — его применение уменьшает объем кода нуждающегося в тестировании, ускоряет разработку по сравнению с низкоуровневыми языками. Скорость и надежность дают ощутимые преимущества в конкурентной борьбе и становятся все более важны с каждым днем. Эти приемущества делают HTML/JS достойными дальнейшего расширения сферы применения.
Ниже — попытка сдвинуть наше представление о HTML/JS, применив их в самолетостроении. Речь пойдет об общих принципах использования платформы в приборных панелях самолетов (electronic flight instrumentation systems — «EFIS») и о разработке первого авиационного прибора на HTML — искуственного горизонта.
Обоснование
Приборы разработанные на базе web — технологий обладают высокой доступностью через компьютерный сети. Это особенно важно в век беспилотных летательных аппаратов.
Применение единой, популярной технологии для отображения приборов позволит уменьшить затраты на разработку интерфейсов за счет стандартизации.
Перенос ответственности за рендеринг на ядро браузера снизит объем тестируемого кода приборной панели, ускорит процесс разработки.
Авиационные и судовые приборы — это не только новые карьерные возможности для front-end инженеров, но и новый тип рынка UI компонент, который может стать предпосылкой для качественного рывка в отрасли.
Предполагаемая архитектура UI
Современные приборные панели — это LCD дисплеи отображающие приборы с различной информацией о состоянии машины.
С помощью HTML разметки производитель может самостоятельно задать сетку расположения приборов на дисплее.
Один из возможных вариантов сеткиКаждый прибор оформляется в виде отдельного класса. В его конструктор передается селектор на предназначенную прибору ячейку. Например размещение искуственного горизонта в первую ячейку будет выглядеть как
new AttitudeIndicator('#leftColumn1')
Мы видим, что для использования приборов не требуется знаний о его внутреннем устройстве. Это открывает возможности для создания живого и конкурентного рынка авиационных, морских и пр. приборов разработанных на HTML/CSS/JS.
Индустрия разработки индикаторов весьма консервативна, список используемых UI решений скуден и скушен. Главная причина этого — повышенные требования к надежности. Благодаря объему тестирования CSS может обойти это ограничение. Используемый на миллиардах устройств ежедневно CSS — достаточно надежная и мощная технология что бы стать глотком свежего воздуха для индустрии.
В предыдущей сетке центральным элементом была навигационная карта. Предположим, что погодные условия ухудшилась и теперь информация погодного радара стала приоритетной для пилота. CSS/JS позволяют создать совершенно новый уровень UX для отрасли в нескольких строках кода. Щелкните по погодному радару (правый верхний угол) для переноса его в центральную ячейку.
Интерактивная демонстрация переключения основного прибора
Данные приборов
Предполагается, что браузеры дисплеев будут подключены к общей шине данных.
Схема передачи данных
Для разработчика это значит, что получить данные о текущей высоте можно через
var altitude = window.flightData.altitudeSensor.altitude;
Аналог для широты и долготы
var longtitude = window.flightData.gpsSensor.longtitude; var latitude = window.flightData.gpsSensor.latitude;
Подобный подход уже сейчас используется в PhoneGap и AdobeAir для доступа к нативным ресурсам.
Разработка искуственного горизонта
Авиагоризонт состоит из небольшого количества подвижных элементов, а покадровые анимации отсутствуют. Все что необходимо — плавное отображение двух величин: крена вертикального крена. Нам будет достаточно нескольких слоев с абсолютным позиционированием и css transitions. Transitions — нативная имплементация твинов в браузере и похоже такое решение будет самым быстрым и совместимым из html/css стека.
Реализация
Прибор представлен в виде JS класса AttitudeIndicator(cssSelector, autoUpdate)
Входящие аргуметы конструктора:
- cssSelector элемента для развертывания индикатора;
- autoUpdate необязательный boolean параметр определяющий будет ли прибор использовать HTML5 API для получение координат. Если true — используется HTML5 Orientation API, если false — параметры передаются извне с помощью метода updateAngles(horizontalAngleDegrees, verticalAngleDegrees)
При инициализации и работе используется максимум нативных функций рендеринга и минимум вызовов.
Основные элементы добавляются к DOM единожды через documentFragment что бы блокировать работу браузера минимально.
p.initElements = function() {
var docFragment = document.createDocumentFragment();
this.wrapperNode = document.createElement('div');
//создание всех узлов и добавление к wrapperNode
this.planeMarkNode.appendChild(this.planeMarkImage);
docFragment.appendChild(this.wrapperNode);
this.node.appendChild(docFragment);
Анимация происходит через CSS3 transition движущихся элементов при периодической передаче данных. Из события deviceOrientation происходит вызов функции:
updateAngles(horizontalAngleDegrees, verticalAngleDegrees) {
this.verticalMeasurementline.style[this.transformString] = 'translate(0, ' + verticalTransform + 'px)';
//Поворот остальных элементов ...
}
Соответственно если обьект создан с autoUpdate = true (второй аргумент конструктора) слушатель на deviceOrientation не устанавливается.
Занимательно что deviceOrientation на Mac дает значения осей для корпуса, а не монитора. Соответственно между iPad и Mac есть разница в осях. Исправляется условием по userAgent, но вероятно есть библиотеки с расширенной поддержкой устройств? Можете что то посоветовать?
Попробуйте авиагоризонт в действии
Проверено на данных встроенных гироскопов Mac Book (без SSD) и iPad .
Исходный код
Видео первого в истории полета с использованием HTML/JS авиационного прибора:
Заключение
HTML/CSS/JS -достаточно зрелый стек для создания авиационных и корабельных приборов. Он обладает рядом преимуществ по части скорости, гибкости разработки, а созданные таким образом приборы надежны и обладают чрезвычайно высокой сетевой доступностью, что особо важно в век беспилотных ЛА.
Еще одна возможность скрывающаяся в применении веб — технологий для разработки приборов — создание конкурентного рынка, создающего небывалый выбор производителям ЛА и предпосылки для качественного скачка в индустрии авиационных и корабельных приборов.
P.S.
Вне всякого сомнения — сейчас на портировании интерфейса между платформами человечество теряет гигантское количество энергии. Windows, OSx, iOS, Blackberry, Android… А вы видели язык разметки в Android? Разве это не странно — дублировать существующие и успешные парадигмы?
Давайте же мыслить трезво, держа уверенный шаг на пути в лучшее будущее и… Доброго дня!