Тренды фронтэнда. Javascript APIs для мобильных устройств

Презентация: http://goo.gl/2CkWb ^[1].
Примеры: http://goo.gl/5jv4i ^[2].
Исходники: http://goo.gl/YYj0R ^[3].

В настоящее время нельзя не заметить общую тенденцию к миграции сервисов и приложений в веб, что подкрепляется появлением множества онлайн-сервисов, которые претендуют называться однозначно можно назвать веб-приложениями. Как следствие, теряют популярность standalone-приложения, функционал которых не предусматривает связи с массовыми веб-сервисами. Таким приложением приходится либо видоизменяться, добавляя в себя функционал для интеграции с внешним миром, либо мигрировать в веб.

Интересны разные пути развития приложений и сервисов. Яркими примерами являются Adobe с его Adobe Creative Cloud ^[4], 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 (GAP) ^[5]", целью которой является создание client-side API для взаимодействия веб-приложений с сервисами устройств (камера, календарь, контакты, ...). Здесь ^[6] можно увидеть текущие направления разработок группы. Некоторые из них уже реализованы в браузерах.

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

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 ^[8].

Источники:
W3C Battery Status API ^[9],
MDN/window.navigator.battery ^[10],
David Walsh/Battery Status API ^[11].

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 ^[12],
David Walsh/Vibration API/Example ^[13].

Источники:
W3C Vibration API ^[14],
MDN/window.navigator.vibrate ^[15],
David Walsh/Vibration API ^[16]

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 ^[17].

Источники:
W3C/Screen Orientation API ^[18],
MDN/orientationchange event ^[19].

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 ^[20],
Opera/compass ^[21].

Источники:
W3C/deviceorientation ^[22],
MDN/Orientation and motion data explained ^[23],
Opera/Orientation API ^[24].

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 ^[25].

Источники:
W3C/devicemotion ^[26],
MDN/Orientation and motion data explained ^[23],
MDN/devicemotion ^[27],
Opera/Orientation API ^[24].

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 ^[28],
Doug Turner/Ambient Light Events/Example ^[29].

Источники:
W3C Ambient Light Events ^[30],
MDN/DeviceLightEvent ^[31],
Doug Turner/Ambient Light Events ^[32].

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 ^[33],
Doug Turner/Device Proximity/Exapmle ^[34].

Источники:
W3C Proximity Events ^[35],
MDN/DeviceProximityEvent ^[36],
MDN/UserProximityEvent ^[37],
Doug Turner/Device Proximity ^[38],
Doug Turner/User Proximity ^[39].

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 ^[40],
David Walsh/Page Visibility API/Example ^[41],
Mozilla/Page Visibility API/Example ^[42].

Источники:
W3C Page Visibility ^[43],
David Walsh/Page Visibility API ^[44],
Chrome/Page Visibility API ^[45],
MDN/Page Visibility API ^[46].

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 ^[47],
MDN/Fullscreen API/Example ^[48],
David Walsh/Fullscreen API/Example ^[49].

Источники:
W3C Fullscreen ^[50],
MDN/Using fullscreen mode ^[51],
David Walsh/Fullscreen API ^[52].

Итог

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

Источники

• MDN/Mozilla event reference ^[54];
• MDN/DOM ^[55];
• MDN/Mozilla event reference ^[54];
• Opera/Web specifications ^[56];
• HTML 5 Demos and Examples ^[57];
• David Walsh ^[58];
• Doug Turner ^[59];
• hacks.mozilla.org ^[60];
• Веб-стандарты/Статьи; ^[61]
• W3C Device APIs Working Group ^[6];
• W3C Device APIs Working Group/Mercurial ^[62];
• Modernizr ^[53].

Презентация: http://goo.gl/2CkWb ^[1].
Примеры: http://goo.gl/5jv4i ^[2].
Исходники: http://goo.gl/YYj0R ^[3].

Автор: sergeymakoveev

Источник ^[63]