Estoy muy emocionada por el React 19 lanzamiento por una razón: componentes web. Principalmente porque yo creé Markup que expone un reactivo DOM solución con componentes Web simplificados API.
// web-components/button/index.js
import { WebComponent, html} from '@beforesemicolon/web-component';
import style from './style.css' with {type: 'css'};
class BfsButton extends WebComponent {
static observedAttributes = ['disabled', 'type', 'variant'];
disabled = false;
type = 'button';
variant = 'primary';
stylesheet = style;
render() {
const { variant, ...btnProps } = this.props;
return html`
<button ${btnProps} class="btn ${variant}">
<slot></slot>
</button>
`;
}
}
customElements.define('bfs-button', BfsButton);
¿Por qué es esto un gran problema?
Bueno... ¿dónde empiezo?
- Esto me da esperanza para una web unificada React como el marco web más popular haciendo que ese movimiento significa que otros seguirán el traje y esto unificará aún más dos comunidades apasionadas que son React y Web Components.
- Con componentes web, podemos crear sistemas de IU y bibliotecas de componentes que trabajan en marcos y no se limitan por bibliotecas específicas de marco que aíslan a las comunidades.
- Creo en una web donde las API de componentes web son la base de la misma manera DOM es hoy. Con el tiempo llegaremos allí y este paso es enorme en esa dirección.
- Los componentes web son la solución de futuro a prueba de la web, ya sea que lo creas o no. El ecosistema web es el caos y no necesitamos un nuevo marco para arreglarlo. Solo necesitamos que todos sean compatibles entre sí. ¡No más guerras marco, por favor!
- El estado del componente web funciona independientemente del React app que nos permite tener una lógica interna separada que puede ser más performant separando completamente local vs nivel de aplicación DOM actualizaciones.
- Las grandes empresas pueden finalmente emigrar para tener una sola biblioteca de componentes de la UI que funciona en todos los marcos que utilizan para reducir el costo de mantenimiento y mejoras de los buques y características más rápido.
- No más soluciones para hacer que los componentes web funcionen con React.
- Esto empujará para componentes web de SSR aunque esto puede ya trabajo ya que los componentes web son solo personalizados DOM elementos.
Soluciones de plug-and-play
Me gusta estar tan cerca de vainilla JavaScript, CSS, y HTML como sea posible, esa es la razón por la que he creado Markup. Creo en la simplicidad y trato de trabajar contra la web convirtiéndose en más compleja simplificando lo que puedo y confiando en estándares web en lugar de reinventar la rueda.
Markup es una solución plug-and-play que simplemente significa que no requiere ningún proceso de compilación o compilación para trabajar en JavaScript/TypeScript ambientes. Esto se hizo de esta manera por cosas como esta.
// App.jsx
import {useState} from 'react'
import './web-components/button'
import './App.css'
function App() {
const [count, setCount] = useState(0);
const disabled = count === 10
const countUp = () => {
setCount(prev => prev + 1)
}
return (
<>
<bfs-button
variant="cta"
disabled={disabled}
onclick={countUp}>count {count}</bfs-button>
</>
)
}
export default App
¿A dónde vamos desde aquí?
Estoy invirtiendo fuertemente en la web en la que creo y he creado las siguientes pequeñas soluciones para llegar allí:
- Markup: reactivo HTML sistema de tentación;
- WebComponent: componentes web reactivos mejorados basados en Markup;
- Router: WebComponent- router basado en el sistema. Escriba código JS sólo si lo necesita.
También tengo otras cosas que estoy trabajando en que vienen pronto:
- Intl: WebComponent y Intl API- sistema de localización basado en la base
- UI: WebComponent- sistema de interfaz de usuario y componentes (90+)
- Canvas: WebComponent- experiencia de tela basada en
También estoy preparando una actualización para mi Web Components tutorial en la creencia de que 2025 marcará este renacimiento tecnológico asombroso, así que mantén la sintonía.