Componenti cloud in TeleportHQ

Paul BrieOctober 29, 2026

Oggi vogliamo dedicare un po’ di tempo a presentarvi una nuova funzionalità che abbiamo aggiunto a TeleportHQ: Componenti Cloud.

Introduzione ai componenti Cloud

La funzionalità Componenti Cloud consente di importare componenti creati visivamente in TeleportHQ anche in altri ambienti di sviluppo e in altri progetti TeleportHQ. I componenti sono compatibili con React e Next.js e funzionano importandoli direttamente da una CDN anziché utilizzando un tradizionale gestore di pacchetti.

Vediamo alcuni dettagli e il lavoro che hanno reso possibile questa funzionalità.

Moduli ES

Ogni modulo è una porzione di codice che viene eseguita una volta caricata.

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

Supporto dei browser

I principali browser supportano di base es-modules, il supporto per questi moduli è disponibile 94.45%.

Alcune funzionalità e sintassi del linguaggio, come dynamic-import e import-maps non sono ancora pienamente supportate. Possiamo risolvere il problema utilizzando degli shim. Per saperne di più sugli shim, cliccate qui

caniuse.com/es6-module

es-module-shims

Moduli Node rispetto a CDN

I moduli possono essere memorizzati nella cache in modo indipendente, migliorando i tempi di caricamento delle visite successive.
Ogni modulo viene distribuito individualmente agli utenti tramite una CDN.
La transpilazione, il polyfilling e le ottimizzazioni dei moduli di terze parti avvengono in anticipo.

Abbiamo diversi provider che distribuiscono tutti i pacchetti da npm

JSPM, skypack, esm.sh deno.land.

Questi provider di CDN per moduli traspilano i pacchetti e li convertono in esm quando necessario (nel caso di cjs). Distribuiscono poi questi moduli affinché gli utenti possano usarli direttamente nei browser, con ottimizzazioni per la produzione.

In una modalità di sviluppo standard node_modules dobbiamo configurare i nostri bundler per transp ilare, applicare polyfill o persino fornire interoperabilità.

Questo accade ogni volta che creiamo i nostri progetti. Immagina quanto tempo si potrebbe risparmiare eliminando questi passaggi durante lo sviluppo. Si può risparmiare tempo anche nelle pipeline CI.

Scopri di più sulle CDN nelle rispettive pagine

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

Moduli ES da TeleportHQ Studio

In TeleportHQ ci occupiamo di questo argomento da tempo, alternando periodi di ricerca e pause. Il livello attuale di supporto dei browser e il fatto che i bundler stiano iniziando ad adottare questi flussi di lavoro li rendono la soluzione ideale.

Alcuni dei nostri esperimenti passati includono

Servire i componenti dallo studio come npm pacchetti installabili.
E creare un mirror per npm convertire e distribuire tutti i pacchetti a esm. Puoi saperne di più qui

I moduli in TeleportHQ usano bare-module-specifiers per importare i pacchetti. In questo modo gli utenti finali possono scegliere da dove distribuire i external-dependencies vengono serviti. Così, in ogni caso, questi moduli caricano solo codice generato da studio e code-generators. Questo aiuta gli utenti a distribuire i propri progetti con sicurezza e tranquillità, perché possono scegliere da dove caricare le dipendenze esterne.

Puoi distribuire le dipendenze esterne anche usando node_modules e cdn . Scopri di più su questi strumenti nei flussi di lavoro.

Flussi di lavoro

Quando si utilizzano i moduli di TeleportHQ, gli utenti possono scegliere tra 3 diversi tipi di flussi di lavoro.

Ottimizzazioni dallo studio

Tutti i moduli sono:

Transpilati.
Collegati tra loro.
Distribuiti tramite una CDN globale.
Versione bloccata.

Quando i moduli sono annidati, non li raggruppiamo. Creiamo invece collegamenti tra i moduli usando imports.

Ogni progetto è suddiviso principalmente in tre categorie, se i moduli

Stili
Variabili globali e font
Componenti

Module categories for a project created in TeleportHQ studio

Stili

In studio possiamo definire gli stili in diversi modi: classi CSS, tipografia e token di design e token di layout. Tutti questi elementi vengono combinati in un es-module con il nome styles. E ogni volta che il modulo cambia, le modifiche vengono sottoposte a versionamento.

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

Tutti gli stili sono gestiti usando styled-components e styled-system. Tuttavia, nei prossimi giorni gli utenti potranno generare moduli anche usando react-jss .

Il modulo degli stili esporta TOKENS e projectStyleVariants. Il modulo styles può essere usato autonomamente in qualsiasi progetto. In questo modo gli utenti possono mantenere i propri token di design ancora più fedeli al design creato nello studio.

Global e font

In Studio gli utenti possono definire elementi globali come i font e la SEO. Studio è progettato per aiutare gli utenti a realizzare progetti su larga scala. Tutti gli globals elementi globals che utilizziamo in un progetto sono astratti in un modulo.

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

Tutti i componenti ereditano i Globals ogni volta che viene generato un modulo. Un componente tipico è simile a

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

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

Componenti

Ogni componente in Studio viene generato singolarmente in un modulo. I componenti vengono collegati tra loro in base all'utilizzo.

La suddivisione indipendente di tutti i moduli migliora le prestazioni. Innanzitutto, il contenuto dei moduli non viene duplicato.

In secondo luogo, quando un modulo viene utilizzato più volte, viene fornito dalla cache.

I moduli possono essere importati più volte, ma vengono eseguiti una sola volta.

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

La versione di un modulo viene aggiornata solo quando cambiano il componente o uno dei moduli da cui dipende.

La @version di un modulo cambia quando cambiano le globali, gli stili o il componente stesso.

Risorse

In Studio possiamo usare contenuti multimediali durante la progettazione dei componenti. Anche le risorse utilizzate vengono distribuite tramite CDN.

Mappe sorgente

Puoi ottenere la mappa sorgente di qualsiasi modulo modificando l'estensione alla fine.

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

Framework e varianti dei componenti

Durante la progettazione dei componenti in Studio, gli utenti possono usare routeLinks, seo-tags e numerose funzionalità specifiche dei framework. Per supportarle, consentiamo agli utenti di scegliere l'ambiente di destinazione per cui utilizzano i moduli. Come nella maggior parte delle cient-side app React, usiamo react-router e per NextJS usiamo next/link. Lo stesso vale per react-helmet e next/head.

Questi es-modules vengono generati usando i nostri generatori di codice open-source , disponibili su GitHub. Prevediamo inoltre di offrire lo stesso supporto per altri framework e anche per combinazioni style-flavour . Ad esempio, React + React-JSS, Next + React-JSS e così via.

Componenti cloud e mappe di importazione

Con l'introduzione degli ES Modules, ora possiamo organizzare il codice per modulo e importare i moduli quando necessario. Inoltre, abbiamo un controllo ancora maggiore su quali moduli vengono caricati in fase di esecuzione grazie a importazioni dinamiche.

Ricordi i bei vecchi tempi, quando caricavamo JavaScript nel browser usando il tag script? Avevamo pochissimo controllo sull'ordine di caricamento degli script e sulle loro dipendenze reciproche. Organizzare correttamente la sequenza era diventato un aspetto fondamentale dello sviluppo JavaScript.

E poi sono stati introdotti i bundler e i task runner per occuparsi di questo lavoro manuale. Le import map offrono un ottimo modo per sviluppare applicazioni senza configurare un intero bundler e un resolver. Inoltre, consentono agli utenti di utilizzare direttamente i «bare module specifier». Ciò significa che gli utenti possono scrivere

import { useState } from 'react'

E la import map si occuperà di risolvere React usando la sorgente indicata al suo interno.

Nel nostro annuncio sugli ES module di Cloud components con TeleportHQ. Puoi usare tutti i components, styles e i tokens come moduli indipendenti. Poiché i moduli di TeleportHQ utilizzano i «bare module specifier», dobbiamo usare una import map per indicare al browser da dove risolvere le dipendenze esterne.

ES module senza bare module specifier

Carichiamo il modulo react-dom da skypack. Possiamo vedere che anche le dipendenze di external vengono importate tramite URL.

<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>

Si può notare che il pacchetto react-dom utilizza a sua volta object-assign e scheduler internamente e li carica da altri URL univoci pre-mappati.

js
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";

Un modulo di TeleportHQ

I moduli di TeleportHQ combinano bare-module-specifiers e URL univoci pre-mappati. In questo modo gli utenti possono gestire il caricamento delle dipendenze e tutti i moduli dipendenti da studio vengono caricati automaticamente.

Un componente cloud tipico include i seguenti import.

jsx
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';

Possiamo generare una import map usando jspm disponibile online oppure come pacchetto npm . generator.jspm.io

Puoi inserire tutte le dipendenze che utilizzi. Nel nostro caso, react, react-dom, styled-components e prop-types e styled-system. Puoi usare questo URL: il generatore carica e crea una mappa di importazione con tutti questi moduli.

generator.jspm.io

Ecco un modello preconfigurato da utilizzare.

<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>

Modelli di Codesandbox e Codepen.

Codepen
Codesandbox

Puoi trovare ulteriori informazioni sulle mappe di importazione qui:

Componenti cloud con Next.JS

Se sei alle prime armi con cloud-components, dai un’occhiata al nostro breve articolo sull’argomento. Si legge in poco tempo e lo trovi qui

Importazioni URL con Next.JS

TeleportHQ apprezza Next JS fin dalla sua nascita, per la facilità di sviluppo e distribuzione e per la scalabilità di questo framework basato su React e dalle prestazioni eccezionali.

A partire dalla v@12 , Next-JS ha introdotto una nuova funzionalità chiamata urlImports per caricare moduli JS da origini remote. In questo modo è possibile eliminare completamente il passaggio di bundling e transpiling dei moduli JS ogni volta. Possiamo caricare un modulo da una CDN e usarlo direttamente nei nostri progetti.

Importazioni URL + TeleportHQ

Puoi generare il link univoco di un modulo facendo clic con il tasto destro su un componente qualsiasi nell’elenco dei componenti in Studio. Il modulo può quindi essere usato direttamente in qualsiasi progetto Next-JS.

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

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

export default App

Per configurare i tuoi progetti e usare componenti di TeleportHQ. Puoi visitare https://github.com/teleporthq/nextjs-http e usare il modello per avviare nuovi progetti.

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

Configurare progetti esistenti

Per configurare un progetto NextJS esistente, è necessaria almeno la versione 12 di NextJS.

Apri il tuo next.config.js. E aggiungi https://jscdn.teleporthq.io alla sezione urlImports . Questo consente a Next-JS di importare moduli solo da domini specifici e impedisce l’esecuzione di JavaScript proveniente da domini sconosciuti. Puoi approfondire l’argomento qui: url-imports-security-model.

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

Ora aggiungi styled-components e styled-system al tuo progetto. Puoi farlo usando

bash
npm install styled-components styled-system

I moduli di TeleportHQ usano questi due pacchetti per definire lo stile e le varianti di stile, oltre ai token di progettazione di un progetto. Tutti gli import dei moduli esterni utilizzano specificatori di moduli bare. Gli utenti possono quindi servire queste dipendenze come preferiscono.

Ora devi modificare il tuo next.config.js. Dobbiamo creare un alias nel nostro next.config.js per utilizzare la versione esm di styled-components. Puoi trovare maggiori informazioni su questo passaggio qui.

Dopo aver apportato le modifiche, il tuo next.config.js dovrebbe apparire più o meno così.

js
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']
  }
}

È tutto pronto, ora esegui ...

bash
npm run dev

... e il tuo progetto dovrebbe essere disponibile all'indirizzo - http://localhost:3000 🚀

Varie

NextJS crea un next.lock con tutti i moduli caricati dinamicamente da una CDN, tranne quelli serviti con Cache-Control: no-cache. Puoi approfondire l'argomento qui.