bemtvjs

Antes de brincar com o BEMTV, pense duas vezes e, se você gosta demais, não se surpreenda!

Traduções:

• Português fazem Brasil

---

Por que serve?

Atualmente no ecossistema JavaScript, existem excelentes ferramentas para o desenvolvimento da interface do usuário. O BEMTV reutiliza muito do que essas ferramentas trazem e traz, no entanto, não é uma cópia, é algo totalmente novo.

Principais recursos

• Sintaxe mais limpa do que outras bibliotecas e estruturas da interface do usuário.

• Sem "adereços". Uma nova maneira de o componente pai passar dados para componentes filhos.

• Em vez de um sistema de roteamento comum ou baseado em arquivos, a BEMTV traz um novo sistema de roteamento inovador capaz de "transformar" um componente em uma rota automaticamente de acordo com seu uso no aplicativo.

• Separação da lógica relacionada aos eventos DOM do modelo de componente.

• Divisão de código semi-automática.

• CSS-in-JS e CSS-In-Template.

• O design dos componentes permite a exportação de todos os métodos pertencentes a ele, o que permite o uso desses métodos em qualquer parte do aplicativo.

• Fácil ligação bidirecional entre variáveis de componentes e propriedades e atributos do elemento HTML.

• Ganchos.

• Funções de transformação que separam estruturas de dados como matriz, definir, mapa e objeto de sua marcação para o modelo.

• Brackethtml Markup Language: em vez de <div>Hey!</div> Faça isso: div[Hey!] .

• Açúcares sintáticos declarativos através do modelo de componente.

• É apenas JavaScript, sem JSX ou tempo de construção necessário, basta adicioná-lo ao seu index.html e se divertir!

Mostre -me algum código!

Todos os métodos de componentes podem ser exportados e usados em outras partes do aplicativo:

 import { _ } from "bemtv" ;

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

Isso permite separar a lógica do componente em várias funções que podem usar o ciclo de vida do componente, o estado, manipular elementos DOM, estilo, roteamento, eventos DOM ...

Adicionando eventos CSS e DOM:

 import { _ } from "bemtv" ;

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

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

css `
  color: blue;
` ;

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

A propriedade DOM do elemento de ligação com os componentes:

 import { _ } from "bemtv" ;

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

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

Mostre um fallback enquanto o componente está sendo importado:

 import { _ } from "bemtv" ;

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

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

Criando um link de rota:

 import { _ } from "bemtv" ;

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

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

O BEMTV usa um sistema inovador de criação automática de rota, isso é possível porque os componentes podem se comportar como rotas/páginas.

Componente de contador:

 import { _ } from "bemtv" ;

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

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

template `button[Clicked: $count ]` ;

Esta é apenas a ponta do iceberg, muitas das características da BEMTV realmente mostram seu poder com a prática e quando combinadas com outras pessoas!

O que vem a seguir

O BEMTV é um projeto recente e pouco conhecido, tenho várias idéias para continuar o desenvolvimento de TI e outros projetos ao seu redor, como uma extensão de destaque da sintaxe.

Atualmente, trabalho em tempo integral na BEMTV e não recebo nenhuma compensação financeira; se você gosta de BEMTV, considere apoiar o projeto, sua ajuda determinará se o projeto pode continuar atingindo maiores alturas.

Se você tiver algum tempo livre, venha e faça parte da construção do BEMTV!

Toda a ajuda é apreciada!

Não se esqueça de dar sua estrela ao projeto, pois isso me incentiva a continuar desenvolvendo.