LightningJS

LightningJS je open-source platforma využívající JavaScript, která k vykreslování používá WebGL. Není potřeba HTML ani CSS a výsledkem jsou vysoce výkonné televizní aplikace na bázi prohlížeče. LightningJS umožňuje vytvářet plynulé animace, o kterých se vám při použití HTML a CSS může jen zdát. LightningJS je plný chytrých optimalizací, které maximálně využívají grafickou kartu i procesor cílového zařízení. Obsahuje také mnoho pomocných funkcí, které při vytváření televizních aplikací potřebujete.

Vysoký výkon, skvělá přenosnost

LightningJS má vysokou přenosnost. Používá totiž standardy HTML5. Aplikace vytvořené pomocí LightningJS fungují na všech hlavních platformách Smart TV, set top boxech (STB) a všech ostatních zařízeních, která používají moderní prohlížeč na bázi HTML5.

LightningJS funguje výborně na WebOS a (moderním) Tizenu. Přibližuje se také výkonu nativních aplikací v systému Android.

Přehled

Níže najdete přehled vlastností, kterými se LightningJS liší od ostatních aplikačních platforem používaných pro tvorbu TV aplikací.

Obecně

• Přenosnost technologií („Build once, deploy anywhere“)
• Vynikající výkon
• Uživatelsky vysoce příjemný
• Efektivní práce s pamětí, bezúnikovost

Klíčové vlastnosti

• Vykreslovací strom (WebGL nebo Canvas2d)
• Flexbox Layout Engine
• Sada nástrojů pro animace
• Správa vstupu a focusu na základě stisku kláves
• Speciální efekty, vlastní WebGL shadery

Technické výhody

• Struktura na bázi komponent, pomáhá s přehledným dělením aplikace
• Skvělá přehlednost a rychlý spawning díky statickým šablonám
• Patching umožňuje vzory podobné Virtual DOM bez odpovídajících negativ
• State Oriented Programming podporuje robustnost u reaktivních komponent
• Signály a komandy zprostředkovávají uživatelsky přívětivý způsob komunikace mezi komponentami

Výhody pro vývoj

• Inovativní, rychlé a kvalitní zásady vývoje kódu
• Vývoj a testování v lokálním prohlížeči
• Výrazné zkrácení doby vývoje
• Snadné učení
• Snadné vytváření balíčků aplikací pro Tizen, WebOS a Android

Klíčové koncepty

LightningJS se od podobných platforem odlišuje následujícími klíčovými koncepty: Render Engine , Router a Remote Control Interaction

Render Engine

Nejdůležitější komponentou LightningJS je WebGL 2D Render Engine. Jeho cílem je převést definovaný a změněný Render Tree na celou řadu příkazů WebGL a snaží se to dělat co nejrychleji.

Router

Router plugin skýtá snadný způsob tvorby API, která pomáhají k vytvoření směrované aplikace LightningJS na bázi URL.

Router se obvykle používá k navigaci mezi stránkami, které vlastně představují komponenty LightningJS (jinými slovy patří do rozšíření třídy ‘Lightning.component’).

Volitelně lze ke každé cestě připojit jednu nebo více callback funkcí.

Kromě toho, že Router odstraňuje spoustu šablonovitého kódu, může být přínosný také pro práci s pamětí díky konfigurovatelné funkci „lazy creation“ a „lazy destroy“. To je užitečné zejména při nasazování aplikací na zařízeních nižší třídy s menší pamětí (RAM nebo VRAM).

Interakce s dálkovým ovládáním

Televizní ovladače obvykle generují klávesové události v prohlížeči. LightningJS připojuje k elementu canvas „key event listener“ a skýtá způsob, jak zpracovávat vstupy založené na klávesách.

Aby to bylo možné, musí LightningJS vědět, která komponenta je aktivní a která má zpracovávat klávesové události. Aktivní komponenta a její potomci (včetně samotné aplikace) se nazývají focus path.

LightningJS versus HTML DOM

Při vývoji TV aplikací je lákavé použít některý z hlavních frameworků založených na HTML DOM, který dobře znáte. Pokud se však zaměřujete na hardware s omezenými prostředky, není to obvykle dobrý nápad. Při pokusu o spuštění aplikací na Smart TV nebo STB se mohou vyskytnout problémy tohoto typu:

• Špatný výkon
• Úniky paměti
• Pády z důvodu nedostačující kapacity paměti
• Problémy s (ne)stabilitou

LightningJS má tu výhodu, že používá WebGL, což znamená, že s GPU komunikuje prakticky přímo. Využití paměti GPU je vždy předvídatelné a využití paměti CPU je také předvídatelnější, pokud místo prvků HTML DOM řešíte pouze JavaScript heap memory.

Kromě toho, že framework LightningJS nabízí úžasný výkon, pomáhá udělat si představu o výkonu stránky, díky čemuž je možné zvážit kompromisy u zařízení nižších kategorií.

Následující text obsahuje přehled známých nevýhod různých aplikací frameworku HTML DOM:

• Pokud jde o paměť a výkon, je HTML DOM černá skříňka.
• Vykreslování v DOM HTML je příliš pomalé.
• Virtuální DOM je sám o sobě také pomalý (pokud jej nevyladíte k dokonalosti).
• Nedostatky z pohledu animace
• Menší přenosnost (u některých platforem podpora pouze webových aplikací)
• Nedostatečná optimalizace výkonu CPU
• Nejasnosti ohledně úniků paměti a práce s pamětí
• Chybějící důležité funkce, jako je dobrý pozicovací a animační engine
• Nejedná se o framework, ale pouze o vykreslovací strom

Ekosystém LightningJS

Ekosystém LightningJS se skládá z čtyř komponent: Lightning Core , Lightning SDK , Lightning CLI a Lightning UI

Lightning Core

LightningJS Core obsahuje LightningJS Library a Render Engine, které jsou zodpovědné za vysoký výkon a skvělé animace.

Lightning SDK

Sada Lightning Software Development Kit (SDK) pomáhá vytvářet TV aplikace pomocí LightningJS a nasazovat je na mnoha platformách.

Lightning SDK obsahuje Lightning (Core) a několik užitečných pluginů pro vývoj aplikací, například pomocníky VideoPlayer, Image a Utility.

Lightning CLI

Rozhraní Lightning Command Line Interface (CLI) umožňuje snadno vytvářet a sestavovat aplikace LightningJS. Je to také standardní způsob načítání aplikací LightningJS na platformu Metrological Application Platform.

Lightning CLI zajišťuje bezproblémový průběh vývoje aplikací LightningJS. Ačkoli je Lightning CLI primárně určen jako vývojářský nástroj na straně klienta, lze jej používat i na straně serveru.

Lightning SDK a Lightning CLI jdou ruku v ruce.

Lightning UI

Lightning-UI skýtá soubor komponent, které se při vývoji v Lightningu používají velmi často. Doufáme, že vám následující komponenty pomohou s rychlejším nastavením aplikace.

Collection Wrapper

Collection Wrapper je základní třídou pro List, Grid a Carousel. Hlavním účelem Collection Wrapper je práce s položkami doplněnými do Collection Wrapper a zajištění potřebných metod pro manipulaci s nimi. Collection Wrapper také pomocí ItemWrapper zajišťuje, že neaktivní položky nejsou vždy načítány.

List, Grid a Carousel rozšiřují Collection Wrapper, aby data zobrazila svým vlastním specifickým způsobem. Collection Wrapper obsahuje také základní funkci posouvání a možnost jejího přizpůsobení.

• Komponenta List zajišťuje v Collection Wrapper zobrazení položek v řádcích nebo sloupcích
• Komponenta Carousel zajišťuje v Collection Wrapper zobrazení položek v řádcích nebo sloupcích. Tato komponenta se od komponenty List liší tím, že spojuje konec a začátek dohromady, takže se zdá, že se pohybuje ve smyčce. Tato komponenta je určena pro konečné sbírky.
• Komponenta Grid zajišťuje v Collection Wrapper zobrazení položek v řádcích a sloupcích.

Zdroj: lightningjs.io