Cómo usar marcos y bibliotecas de JavaScript en HubSpot
Usando el CMS de HubSpot, puedes crear aplicaciones web basadas en JavaScript.
Si tu sitio web requiere un código del lado del servidor o un mecanismo de suscripción de contenido, puedes aprovechar las funciones sin servidor de HubSpot y la característica de gestión de miembros de contenido si tienes una suscripción a Enterprise. Sin embargo, también puedes crear tu propio sistema utilizando proveedores de terceros, como AWS Lambda, combinado con una puerta de enlace API para ejecutar código del lado del servidor.
Si estás creando una aplicación web que necesita alcanzar los punto de terminación de la API que requieren autentificación, como una ficha de acceso privado a la aplicación, no deberías ejecutar ese código en el navegador. Estarías exponiendo tus credenciales ante cualquiera que vea la página. El método correcto es crear una capa de abstracción entre el navegador y la API autentificada: un punto de terminación de API personalizada que no requiere exponer tus credenciales y se sirve desde el mismo dominio que el sitio web que lo llama.
Al pulsar el punto de terminación de la API personalizada, se ejecutará el código del lado del servidor que puede realizar la solicitud autentificada. A continuación, puedes hacer cualquier formato de los datos o la lógica de negocios que desees mantener en secreto y enviar el resultado al navegador.
Comúnmente, se utilizan funciones sin servidor para hacer esto porque tienen una escalabilidad increíble y no requieren administrar y mantener tu propio servidor. Puedes usar proveedores como AWS Lambda combinados con una puerta de enlace de API o puedes usar las funciones sin servidor de HubSpot. La ventaja de las funciones sin servidor de HubSpot es que no necesitas administrar múltiples servicios por separado. La experiencia se simplifica y se integra directamente con el mismo sistema de archivos de desarrollador en el que existen temas, plantillas y módulos.
Si no necesitas realizar llamadas de API autentificadas, entonces no necesitas Enterprise para tu aplicación. React y Vue son marcos front-end que no necesitan funciones sin servidor para funcionar; es lo que haces con ellos lo que importa.
Para las aplicaciones web, los desarrolladores suelen utilizar marcos de JavaScript que ayudan a administrar el estado y la interfaz de usuario (IU).
CMS Hub no fue diseñado específicamente para trabajar con un marco específico en mente, pero muchos marcos de JavaScript comunes funcionan en el CMS de HubSpot. Al basarte en HubSpot, es posible que debas pensar en cómo trabajas con esos marcos de manera diferente. Pero las cosas básicas necesarias para trabajar con estos marcos están disponibles: la capacidad de escribir plantillas personalizadas, módulos y JavaScript. También te permitimos hacer tu codificación localmente, para que puedas usar un paso de compilación.
Estamos colaborando con nuestra comunidad de desarrolladores para establecer buenas prácticas para construir con marcos de JavaScript comunes en HubSpot. Si bien es posible hacerlo, hay aspectos de cómo funciona el CMS de HubSpot que pueden requerir que configures conscientemente tu proyecto de manera diferente a como lo harías en una página en HTML sencilla.
También puede haber algunas partes de tu proceso de desarrollo a las que no te has acostumbrado. Te pedimos que nos des tus comentarios para que podamos mejorar la experiencia de todos los desarrolladores. Actualmente el mejor lugar para hacerlo es nuestro foro para desarrolladores. A medida que experimentamos y aprendemos, continuaremos actualizando nuestra documentación en consecuencia.
El CMS de HubSpot tiene un potente sistema de módulos, lo que te permite crear fragmentos reutilizables de CSS, JavaScript y HTML con acceso a HubL, el lenguaje de plantillas de HubSpot. Los módulos de HubSpot te proporcionan una forma de dar mucho control y poder a los creadores de contenido. Los marcos de JavaScript modernos a menudo tienen sus propios sistemas de módulos. Todos estos sistemas se construyen independientes entre sí y, como resultado, a menudo tienen diferentes soluciones para los problemas que puedas encontrar.
La representación del lado del servidor es cuando el HTML de una página se genera a partir de la lógica de plantilla en el servidor antes de enviar cualquier HTML a un navegador.
La representación del lado del cliente es cuando se envía una versión más ligera o «incompleta» del HTML desde el servidor y se utiliza JavaScript para generar el HTML. Esto transfiere el procesamiento de la lógica desde el servidor al navegador web (el cliente).
La hidratación es el acto de combinar ambas técnicas. Primero, en el servidor, se genera tanto HTML como sea posible. A continuación, JavaScript evalúa el HTML proporcionado y realiza cambios más pequeños según sea necesario cuando el usuario interactúa con la página o se reciben datos. Esto reduce la carga en el cliente y potencialmente reduce el tiempo que tarda el usuario en ver el contenido cargado.
En HubSpot CMS, HubL se procesa en el servidor y luego se almacena en caché a nivel de la CDN. Puedes usar JavaScript para hidratar o representar del lado del cliente el HTML que el navegador sirve al visitante del sitio.
Las analíticas son importantes para la capacidad de tu empresa de crecer y adaptarse para ofrecer soluciones a tus clientes y prospectos. Al crear una aplicación de una sola página que contiene varias vistas, es posible que desees rastrear al visitante que accede a diferentes vistas, como páginas.
La mayoría de las plataformas de análisis proporcionan una manera de hacer esto con JavaScript. HubSpot no es diferente. Pulsa la vista de página cuando la aplicación cambie de vista.
El sistema de módulos de HubSpot es un sistema de módulos del lado del servidor, que genera un documento HTML a partir de parciales de HubL + HTML y que genera CSS y JavaScript minimizados para cada módulo dentro de una página.
Si creas usando módulos de HubSpot, hay varios beneficios que vienen con él:
- Los creadores de contenido pueden agregar tu módulo a páginas que tengan áreas de arrastrar y soltar o columnas flexibles. También pueden mover y quitar el módulo ellos mismos.
- Puedes proporcionarle campos al creador de contenido que le permitan configurar tu aplicación.
- El código solo se representa en la página si el módulo se utiliza realmente.
Module.cssymodule.jsse minimizan automáticamente.
El costo de usar el sistema de módulos de HubSpot es que requiere que los módulos se compongan de archivos específicos y en lugares diferentes de los que normalmente colocarías tu código.
También puedes crear tu aplicación como una plantilla en lugar de dentro del marco del módulo. Esto te da más flexibilidad con tu estructura de archivos. Pero no obtienes los beneficios que brindan los módulos; los creadores de contenido no podrán agregar esta aplicación a páginas dentro de áreas de arrastrar y soltar y columnas flexibles.
Algunos marcos de JavaScript utilizan llaves { } para delimitar su código. El lenguaje HubL utiliza estas llaves también. Hay tres estrategias que puedes usar para asegurarte de no tener conflictos entre tu marco y HubL: puedes usar la etiqueta HubL sin procesar para envolver tu JSX, establecer el marco para usar un delimitador diferente o usar un paso de compilación que compile el JavaScript de antemano.
El popular marco Vue.js se puede usar con y sin un paso de compilación. Consulta la documentación de Vue para obtener un desglose más detallado de los pros y los contras de cada método. En HubSpot hay pros y contras específicos que también debes tener en cuenta.
Integrar Vue.js sin un paso de compilación en un módulo es fácil.
En el archivo module.html, usa require_js para agregar la biblioteca de Vue asegurándote de que solo se cargará una vez cuando se agregue el módulo a una página.
Mientras desarrollas, usa la compilación dev para obtener información útil para la depuración. Una vez en producción, se recomienda usar la URL de la CDN para la versión de Vue específica o descargar ese archivo y alojarlo como un archivo JavaScript en el sistema de archivos de desarrollador de HubSpot.
Copia el código HTML de la introducción de Vue.js y pégalo en el archivo module.html. Envuelve este código en una etiqueta de HubL sin procesar para evitar que sea evaluado como HubL.
Copia el JavaScript de la introducción de Vue.js y pégalo en module.js. Envuelve este código en un listener de eventos para asegurarte de que se ejecute una vez que el contenido DOM haya terminado de cargarse. Publica el módulo y previsualízalo. Ahora deberías ver que tu aplicación básica de Vue funciona.
Creamos una plantilla [versión beta] para ayudarte a poner en marcha el método del módulo HubSpot para crear una aplicación VueJS. La manera más fácil de aprovecharlo es ejecutar el comando hs create vue-app desde la CLI del CMS. Las instrucciones se pueden encontrar en el repositorio.
¡Esta plantilla es nueva y nos encantaría recibir tus comentarios! Cuéntanos qué se podría mejorar y cualquier problema que encuentres. La mejor manera de proporcionar comentarios es enviando incidencias al repositorio de GitHub.
Las CTA y los formularios de HubSpot tienen sus propias etiquetas de script y administran su propio HTML. Para asegurarte de que tu componente de Vue no modifique el formulario o la CTA, crea un elemento HTML alrededor del código de incrustación del CTA o formulario. Aplica v-once a ese elemento. Esto garantiza que el código se representará una vez y luego su componente Vue lo ignorará.
En lugar de usar HubL para crear módulos y parciales, puedes usar JavaScript y React. Además de unir los componentes de React renderizados por el servidor en el HTML generado por HubL, los módulos y parciales de JavaScript admiten la interactividad tanto del lado del servidor como del lado del cliente. Más información en la Introducción a JS Building Blocks de HubSpot.
También puedes darle un vistazo a la plantilla React que puedes usar para ponerte en marcha rápidamente con una aplicación React dentro de un módulo de HubSpot. La manera más fácil de aprovecharlo es ejecutar el comando hs create react-app desde la CLI del CMS. Desde allí, sigue las instrucciones que hay en el repositorio.
¡Esta plantilla es nueva y nos encantaría recibir tus comentarios! Cuéntanos qué se podría mejorar y cualquier problema que encuentres. La mejor manera de proporcionar comentarios es enviando incidencias al repositorio de GitHub.
Hay muchas bibliotecas de JavaScript por ahí y es imposible para nosotros documentarlas todas individualmente. Hay algunas buenas prácticas básicas que debes conocer y comprender al usar las bibliotecas de JavaScript en HubSpot.
Puedes tener decenas de módulos y plantillas que usan bibliotecas de JavaScript compartidas y no preocuparte por cargar esas bibliotecas varias veces. Para hacer esto, necesitas usar la función require_js de HubL. Los scripts que se carguen con esta función solo se cargarán una vez por página, independientemente del número de módulos, parciales y la plantilla que se requieran.
{{ require_js(get_asset_url('/js/jquery-latest.js')) }}
{{ require_js("https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js") }}Usa get_asset_url() para solicitar archivos almacenados dentro del sistema de archivos de desarrollador. La ventaja aparte de simplemente compartir la ubicación de tus archivos de desarrollo y consolidar la seguridad de estos archivos, es que generará menos búsquedas de DNS.
El uso de require puede ser increíble para el rendimiento, ya que no solo cargarás el archivo una sola vez. Si los materiales de una página no necesitan esa biblioteca, no se cargarán en absoluto. Incluso puedes usar require con la lógica de HubL para cargar recursos solo cuando realmente los necesites.
- Optimización para el rendimiento
- La accesibilidad no es una característica
- Cómo usar componentes web en HubSpot
- Primeros pasos con módulos
- Primeros pasos con funciones sin servidor
- Creación de un proceso de desarrollo eficiente
- Desarrollo de páginas dinámicas con HubDB
- Construir módulos y parciales con JavaScript
Gracias por tus comentarios, son muy importantes para nosotros.