Executando verificação de segurança...
5
TiagoVel
1 min de leitura ·

Feedback para meu framework javascript

Olá pessoal! hoje vim mostrar algumas features (ou futuras features) de um framework javascript que estou fazendo para uso pessoal, ele será um pouco parecido com React.

Porém ao invés do uso de jsx como React, meu Framework ira utilizar analisadores próprios em strings, isso torna mais fácil o desenvolvimento pois não é preciso o processo de transpilagem, porém por outro lado tem um desempenho inferior. Exemplo:

x.render(`<h1>Hello world!</h1>`);

A ideia é que vocês digam o que acham legal e o que acham desnecessário, então estas são as principais features que estou com dúvida se devo adicionar:

Chaves em tags

Ao invés de usar o padrão </fechamento> do xml/html, pretendo usar chaves {}, isso facilita a digitação de várias tags. Exemplo:

<section {
    <p {Hello world!}>
}>

Namespace para tags

Em nomes de tags muito comuns como input é possível que haja conflitos em diferentes bibliotecas de componentes então a feature de namespace serve para evitar tais conflitos. Exemplo:

<libTest01::input value="test">
<libTest02::input val="test">

Tipagem de atributos

Esta feature é usada na declaração de um Componente, e define quais atributos (com seus tipos) devem haver no componente. Este eu diria que não tem muitas utilidades, mas combinaria muito bem com Typescript. Exemplo:

x.setComponent(`<Name number:size bool:isVisible string:title>`)

E é isso! desde já agradeço ás futuras respostas, e um feliz ano novo!

Carregando publicação patrocinada...
4
LucasAyabe

Não entendi muito bem o objetivo do seu framework, mas não me parece que ele resolve nenhum problema real no desenvolvimento web moderno.

Quanto as features que você citou, não me parece uma boa ideia usar chaves para isso, de um ponto de vista de UX, você está quebrando a heurística da familiaridade, e também não está dando nenhum benefício extra com isso, visto que deve ser mais rápido digitar uma tag do que isso ai num editor moderno.

Se você acha muito ruim digitar uma tag, além de não querer ter um processo de build, saber tomar vantagem de técnicas como a composição talvez torne a sua vida mais fácil.

Você pode simplesmente ter funções com bons nomes e que seguem a mesma interface, assim você termina com um código parecido com o do Flutter e qualquer outro framework de desenvolvimento de UI não baseado em XML (tipo o SwiftUI). Ex:

section(p("Hello world!"))

De qualquer forma, se você realmente gostar da ideia de um template customizado, eu recomendaria remover de vez ou os <> ou as {}, os dois no mesmo lugar estão praticamente fazendo o mesmo papel.

Outra ideia seria escrever a sua linguagem de template por cima do pug/jade se for só para facilitar na hora de digitar.

Sobre o namespace, uma feature de registrar o componente com um nome associado a ele igual é no Vue já seria mais do que suficiente, no JSX como você está lidando com JS puro só que com uma sintaxe diferente isso nunca foi um problema devido a você conseguir criar um namespace na hora de importar, e no pior dos casos, uma boa prática em várias das comunidades é simplesmente uma convenção de nome, então isso já estaria resolvido de qualquer forma também.

Sobre tipagem dos atributos, seria melhor expor uma API que usa o TS para inferir os tipos dos parâmetros através de um builder ou algo como o que a composition API do Vue faz.

Isso que você está fazendo ia acabar sendo uma versão bem pior do prop-types que ficou bem obsoleto já atualmente.

0
3
FelipePoter

Chaves em tags:

  • Prático: Menos caracteres para digitar, mas cuidado para não confundir. Queremos facilitar, não complicar.

Namespace para tags:

  • Mais ou menos: Evitar confusão de nomes é bom, mas :: parece exagerado. Será que não tem um jeito mais simples?

Tipagem de atributos:

  • Hmm, sei lá: Com TypeScript, pode ter seu valor. Mas, será que a galera vai realmente adotar ou será só mais um extra?

No fim, o importante é manter as coisas simples e úteis. Testa bem e vê se a galera curte. Feliz ano novo e manda ver no código! 🎉

1
3
fabricio

Ja deu uma olhada no https://github.com/developit/htm ? Umas das vantagens e que nao precisa transpilar o JSX.

Um exemplo

<!DOCTYPE html>
<html lang="en">
  <title>htm Demo</title>
  <script type="module">
    import { html, Component, render } from 'https://unpkg.com/htm/preact/standalone.module.js';

    class App extends Component {
      addTodo() {
        const { todos = [] } = this.state;
        this.setState({ todos: todos.concat(`Item ${todos.length}`) });
      }
      render({ page }, { todos = [] }) {
        return html`
          <div class="app">
            <${Header} name="ToDo's (${page})" />
            <ul>
              ${todos.map(todo => html`
                <li key=${todo}>${todo}</li>
              `)}
            </ul>
            <button onClick=${() => this.addTodo()}>Add Todo</button>
            <${Footer}>footer content here<//>
          </div>
        `;
      }
    }

    const Header = ({ name }) => html`<h1>${name} List</h1>`

    const Footer = props => html`<footer ...${props} />`

    render(html`<${App} page="All" />`, document.body);
  </script>
</html>
0
2
matrizz

É válido considerar a sugestão do nosso amigo LucasAyabe para esclarecer o objetivo do seu framework. Isso pode aprimorar a utilidade geral. Além disso, ao desenvolver o framework, foque em elementos que realmente contribuam, descartando os menos úteis para evitar complexidade desnecessária.

Explorar frameworks existentes e identificar boas práticas podem enriquecer o seu e até ajudar a separar o que realmente é util do desnecessário.

Continue buscando feedback aqui na comunidade porque também é muito importante.

Abraço!! 🚀👋🏼

0