#Тренды фронтэнда

###Новые возможности браузеров

Sergey Makoveev / @sergeymakoveev

##Сервис. Структура

В настоящее время «качественный» сервис содержит в своей структуре:

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

##Сервис. Сопровождение

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

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

##Сервис. Разработка

Возрастают “накладные расходы” на поддержание инфраструктуры самого процесса разработки.

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

Многократно усложняется введение нового функционала в сервис.

поддержка нового функционала должна быть одновременно и единообразно реализована во всех частях сервиса.

Подобная структура изначально расположена к появлению ошибок в следствии рассогласования взаимодействия ее составляющих.

это, в первую очередь, вызвано разнообразием клиентских приложений и разнообразием их версий на устройствах пользователей.

##Веб-приложение. Структура

Структура такого приложения выглядит гораздо лаконичней:

  • веб-итерфейс
  • клиентские приложения, расширения и букмарклеты для браузеров представляют собой тривиальную “оболочку”, в которую “упакован” веб-интерфейс
  • общий бэкэнд, +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);
*/
<input type="button" value="vibrate 1 sec"
       onclick="
            if( 'vibrate' in navigator )
                navigator.vibrate(1000);
       " />

/*
    последовательность: вибросигнал 0.5 сек, пауза 0.1 сек, вибросигнал 0.3 сек
    navigator.vibrate([500, 1000, 300]);
*/
<input type="button" value="vibrate 0.5 sec, wait 0.1 sec, vibrate 0.3 sec"
       onclick="
            if( 'vibrate' in navigator )
                navigator.vibrate([500, 100, 300]);
       " />

/*
    последовательность множества сигналов
    navigator.vibrate(
        '111111111111111111111111111111111111'
            .split('')
            .map(function(){ return 300; })
    );
*/
<input type="button" value="vibrate many times"
       onclick="
            if( 'vibrate' in navigator )
                navigator.vibrate(
                    '111111111111111111111111111111111111'
                        .split('')
                        .map(function(){ return 300;})
                );
       " />

/*
    остановить вибросигнал
    navigator.vibrate(0);
*/
<input type="button" value="vibrate stop 1"
       onclick="
            if( 'vibrate' in navigator )
                navigator.vibrate(0);
       " />

/*
    вибросигнал длительностью 10 сек
    navigator.vibrate(10000);
*/
<input type="button" value="vibrate 10 sec"
       onclick="
            if( 'vibrate' in navigator )
                navigator.vibrate(10000);
       " />

/*
    остановить вибросигнал
    navigator.vibrate([]);
*/
<input type="button" value="vibrate stop 2"
       onclick="
            if( 'vibrate' in navigator )
                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.onorientationchange - событие изменения ориентации экрана
// screen.o rientation - текущее значение ориентации экрана
screen.addEventListener(
    "mozorientationchange",
    function() {
        console.log( "the orientation of the device is now "+
                     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/orientation, Opera/compass.

Источники: W3C/deviceorientation, MDN/Orientation and motion data explained, MDN/deviceorientation, 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,   // минимальное значение, определяемое датчиком
        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.

#HTML

##URI shemes для SMS и голосовых вызовов

<a href="tel:+79022071111">Test Call</a>
<a href="sms:+79022071111">Test SMS</a>
<a href="sms:+79022071111, +78005500500">Test SMS to many recipients</a>
<a href="sms://?body=Test SMS body">Test SMS with body</a>

Пример:

Источники: RFC 5724, RFC 3966, David Walsh/tel: sheme, O`Reilly Answers/sms: sheme, Apple Developer/sms: scheme, Apple Developer/tel: scheme, IANA/Permanent URI Schemes.

##CSS

  • Web Components
  • CSS Flexible Box Layout
  • CSS Media Query
  • CSS Viewport units
  • CSS calc()

#Итого

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