Hello world,
I am here to discuss with you guys and tell you about React and LitElement. Let’s first dive in what they do…
REACT
React is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components. There are different kinds of components. These components are used to tell React what we want to see on the screen. Once you change the data, the components will update instantly to the new changes you have placed. A component takes in parameters, called Props but this is short for “Properties”. Then, in addition to this is that there is a render method that goes along with this. The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function. A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the application.
LITELEMENT
LitElement is a simple base class for creating fast, lightweight web components that work in any web page with any framework.
LitElement uses lit-html to render into shadow DOM, and adds API to manage properties and attributes. Properties are observed by default, and elements update asynchronously when their properties change.
When talking about similarities between the two, it is apparent that they do in fact share a similarity in their languages. Likewise to React, LitElement uses classes and keywords such as “render”, etc.
So What’s the Difference?
React uses JSX, a language that must be processed to generate JavaScript code, and lit-html is based on JavaScript features so it doesn't require extra processing.The part in which they differ is in the update of the UI: React updates the component when we make a call to the setState function and in our approach the update occurs 'automatically' when a property changes. It may seem a very subtle difference but it will be more evident when we see this same idea in LitElement.
Framework (React) vs Library (LitElement)
The difference between a framework and library lies in a term called inversion of control. When you use a library, you are in charge of the flow of the application. You are choosing when and where to call the library. When you use a framework, the framework is in charge of the flow. It provides some places for you to plug in your code, but it calls the code you plugged in as needed.
Frameworks and libraries are both code written by someone else that helps you perform some common tasks in a less verbose way. A framework inverts the control of the program. It tells the developer what they need. A library doesn’t. The programmer calls the library where and when they need it. The degree of freedom a library or framework gives the developer will dictate how “opinionated” it is.
Video:
https://youtu.be/WaDAMAQrIEE
Top comments (0)