Composants cloud dans TeleportHQ

Aujourd’hui, nous souhaitons prendre le temps de vous présenter une nouvelle fonctionnalité que nous avons ajoutée à TeleportHQ : les composants cloud.

Présentation des composants cloud#

La fonctionnalité des composants cloud vous permet d’ importer dans d’autres environnements de développement des composants créés visuellement dans TeleportHQ ainsi que dans d’autres projets TeleportHQ. Ces composants sont compatibles avec React et Next.js et s’utilisent en les important directement depuis un CDN, plutôt qu’avec un gestionnaire de paquets traditionnel.

Passons en revue les détails et le travail qui ont permis de rendre cette fonctionnalité possible.

Modules ES#

Chaque module est un morceau de code qui s’exécute une fois chargé.

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

Compatibilité avec les navigateurs#

Les principaux navigateurs prennent en charge les modules de base es-modules, la prise en charge de ces modules est à 94.45%.

Certaines fonctionnalités et syntaxes du langage, comme l’importation dynamique et les cartes d’importation ne sont pas encore entièrement prises en charge. Nous pouvons résoudre ce problème en utilisant des polyfills. Pour en savoir plus sur les polyfills, cliquez ici

caniuse.com/es6-module

es-module-shims

Modules Node.js ou CDN#

• Les modules peuvent être mis en cache indépendamment, ce qui accélère les visites suivantes.
• Chaque module est fourni aux utilisateurs individuellement via un CDN.
• La transpilation, l’ajout de polyfills et l’optimisation des modules tiers sont effectués à l’avance.

Nous disposons de quelques fournisseurs qui proposent tous les packages depuis npm

JSPM, skypack, esm.sh deno.land.

Ces fournisseurs de CDN pour modules transpilent les packages, les convertissent en esm si nécessaire (dans le cas de cjs). Ils servent ensuite ces modules afin que les utilisateurs puissent les utiliser directement dans les navigateurs, avec des optimisations de production.

Dans un mode de développement node_modules classique, nous devons configurer nos bundlers pour transpiler, ajouter des polyfills ou même assurer l’interopérabilité.

Cela se produit chaque fois que nous compilons nos projets. Imaginez le temps que les utilisateurs pourraient gagner en éliminant ces étapes pendant le développement. Du temps pourrait également être économisé dans les pipelines CI.

En savoir plus sur les CDN sur leurs pages respectives

sémantique des modules-cdn-jspm
référence de l’API skypack-cdn

Modules ES depuis le studio TeleportHQ#

Chez TeleportHQ, nous nous intéressons à ce sujet depuis un certain temps, par intermittence, dans le cadre de nos recherches. Le niveau actuel de prise en charge par les navigateurs et l’adoption de ces flux de travail par les bundlers en font une solution idéale.

Parmi nos expériences passées, on peut citer

• Servir des composants depuis le studio sous forme de packages npm installables.
• Et créer un miroir pour npm afin de convertir et servir tous les packages à esm. Vous en trouverez davantage ici

Les modules de TeleportHQ utilisent des spécificateurs de modules nus pour les imports de packages. Cela permet aux utilisateurs finaux de contrôler l’emplacement depuis lequel les external-dependencies peuvent être servis. Ainsi, à tout moment, ces modules ne chargent que du code généré à partir de studio et de code-generators. Les utilisateurs peuvent ainsi déployer leurs applications en toute confiance et en toute sécurité, puisqu’ils choisissent l’emplacement de chargement des dépendances externes.

Vous pouvez également servir les dépendances externes à l’aide de node_modules et de cdn . Pour en savoir plus, consultez les workflows.

Workflows#

Les utilisateurs peuvent choisir parmi 3 types de workflows lorsqu’ils utilisent des modules de TeleportHQ.

• NextJS avec des imports d’URL
• Import-Maps
• Webpack avec buildHttp

Optimisations depuis le studio#

Tous les modules sont :

• Transpilés.
• Liés les uns aux autres.
• Distribués depuis un CDN mondial.
• Version verrouillée.

Lorsque les modules sont imbriqués, nous ne les regroupons pas. À la place, nous relions les modules à l'aide de imports.

Chaque projet est principalement divisé en trois catégories de modules

• Styles
• Variables globales et polices
• Composants

Styles#

Dans studio , nous pouvons définir les styles de plusieurs façons : classes CSS, typographie et jetons de conception et jetons de mise en page. Tout cela est regroupé dans un es-module nommé styles. Et chaque fois que le module change, les modifications sont versionnées.

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

Tous les styles sont gérés à l’aide de styled-components et de styled-system. Toutefois, dans les prochains jours, les utilisateurs pourront également générer des modules avec react-jss .

Le module de styles exporte TOKENS et projectStyleVariants. Le module styles peut être utilisé indépendamment dans n’importe quel projet. Les utilisateurs peuvent ainsi faire correspondre encore davantage leurs jetons de conception à celle définie dans l’interface Studio.

Variables globales et polices#

Dans Studio, les utilisateurs peuvent définir des éléments globaux comme les polices et le référencement naturel. Studio est conçu pour aider les utilisateurs à créer des projets complets. Tous les globals que nous utilisons dans un projet sont regroupés dans le module globals .

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

Tous les composants héritent du Globals à chaque génération d’un module. Un composant type ressemble à ceci

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

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

Composants#

Dans Studio, chaque composant est généré individuellement dans un module. Les composants sont ensuite reliés entre eux en fonction de leur utilisation.

La division en modules indépendants améliore les performances. Premièrement, le contenu des modules n’est pas dupliqué.

Deuxièmement, lorsqu’un module est utilisé plusieurs fois, il est servi à partir du cache.

Les modules peuvent être importés plusieurs fois, mais ils ne sont exécutés qu’une seule fois.

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

La version d’un module est mise à jour uniquement lorsque le composant, ou l’un des modules dont il dépend, change.

Le @version d’un module change lorsque les variables globales, styles ou le composant lui-même change.

Ressources#

Dans Studio, nous pouvons utiliser des éléments multimédias lors de la conception de nos composants. Les ressources utilisées sont également diffusées depuis le CDN.

Cartes de sources#

Vous pouvez obtenir la carte de sources de n’importe quel module en modifiant l’extension à la fin.

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

Frameworks et variantes de composants#

Lors de la conception des composants dans le studio, les utilisateurs peuvent utiliser routeLinks, seo-tags et de nombreuses fonctionnalités dépendantes du framework. Pour les prendre en charge, nous permettons aux utilisateurs de choisir l’environnement cible dans lequel ils utilisent les modules. Comme dans la plupart des cient-side applications React, nous utilisons react-router et pour NextJS nous utilisons next/link. Et il en va de même pour react-helmet par rapport à next/head.

Ces es-modules sont générés à l’aide de nos générateurs de code open-source . Ceux-ci sont disponibles sur GitHub. Nous prévoyons d’offrir la même prise en charge pour d’autres frameworks et même pour des combinaisons de style-flavour . Par exemple, React + React-JSS, Next + React-JSS .

Composants cloud et cartes d’importation#

Avec l’introduction des modules ES, nous pouvons désormais organiser notre code par module, importer les modules selon nos besoins et contrôler davantage les modules chargés à l’exécution grâce aux imports dynamiques.

Souvenez-vous du bon vieux temps où nous chargions le JavaScript dans le navigateur à l’aide de balises script. Nous avions très peu de contrôle sur l’ordre de chargement. Lorsque les scripts dépendaient les uns des autres, organiser correctement leur séquence prenait une place considérable dans le développement JavaScript.

Puis sont apparus les bundlers et les outils d’exécution de tâches, qui se chargent de ce travail manuel. Les import maps offrent un excellent moyen de développer des applications sans avoir à configurer un bundler et un résolveur complets. Elles permettent aux utilisateurs d’utiliser directement des « spécificateurs de modules nus », ce qui signifie qu’ils peuvent écrire

Copyimport { useState } from 'react'

Et la import-map se chargera de résoudre react à partir de la source qui y est indiquée.

Depuis notre annonce concernant les modules ES, dans Cloud components with teleportHQ, vous pouvez utiliser tous les components, styles et tokens en tant que modules indépendants. Comme les modules de TeleportHQ utilisent des « spécificateurs de modules nus », nous devons utiliser une import map pour indiquer au navigateur où résoudre les dépendances externes.

Modules ES sans spécificateurs de modules nus#

Chargeons le module react-dom depuis skypack. Nous pouvons constater que les dépendances external du paquet sont également importées à l’aide d’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>

On peut voir que le paquet react-dom utilise à son tour object-assign et scheduler en interne, et les charge à partir d’autres URL uniques préconfigurées.

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

Modules de TeleportHQ#

Les modules de TeleportHQ combinent des bare-module-specifiers avec des URL uniques préconfigurées. Les utilisateurs peuvent ainsi gérer le chargement des dépendances, tandis que tous les modules dépendants de studio sont chargés automatiquement.

Un composant cloud typique comporte les importations suivantes.

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

Nous pouvons générer une carte d’importation à l’aide de jspm disponible en ligne ou sous forme de package npm . generator.jspm.io

Vous pouvez saisir toutes les dépendances utilisées. Dans notre cas, react, react-dom, styled-components et prop-types et styled-system. Vous pouvez utiliser cette URL : le générateur la charge et crée une carte d’importation contenant tous ces modules.

generator.jspm.io

Voici un modèle préconfiguré à utiliser.

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>

Modèles de Codesandbox et Codepen.#

Codepen
Codesandbox

Pour en savoir plus sur les cartes d’importation :

• import-maps-the-basic-idea
• import-map-cdn
• spécificateurs ESM et cartes d’importation

Composants cloud avec Next.JS#

Si vous découvrez les composants cloud, consultez notre court article à ce sujet. La lecture est rapide et vous le trouverez ici

Importations d’URL avec Next.JS#

TeleportHQ apprécie Next JS depuis ses débuts, pour la facilité de développement, de déploiement et d’évolution qu’offre ce framework surpuissant basé sur React.

À partir de v@12 , Next-JS a introduit une nouvelle fonctionnalité appelée urlImports pour charger des modules JS depuis des sources distantes. Cela permet de supprimer complètement l’étape de regroupement et de transpilation des modules JS à chaque fois. Nous pouvons charger un module depuis un CDN et l’utiliser directement dans nos projets.

Importations d’URL + TeleportHQ#

Vous pouvez générer un lien unique vers un module en faisant un clic droit sur n’importe quel composant de la liste des composants dans Studio. Le module peut ensuite être utilisé directement dans n’importe quel projet 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

Pour configurer vos projets afin d’utiliser des composants de TeleportHQ. Vous pouvez consulter https://github.com/teleporthq/nextjs-http et utiliser le modèle pour démarrer de nouveaux projets.

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

Configuration de projets existants#

Pour configurer un projet NextJS existant, vous devez utiliser au minimum la version 12 de NextJS.

Ouvrez votre next.config.js. Puis ajoutez https://jscdn.teleporthq.io à votre section urlImports . Cela permet à Next-JS d’importer des modules uniquement depuis des domaines spécifiques. L’exécution de code JavaScript provenant de domaines inconnus est ainsi désactivée. Pour en savoir plus, consultez le modèle de sécurité des importations d’URL.

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

Ajoutez maintenant styled-components et styled-system à votre projet. Pour ce faire, utilisez

Copybash
npm install styled-components styled-system

Les modules de TeleportHQ utilisent ces deux paquets pour définir le style, les variantes de style et les jetons de conception d’un projet. Toutes les importations de modules externes utilisent des spécificateurs de modules nus. Les utilisateurs peuvent donc fournir ces dépendances comme ils le souhaitent.

Vous devez ensuite modifier votre next.config.js. Nous devons créer un alias dans notre next.config.js pour utiliser la version esm de styled-components. Vous trouverez plus d’informations sur cette étape ici.

Après avoir apporté les modifications, votre fichier next.config.js devrait ressembler à ceci.

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

Tout est prêt, exécutez maintenant ...

Copybash
npm run dev

... et votre projet devrait être accessible à l’adresse suivante : http://localhost:3000 🚀

Divers#

NextJS crée un next.lock avec tous les modules chargés dynamiquement depuis un CDN, à l’exception des modules fournis avec Cache-Control: no-cache. Pour en savoir plus, consultez le ici.