Componentes en la nube de TeleportHQ

Hoy queremos dedicar un tiempo a hablarte de una nueva funcionalidad que hemos añadido a TeleportHQ: Componentes en la nube.

Introducción a los componentes en la nube#

La función de componentes en la nube te permite importar componentes creados visualmente en TeleportHQ en otros entornos de desarrollo y en otros proyectos de TeleportHQ. Los componentes son compatibles con React y Next.js y funcionan importándolos directamente desde una CDN, en lugar de usar un gestor de paquetes tradicional.

Veamos algunos detalles y el trabajo que hizo posible esta función.

Módulos ES#

Cada módulo es un fragmento de código que se ejecuta una vez que se carga.

exploringjs.com
es-modules-a-cartoon-deep-dive
es-modules-in-browsers
using-es-modules

Compatibilidad con navegadores#

Los principales navegadores ofrecen compatibilidad básica con es-modules, la compatibilidad con estos módulos es de 94.45%.

Algunas funciones y sintaxis del lenguaje, como dynamic-import y import-maps aún no son totalmente compatibles. Podemos solucionarlo usando shims. Puedes encontrar más información sobre los shims aquí

caniuse.com/es6-module

es-module-shims

Módulos de Node frente a CDN#

• Los módulos se pueden almacenar en caché de forma independiente, lo que mejora los tiempos de carga en visitas posteriores.
• Cada módulo se sirve individualmente a los usuarios mediante una CDN.
• La transpilación, el uso de polyfills y las optimizaciones de los módulos de proveedores se realizan de antemano.

Contamos con varios proveedores que sirven todos los paquetes desde npm

JSPM, skypack, esm.sh deno.land.

Estos proveedores de CDN para módulos transpilan los paquetes y los convierten a esm cuando es necesario (en el caso de cjs). Además, sirven estos módulos para que los usuarios puedan utilizarlos directamente en los navegadores, con optimizaciones para producción.

En un modo de desarrollo estándar node_modules necesitamos configurar nuestros empaquetadores para transpilar, usar polyfills o incluso proporcionar interoperabilidad.

Esto sucede cada vez que compilamos nuestros proyectos. Imagina el tiempo que los usuarios pueden ahorrar al eliminar estos pasos durante el desarrollo. También se puede ahorrar tiempo en las canalizaciones de CI.

Más información sobre las CDN en sus respectivas páginas

module-cdn-semantics-jspm
skypack-cdn/api-reference

Módulos ES desde el estudio de TeleportHQ#

En TeleportHQ llevamos tiempo investigando este tema de forma intermitente. El nivel actual de compatibilidad con los navegadores y la adopción de estos flujos de trabajo por parte de los empaquetadores hacen que sea una opción ideal.

Algunos de nuestros experimentos anteriores incluyen

• Servir componentes desde el estudio como npm paquetes instalables.
• Y crear un espejo para npm para convertir y servir todos los paquetes a esm. Puedes encontrar más información aquí

Los módulos en TeleportHQ usan especificadores de módulos desnudos para importar paquetes. Esto permite que los usuarios finales controlen desde dónde se pueden servir los external-dependencies . Así, en cualquier caso, estos módulos cargan únicamente código generado desde studio y code-generators. Esto ayuda a los usuarios a publicar con confianza y seguridad, ya que pueden elegir desde dónde se cargan las dependencias externas.

También puedes servir las dependencias externas mediante node_modules y cdn . Encontrarás más información sobre estos métodos en los flujos de trabajo.

Flujos de trabajo#

Los usuarios pueden elegir entre 3 tipos diferentes de flujos de trabajo al usar módulos de TeleportHQ.

• NextJS con importaciones de URL
• Mapas de importación
• Webpack con buildHttp

Optimizaciones del estudio#

Todos los módulos están:

• Transpilados.
• Enlazados entre sí.
• Servidos desde una CDN global.
• Versión bloqueada.

Cuando los módulos están anidados, no los agrupamos. En su lugar, los vinculamos mediante imports.

Cada proyecto se divide principalmente en tres categorías de módulos

• Estilos
• Elementos globales y fuentes
• Componentes

Estilos#

En studio podemos definir estilos de varias formas: clases CSS, tipografía y tokens de diseño y tokens de diseño de maquetación. Todo esto se combina en un es-module llamado styles. Y cada vez que cambia el módulo, los cambios quedan versionados.

Copyimport {
  projectStyleVariants,
  TOKENS,
} from 'https://jscdn.teleporthq.io/new-project-dqpb/style.js@35ff99074a6491e551432d47881ebdce23a21cef'

Todo el estilo se mantiene mediante styled-components y styled-system. Sin embargo, en los próximos días los usuarios también podrán generar módulos usando react-jss .

El módulo de estilos exporta TOKENS y projectStyleVariants. El módulo styles se puede usar de forma independiente en cualquier proyecto. Así, los usuarios pueden mantener sus tokens de diseño aún más fieles al diseño del estudio.

Elementos globales y fuentes#

En Studio, los usuarios pueden definir elementos globales como fuentes y SEO. Studio está diseñado para ayudar a los usuarios a crear proyectos a gran escala. Todos los globals que usamos en un proyecto se abstraen en el módulo globals .

Copyimport Globals from 'https://jscdn.teleporthq.io/new-project-dqpb/globals.js@646826692c3ac0769586600c4719b2024c8a399a'

Todos los componentes heredan los Globals cada vez que se genera un módulo. Un componente típico tiene este aspecto

Copyimport React from 'react'
import Globals from 'https://jscdn.teleporthq.io/new-project-dqpb/globals.js@646826692c3ac0769586600c4719b2024c8a399a';

const App = () =>. {
    return (
        <Fragment>
            <Globals />
            {/* ... */}
        </Fragment>    
    )
}

Componentes#

Cada componente de Studio se genera por separado en un módulo. Los componentes se vinculan entre sí según el uso.

Dividir todos los módulos de forma independiente mejora el rendimiento. En primer lugar, el contenido del módulo no se duplica.

En segundo lugar, cuando el módulo se utiliza varias veces, se obtiene de la caché.

Los módulos se pueden importar varias veces, pero solo se ejecutan una vez.

Copyimport Header from 'https://jscdn.teleporthq.io/new-project-dqpb/header.js@aa99dd13a8c20277795a17204d2f6dfba52e0737'

La versión de un módulo solo se actualiza cuando cambia el componente o alguno de los módulos de los que depende.

La @version de un módulo cambia cuando cambian los elementos globales, estilos o el componente en sí.

Recursos#

En el estudio podemos usar contenido multimedia al diseñar nuestros componentes. Los recursos utilizados también se sirven desde la CDN.

Mapas de código fuente#

Puedes obtener un mapa de código fuente para cualquier módulo cambiando la extensión al final.

Copyhttps://jscdn.teleporthq.io/new-project-dqpb/header.map@aa99dd13a8c20277795a17204d2f6dfba52e0737

Frameworks y variantes de componentes#

Al diseñar componentes en el estudio, los usuarios pueden usar routeLinks, seo-tags y muchas funciones específicas de cada framework. Para admitirlas, permitimos que los usuarios elijan el entorno de destino en el que usan los módulos. Como en la mayoría de las aplicaciones de cient-side React, usamos react-router y para NextJS usamos next/link. Y lo mismo ocurre con react-helmet frente a next/head.

Estos es-modules se generan usando nuestros generadores de código open-source , disponibles en GitHub. Y planeamos ofrecer la misma compatibilidad con otros frameworks e incluso con combinaciones de style-flavour . Por ejemplo, React + React-JSS, Next + React-JSS , etc.

Componentes en la nube y mapas de importación#

Con la llegada de los módulos ES, ahora podemos organizar el código por módulos e importar cualquiera de ellos cuando sea necesario. Además, tenemos aún más control sobre qué módulos se cargan en tiempo de ejecución mediante Importaciones dinámicas.

Recuerda aquellos buenos tiempos en los que cargábamos JavaScript en el navegador mediante una etiqueta script. Apenas teníamos control sobre qué se cargaba primero y los scripts dependían unos de otros. Organizar correctamente la secuencia llegó a ser una parte fundamental del desarrollo en JavaScript.

Y entonces aparecieron los empaquetadores y los ejecutores de tareas para encargarse de este trabajo manual. Los mapas de importación ofrecen una excelente forma de desarrollar aplicaciones sin necesidad de configurar un empaquetador y un sistema de resolución completos. Además, permiten a los usuarios utilizar directamente «bare-module-specifiers», lo que significa que pueden escribir

Copyimport { useState } from 'react'

Y mapa de importación se encargará de resolver React a partir de la fuente que se indique.

En nuestro anuncio de los módulos ES de componentes en la nube con TeleportHQ. Puedes usar todos los components, styles y tokens como módulos independientes. Y, como los módulos de TeleportHQ utilizan «bare-module-specifier», necesitamos usar un mapa de importación para indicar al navegador desde dónde debe resolver las dependencias externas.

Módulos ES sin «bare-module-specifiers»#

Carguemos el módulo react-dom desde skypack. Podemos ver que las dependencias de external del paquete también se importan mediante URL.

Copy<iframe height="300" style="width: 100%;" scrolling="no" title="Skypack Example" src="https://codepen.io/jkrishna/embed/preview/vYWEPZQ?default-tab=js" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/jkrishna/pen/vYWEPZQ">
  Skypack Example</a> by Jaya Krishna (<a href="https://codepen.io/jkrishna">@jkrishna</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

Puedes ver que el paquete react-dom utiliza a su vez object-assign y scheduler internamente, y los carga desde otras URL únicas previamente asignadas.

Copyjs
import aa from "/-/react@v17.0.1-yH0aYV1FOvoIPeKBbHxg/dist=es2020,mode=imports/optimized/react.js";
import m from "/-/object-assign@v4.1.1-LbCnB3r2y2yFmhmiCfPn/dist=es2020,mode=imports/optimized/object-assign.js";
import r from "/-/scheduler@v0.20.2-PAU9F1YosUNPKr7V4s0j/dist=es2020,mode=imports/optimized/scheduler.js";

Módulo de TeleportHQ#

Los módulos de TeleportHQ utilizan una combinación de bare-module-specifiers con URL únicas previamente asignadas. Así, los usuarios pueden encargarse de cargar las dependencias y todos los módulos dependientes del studio se cargan automáticamente.

Un componente en la nube típico incluye las siguientes importaciones.

Copyjsx
import React from 'react';
import { variant } from 'styled-system';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import Globals from 'https://jscdn.teleporthq.io/new-project-dqpb/globals.js@646826692c3ac0769586600c4719b2024c8a399a';
import { projectStyleVariants, TOKENS } from 'https://jscdn.teleporthq.io/new-project-dqpb/style.js@35ff99074a6491e551432d47881ebdce23a21cef';

Podemos generar un mapa de importación usando jspm que está disponible en línea o como paquete de npm . generator.jspm.io

Puedes introducir todas las dependencias que estés usando. En nuestro caso, react, react-dom, styled-components y prop-types y styled-system. Puedes usar esta URL; el generador carga y crea un mapa de importaciones con todos estos módulos.

generator.jspm.io

Aquí tienes una plantilla preconfigurada para usar.

Copy<iframe height="500" style="width: 100%;" scrolling="no" title="teleportHQ - jspm - template" src="https://codepen.io/jkrishna/embed/VwMaWaN?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/jkrishna/pen/VwMaWaN">
  teleportHQ - jspm - template</a> by Jaya Krishna (<a href="https://codepen.io/jkrishna">@jkrishna</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

Plantillas de Codesandbox y Codepen.#

Codepen
Codesandbox

Puedes encontrar más información sobre mapas de importación en:

• import-maps-the-basic-idea
• import-map-cdn
• esm-specifiers-import-maps

Componentes en la nube con Next.JS#

Si eres nuevo en cloud-components, te recomendamos leer nuestra publicación breve al respecto. Es una lectura rápida y puedes encontrarla aquí

Importaciones de URL con Next.JS#

A TeleportHQ le gusta Next JS desde sus inicios por la facilidad de desarrollo, implementación y escalabilidad que ofrece este framework potenciado con React.

Desde v@12 , Next-JS introdujo una nueva función llamada urlImports para cargar módulos JS de fuentes remotas. Esto puede eliminar por completo el paso de agrupar y transpilar módulos JS cada vez. Podemos cargar un módulo desde una CDN y usarlo directamente en nuestros proyectos.

Importaciones de URL + TeleportHQ#

Puedes generar un enlace único al módulo haciendo clic con el botón derecho en cualquier componente de la lista de componentes de Studio. Luego, podrás usar el módulo directamente en cualquier proyecto de Next-JS.

Copyjsx
import Card from 'https://jscdn.teleporthq.io/new-project-68d4/card.js@be57bcf81f65fd2541ccd1a2e69a02b3e4c88a84'

const App = () => {
    return (
    <div>
       <Card />
    </div>
  )
}

export default App

Para configurar tus proyectos y usar componentes de TeleportHQ. Puedes visitar https://github.com/teleporthq/nextjs-http y usar la plantilla para crear nuevos proyectos.

Copynpx degit https://github.com/teleporthq/nextjs-http

Configuración de proyectos existentes#

Para configurar proyectos existentes de NextJS, la versión de NextJS debe ser como mínimo la 12.

Abre tu next.config.js. Y añade https://jscdn.teleporthq.io a la sección urlImports . Esto permite que Next-JS importe módulos únicamente de dominios específicos. Así se evita ejecutar JS de dominios desconocidos. Puedes leer más al respecto en url-imports-security-model.

Copyjs
module.exports = {
  reactStrictMode: true,
  experimental: {
    urlImports: ['https://jscdn.teleporthq.io']
  }
}

Ahora añade styled-components y styled-system a tu proyecto. Esto se puede hacer usando

Copybash
npm install styled-components styled-system

Los módulos de TeleportHQ usan estos dos paquetes para definir los estilos y sus variantes, así como los tokens de diseño de un proyecto. Y todas las importaciones de módulos externos usan especificadores de módulos sin prefijo. Así, los usuarios pueden servir esas dependencias como prefieran.

A continuación, debes modificar tu next.config.js. Necesitamos crear un alias en nuestro next.config.js para usar la versión de esm de styled-components. Puedes encontrar más información sobre este paso aquí.

Después de hacer los cambios, tu next.config.js debería verse más o menos así.

Copyjs
module.exports = {
  reactStrictMode: true,
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'styled-components': require.resolve('./node_modules/styled-components/dist/styled-components.esm.js'),
    }

    return config
  },
  experimental: {
    styledComponents: true,
    urlImports: ['https://jscdn.teleporthq.io']
  }
}

Ya está todo listo; ahora ejecuta...

Copybash
npm run dev

... y tu proyecto debería cargarse en - http://localhost:3000 🚀

Varios#

NextJS crea un next.lock con todos los módulos que se cargan dinámicamente desde un CDN, excepto los módulos que se sirven con Cache-Control: no-cache. Puedes leer más al respecto aquí.