LightningJS

LightningJS is an open-source JavaScript development platform that uses WebGL for rendering. Neither HTML nor CSS is necessary, which results in high-performance, browser-based TV Apps.

LightningJS enables you to create the smooth animations that you can only dream of when using HTML and CSS.

LightningJS is full of smart optimizations to get the most out of your target’s GPU and CPU. It contains many of the common features that you need when building TV Apps.

High performance, great portability

LightningJS is highly portable because it uses HTML5 standards. Apps developed with LightningJS run on all major Smart TV platforms, Set Top Boxes (STBs) and all other devices that run a modern HTML5 browser.

LightningJS performs excellent on WebOS and (modern) Tizen. It also approximates the performance of native Apps on Android.

Overview

The following contains an overview of the characteristics that distinguish LightningJS from other application platforms used for building TV Apps.

General

Key Features

Technical Highlights

Development Benefits

Key Concepts

LightningJS distinguishes itself from similar platforms by the following key concepts: Render Engine, Router and Remote Control Interaction

Render Engine

The most important LightningJS component is the WebGL 2d Render Engine. Its goal is to convert the defined and changed Render Tree to a series of WebGL commands. It attempts to do this as fast as possible.

Router

The Router plugin provides an easy way to use APIs that help you create a URL-driven, routed LightningJS App.

The Router plugin is typically used to navigate between Pages, which are actually LightningJS Components (in other words, they belong to an extension of the ‘Lightning.component’ class).

Optionally, you can attach one or more Callback functions to a route.

Besides taking away a lot of boilerplate code, the Router plugin can be beneficial for memory management as well, due to it’s configurable lazy creation and lazy destroy functionality. This is especially helpful when you are deploying Apps on low-end devices with less memory (RAM / VRAM).

Remote Control Interaction

TV remote devices usually generate key events in the browser. LightningJS attaches a key event listener to the canvas element, and provides a way to handle key-based input.

To be able do this, LightningJS needs to know which component is the active component, which should handle key events. The active component and its descendants (including the App itself) are called the focus path.

LightningJS versus HTML DOM

When developing TV Apps, it is tempting to use a major HTML DOM-based framework that you are familiar with. But when you are targeting hardware with limited resources, this is usually not a good idea. When you try to run your Apps on a Smart TV or STB, you might encounter problems such as:

LightningJS has the benefit of using WebGL, which means that it practically talks to the GPU directly. GPU memory usage is predictable at all times, and CPU memory usage is also more predictable if you are only dealing with JavaScript heap memory instead of HTML DOM Elements.

Besides the fact that the LightningJS framework offers an amazing performance, it helps in understanding the performance of a page, which allows you to consider trade-offs for low-end devices.

The following contains an overview of well-known downsides of various applications of the HTML DOM framework:

LightningJS Ecosystem

The LightningJS Ecosystem consists of four components: Lightning Core, Lightning SDK, Lightning CLI and Lightning UI

Lightning Core

The LightningJS Core contains the LightningJS Library and Render Engine which are responsible for high performance and great animations.

Lightning SDK

The Lightning Software Development Kit (SDK) helps you build TV Apps with LightningJS and deploy them on many platforms.

The Lightning SDK contains Lightning (Core) and several useful plugins for App development, such as VideoPlayer, Image and Utility helpers.

Lightning CLI

The Lightning Command Line Interface (CLI) enables you to easily create and build LightningJS Apps. It’s also the standard way to upload LightningJS Apps to the Metrological Application Platform.

The Lightning CLI provides a seamless LightningJS App development flow. Although primarily intended as a client-side developer tool, the Lightning CLI can also be used on the server side.

The Lightning SDK and Lightning CLI go hand in hand.

Lightning UI

Lightning-UI provides a set of components that are used very often when you are developing in Lightning, with the following components we hope to help you out with setting up your app a bit faster.

Collection Wrapper

The Collection Wrapper is the base class for the List, Grid, and Carousel. The main purpose of the Collection Wrapper is to manage the Items that are added to the Collection Wrapper and provide necessary methods to manipulate these Items. The Collection Wrappers also makes sure that non-active Items are not always loaded in, through use of an ItemWrapper.

The List, Grid, and Carousel are extended from the Collection Wrapper in order to display data in their own specific way. The Collection Wrapper also features a default scroll functionality and the possibility to customize this.

Source: lightningjs.io