Getting Started with Lightning, the TV-App Development Framework
Understanding the core principles of developing with Lightning, how we can use it, and what Lightning provides for developers.
Starting development with any new framework, especially for TV-Apps, is no easy job. Especially if you’re not sure where or how to start. In this blog we take a look at some of the core principles of developing with Lightning, how we can use it and what Lightning provides in order to make the life of developers are lot easier.
If you’re new to Lightning, I recommend you read my introduction blog to the framework first, and only after continue with this blog.
Core concepts
The starting point for any Lightning development lies with understanding the core concepts of the framework. As you now know, Lightning makes use of WebGL for rendering, which makes writing code with the framework slightly different than you might be used to. The framework still uses Javascript, but you’re not going to write any HTML tags. Rather, you’ll have to use low-level core elements (or higher-level components, getting to those shortly) to draw up your pages.
Rendering Engine & Templates
At the base of the Lightning framework is the rendering engine. This WebGL Render Engine makes use of a so-called Lightning Render Tree to display all the elements defined in your app. The Render Tree in Lightning is defined by a so-called template. This template contains a list of all the elements that should be rendered on screen. For example, when you’re building a homepage, you could have a template that contains a Menu element (or component) and list containing carousel components, as per the example below:
export default class App extends Lightning.Component {
static _template() {
return {
Menu: {
w: 1920,
h: 180,
type: Menu
},
CarouselList: {
type: List,
w: 1920,
y: 180
}
}
}
}As you can see in the example, there is an element called ‘Menu’ and an element called ‘CarouselList’. They are defined with a Type property, which is what determines how the content is rendered. The usage of the Type property signals that the element should be rendered as, in this case, a ‘Menu’, which is a component that can be reused across different pages.
Templates and elements can only render if it has a definition for a Texture. These are the lowest level means of defining how elements should look and behave. Predefined low-level textures are made available by Lightning in the form of Texts, Images, Rectangles and some others. So in our example above, the Menu would contain several textures like Texts for the menu items, and maybe a Rectangle texture for the background. Developers are also free to create their own custom low-level textures. For a complete list of textures please refer to the Lightning documentation.
TV-remote input
An important factor of TV-apps is of course having the ability to react to user input. Since we’re dealing with television, that means developers need to be able to know when the user has pressed certain keys on their TV-remote. This is handled by default in the Lightning framework, and can be accessed with simple key handlers. By default the app has support for handling default keys like Left, Right, Up, Down, Enter and Back; but custom keys can also be defined on startup, and handled subsequently.
export default class App extends Lightning.Component { _handleBack () {
// User pressed Back button
}
}
Focus management
Speaking of remote input, focus management is another important aspect of TV-apps. Since Lightning is targeted towards building these kind of apps, focus management is also a built-in feature of the framework. Lightning uses a focus path that developers have to define themselves, in order to determine where focus needs to go. The focused element is also used in order to trigger TV-remote handlers as demonstrated in the previous paragraph.
Any element that can receive focus, has to be defined with a specific handler called _getFocused . This handler signals that the element can receive focus (or that it should delegate focus further towards one of the children in the element). There are additional means of handling focus, specifically for things like dynamically filled carousels. I recommend reading up on the official documentation for further explanation.
Application and component lifecycle
Similar to other frontend frameworks, Lightning exposes lifecycle events that can be hooked into in order the adjust the application and for example load external data. Most notably are the following lifecycle events:
/* Attached (for the first time)
* Useful for setting up initial state of the component
*/
_init()/* Activated (both enabled and on-screen)
* Useful for setting up event handlers, focus a specific element
* or for reloading data when the user reaches the page again
*/
_active()/* Inactive (either detached, invisible or off-screen)
* Useful removing event handlers or cancelling active loops
*/
_inactive()
Lightning-provided components
Something that’s very important for developers, and businesses in general, is not having to re-invent the wheel every time. It saves a lot of development time and reduces the number of bugs due to having components proven to work. Lightning does well in catering to this, by providing a subset of ready-made components that developers can use in their applications, rather than having to use low-level textures for everything. These components are split up into roughly two aspects, one providing more developer freedom than the other.
SDK Components
The lower-level version of components provided by Lightning, come out of the SDK layer of the framework. These components generally provide generic functionality that is useful to the application. You can think of components for storing and accessing data across the application, routing from a one page to another, or using translations for texts. For a full list of SDK components, please refer to the documentation.
UI Components
Dealing with textures and positioning of elements can be difficult, especially if you’re new to using Lightning. For this reason, it’s good to use some of the pre-made UI components available. This (currently quite limited) set of UI components contain some of the most important building blocks for TV-apps. At the time of writing there is a List, Carousel and Grid component available for use. Since TV-apps are made up by these three components for 99% of the time, you should do just fine for the majority of use cases.
Next steps
While I’ve explained some core concepts of using Lightning, there are of course many more things to learn and get familiar with. For that reason I recommend starting with the ‘Getting Started Guide’ as provided on the Lightning website, and reading more of the documentation in general. These two things combined, together with this blog, should put you in a great spot to start writing apps with Lightning.
Most importantly though, you should just get started. Because you’ll definitely learn the most by using the framework; by creating apps, getting familiar with the code and applying Lightning for the use cases that you have. Lightning is a fun framework to use, and I hope my blog has helped you gain some insights into how it can be leveraged for building TV apps.
