Cloud-Komponenten in TeleportHQ

Heute möchten wir uns etwas Zeit nehmen, um mit Ihnen über eine neue Funktion zu sprechen, die wir zu TeleportHQ hinzugefügt haben: Cloud-Komponenten.

Einführung in Cloud-Komponenten#

Mit der Funktion „Cloud-Komponenten“ können Sie visuell in TeleportHQ erstellte Komponenten importieren – sowohl in andere Entwicklungsumgebungen als auch in andere TeleportHQ-Projekte. Die Komponenten sind mit React und Next.js kompatibel und werden direkt von einem CDN importiert, statt einen herkömmlichen Paketmanager zu verwenden.

Sehen wir uns einige Details und die Arbeit an, die nötig waren, um diese Funktion zu ermöglichen.

ES-Module#

Jedes Modul ist ein Stück Code, das ausgeführt wird, sobald es geladen ist.

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

Browser-Unterstützung#

Die wichtigsten Browser bieten grundlegende Unterstützung für es-modules, die Unterstützung für diese Module befindet sich bei 94.45%.

Einige Funktionen und Sprachsyntaxelemente wie dynamic-import und import-maps werden noch nicht vollständig unterstützt. Dieses Problem lässt sich mithilfe von Shimslösen. Weitere Informationen zu Shims finden Sie hier

caniuse.com/es6-module

es-module-shims

Node-Module vs. CDN#

• Module können unabhängig voneinander zwischengespeichert werden, wodurch sich die Ladezeiten bei späteren Besuchen verbessern.
• Jedes Modul wird den Nutzern einzeln über ein CDN bereitgestellt.
• Transpilierung, Polyfills und Optimierungen für die Anbieter-Module erfolgen im Voraus.

Es gibt eine Handvoll Anbieter, die alle Pakete bereitstellen: npm

JSPM, skypack, esm.sh deno.land.

Diese Modul-CDN-Anbieter transpilieren die Pakete und konvertieren sie bei Bedarf in esm (im Fall von cjs). Außerdem stellen sie diese Module bereit, damit Nutzer sie mit Produktionsoptimierungen direkt in Browsern verwenden können.

In einem standardmäßigen node_modules Entwicklungsmodus müssen wir unsere Bundler so konfigurieren, dass sie transpilieren, Polyfills bereitstellen oder sogar Interoperabilität ermöglichen.

Das passiert jedes Mal, wenn wir unsere Projekte erstellen. Stell dir vor, wie viel Zeit Nutzer während der Entwicklung sparen können, wenn diese Schritte wegfallen. Auch in CI-Pipelines lässt sich so Zeit sparen.

Mehr über die CDNs erfährst du auf den jeweiligen Seiten.

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

ES-Module aus dem TeleportHQ Studio#

Bei TeleportHQ beschäftigen wir uns schon seit einiger Zeit immer wieder mit diesem Thema. Der aktuelle Browser-Support und die Tatsache, dass Bundler diese Workflows zunehmend unterstützen, machen es zur idealen Lösung.

Zu unseren bisherigen Experimenten gehören

• Komponenten aus dem Studio als npm installierbare Pakete bereitstellen.
• Und einen Spiegel für npm erstellen, um alle Pakete in esmumzuwandeln und bereitzustellen. Mehr dazu findest du hier

Module in TeleportHQ verwenden bare-module-specifiers für Paketimporte. Dadurch können Endnutzer bestimmen, von wo die external-dependencies bereitgestellt werden. So laden diese Module stets nur Code, der aus dem studio und code-generatorsgeneriert wurde. Das gibt Nutzern Sicherheit beim Veröffentlichen, da sie auswählen können, von wo externe Abhängigkeiten geladen werden.

Du kannst externe Abhängigkeiten auch über node_modules und cdn bereitstellen. Mehr dazu erfährst du in den Workflows.

Workflows#

Es gibt drei verschiedene Workflows, aus denen Nutzer bei der Verwendung von Modulen von TeleportHQ wählen können.

• NextJS mit URL-Imports
• Import-Maps
• Webpack mit buildHttp

Optimierungen aus dem Studio#

Alle Module sind:

• Transpiliert.
• Miteinander verknüpft.
• Über ein globales CDN bereitgestellt.
• Version gesperrt.

Wenn Module verschachtelt sind, bündeln wir sie nicht. Stattdessen verknüpfen wir die Module mithilfe von imports.

Jedes Projekt wird hauptsächlich in drei Kategorien unterteilt, wenn es um Module geht:

• Stile
• Globale Einstellungen und Schriftarten
• Komponenten

Stile#

In studio können wir Stile auf verschiedene Arten definieren: CSS-Klassen, Typografie sowie Design-Tokens und Layout-Tokens. All diese Elemente werden zu einem es-module mit dem Namen „styles“ zusammengeführt. Bei jeder Änderung am Modul wird eine neue Version erstellt.

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

Alle Stile werden mit styled-components und styled-systemgepflegt. In Zukunft können Nutzer jedoch auch mit react-jss Module generieren.

Das Stilmodul exportiert TOKENS und projectStyleVariants. Das Modul styles kann unabhängig in jedem Projekt verwendet werden. So können Nutzer ihre Design-Tokens noch genauer an das Design im Studio anpassen.

Globale Einstellungen und Schriftarten#

Im Studio können Benutzer globale Einstellungen wie Schriftarten und SEOdefinieren. Das Studio wurde entwickelt, um Benutzern beim Erstellen umfangreicher Projekte zu helfen. Alle globals , die wir in einem Projekt verwenden, werden in ein globals Modul abstrahiert.

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

Alle Komponenten übernehmen die Globals , sobald ein Modul generiert wird. Eine typische Komponente sieht so aus:

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

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

Komponenten#

Jede Komponente im Studio wird einzeln in ein Modul umgewandelt. Die Komponenten werden je nach ihrer Verwendung miteinander verknüpft.

Die unabhängige Aufteilung aller Module verbessert die Leistung. Erstens wird der Modulinhalt nicht dupliziert..

Zweitens werden Module, wenn sie mehrfach verwendet werden, aus dem Cache bereitgestellt..

Module können zwar mehrfach importiert, aber nur einmal ausgeführt werden..

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

Die Version eines Moduls wird nur aktualisiert, wenn sich die Komponente oder eines der Module ändert, von denen sie abhängig ist.

Die @version eines Moduls ändert sich, wenn sich die globalen Einstellungen, Stile oder die Komponente selbst ändert.

Assets#

Im Studio können wir beim Entwerfen unserer Komponenten Multimedia verwenden. Die verwendeten Assets werden ebenfalls über das CDN bereitgestellt.

Quellzuordnungen#

Du kannst die Quellzuordnung für jedes Modul abrufen, indem du die Dateiendung änderst.

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

Frameworks und Komponentenvarianten#

Beim Entwerfen von Komponenten im Studio können Benutzer routeLinks, seo-tags und zahlreiche frameworkabhängige Funktionen nutzen. Um diese zu unterstützen, können Benutzer die Zielumgebung auswählen, in der sie die Module verwenden. Wie in den meisten cient-side React-Apps verwenden wir react-router und für NextJS verwenden wir next/link. Dasselbe gilt für react-helmet im Vergleich zu next/head.

Diese es-modules werden mit unseren open-source Codegeneratoren generiert. Sie sind auf GitHubverfügbar. Außerdem planen wir, dieselbe Unterstützung auch für andere Frameworks und sogar für style-flavour Kombinationen anzubieten, etwa React + React-JSS, Next + React-JSS usw.

Cloud-Komponenten und Import-Maps#

Mit der Einführung von ES-Modulen können wir unseren Code jetzt nach Modulen organisieren und bei Bedarf beliebige Module importieren. Außerdem haben wir noch mehr Kontrolle darüber, welche Module zur Laufzeit geladen werden, mithilfe von dynamischen Imports.

Weißt du noch, wie wir früher JavaScript mit einem Script-Tag in den Browser geladen haben? Wir hatten kaum Kontrolle darüber, was zuerst geladen wurde. Wenn Skripte voneinander abhingen, wurde die richtige Reihenfolge festzulegen zu einem wichtigen Teil der JavaScript-Entwicklung.

Und dann kamen Bundler und Task-Runner auf, die sich um diese manuelle Arbeit kümmern. Import-Maps bieten eine großartige Möglichkeit, Anwendungen ohne einen vollständigen Bundler- und Resolver-Setup zu entwickeln. Außerdem ermöglichen sie es Benutzern, direkt „bare-module-specifiers“ zu verwenden. Das bedeutet, dass Benutzer schreiben können

Copyimport { useState } from 'react'

Und import-map kümmert sich darum, React anhand der darin angegebenen Quelle aufzulösen.

In unserer Ankündigung zu ES-Modulen von Cloud-Komponenten mit TeleportHQ. Sie können alle components, styles und tokens als einzelne Module verwenden. Da die Module von TeleportHQ „bare-module-specifier“ verwenden, müssen wir eine Import-Map einsetzen, um dem Browser mitzuteilen, woher die externen Abhängigkeiten aufgelöst werden sollen.

ES-Module ohne Bare-Module-Specifier#

Laden wir das Modul react-dom von skypack. Wir sehen, dass auch die external -Abhängigkeiten des Pakets über URLs importiert werden.

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>

Wie Sie sehen, verwendet das Paket react-dom intern wiederum object-assign und scheduler und lädt diese über weitere eindeutige, vorab zugeordnete URLs.

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

Modul von TeleportHQ#

Module von TeleportHQ verwenden eine Kombination aus bare-module-specifiers und vorab zugeordneten eindeutigen URLs. So können sich Benutzer um das Laden der Abhängigkeiten kümmern, während alle von Studio abhängigen Module automatisch geladen werden.

Eine typische Cloud-Komponente enthält die folgenden Imports.

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

Wir können eine Import-Map mit jspm erstellen, das online verfügbar ist oder als npm -Paket genutzt werden kann. generator.jspm.io

Sie können alle Abhängigkeiten eingeben, die Sie verwenden. In unserem Fall react, react-dom, styled-components und prop-types und styled-system. Unter dieser URL können Sie einen Import-Map generieren lassen, der alle diese Module lädt und erstellt.

generator.jspm.io

Hier finden Sie eine vorkonfigurierte Vorlage zur Verwendung.

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>

Vorlagen von Codesandbox und Codepen.#

Codepen
Codesandbox

Weitere Informationen zu Import-Maps finden Sie hier:

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

Cloud-Komponenten mit Next.JS#

Wenn Sie neu bei Cloud-Komponentensind, sollten Sie sich unseren kurzen Beitrag dazu ansehen. Er ist schnell gelesen und hier

URL-Importe mit Next.js#

TeleportHQ setzt seit seinen Anfängen auf Next.js – dank der einfachen Entwicklung und Bereitstellung sowie der Skalierbarkeit dieses leistungsstarken React-Frameworks.

Seit v@12 hat Next.js eine neue Funktion namens urlImports eingeführt, mit der JS -Module aus entfernten Quellen geladen werden können. Dadurch kann der Schritt des Bündelns und Transpilierens von JS-Modulen jedes Mal vollständig entfallen. Wir können ein Modul von einem CDN laden und direkt in unseren Projekten verwenden.

URL-Importe + TeleportHQ#

Sie können einen eindeutigen Modul-Link erstellen, indem Sie in Studio mit der rechten Maustaste auf eine beliebige Komponente in der Komponentenliste klicken. Anschließend lässt sich das Modul direkt in jedem Next.js-Projekt verwenden.

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

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

export default App

Um Ihre Projekte für die Verwendung von Komponenten aus TeleportHQeinzurichten, besuchen Sie https://github.com/teleporthq/nextjs-http und verwenden Sie die Vorlage, um neue Projekte zu erstellen.

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

Vorhandene Projekte konfigurieren#

Für die Konfiguration eines bestehenden Next.js-Projekts benötigen Sie mindestens Next.js Version 12.

Öffnen Sie Ihre next.config.js. Und fügen Sie https://jscdn.teleporthq.io zu Ihrem Abschnitt urlImports hinzu. Dadurch kann Next.js Module nur aus bestimmten Domains importieren. So wird die Ausführung von JS aus unbekannten Domains verhindert. Weitere Informationen finden Sie unter url-imports-security-model.

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

Fügen Sie jetzt styled-components und styled-system zu Ihrem Projekt hinzu. Dies lässt sich folgendermaßen erledigen

Copybash
npm install styled-components styled-system

Module von TeleportHQ verwenden diese beiden Pakete, um Styling und Stilvarianten sowie Design-Tokens in einem Projekt zu definieren. Alle Importe für externe Module verwenden Bare-Module-Spezifizierer. So können Nutzer diese Abhängigkeiten nach Belieben bereitstellen.

Als Nächstes müssen Sie Ihre next.config.jsanpassen. Wir müssen in unserer Alias einen next.config.js einrichten, um die esm -Version von styled-componentszu verwenden. Weitere Informationen zu diesem Schritt finden Sie hier.

Nachdem Sie die Änderungen vorgenommen haben, sollte Ihre next.config.js ungefähr so aussehen.

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

Nun sind Sie startklar. Führen Sie ... aus

Copybash
npm run dev

... und Ihr Projekt sollte unter folgender Adresse erreichbar sein: http://localhost:3000 🚀

Sonstiges#

NextJS erstellt eine next.lock mit allen Modulen, die dynamisch von einem CDN geladen werden, außer den Modulen, die mit Cache-Control: no-cachebereitgestellt werden. Weitere Informationen dazu finden Sie hier.