Atellier, emule seus componentes React

Trabalhando em grandes projetos com interfaces ricas, é bem comum termos camadas e mais camadas de componentes encadeados e interdependentes, por vezes tornando difícil um teste manual, nos forçando a passar por vários cliques e configurações até chegar aonde realmente queremos trabalhar.

Por vezes seria muito mais simples se pudéssemos trabalhar isoladamente em nosso componente visual, e por conta dessa necessidade, criamos internamente uma ferramenta que agora estamos abrindo para a comunidade: o Atellier.

Com ele temos um ambiente isolado e fácil de configurar, para brincar com seus componentes feitos em ReactJS. Veja com seus próprios olhos e dedos uma demonstração com os componentes do Material UI.

Para usar é simples, em qualquer local de sua aplicação ou em um projeto a parte, instale o pacote react-atellier via npm e siga os passos abaixo:

let ReactAtellier = require('react-atellier')( React ),  
    myComponent = require('myComponent');

// Cria uma lista de seus componentes em um array:
let componentList = [{  
  componentName : myComponent.displayName,
  component : myComponent
}];

// Passe como parametro para o Atellier:
let AtellierWrapper = React.createClass({  
  render: function() {
    return (
      <ReactAtellier components={componentList} />
    );
  }
});

// Exiba onde desejar:
render((  
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="atellier" component={AtellierWrapper}/>
    </Route>
  </Router>
), document.body);

As aplicações desse projeto podem se estender para além do desenvolvedor, pois outras equipes, como designers e QA, podem validar, testar e montar variantes de cada componente. Além de induzir à boas práticas de desenvolvimento, nos forçando a trabalhar mais desacoplados de outros componentes e dependências, declarar as propriedades de entrada e valores padrões.

Ainda queremos adicionar novas funcionalidades, criar uma ferramenta de linha de comando, facilitar ainda mais a configuração necessária para testar seus componentes, integrar uma ferramenta de atualização automática dos componentes na tela assim que editados, e ainda criar uma interface de plugins, para que no futuro ele possa ser uma ferramenta de desenvolvimento completa.

O projeto é opensource, em licença MIT, para todos que se empolguem na ideia, tanto quanto a gente, possam cooperar e usar livremente.

William Grasel

Read more posts by this author.