Composição de componentes

[hugooliveirad]

Eu gostaria de levantar uma discussão sobre esse assunto 😄. Aprender a compor componentes de interface foi algo muito importante para os projetos que participo hoje em dia.

Escrevi um post sobre o tópico e adoraria ver mais pessoas escrevendo e conversando sobre formas diferentes de construir uma interface de usuário. Alguém está usando uma abordagem diferente, aprendeu algo novo ou gostaria de compartilhar um componente interessante?

[felipefialho]

Fala @hugobessaa, a gente tem desenvolvido alguns "widgets" no sentido literal da palavra para alguns projetos. E comecei a pensar muito nessa questão de componentes (não usamos o React).

Atualmente o CSS e JS de todos os widgets são carregados (para evitar requisições extras), mas no fundo isso não faz sentido né?

Já estou conversando com o pessoal, sobre como isso vai funcionar quando a gente implementar o HTTP/2 (#103), e vai ficar do carario!

Em tese vamos poder separar o CSS e o JS, e colocar dentro da pasta do Widget respectivo (junto com o Jade dele), esses assets só vão ser carregados quando o Widget de fato estiver sendo usado.

Quando a gente de fato implementar isso, conto como está sendo a experiencia.

[leonardoelias]

Muito bom o seu post @hugobessaa.

Como vocês estão fazendo na parte de documentação desses componentes ?

[hugooliveirad]

@lfeh

colocar dentro da pasta do Widget respectivo

Fazemos isso hoje.

@leonardoelias

Como vocês estão fazendo na parte de documentação desses componentes ?

Temos uma página de exemplos com todos os componentes e algumas explicações. Testamos o Carte Blanche mas não funcionou corretamente. Adoraria usar algo como o devcards, mas ainda não achei um projeto parecido para React.

[diessica]

@hugobessaa

mas ainda não achei um projeto parecido para React.

Veja estes comentários meus: #182 (comment) e #182 (comment). Se aproxima bastante do que você quer.

[hugooliveirad]

@diessica ótima referência!

[willianjusten]

@hugobessaa , como você tem tratado a questão dos estilos? Tem usado o aphrodite ou alguma outra solução? Pergunto isso, pois tenho a intenção de criar componentes completamente independentes e queria evitar de ter que importar o css do componente pela aplicação...

Queria algo bem plug and play dos componentes...

[hugooliveirad]

@willianjusten

como você tem tratado a questão dos estilos?

Não. Estou utilizando webpack para inserir estilos na página. Eu acho que para componentes independentes, estilos inline são uma boa pedida. Só acho que alterar o estilo deles de fora pode ser mais difícil.

[bernardodiasc]

Só acho que alterar o estilo deles de fora pode ser mais difícil.

Talvez nem deva contar com essa possibilidade. Pelo que entendi do "inline-styles is cool again!" é exatamente isolamento de componentes.