Executando verificação de segurança...
3
cdfortes24
6 min de leitura ·

Frontend no Liferay 7.4: A Revolução que Você Precisa Conhecer

Fala, dev! Se você trabalha com Liferay ou não :), prepare-se porque vou te contar como a versão 7.4 virou o jogo completamente. Sabe aquela sensação de "finalmente alguém entendeu o que a gente precisa"? É exatamente isso que senti quando comecei a trabalhar com as novas ferramentas.

Vou ser direto: o desenvolvimento frontend no Liferay nunca mais será o mesmo. E isso é MUITO bom!

Blade CLI: O Canivete Suíço que Evoluiu pra Sabre de Luz

Lembra quando o Blade era só aquele geradorinho de código que criava portlets? Esquece! O negócio agora é outro nível. Hoje, quando você digita:

blade create -t client-extension-react meu-componente-top

Você não tá mais criando aqueles portlets pesadões de antigamente. Você tá criando micro-frontends de verdade, que vivem suas próprias vidas, com seus próprios ciclos de deploy. É tipo sair de um Fusca 72 e entrar numa Tesla.

O Que Mudou de Verdade?

Hot-reload que funciona: Acabou aquela tortura de esperar 5 minutos pra ver se o botão ficou azul ou vermelho. Mudou, salvou, BAM! Tá lá na tela.

NPM integrado: Quer usar aquela lib maneira que saiu ontem? npm install e seja feliz. Sem gambiarras, sem workarounds.

Desenvolvimento local turbinado: Roda tudo local, testa tudo local, só joga pro servidor quando tá redondinho.

Eu literalmente economizo umas 2 horas por dia só por não precisar mais fazer deploy pra testar cada coisinha. Sério, faz as contas de quanto isso representa no mês!

Client Extensions: Bye Bye, Shared Libraries Problemáticas!

Ok, essa é a parte que me deixa mais empolgado. Client Extensions são tipo aquelas shared libraries antigas, só que anabolizadas. É compartilhamento de código do jeito certo.

Por Que Isso é Revolucionário?

Imagina só: você tem uma extension rodando React 18 com TypeScript último modelo. Seu colega tem outra usando Vue 3. Antigamente? Conflito na certa. Hoje? Cada uma no seu quadrado, todo mundo feliz.

E o melhor: deploy sem derrubar nada. Isso mesmo que você leu. Atualizou a extension, fez deploy, e o portal nem pisca. É tipo trocar o pneu com o carro andando (mas de um jeito seguro, claro).

Na Prática, Como Fica?

// client-extension.yaml
minha-analytics-maravilhosa:
  type: themeJS
  urls:
    - js/analytics-que-funciona.js
  
catalogo-produtos-2025:
  type: customElement
  urls:
    - js/catalogo.js
  cssURLs:
    - css/catalogo-estiloso.css
  friendlyURLMapping: produtos

Simples assim. Declara o que você quer, onde tá o código, e o Liferay faz a mágica acontecer.

Casos Reais que Salvaram Meu Dia

Integração com serviços externos: Precisava integrar com uma API de pagamentos nova. Criei uma Client Extension, desenvolvi tudo isolado, testei até ficar perfeito. Deploy? 30 segundos. Zero downtime.

Componentes reutilizáveis de verdade: Criei um componente de gráficos maneiro numa extension. Agora uso ele em 5 projetos diferentes. Copiar e colar? Nunca mais!

Lexicon/Clay: O Design System que Faz Sentido

Vou confessar uma coisa: eu era cético com design systems. "Ah, vai engessar tudo", eu pensava. Meu amigo, como eu estava errado!

O Lexicon/Clay não é só uma biblioteca bonitinha. É um arsenal completo que te poupa de reinventar a roda todo santo dia.

Performance que Você Sente

Sabe quando o cliente reclama que o site tá lento? Com Clay, esse problema diminui MUITO. Por quê?

  • Bundle size reduzido: Todo mundo usa os mesmos componentes = menos JavaScript pra baixar
  • CSS otimizado: Variáveis CSS fazem milagre. Mudou a cor primária? Muda em TUDO, sem recarregar nada
  • Cache inteligente: O navegador adora quando você usa as mesmas coisas. Carrega uma vez, usa pra sempre

Consistência que o Usuário Agradece

Não é só sobre código bonito. É sobre usuário feliz. Com Clay:

  • Acessibilidade de graça: Todos os componentes já vêm com ARIA labels, navegação por teclado, tudo certinho
  • Comportamento previsível: O usuário aprende uma vez como funciona um modal, e todos os modais funcionam igual
  • Responsivo sem esforço: Funciona no desktop, no tablet, no celular da vovó. Tudo automático

Código que Faz Sentido

import {ClayButton, ClayModal} from '@clayui/core';
import {useLiferay} from '@liferay/frontend-js-react-web';

function MeuComponenteTop() {
  const [mostraModal, setMostraModal] = useState(false);
  
  return (
    <>
      <ClayButton 
        displayType="primary"
        onClick={() => setMostraModal(true)}
      >
        Clica aqui!
      </ClayButton>
      
      {mostraModal && (
        <ClayModal
          observer={observer}
          size="lg"
        >
          <ClayModal.Header>
            Olha que legal!
          </ClayModal.Header>
          <ClayModal.Body>
            Componente lindo, funcional e acessível.
            Sem esforço extra!
          </ClayModal.Body>
        </ClayModal>
      )}
    </>
  );
}

Limpo, claro, e funciona em qualquer lugar do Liferay. É isso que eu chamo de produtividade!

Stylebooks: Customização Sem Dor de Cabeça

Aqui vai uma verdade: cliente adora mudar cor. "Ah, esse azul tá muito azul, pode deixar mais azul-claro?"

Antigamente? Pesadelo. Hoje? Stylebooks!

Como Funciona Essa Mágica?

Stylebooks são tipo temas com esteroides. Você define variáveis de design (cores, espaçamentos, sombras) e elas se propagam pra TUDO. Até suas Client Extensions pegam essas variáveis automaticamente.

/* Seu CSS nas Client Extensions */
.meu-card-especial {
  background: var(--primary-background);
  border-radius: var(--border-radius-default);
  padding: var(--spacing-medium);
  /* Pega tudo do Stylebook! */
}

Cliente quer mudar a cor primária? Vai no Stylebook, muda lá, e BOOM! Site inteiro atualizado. Sem deploy, sem compilar nada.

O Poder na Mão do Cliente (Mas Controlado)

O melhor dos Stylebooks é que você, dev, define os limites. O cliente pode mudar cores, fontes, espaçamentos... mas dentro do que faz sentido. Acabou aquela história de "o cliente quebrou o layout porque mexeu onde não devia".

Juntando Tudo: O Workflow dos Sonhos

Agora vem a parte mais legal. Quando você junta todas essas ferramentas, o desenvolvimento fica assim:

  1. Cria o projeto com Blade: blade create e já tem a estrutura pronta
  2. Desenvolve com Client Extensions: Código isolado, testável, reutilizável
  3. Usa Clay Components: Interface consistente e bonita sem esforço
  4. Stylebooks pra personalizar: Cliente feliz, você feliz, todo mundo feliz

Um Dia na Vida Real

Ontem mesmo, precisei criar um dashboard novo. Processo:

  • 9h: blade create -t client-extension-react dashboard-vendas
  • 9h30: Já tinha os componentes base funcionando com Clay
  • 11h: Dashboard completo, com gráficos, tabelas, tudo responsivo
  • 11h30: Deploy via Client Extension (30 segundos!)
  • 14h: Cliente pediu pra mudar as cores. Stylebook. 5 minutos.
  • 14h05: Tomando café ☕

Antigamente? Levaria uns 3 dias fácil.

Dicas de Quem Tá na Trincheira

Comece Pequeno

Não tenta migrar tudo de uma vez. Pega um componente, transforma em Client Extension, vê a mágica acontecer.

Abrace o Clay

Resista à tentação de criar seus próprios componentes. Clay tem quase tudo que você precisa, e o que tem é testado, otimizado e acessível.

Stylebooks Desde o Início

Mesmo que o cliente não peça, configure Stylebooks. Vai por mim, uma hora ele vai querer mudar alguma coisa.

Documentação é Sua Amiga

A doc do Liferay melhorou MUITO. E a comunidade no Slack é super ativa. Não tenha vergonha de perguntar.

O Futuro é Agora

Galera, não vou mentir: migrar pra esse novo modelo dá um trabalhinho inicial. Mas o payoff é imenso. Desenvolvimento mais rápido, código mais limpo, deploys mais seguros, clientes mais felizes.

Se você ainda tá desenvolvendo portlets old-school, tá na hora de evoluir. O Liferay 7.4 não é só uma atualização de versão - é uma mudança de paradigma.

E o melhor: a curva de aprendizado não é tão íngreme quanto parece. Em duas semanas você já tá voando com as novas ferramentas.

Conclusão: Vale a Pena?

1000% sim! A combinação Blade CLI + Client Extensions + Clay mudou completamente minha produtividade (e sanidade mental).

O que antes era complexo e demorado, agora é simples e rápido. O que antes era "vai que funciona", agora é "funciona e sei por quê".

Se você desenvolve em Liferay, não tem desculpa pra não mergulhar nessas tecnologias. Seu eu do futuro vai agradecer - e seus clientes também!

Bora codar? 🚀

PS: Se você já tá usando essas ferramentas, compartilha suas experiências! E se ainda não tá, que tal começar hoje? A comunidade Liferay tá aí pra ajudar!

Fonte: https://learn.liferay.com/

Carregando publicação patrocinada...