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

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

В настоящее время нельзя не заметить общую тенденцию к миграции сервисов и приложений в веб, что подкрепляется появлением множества онлайн-сервисов, которые ~~претендуют называться~~ однозначно можно назвать веб-приложениями. Как следствие, теряют популярность 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 (GAP)", целью которой является создание 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.

Источники