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
- Portable technologies (‘Build once, deploy anywhere’)
- Excellent performance
- Very good user experience
- Efficient memory management, no memory leaks
Key Features
- Render tree (WebGL or Canvas2d)
- Flexbox Layout Engine
- Animations toolkit
- Keypress-based input / focus handling
- Special effects, custom shaders
Technical Highlights
- Component-based, to help you split up your App in a clean way
- Static templates offer great overview and fast spawning
- Patching allows convenient Virtual DOM-like patterns without the downsides
- State Oriented Programming enforces robustness in reactive components
- Signals and commands provide easy-to-use intercomponent communication
Development Benefits
- Innovative, fast and high-quality code development principles
- Development and testing on your local browser
- Development time drastically cut down
- Easy to learn
- Easily bundle your App for Tizen, WebOS and Android
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:
- Poor performance
- Memory leaks
- Out-of-memory crashes
- (In)stability issues
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:
- HTML DOM is a black box when it comes to memory and performance
- HTML DOM rendering is too slow
- Virtual DOM by itself is slow as well (unless you tune it to perfection)
- Lacks in terms of animations
- Less portable (some platforms only support web-based Apps)
- Lack of CPU performance optimization
- Lack of clarity about memory leaks and memory management
- Lack of vital features, such as a good layout engine and an animation engine
- Not a framework, only a Render Tree
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.
- The List component provides a Collection Wrapper to display Items in either a Row or a Column
- The Carousel component provides a Collection Wrapper to display Items in either a Row or a Column. What makes this component different from the List component is that it connects the end and start together, this way it appears to be going in a loop. This component is designed for finite collections.
- The Grid component provides a Collection Wrapper to display Items in either Rows and Columns.
Source: lightningjs.io