React Framework vs. LitElement Library

First up React.

React is a javascript framework used to created user interfaces. It is may up of isolated snippets of code called "components". You use react as an element within your code that you can either store in a variable or pass around. You pass information in 'props' or properties. Here is a method used in the React introduction tutorial.

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button
        className="square"
        onClick={() => this.setState({value: 'X'})}
      >
        {this.state.value}
      </button>
    );
  }
}

This class defines the squares in a Tic Tac Toe board. Value is the prop that defines the states (null or X). You can see this class also uses a constructor used to initialize the state.

Next LitElement.

LitElement is a library that advertises itself as a fast and lightweight way to design user interfaces. You can use LitElement in your .js file, or in a framework like react or vue. LitElement follows web components standards which allow you to use it in many different ways. Like, React you use properties to keep track of the attributes and other necessary information related to your elements. Here is a template provided by LitElement.

import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {

  // Implement render to define a template for your element.
  render(){
    /**
     * Return a lit-html `TemplateResult`.
     *
     * To create a TemplateResult, tag a JavaScript template literal
     * with the html helper function.
     */
    return html
      <div>
        <p>A paragraph</p>
      </div>
    ;
  }
}
customElements.define('my-element', MyElement);

Okay, so what is the difference, and what's similar?

A framework includes code libraries, scripting language, and other software needed to create a project. It is a skeleton of the application you are attempting to build, and as the developer, you fill out the skeleton to create your application. One popular framework you may already know is bootstrap. Similar to using abstract classes in languages like java and python.

A library providers smaller helper functions that the user calls, like LitElement. Another example of a library is jQuery. You call a library within your code which allows you to reuse code another developer has already created.

An important point of comparison is that a framework is abstract whereas in a library you reuse code that exists on its own.

React and LitElement both use keywords such as 'extend', 'super', 'return', and 'render'. Both of these are used in javascript so there are definitely going to be some similarities. Both also use properties to pass information. Both use keywords such as 'extend', 'super', 'return', and 'render'.

Both can be installed locally fairly easily using npm in the command line. Both need to be imported into your .js file.

Framework (React)

• A collection of patterns and libraries
• Abstract
• Skeleton
• Similar to implementing a java abstract class
• An application in and of itself
• Calls your code

Library (LitElement)

• Well defined actions
• Code reuse
• Usually Require fewer dependencies
• Called within your code

Here is a popular image that I think gives a good visual of the difference between the two.

Here is a video I made on the subject.

Comments

[Renaud Fontana]

I never thought about framework vs library in terms of "code that calls you" vs "code that you call", thanks for that :) Worth noting as well, libraries should be stateless whereas frameworks will hold an internal state of your application.

[Tias]

Similar: dev.to/tsweb/why-litelement-isn-t-...