Інший погляд на розробку додатків для Smart TV

Незважаючи на те, що Smart TV з'явилися на ринку СНД і стали набирати популярність досить давно (~2010) — технології/підходи розробки додатків для них сильно відстають у часі, часом обвиваючи приємними спогадами з 7х або раніше років.
Мені б хотілося поділитися результатами мого дослідження області розробки додатків для SmartTV, підкреслити деякі недоліки і звичайно ж розповісти про знайдених рішеннях і просто прикольних штуках.
Що таке програми для Smart TV ?
В "додаток для Smart TV" я вкладаю визначення як веб-додатки, спеціальним таким чином підігнане під телевізор. За великим рахунком, відмінностей не так і багато, здебільшого це несумісність/відсутність деякого API на різних пристроях, до того ж не варто забувати, що телевізор не комп'ютер та його ресурси більш обмежені.
Ключові (як на мене) відмінності:
  • Обмежені ресурси.
  • Спеціальна навігація.
  • Місцями несподівана поведінка на різних пристроях.
  • Трохи заплутані способи тестування.
  • Несподівані варіанти деплоймента і оновлення програми.
Якщо щодо перших трьох пунктів трохи зрозуміло і багато хто вже з ними стикалися, то з рештою є ряд проблем, які кожен повинен вирішувати самостійно. Як, наприклад, запуск тестів в оточенні програми на окремо взятих пристроях, варіанти відновлення і запуску кінцевого програми.
Але я хочу розповісти саме про перших двох.

Чому?
Існує дуже багато чудових інструментів для розробки web-додатків, але більшість з них не створювалося навіть з думкою про те, що це буде використовуватися на телевізорах. З іншого боку, призначені для телевізорів інструменти не дуже пристосовані для розробки веб додатків: деякі відстали у часі, деякі розроблені в кращих традиціях і практиках кошлатих років або ж перенесені з інших мов без оглядки, на поточний етап розвитку фронт-енд розробки. Можливо, це боляче усвідомлювати, але, блін, на дворі 2017й рік!
Мені дуже близький здоровий (або нездоровий) мінімалізм, не люблю, знаєте, розробляти з використанням бібліотечки в 10кб роздмухується до мегабайта при розробці
hello world
'a. Безумовно, можна сміливо сказати про те, що там дуже багато класного функціоналу, але я вважаю більш правильним тримати тільки використовується.
Але це ж очевидно! — скажете ви. Не для всіх, далеко не для всіх, я бачила, з чого складаються і як працюють деякі, досить популярні додатки.
Думки
  • Коли мова заходить про продуктивності веб-додатки, перше, що приходить на розум, — це virtual-dom, оптимальний алгоритм мутації дерева елементів. Було б непогано застосувати подібну практику для розробки продуктивних додатків для телевізора.
  • Навігація, камінь спотикання практично всіх розробників додатків, керованих пультом.
вона Виглядає приблизно ось так:
Spatial-Demo
Дуже хотілося б позбавитися/скоротити кількість згадок руху кнопок при розробці додатків, уникнути селекторів і створення купи листенеров для переходу від елементу до елементу.
  • До вищесказаного хотілося б додати лаконічний синтаксис описи подібних елементів і в той же час, не втрачати контроль над ними, наприклад, так:
<div focusable={true}></div>
<div></div>
<div focusable={true} onEnterx={() => alert('Ola!')}></div>

І щоб все це було прозрачненько і саме по собі працювало і оновлювалося при мутаціях — от було б круто! Чи Не правда? Так от, всі ці ідеї я вже реалізувала і далі просто наведу приклад використання.
Приклад застосування
Буду використовувати
babel
для приємного
jsx
синтаксису управління йде в
spatial-virtual-dom
, обвернутый
cakejs
і який-небудь
qunit
для простоти демонстрації.
Може здатися дещо специфічним, сподіваюся, вдалося розкрити в коментарях всі заклинання:
Приклад коду
/** @jsx h */ // прагма

/**
* або import {s...} from 'cakejs2-spatial; якщо `npm i cakejs2-spatial`
*/
const {spatial, Cream, create} = cake; 

/**
* Створюємо гиперскрипт і призначаємо клавіші
*/
const h = spatial({ keys: {
LEFT: 37,
RIGHT: 39,
UP: 38,
DOWN: 40,
ENTER: 13
}});

/**
* створення апи, зберігаємо інстанси для тестів
*/
const app = create({ 
element : document.getElementById('application')
})
.route('*', 'rectangles');

Cream.extend({ // компонент
_namespace: 'rectangles',
render : createRectangles()
});

function createRectangles () {
let isFocusable = true;

return function () {
return (
<div className="rectangles">
<div focusable={isFocusable} className="rectangles--left"></div>
<div focusable={isFocusable} className="rectangles--left"></div>
<div focusable={isFocusable} className="rectangles--right"></div>
<div focusable={isFocusable} className="rectangles--right"></div>
<div focusable={isFocusable} className="rectangles--right"></div>
<div focusable={isFocusable} className="rectangles--left"></div>
<div focusable={isFocusable} className="rectangles--left"></div>
</div>
)
}
}

Приклад програми (CODEPEN)
Тестувати поки важкувато, потрібні шорткаты (PR велкоме):
Код тесту
QUnit.test('Spatial test', function( assert ) {
const rectangles = app.tree.children[0];
assert.ok( 7 === app.tree.sn._collection.length, 'Should spatialize 7 elements');
assert.ok( null === app.tree.sn._focus, 'Should not focus any of them');

app.tree.sn.focus(rectangles.children[2].el);
assert.ok(rectangles.children[2].el === app.tree.sn._focus, 'Should focus third children');
app.tree.sn.move('left'); // element floats left
assert.ok(rectangles.children[3].el === app.tree.sn._focus, 'Should move focus left');
});

Приклад тестів (CODEPEN)
Підсумки
  • Розмір бібліотек не перевищує декількох десятків кілобайт, в стислому вигляді ~10 (від дефлата залежить)
  • Продуктивні мутації, от реалізація js-repaint-perfs для тортика.
  • Прозора реалізація навігації, з коробки.
  • Для надбудов є евенти навігації і самого DOM'a.
Посилання
Прошу вибачення за ридмистайл. Спасибі!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.