Введение

Презентация к докладу
Alt text
http://goo.gl/2CkWb

В настоящее время нельзя не заметить общую тенденцию к миграции сервисов и приложений в веб, что подкрепляется появлением множества онлайн-сервисов, которые претендуют называться однозначно можно назвать веб-приложениями. Как следствие, теряют популярность standalone-приложения, функционал которых не предусматривает связи с массовыми веб-сервисами. Таким приложением приходится либо видоизменяться, добавляя в себя функционал для интеграции с внешним миром, либо мигрировать в веб.
Интересны разные пути развития приложений и сервисов. Яркими примерами являются Adobe с его Adobe Creative Cloud, Microsoft с его SkyDrive и Microsoft Office Web App - здесь популярные приложения мигрировали в веб. Другой путь развития - развитие сервисов, когда веб-сервисы, набирая популяность, «обрастают» приложениями - GMail, Youtube.

Таким образом, приложение (сервис), целью которого является «быть качественным, удобным и популярным», в настоящее время содержит в своей структуре:

  • клиентские приложения для популярных OS (iOS, Android, Windows, Linux, …);
  • расширения для популярных браузеров;
  • букмарклеты для популярных браузеров;
  • веб-клиента;
  • общий бэкэнд, в котором, наряду с основным функционалом, реализованы собственное api и средства интеграции с внешними сервисами.

Совершенно очевидно что:

  • для развития и поддержки подобного приложения требуются усилия слаженной команды разработчиков, включающей в себя специалистов с опытом разработки приложений под соответствующие платформы, одновременно обладающих опытом и знаниями в смежных областях (это как минимум знание архитектуры веб-приложений и технологий, применяемых для их реализации);
  • возрастают “накладные расходы” на поддержание инфраструктуры самого процесса разработки (для каждого составляющего этой структуры требуется написание всего спектра тестов - юнит, функциональных, нагрузочных; ведение отдельного баг-трекера, и т.д. …);
  • многократно усложняется введение нового функционала в сервис (поддержка которого должна быть одновременно и единообразно реализована во всех его структурных частях);
  • подобная структура изначально расположена к появлению ошибок в следствии рассогласования взаимодействия ее составляющих, вызванных в первую очередь разнообразием клиентских приложений и разнообразием их версий на устройствах пользователей.

Бесспорно что трудоемкость и, как следствие, стоимость поддержки и развития такого приложения будет несравнимо больше по-сравнению с «pure-web-application». Структура такого приложения выглядит гораздо лаконичней:

  • веб-итерфейс;
  • клиентские приложения для популярных OS, расширения и букмарклеты для популярных браузеров представляют собой тривиальную “оболочку”, в которую “упакован” веб-интерфейс;
  • общий бэкэнд, +api, +средства интеграции с внешними сервисами.

При такой структуре сервиса исключаются практически все минусы, перечисленные выше, в силу того, что при реализации всех частей структуры используются мономорфные технологии (js, css, html), и, следовательно, мономорфная инфраструктура самого процесса разработки и команда разработчиков.

Здесь возникает естественный вопрос - почему подобная практика не используется повсеместно? Ответ прост: до недавнего времени веб-интерфейсы не могли составить достойную конкуренцию интерфейсам, реализованным при помощи нативных средств каждой из платформ.

JavaScript APIs

Еще в июле 2009 года в рамках World Wide Web Consortium (W3C) была создана “Device APIs Working Group (DAP)”, целью которой является создание client-side API для взаимодействия веб-приложений с сервисами устройств (камера, календарь, контакты, …). Здесь можно увидеть текущие направления разработок группы. Некоторые из них уже реализованы в браузерах.

Внимание: тестовые примеры написаны для Firefox mobile beta.

Battery Status API

Служит для отображения информации о состоянии батарей клиентской машины.
Реализован с браузерным префиксом.

//объект, содержащий информацию о батареях
var battery = navigator.battery ||
              navigator.webkitBattery ||
              navigator.mozBattery;

//battery.level - уровень заряда батарей (значение в диапазоне 0...1)
var onlevelchange = function(e) {
    console.warn("Battery level change: ", battery.level);
};
//levelchange - событие изменения уровня заряда
battery.addEventListener("levelchange", onlevelchange);

//battery.charging - статус заряда (true - заряжается, false - не заряжается)
var onchargingchange = function() {
    console.warn("Battery charge change: ", battery.charging);
};
//chargingchange - событие изменения статуса заряда
battery.addEventListener("chargingchange", onchargingchange);

//battery.chargingTime - оставшееся время до полного заряда
var onchargingtimechange = function() {
    console.warn("Battery charge time change: ", battery.chargingTime);
};
//chargingchange - событие изменения времени до полного заряда
battery.addEventListener("chargingtimechange", onchargingtimechange);

//battery.dischargingTime - оставшееся время до полного разряда
var ondischargingtimechange = function() {
    console.warn("Battery discharging time change: ", battery.dischargingTime);
};
//dischargingtimechange - событие изменения времени до полного разряда
battery.addEventListener("dischargingtimechange", ondischargingtimechange);

Пример: David Walsh/Battery Status API/Example.
Источники: W3C Battery Status API, MDN/window.navigator.battery, David Walsh/Battery Status API.

##Vibration API Предназначен для управления вибросигналом устройства.

//вибросигнал длительностью 1 сек
navigator.vibrate(1000);

//последовательность: вибросигнал 0.5 сек, пауза 1 сек, вибросигнал 0.3 сек
navigator.vibrate([500, 1000, 300]);

//последовательность множества сигналов
navigator.vibrate( ('111111111111111111'+
                    '111111111111111111').split('')
                                         .map(function(){ return 300; }) );

//остановить вибросигнал
navigator.vibrate(0);

//вибросигнал длительностью 10 сек
navigator.vibrate(10000);

//остановить вибросигнал
navigator.vibrate([]);

Примеры: Vibration API example, David Walsh/Vibration API/Example.
Источники: W3C Vibration API, MDN/window.navigator.vibrate, David Walsh/Vibration API

##Screen Orientation API Предназначен для получения событий изменения ориентации экрана устройства, информации о текущем состоянии ориентации экрана.
Реализован с браузерным префиксом.

// screen.orientation - текущее значение ориентации экрана

console.log("orientation: " + screen.mozOrientation);

// screen.onorientationchange - событие изменения ориентации экрана устройства

screen.addEventListener(
    "mozorientationchange",
    function() {
        console.log("orientation: " + screen.mozOrientation);
    }
);

Пример: Screen Orientation API example.
Источники: W3C/Screen Orientation API, MDN/orientationchange event.

##Device Orientation API Предназначен для получения событий изменения ориентации устройства.

// window.ondeviceorientation - событие смены ориентации устройства
// e.alpha, e.beta, e.gamma - текущее значение ориентации экрана
//                            по осям x, y, z соответственно
window.addEventListener(
    "deviceorientation",
    function(e){
        console.log(e.alpha, e.beta, e.gamma);
    }
);

Примеры: Device Orientation API example, Opera/compass.
Источники: W3C/deviceorientation, MDN/Orientation and motion data explained, Opera/Orientation API.

##Device Motion API Предназначен для получения событий датчика-акселерометра о перемещении устройства.

// window.ondevicemotion - событие перемещения устройства
// ускорение по осям x, y, z соответственно:
// e.acceleration.x, e.acceleration.y, e.acceleration.z
// значение ускорения по осям x, y, z (с учетом гравитации) соответственно:
// - e.accelerationIncludingGravity.x
// - e.accelerationIncludingGravity.y
// - e.accelerationIncludingGravity.z
// значение угловой скорости вращения по осям z, x, y (в градусах) соответственно:
// e.rotationRate.alpha, e.rotationRate.beta, e.rotationRate.gamma
window.addEventListener( "devicemotion",
                         function(e){ console.dir(e.acceleration);
                                      console.dir(e.accelerationIncludingGravity);
                                      console.dir(e.rotationRate); }; );

Пример: Device Motion API example.
Источники: W3C/devicemotion, MDN/Orientation and motion data explained, MDN/devicemotion, Opera/Orientation API.

##Ambient Light Events Предназначены для получения событий датчика освещенности устройства.

window.addEventListener(
    "devicelight",
    //e.value - значение освещенности в люксах
    function(e){ console.log(e.value); }
);
window.addEventListener(
    'lightlevel',
    // e.value = ("normal"|"dim"|"bright")
    function(e) { console.log('lightlevel: ' + e.value); }
);

Примеры: Ambient Light API example, Doug Turner/Ambient Light Events/Example.
Источники: W3C Ambient Light Events, MDN/DeviceLightEvent, Doug Turner/Ambient Light Events.

##Proximity Events События датчика приближения устройства.

window.addEventListener(
    "deviceproximity",
    function(e){console.log(
        e.value, // текущая дистанция до датчика в сантиметрах (!)
        e.min,   // минимальное значение, которое может определить датчик (==0)
        e.max    // максимальное значение, которое может определить датчик
    )}
);
window.addEventListener(
    "userproximity",
    function(e){console.log(
        e.near //true - близко, false - далеко
    )}
);

Примеры: Proximity Events example, Doug Turner/Device Proximity/Exapmle.
Источники: W3C Proximity Events, MDN/DeviceProximityEvent, MDN/UserProximityEvent, Doug Turner/Device Proximity, Doug Turner/User Proximity.

##Page Visibility API Позволяет определить отображается ли страница на экране устройства.
Реализован с браузерным префиксом.

// Поля, содержащие состояние отображаемости страницы:
// document.hidden = (true|false)
// document.visibilityState = ("hidden"|"visible"|"prerender"|"unloaded")

console.log( document.mozHidden, document.mozVisibilityState );

// Событие смены состояния отображаемости страницы:
// document.onvisibilitychange = function(e){ ... }

document.addEventListener( 'mozvisibilitychange',
                           function(){console.log( document.mozHidden,
                                                   document.mozVisibilityState );} );

Примеры: Page Visibility API example, David Walsh/Page Visibility API/Example, Mozilla/Page Visibility API/Example.
Источники: W3C Page Visibility, David Walsh/Page Visibility API, Chrome/Page Visibility API, MDN/Page Visibility API.

##Fullscreen API Предоставляет возможности работы с полноэкранным режимом.
Реализован с браузерным префиксом.

// доступность полноэкранного режима:
// document.fullScreenEnabled = (true|false)

console.log('fullScreenEnabled :', document.mozFullScreenEnabled );

// вывод DOM-ноды в полноэкранном режиме:
// el.requestFullScreen();

document.mozRequestFullScreen();

// элемент, выведенный в полноэкранном режиме:
// document.fullscreenElement

console.log('fullscreenElement:', document.mozFullscreenElement);

// выход из полноэкранного режима:
// document.cancelFullScreen();

document.mozCancelFullScreen();

Примеры: Fullscreen API/Example, MDN/Fullscreen API/Example, David Walsh/Fullscreen API/Example.
Источники: W3C Fullscreen, MDN/Using fullscreen mode, David Walsh/Fullscreen API.

#Итог Обобщая развитие веб-стандартов в сфере фронтенд-технологий (css, js, html), можно увидеть общую тенденцию инновационных разработок, конечной целью которых является становление веб-интерфейсов как стандарта де-факто в качестве интерфейсов приложений. Уже сейчас можно воспользоваться новыми API при помощи Modernizr.

#Links

comments powered by Disqus