スマートテレビがCIS市場に登場し、長い間人気を博し始めたという事実（〜2010年）にも関わらず、それらのテクノロジ/アプリケーション開発アプローチはかなり遅れており、時には7倍以前の楽しい思い出と絡み合っています。
SmartTVのアプリケーション開発の分野での私の研究結果を共有し、いくつかの欠点を強調し、もちろん見つかった解決策とクールなものについてお話したいと思います。
スマートテレビアプリとは何ですか？
「スマートテレビのアプリケーション」では、テレビに合わせて特別に調整されたWebアプリケーションの定義を追加しました。 概して、多くの違いはありません。ほとんどの場合、さまざまなデバイスでの一部のAPIの非互換性/不在です。さらに、テレビがコンピューターではなく、そのリソースがより限られていることを忘れないでください。
キー（私にとって）の違い：
- 限られたリソース。
- 特別なナビゲーション。
- さまざまなデバイスでの主に予期しない動作。
- 少しわかりにくいテスト方法。
- 予期しない展開オプションとアプリケーションの更新。
最初の3つの点が少し理解でき、多くの人がすでにそれらに遭遇している場合、残りの部分には多くの問題があり、全員が独立して解決しなければなりません。 たとえば、個々のデバイスのアプリケーション環境でテストを実行したり、最終的なアプリケーションを更新および起動するためのオプションがあります。
しかし、最初の2つについて具体的にお話したいと思います。
なんで？
Webアプリケーションを開発するための優れたツールは数多くありますが、それらのほとんどは、テレビで使用されると考えても作成されていません。 一方、テレビ向けに設計されたツールは、Webアプリケーションの開発にはあまり適していません。一部は遅れをとっている、一部はシャギーな年の最高の伝統と実践で開発されている、またはフロントエンド開発の現在の開発段階に関係なく他の言語から移行されています。 おそらく実現するのは痛いですが、2017年の中庭で気をつけてください！
健康的な（または不健康な）ミニマリズムは私に非常に近いです、 hello world開発するときにメガバイトに膨らんだ10 kbのライブラリを使用して開発するのは好きではないでしょう。 もちろん、クールな機能はたくさんあると安全に言うことができますが、使用したままにしておく方が正しいと思います。
しかし、これは明らかです！ -あなたは言います。 皆のためではなく、皆のためではなく、私はいくつかの非常に人気のあるアプリケーションが何を構成し、どのように機能するかを見ました。
考え
次のようになります。
アプリケーションを開発する際のボタンの移動に関する言及の数を減らしたり減らしたり、セレクターを避けたり、要素から要素へと移動するためのリスナーの束を作成したいです。
- 上記に、そのような要素の説明に簡潔な構文を追加し、同時に、たとえば次のように、それらの制御を失わないようにしたいと思います。
<div focusable={true}></div> <div></div> <div focusable={true} onEnterx={() => alert('Ola!')}></div>
そして、これはすべて透過的であり、それ自体が機能し、突然変異中に更新されるようになります-それは素晴らしいことです！ そうじゃない？ そのため、これらすべてのアイデアをすでに実装しているので、使用例を簡単に示します。
応用例
素敵なjsx構文にbabelを使用します。コントロールは、デモを簡単にするためにcakejsといくつかのqunitラップされたspatial-virtual-domに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 velcom）：
テストコード 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自体があります。
参照資料
readmestyleをおaびします。 よろしくお願いします！