#Тренды фронтэнда
###Новые возможности браузеров
##Сервис. Структура
В настоящее время «качественный» сервис содержит в своей структуре:
- клиентские приложения (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.