What’s new in the first public Beta of Lightning 3
At the RDK Global Summit 2023 in Amsterdam last week, the first beta of Lightning version 3 was announced. This initial release makes it available for developers to play with, see what’s what, and most importantly provide feedback that can lead to improvements in the final v3 release. In this blog, we’ll look at some of the changes, improvements, and the status of Lightning 3 compared to its earlier iteration.
First, a demo
If a picture is worth a thousand words, how much is a video? Before we dive into the neat updates that Lightning 3 brings, first a quick video that was shown during the RDK Global Summit. This video shows the power of Lightning 3, and the applications and behaviour you can already start implementing today.
Developers rejoice
Whoever has worked with Lightning 2, will know the main ‘problem’ with using the framework — the developer experience. A proprietary setup that’s unlike most popular Javascript frameworks and libraries out there; Lightning 2 is rather difficult and unorthodox to work with. Luckily, that’s about to change with version 3. In the beta version, Lightning comes with not just one, but two!! different ways of writing code. One way to write code is based on the popular SolidJS library; the other is a custom setup from Lightning called ‘Blits’ (renamed from ‘Bolt’ not one day after launch). Both of these options are built on top of the new Lightning renderer (more on that later). This means that with both SolidJS and Blits, you can expect similar levels of performance, and the fast rendering with WebGL, you’ve come to expect from earlier iterations of Lightning.
SolidJS
If you have any familiarity with SolidJS, most of my explanations here will not give you many new insights. Following a React style of writing code, you can now use SolidJS with JSX to write your Lightning components. For those familiar with and liking the React style of writing code, this is definitely the way to go if you’re deciding for either Blits or SolidJS with Lightning 3. You can use all of the SolidJS tools and functionalities you might be familiar with, while still getting all the benefits of fast WebGL-based rendering with Lightning. Routing? Use the SolidJS router. Signals? Not a problem.
import { render, Canvas, Text } from '@lightningjs/solid';
render(() => (
<Canvas>
<Text>Hello World</Text>
</Canvas>
));Interested? You can get started with the beta version of Lightning 3 with Solid straight away. For instructions, you can review the Readme located at the new git for Lightning 3 here: https://github.com/lightning-js/solid
Blits
Not really into React-style code like me? Lightning 3 has got you covered with their custom solution. Rather than using a React-style and JSX way of writing code, Blits sports are more Vue-like XML-based setup. This custom setup uses the same Lightning renderer as the SolidJS setup, so you get the same benefits — it’s just that the code you write is different. Even though you might not get some of the additional benefits of SolidJS, you do have everything you need available out of the box. A router is still available, just custom-made by the Lightning folks. And you can for example use built-in hooks to manage your application lifecycle.
import Blits from '@lightningjs/blits'
export default Blits.Application({
template: `
<Element>
<Text :content="Hello World"/>
</Element>
`
});More into Vue-like code? You can also get started with Blits today, with a bunch of documentation already available to get you going: https://lightning-js.github.io/blits/#/
Actual hot reloading
Writing code is one thing, but the not-so-hot reloading of Lightning 2 is definitely another personal gripe of mine. Every code change with Lightning 2 requires a full rebuild of the app, which can take ages the bigger the code base has gotten. Lightning 3 has made the awesome move over to using Vite, which makes hot reloading pure bliss (no, not blits). You can be fast and immediately see any changes you make directly appear on the page (contrary to Lightning 2 needing a hard reload of the page to check every code change).
A brand new renderer
Would you have thought it possible forLightning 3 to be even faster than Lightning 2? The team has worked hard on some amazing features, setting it even further apart from regular DOM-based rendering.
Batched draw calls
One of the awesome things added that really sets Lightning 3 apart, is the batching of different draws it has to do on the page. In the previous iteration, every visual change was in essence done in a separate draw call to the GPU, which can be rather GPU-resource heavy. As it turns out, GPUs actually can do multiple draws in a single call. So by batching the visual changes and sending them in a single call, you can use a lot less GPU resources. Instant improvement!
Sharper fonts
If you have any experience with Lightning 2, you’ll know that fonts have been an issue for a long time. They are often not that sharp and will look rather pixelated in certain scenarios. Taking a page out of how game engines might render fonts, Lightning 3 comes with a similar implementation to improve the way fonts are rendered. How it works, is that at startup of the application, all used font sizes and different characters are already rendered in a crisp and clear definition. Then, when actual characters are required, they can be taken from the already rendered example. The combination of the way characters are rendered following the game engine example, and the fact that they are available immediately after startup, makes texts a lot clearer in this next iteration of Lightning.
ThreadX
The folks at Lightning have been busy with a lot of improvements. One of the things coming out from all the work that has gone into Lightning 3, is a library called ThreadX. This is an open-source library that does a great job at managing the communication between one or more web worker threads. Yes, multithreading is coming to Lightning 3! I don’t really have to tell you of the benefits that brings, do I? More importantly though, is that multithreading is not a hard requirement with Lightning 3. There will be a bunch of older devices that won’t be able to leverage this for improved performance. Nonetheless, multithreading is a great addition that will only make Lightning more performant on the ever-growing set of browsers and devices that do support it.
What’s next
Lightning 3 is not a finished framework, it is released in a beta state after all. And after having played around with both the SolidJS and Blits versions of the framework — I can only agree with it wholly being in a beta state (or possibly even a bit earlier than that). Many of the features in Lightning 2 are not yet available in either SolidJS or Blits with Lightning 3. Think of full support for flexbox, the mounting/positioning you might know from Lightning 2, let alone the more advanced components that most TV apps will use like rows and grids. And then I haven’t mentioned the awesome complimentary Lightning UI (or ‘LUI’), which comes with a lot of components and theming options ready to be used with Lightning 2. All of those are not yet, or partially, available with this first release of Lightning 3. So there’s a lot of work to be done there, which will hopefully follow in the upcoming weeks and months. But it does mean that, at the time of writing, Lightning 3 is definitely not yet a full replacement for Lightning 2.
Even though this first version doesn’t boast the same support. My god am I loving the improved developer experience though. It’s like Lightning has woken up and realised what a good developer experience looks like in the year 2023. Using the latest and greatest toolings like vite, and providing a syntax that many developers know and love — Lightning 3 is a major step up. If anything, this new version makes Lightning even more approachable and will likely see more and more developers flocking to come and use the framework for TV-apps.
Join the Lightning community
Want to keep up to date with any changes and improvements as they come towards Lightning 3? Need help with trying out the new syntax? Or maybe you just want to do more with Lightning 2 while Lightning 3 is becoming more mature? You can now join the discord where a lot of the community has gathered, and get any help or information you might need!
Of course, you can also stay up to date by simply following the Github repositories, which you can find here: https://github.com/lightning-js
Interested in more Lightning?
