Melhor forma de trabalhar com widgets (escolhidos no CMS)

[felipefialho]

Fala pessoal, como estão?

Estou desde ontem matutando sobre isso e queria abrir discussão para ver se clareia minhas idéias.

Motivação

Temos um CMS feito em Node (que construimos do 0 e estamos melhorando projeto a projeto) e através desse CMS é possível escolher diversos widgets e configurações do projeto (fazemos do 0 para cada cliente).

Problema

A questão é que atualmente carregamos apenas um CSS e um JavaScript para o site todo (não estamos usando Webpack, esse é outro ponto), então mesmo que determinado Widget não tenha sido selecionado no CMS, o CSS e o JavaScript dele vai ser carregado.

Primeiros passos

Sobre CSS, como falei no Twitter faz alguns dias, andei trabalhando em uma metodologia que eu pensei (e não sei se já existe), que nomei de MOCSS (Mixins Oriented CSS). Na qual deixo genérico apenas coisas comuns em todas as páginas (alerts, estrutura, etc) e nos Widgets, utilizo BEM e importo os mixins que ele vai usar (tipografia, overlay, tabs, carousel, etc), não deixando vazar nenhuma configuração de um Widget para o outro.

Ou seja, isolo completamente.

Ficou claro essa parte?

Questão

A primeira coisa que pensei, é concatenar apenas o CSS e JavaScript de coisas que padrão em todas as páginas e carregar todas as configurações do Widget injetando o style e o script no proprio html. Assim, eles só seriam carregados se o Widget existir na página.

Ainda não trabalhei com Webpack, mas pelo que li ontem, talvez é a alternativa que mais se aproxima do quero fazer.

Alguém teria exemplos de configuraçoes ou de plugins que poderiam me ajudar nisso?

@frontendbr/admins

[matheusml]

Oi @lfeh

Pelo que eu entendi, o que você precisa é que o código de um determinado "componente" seja renderizado sob demanda, correto?

Caso seja esse de fato o seu problema, existem algumas soluções com Webpack.
O projeto Next.js, por exemplo, já vem com isso built-in, usando Code Splitting.

Além disso, o Addy Osmani fez uma excelente série sobre Progressive Web Apps com React, e na Parte 2 da série ele fala exclusivamente sobre esse problema.

Espero ter ajudado.

[raphaelfabeni]

Ótimo tema @lfeh !
Acredito que ambos você pode atacar por diversas formas. Tipo, se é algo já consolidado e que a tendência de crescer é pequena, talvez um arquivo único de CSS com cache configurado e critical path possa resolver do que você ter que sempre adicionar componente por componente em cada página. Da parte de JS talvez o buraco seja mais pra baixo pois um arquivo só de JS, acredito que fique bem pesado. O webpack pode ajudar com isso.

[eduardojmatos]

@lfeh muito bacana seu problema. Eu vi algo parecido com o que você quer fazer no Ember, com esse addon (https://github.com/ebryn/ember-component-css). Lá eles geram o output das classes e componentizam o CSS (ex: https://github.com/ebryn/ember-component-css#getting-the-generated-class-name).

O lance é que funciona só no environment do Ember, mas a ideia parece ser idêntica ao CSS Modules (esse artigo é um dos mais completos sobre um exemplo com React https://css-tricks.com/css-modules-part-3-react/).

Não sei o overhead disso, pois o CSS é gerado de acordo com os componentes. Imagino que deva crescer exponencialmente de acordo com o número de componentes existentes na aplicação.

[felipefialho]

Obrigado pelas dicas @matheusml @raphaelfabeni e @eduardojmatos

Outro ponto que queria abordar é até que ponto isso faz sentido... Essa ideia veio do fato de eu querer deixar os widgets cada vez mais isolados. Acham que meu raciocinio está coerente?

[matheusml]

@lfeh acredito que o raciocínio está correto sim, mas lógico que sempre temos que pesar o custo/benefício de implementar essa solução.

[eduardojmatos]

@lfeh faz se o nível de componentização precisa ser muito grande e a separação e otimização disso também.

[felipefialho]

@fdaciuk Te aguardo aqui.

[fdaciuk]

@lfeh antes tarde que mais tarde xD

Bom, no meu ver, o webpack resolve o que você precisa fazer. Isolar os widgets faz todo o sentido. Não sei se está usando ou pretende usar React, mas ele pode ajudar e muito na questão de separação de responsabilidades.

Uma dica para não precisar usar BEM: Use CSS Modules e não se preocupe mais em nomear elementos =)

[felipefialho]

@fdaciuk Estou dando uma flertada com o CSS Modules já faz algum tempo...