#virtual dom

Top 10 Advanced JavaScript Performance Optimization Techniques and Patterns

In the world of web development today, user experience is mostly determined by performance. A sluggish website or application may cause bounce rates to rise, user annoyance, and harm to search engine results. Adopting sophisticated optimization strategies and patterns is necessary to ensure optimal performance for applications relying on JavaScript. Ten sophisticated JavaScript speed optimization strategies and patterns that might aid developers in writing quicker and more effective code are covered in this article. Examples are provided for each strategy to show how successful it is in actual situations...

Learn more here:

¿Cómo funciona React? ¿Cómo funciona Virtual DOM en React?

React contiene un Virtual DOM es una representación del DOM guardada en memoria, que actúa de intermediario entre los estados de la aplicación y los estados del DOM (vistos por el usuario). Cuando ocurre un cambio en la aplicación web, el virtual DOM interpreta dichos cambios y calcula la manera más eficiente de actualizar el DOM para que renderice la menor cantidad de cambios posibles. En…

Functional Components

@composi/core is a JavaScrip Library for creating functional components. It accomplishes this use virtual nodes and a virtual DOM, similar to React. In fact, if you look at the function components, they will look just like React function components.

import { h, render } from '@composi/core' // Define functional component: function List(props) { return ( <ul> { props.data.map(item => <li key={item.id}>{item.value}</li>) } </ul> ) } // Render the component: render(<List data={things})/>, document.body)

As you can see in the above example, it uses the same pattern of passing values down using props, and the familar render function. One big difference is that @composi/core does not require special syntax for props--no need for camel-cased events (onClick) or special terms (className). Instead you use the normal standard HTML versions of properties.

Lifecycle Hooks

@composi/core also provides functional components with something React does not: lifecycle hooks. You put these directly on the element you want to track. @composi/core offers the following three lifecycle hooks:

onmount--gets passed a reference to the element that mounted

onupdate--gets passed a reference to the element that was updated, along with the old and new props.

onumnount--gets a reference to the component that will unmount.

Runtime Programs

Besdies these, @composi/core has a third function, run. This create a runtime environment which gives you a scaled down version of The Elm Architecture. This provides state management for functional components.

Every runtime program is an object with three methods:

const program = { init() { // Initialize the program with state and a subscription: return [state, effect] }, view(state, send) { // Render a functional component with the program's state: return render(<Component {...{state}}/>, document.body) }, update(msg, state) { // do something with state, then return it. // Returning state with get passed to view, // causing the component to re-render. return [state] } }

The init method is for setup for the program: setting default state and launching in effects, such as timers or fetching data.

The view method is for returning a presentation of the program's state. This is where we take the state and use it to render a functional component.

The update method is where all the business logic of the program resides. Like Redux, this consists of actions that can modify state according to the received messages that it receives from events in the view and then return the updated state.

Size Matters

@composi/core provies all the functionality that we discussed so far while weighing in a just under 3KB. It's really small. That means it load fast. You get virtual DOM, functional components, lifecycle hooks and Redux-style state managegment in a tiny footprint.

Install

Actually, you do want to install @composi/core. Instead you want to install the CLI for creating new projects: @composi/create-composi-app.

npm i -g @composi/create-composi-app

After installing, you can use it to create a new project:

create-composi-app 'MyProject'

This will create a new @composi/core project on your desktop. Open you terminal and cd to the new project. The run:

npm i

This will install the project's dependencies. When it's done, you can build and launch your new project:

npm start

Everything you need for developing your project you will find in its src folder:

|-src |-css |-images |-js

Any changes you make in these folder will cause the project to rebuild and reload in the browser.

Summary

@composi/core is a light-weight and powerful solution for solving many of the same problems that React addresses.