bemtvjs

Antes de jugar con BEMTV, piense dos veces y si disfrutas demasiado, ¡no te sorprendas!

Traducciones:

• Português do brasil

---

¿Por qué bemtv?

Actualmente en el ecosistema JavaScript hay excelentes herramientas para desarrollar la interfaz de usuario. BEMTV reutiliza gran parte de lo que estas herramientas trajeron y trae, sin embargo, no es una copia, es algo totalmente nuevo.

Características clave

• Sintaxis más limpia que otras bibliotecas y marcos de UI.

• Sin "accesorios". Una nueva forma para que el componente principal pase los datos a los componentes infantiles.

• En lugar de un sistema de enrutamiento común o basado en archivos, BEMTV trae un nuevo sistema de enrutamiento innovador que es capaz de "transformar" un componente en una ruta automáticamente de acuerdo con su uso en la aplicación.

• Separación de lógica relacionada con eventos DOM de la plantilla de componente.

• Spliting de código semiautomático.

• CSS-in-JS y CSS-in-plantilla.

• El diseño de los componentes permite la exportación de todos los métodos que le pertenecen, lo que permite el uso de estos métodos en cualquier parte de la aplicación.

• Fácil unión bidireccional entre las variables de componentes y las propiedades y atributos del elemento HTML.

• Manos.

• Funciones de transformación que separan las estructuras de datos como matriz, establecer, mapear y objetar desde su marcado para la plantilla.

• Lenguaje de marcado de brackethtml: en lugar de <div>Hey!</div> haz esto: div[Hey!] .

• Azúcares sintácticos declarativos a través de la plantilla de componentes.

• Es solo JavaScript, no se necesita JSX ni tiempo de construcción, ¡solo agrégalo a su index.html y diviértete!

¡Muéstrame algún código!

Todos los métodos de componentes se pueden exportar y usar en otras partes de la aplicación:

 import { _ } from "bemtv" ;

export const { click$ , onMount , route , css , template } = _ `Home` ( ) ;

Esto le permite separar la lógica del componente en varias funciones que pueden usar el ciclo de vida del componente, el estado, manipular elementos DOM, estilo, enrutamiento, eventos DOM ...

Agregar eventos CSS y DOM:

 import { _ } from "bemtv" ;

export const { click$ , css , template } = _ `Button` ( ) ;

click$ ( ( ) => console . log ( "Clicked!!!" ) ) ;

css `
  color: blue;
` ;

template `button[ I am a button! ]` ;

Binde la propiedad DOM del elemento con el componente:

 import { _ } from "bemtv" ;

const { $ , template } = _ `Input` ( {
  inputValue : 0 ,
} ) ;

template `input[type="number" $inputValue<value]` ;

Muestre una devolución mientras se importa el componente:

 import { _ } from "bemtv" ;

const { template } = _ `App` ( ) ;

template `UserData[](Loading...)` ;

Creación de un enlace de ruta:

 import { _ } from "bemtv" ;

const { template } = _ `App` ( ) ;

template `#AboutUs[ Link to about us ]` ;

BEMTV utiliza un innovador sistema de creación de rutas automáticas, esto es posible porque los componentes pueden comportarse como rutas/páginas.

Componente de contador:

 import { _ } from "bemtv" ;

const { click$ , $ , template } = _ `Counter` ( { count : 0 } ) ;

click$ ( ( ) => $ . count ++ ) ;

template `button[Clicked: $count ]` ;

Esta es solo la punta del iceberg, muchas de las características de BEMTV realmente muestran su poder con la práctica y cuando se combinan con otros.

¿Qué sigue?

BEMTV es un proyecto reciente y poco conocido, tengo varias ideas para continuar el desarrollo de TI y otros proyectos a su alrededor, como una extensión de resaltamiento de sintaxis.

Actualmente trabajo a tiempo completo en BEMTV y no recibo ninguna compensación financiera, si le gusta BEMTV, considere que apoye el proyecto, su ayuda determinará si el proyecto puede continuar alcanzando mayores alturas.

Si tienes algo de tiempo libre, ¡ven y sé parte de la construcción de BEMTV!

¡Se agradece toda la ayuda!

No olvides dar tu estrella al proyecto, ya que esto me anima a continuar desarrollando.