Intro to Lit: A JavaScript framework Otesanya David March 24, 2022

Intro to Lit: A JavaScript framework

Intro to Lit: A JavaScript framework


Lit is one of the more interesting front-end JavaScript frameworks for reactive programming. It’s caught quite a bit of interest from developers, but remains relatively under the radar compared to other reactive frameworks. Lit is built on top of the Web Components standard and prioritizes speed and a small set of useful features.

Building web components with Lit

There are several ways to get started with a Lit project. For this tutorial, we’ll use a starter template. You’ll need a command line with Git and Node.js (npm) installed.

Note: Because it is based on Web Components, Lit uses the Shadow DOM to achieve reactivity.

Go to the command line and type git clone This command deploys a simple example project into the lit-element-starter-js directory. cd into that directory and install the dependencies with npm install.

Now, you can run the application with npm run serve. If you visit localhost:8000, you’ll see the application running with the screen shown in Figure 1. (Clicking the Count button increases the count.)

Screenshot of the Hello World screen.IDG

Figure 1. The Lit starter app

Reactivity in the Lit framework

Next, let’s look at how Lit is laid out and how it achieves reactivity.

Copyright © 2022 IDG Communications, Inc.


Source link

Write a comment