Como usar estruturas e bibliotecas JavaScript no HubSpot
Com o HubSpot CMS, você pode criar apps da Web baseados em JavaScript.
Caso o site exija um código do lado do servidor ou um mecanismo de assinatura de conteúdo, você pode utilizar as funções sem servidor e o recurso de assinatura de conteúdo do HubSpot se tiver uma assinatura do Enterprise. No entanto, você pode criar seu próprio sistema usando provedores de terceiros, como o AWS Lambda, combinado com um gateway de API, para executar o código do lado do servidor.
Se você estiver criando um aplicativo da Web que precise atingir enpoints de API que exijam autenticação, como um token de acesso a app privado, não execute esse código no navegador. Você estaria expondo suas credenciais a qualquer pessoa que visualiza a página. A abordagem correta é criar uma camada de abstração entre o navegador e a API autenticada: um ponto de extremidade de API personalizado que não exige a exposição de suas credenciais e é atendido do mesmo domínio que o site que o chama.
Acionar o ponto de extremidade de API personalizado executará o código do lado do servidor que pode fazer a solicitação autenticada. Em seguida, você pode fazer qualquer formatação dos dados ou lógica de negócio que deseja manter em segredo e enviar o resultado para o navegador.
Geralmente, as funções sem servidor são usadas para fazer isso, porque têm escalabilidade incrível e não exigem gerenciamento e manutenção do seu próprio servidor. Você pode usar provedores, como o AWS Lambda, combinados a um gateway de API ou usar as funções sem servidor primárias da HubSpot. A vantagem das funções sem servidor da HubSpot é que você não precisa gerenciar vários serviços separados. A experiência é simplificada e diretamente integrada com o mesmo sistema de arquivos do desenvolvedor que possui todos os temas, modelos e módulos.
Se você não precisa fazer chamadas de API autenticadas, então, você não precisa de empresa para o seu app. React e Vue são estruturas front-end que não precisam de funções sem servidor para funcionar, é o que você faz com elas que importa.
Para aplicações Web, os desenvolvedores geralmente utilizam estruturas JavaScript que ajudam a gerir o estado e a interface de usuário (UI).
O CMS Hub não foi desenvolvido especificamente para trabalhar com uma estrutura específica em mente, mas muitos frameworks JavaScript comuns funcionam no HubSpot CMS. Com base na HubSpot, talvez seja necessário pensar em como você trabalha com essas estruturas de forma diferente. Mas o principal para trabalhar com essas estruturas está disponível: a capacidade de escrever modelos personalizados, módulos e JavaScript. Também é possível fazer a codificação localmente, para que possa usar uma etapa de compilação.
Estamos colaborando com nossa comunidade de desenvolvedores para estabelecer as práticas recomendadas para a criação com estruturas JavaScript comuns na HubSpot. Embora seja possível fazer isso, existem aspectos de como o HubSpot CMS funciona que podem exigir que você configure conscientemente seu projeto de forma diferente do que você poderia em uma página HTML simples.
Também pode haver algumas partes do seu fluxo de trabalho de desenvolvimento que são diferentes do que você está acostumado. Pedimos que você dê seu feedback para que possamos melhorar a experiência de todos os desenvolvedores. Atualmente, o melhor lugar para fazer isso é em nosso Fórum para desenvolvedores. Nós continuaremos a atualizar nossa documentação à medida que experimentamos e aprendemos.
O HubSpot CMS tem um eficiente sistema de módulos que permite que você crie partes reutilizáveis de CSS, JavaScript e HTML com acesso ao HubL, a linguagem de modelos da HubSpot. Os módulos HubSpot oferecem uma maneira de fornecer controle e empoderar criadores de conteúdo. Estruturas JavaScript modernas, geralmente, têm seus próprios sistemas de módulos. Todos esses sistemas são criados de forma independente uns dos outros e, como resultado, muitas vezes têm soluções diferentes para os problemas que você pode encontrar.
A renderização do lado do servidor é quando o HTML para uma página é gerado por meio da lógica de modelos no servidor antes de enviar qualquer HTML para um navegador.
A renderização do lado do cliente é quando uma versão mais leve ou "incompleta" do HTML é enviada do servidor e o JavaScript é usado para gerar o HTML. Isso transfere o processamento da lógica do servidor para o navegador da Web (o cliente).
A hidratação é o ato de combinar ambas as técnicas. Primeiro, é gerado, no servidor, o maior número de HTML possível. Em seguida, o JavaScript avalia o HTML fornecido e faz alterações menores nele conforme necessário quando o usuário interage com a página ou os dados são recebidos. Isso reduz a carga no cliente e, potencialmente, reduz o tempo necessário para o usuário ver o conteúdo carregado.
No HubSpot CMS, o HubL é processado no lado do servidor e, em seguida, armazenado em cache no nível CDN. Você pode usar o JavaScript para hidratar ou renderizar no lado do cliente o HTML que o navegador fornece ao visitante do site.
A análise é importante para a capacidade da sua empresa de crescer e se adaptar para resolver problemas para seus clientes e prospects. Ao criar um app de página única que contém várias visualizações, você pode querer controlar o visitante que vê diferentes visualizações, como páginas.
A maioria das plataformas de análise fornece uma maneira de fazer isso com JavaScript, a HubSpot não é diferente. Envie a visualização de página por push quando o app alterar as visualizações.
O sistema de módulos da HubSpot é um sistema de módulos do lado do servidor que cria um documento HTML por meio de parciais HubL + HTML e cria CSS e JavaScript minificados para cada módulo em uma página.
Há vários benefícios na criação com módulos HubSpot:
- Os criadores de conteúdo podem adicionar seu módulo a páginas que tenham áreas de arrastar e soltar ou colunas flexíveis. Eles também podem mover e remover o módulo sozinhos.
- Você pode fornecer campos ao criador de conteúdo que permitem definir as configurações do app.
- Seu código somente é renderizado para a página se o módulo for realmente usado.
Module.cssemodule.jssão automaticamente minificados.
O custo de usar o sistema de módulo HubSpot é que ele exige que os módulos sejam compostos de arquivos específicos e em lugares diferentes em que você normalmente colocaria seu código.
Você também pode criar seu aplicativo como um modelo em vez criá-lo dentro da estrutura do módulo. Isso oferece mais flexibilidade para a sua estrutura de arquivos. Mas você não obtém os benefícios que os módulos oferecem. Os criadores de conteúdo não poderão adicionar esse aplicativo a páginas em áreas de arrastar e soltar e colunas flexíveis.
Algumas estruturas JavaScript usam chaves { } para delimitar o código. A linguagem HubL também usa essas chaves. Existem três estratégias que podem ser usadas para garantir que não haja conflitos entre sua estrutura e o HubL: você pode usar a tag HubL bruta para envolver seu JSX, definir a estrutura para usar um delimitador diferente ou usar uma etapa de criação que compila o JavaScript de antemão.
A popular estrutura Vue.js pode ser usada com e sem uma etapa de criação. Consulte a própria documentação da Vue para obter uma análise mais detalhada dos prós e contras de cada método. Na HubSpot, há prós e contras específicos que você também deve considerar.
É fácil integrar o Vue.js sem uma etapa de criação em um módulo.
No seu arquivo module.html, use require_js para adicionar a biblioteca Vue, garantindo que ela seja carregada apenas uma vez quando o módulo for adicionado a uma página.
Durante o desenvolvimento, use a compilação de desenvolvimento para obter informações úteis para depuração. Uma vez em produção, é recomendável usar o URL CDN para a versão Vue específica, ou fazer o download esse arquivo e hospedá-lo como um arquivo JavaScript no sistema de arquivos do desenvolvedor da HubSpot.
Copie o código HTML da introdução do Vue.js e cole-o no arquivo module.html. Coloque esse código entre tags brutas HubL para evitar que ele seja avaliado como HubL.
Copie o JavaScript da introdução do Vue.js e cole-o em seu module.js. Coloque esse código entre um ouvinte de eventos para garantir que ele seja executado assim que o conteúdo DOM terminar de carregar. Publicar seu módulo e visualizá-lo. Agora, você deve ver o seu app Vue básico funcionando.
Criamos um boilerplate [BETA] para ajudá-lo a começar a trabalhar com a abordagem do módulo HubSpot para criar um aplicativo VueJS. A maneira mais fácil de aproveitar isso é executar o comando hs create vue-app com a CLI do CMS. As instruções estão no repositório.
Este boilerplate é novo e gostaríamos de ouvir o seu feedback! Diga o que pode melhorar e quaisquer problemas que encontrar. A melhor maneira de fornecer feedback é enviando problemas ao repositório do GitHub.
Os CTAs e formulários da HubSpot têm suas próprias tags de script e gerenciam seus próprios HTML. Para garantir que seu componente Vue não modifique o formulário ou o CTA, crie um elemento HTML em torno do código incorporado do CTA/formulário. Aplique v-once a esse elemento. Isso garante que o código será renderizado uma vez e, em seguida, ignorado pelo seu componente Vue.
Em vez de usar HubL para criar módulos e parciais, você pode usar JavaScript e React. Além de unir componentes React renderizados pelo servidor no HTML gerado pelo HubL, os módulos e parciais JavaScript suportam interatividade do lado do servidor e do cliente. Saiba mais na Introdução aos blocos de criação de JS da HubSpot.
Você também pode conferir o boilerplate React para começar a usar rapidamente com um aplicativo React em um módulo do HubSpot. A maneira mais fácil de aproveitar isso é executar o comando hs create react-app da CLI do CMS. Então, seguir as instruções no repositório.
Este boilerplate é novo e gostaríamos de ouvir o seu feedback! Diga o que pode melhorar e quaisquer problemas que encontrar. A melhor maneira de fornecer feedback é enviando problemas ao repositório do GitHub.
Há muitas bibliotecas JavaScript e é impossível documentá-las individualmente. Existem algumas práticas recomendadas essenciais que você deve conhecer e entender ao usar bibliotecas JavaScript na HubSpot.
Você pode ter dezenas de módulos e modelos que usam bibliotecas JavaScript compartilhadas e não se preocupar em carregar essas bibliotecas várias vezes. Para fazer isso, você precisa usar a função require_js do HubL. Os scripts carregados usando esta função só carregarão uma vez por página, independentemente de quantos módulos, parciais e modelos sejam necessários.
{{ require_js(get_asset_url('/js/jquery-latest.js')) }}
{{ require_js("https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js") }}Use get_asset_url() para exigir arquivos armazenados no sistema de arquivos do desenvolvedor. A vantagem, além de apenas colocalizar seus arquivos de desenvolvimento e consolidar a segurança desses arquivos, é que isso resultará em menos pesquisas de DNS.
Usar a exigência pode ser incrível para o desempenho, porque você não apenas carregará o arquivo uma vez. Se os ativos de uma página não precisarem dessa biblioteca, ela não será carregada. Você pode até mesmo usar requisitos com a lógica HubL para carregar recursos apenas quando realmente precisar.
Agradecemos pelos seus comentários. Eles são muito importantes para nós.