Notez que vous consultez actuellement la documentation de Looker. Pour accéder à la documentation sur Looker Studio, consultez la page https://support.google.com/looker-studio.

Cette page a été traduite par l'API Cloud Translation.

Exemples de code du framework d'extension React et JavaScript

Cette page fournit des exemples de code écrits dans React et JavaScript pour les fonctions courantes que vous pouvez utiliser dans vos extensions.

Utiliser le SDK d'extension Looker

Les extensions doivent établir une connexion avec l'hôte Looker. Dans React, cela se fait en encapsulant l'extension dans un composant ExtensionProvider40. Ce composant établit une connexion avec l'hôte Looker et met le SDK de l'extension Looker et le SDK Looker disponibles pour l'extension.

import React from 'react'
import { ExtensionProvider40 } from '@looker/extension-sdk-react'
import { DemoCoreSDK } from './DemoCoreSDK'


export const App = () => {
 return (
   <ExtensionProvider40 chattyTimeout={-1}>
     <DemoCoreSDK />
   </ExtensionProvider40>
 )
}

Informations sur les fournisseurs d'extensions

Les fournisseurs d'extensions exposent le SDK d'extension Looker et l'API du SDK aux extensions. Différentes versions du fournisseur d'extensions ont été créées depuis la création du framework d'extension. Cette section décrit l'historique des fournisseurs d'extensions et explique pourquoi ExtensionProvider40 est le fournisseur recommandé.

ExtensionProvider a été le premier fournisseur d'extensions, qui présentait les SDK Looker, versions 3.1 et 4.0. L'inconvénient était que l'inclusion des deux SDK augmentait la taille du bundle de production final.

ExtensionProvider2 a été créé. Il a été créé, car il n'était pas logique pour une extension d'utiliser les deux SDK et de forcer le développeur à choisir l'un ou l'autre. Malheureusement, en conséquence, les deux SDK étaient encore inclus dans la taille du bundle de production final.

ExtensionProvider40 a été créé lorsque le SDK 4.0 est passé en disponibilité générale. L'avantage de ExtensionProvider40 est que le développeur n'a pas à choisir le SDK à utiliser, car le SDK 4.0 est la seule version disponible. Comme le SDK 3.1 n'est pas inclus dans le bundle final, cela permet de réduire la taille du bundle.

Pour ajouter des fonctions à partir du SDK d'extension Looker, vous devez d'abord obtenir une référence au SDK, qui peut être effectuée auprès du fournisseur ou à l'échelle mondiale. Vous pouvez ensuite appeler des fonctions du SDK comme vous le feriez dans n'importe quelle application JavaScript.

Pour accéder au SDK à partir du fournisseur, procédez comme suit:

  import { ExtensionContext40 } from '@looker/extension-sdk-react'

  export const Comp1 = () => {
    const extensionContext = useContext(
      ExtensionContext40
    )
    const { extensionSDK, coreSDK } = extensionContext

Pour accéder au SDK de manière globale (l'extension doit être initialisée avant son appel), procédez comme suit:

    const coreSDK = getCoreSDK()

Vous pouvez maintenant utiliser le SDK comme dans n'importe quelle application JavaScript:

  const GetLooks = async () => {
    try {
      const looks = await sdk.ok(sdk.all_looks('id'))
      // process looks
      . . .
    } catch (error) {
      // do error handling
      . . .
    }
}

Naviguer vers un autre emplacement de l'instance Looker

Étant donné que l'extension s'exécute dans un iFrame en bac à sable, vous ne pouvez pas naviguer ailleurs dans l'instance Looker en mettant à jour l'objet window.location du parent. Il est possible de naviguer à l'aide du SDK d'extension Looker.

Cette fonction nécessite le droit d'accès navigation.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .

  extensionSDK.updateLocation('/browse')

Ouverture d'une nouvelle fenêtre de navigateur

Étant donné que l'extension s'exécute dans un iFrame en bac à sable, vous ne pouvez pas utiliser la fenêtre parent pour ouvrir une nouvelle fenêtre de navigateur. Vous pouvez ouvrir une fenêtre de navigateur à l'aide du SDK de l'extension Looker.

Cette fonction requiert le droit new_window pour ouvrir une nouvelle fenêtre vers un emplacement de l'instance Looker actuelle, ou le droit new_window_external_urls pour ouvrir une nouvelle fenêtre s'exécutant sur un hôte différent.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .
  extensionSDK.openBrowserWindow('/browse', '_blank')
. . .
  extensionSDK.openBrowserWindow('https://docs.looker.com/reference/manifest-params/application#entitlements', '_blank')

Routage et liens profonds

Les informations suivantes s'appliquent aux extensions basées sur React.

Les composants ExtensionProvider, ExtensionProvider2 et ExtensionProvider40 créent automatiquement un routeur React appelé MemoryRouter que vous pouvez utiliser. N'essayez pas de créer un BrowserRouter, car il ne fonctionne pas dans les iFrames en bac à sable. N'essayez pas de créer un HashRouter, car il ne fonctionne pas dans les iFrames en bac à sable de la version non Chromium du navigateur Microsoft Edge.

Si vous utilisez MemoryRouter et que vous utilisez react-router dans votre extension, le framework d'extension synchronise automatiquement le routeur de votre extension avec le routeur hôte Looker. Cela signifie que l'extension est informée des clics sur les boutons "Précédent" et "Suivant" du navigateur, ainsi que de l'itinéraire actuel lorsque la page est actualisée. Cela signifie également que l'extension doit automatiquement prendre en charge les liens profonds. Consultez les exemples d'extensions pour savoir comment utiliser react-router.

Données de contexte des extensions

Les données de contexte du framework d'extension ne doivent pas être confondues avec les contextes React.

Les extensions peuvent partager des données contextuelles entre tous les utilisateurs d'une extension. Les données contextuelles peuvent être utilisées pour les données qui ne changent pas fréquemment et qui ne présentent pas d'exigences de sécurité spécifiques. Soyez prudent lors de l'écriture des données, car il n'y a pas de verrouillage des données et la dernière écriture l'emporte. Les données contextuelles sont disponibles pour l'extension dès son démarrage. Le SDK d'extension Looker fournit des fonctions permettant de mettre à jour et d'actualiser les données contextuelles.

La taille maximale des données de contexte est d'environ 16 Mo. Les données de contexte seront sérialisées en une chaîne JSON. Vous devez donc également en tenir compte si vous utilisez des données contextuelles pour votre extension.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .

  // Get loaded context data. This will reflect any updates that have
  // been made by saveContextData.
  let context = await extensionSDK.getContextData()

. . .

  // Save context data to Looker server.
  context = await extensionSDK.saveContextData(context)

. . .

  // Refresh context data from Looker server.
  context = await extensionSDK.refreshContextData()

Attributs utilisateur

Le SDK d'extension Looker fournit une API permettant d'accéder aux attributs utilisateur de Looker. Il existe deux types d'accès aux attributs utilisateur:

Avec champ d'application : associé à l'extension. Un attribut utilisateur limité est associé à un espace de noms pour l'extension, et l'attribut utilisateur doit être défini dans l'instance Looker avant de pouvoir être utilisé. Pour définir l'espace de noms d'un attribut utilisateur, faites précéder le nom de l'attribut du nom de l'extension. Dans le nom d'une extension, les tirets et les caractères "::" doivent être remplacés par un trait de soulignement, car les tirets et les deux-points ne peuvent pas être utilisés dans les noms d'attributs utilisateur.

Par exemple, vous devez définir le nom d'attribut utilisateur my_extension_my_extension_my_value d'un attribut utilisateur limité nommé my_value et dont l'ID d'extension est my-extension::my-extension. Une fois défini, l'attribut utilisateur peut être lu et mis à jour par l'extension.
Global : ces attributs utilisateur globaux sont en lecture seule. L'attribut utilisateur locale en est un exemple.

Voici une liste d'appels d'API avec attributs utilisateur:

userAttributeGetItem : lit un attribut utilisateur. Une valeur par défaut peut être définie. Elle sera utilisée si aucune valeur d'attribut utilisateur n'existe pour l'utilisateur.
userAttributeSetItem : enregistre un attribut utilisateur pour l'utilisateur actuel. Échec pour les attributs utilisateur globaux. Seul l'utilisateur actuel peut voir la valeur enregistrée.
userAttributeResetItem : rétablit la valeur par défaut d'un attribut de l'utilisateur actuel. Échec pour les attributs utilisateur globaux.

Pour accéder aux attributs utilisateur, vous devez spécifier les noms d'attributs dans les droits d'accès global_user_attributes et/ou scoped_user_attributes. Par exemple, dans le fichier manifeste du projet LookML, vous pourriez ajouter:

  entitlements: {
    scoped_user_attributes: ["my_value"]
    global_user_attributes: ["locale"]
  }

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

  // Read global user attribute
  const locale = await extensionSDK.userAttributeGetItem('locale')

  // Read scoped user attribute
  const value = await extensionSDK.userAttributeGetItem('my_value')

  // Update scoped user attribute
  const value = await extensionSDK.userAttributeSetItem('my_value', 'abcd1234')

  // Reset scoped user attribute
  const value = await extensionSDK.userAttributeResetItem('my_value')

Stockage en local

Les iFrames en bac à sable n'autorisent pas l'accès au stockage local du navigateur. Le SDK d'extension Looker permet à une extension de lire et d'écrire dans l'espace de stockage local de la fenêtre parent. Le stockage local est associé à l'extension, ce qui signifie qu'il ne peut pas lire le stockage local créé par la fenêtre parente ou par d'autres extensions.

L'utilisation du stockage local nécessite le droit d'accès local_storage.

L'API d'extension localhost est asynchrone par opposition à l'API de stockage local du navigateur synchrone.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

  // Read from local storage
  const value = await extensionSDK.localStorageGetItem('my_storage')

  // Write to local storage
  await extensionSDK.localStorageSetItem('my_storage', 'abcedefh')

  // Delete item from local storage
  await extensionSDK.localStorageRemoveItem('my_storage')

Modifier le titre de la page

Les extensions peuvent modifier le titre actuel de la page. Aucun droit d'accès n'est requis pour effectuer cette action.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

  extensionSDK.updateTitle('My Extension Title')

Écrire dans le presse-papiers du système

Les iFrames en bac à sable ne permettent pas l'accès au presse-papiers du système. Le SDK d'extension Looker permet à une extension d'écrire du texte dans le presse-papiers du système. Pour des raisons de sécurité, l'extension n'est pas autorisée à lire le contenu du presse-papiers du système.

Pour écrire dans le presse-papiers du système, vous devez disposer du droit d'accès use_clipboard.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

    // Write to system clipboard
    try {
      await extensionSDK.clipboardWrite(
        'My interesting information'
      )
      . . .
    } catch (error) {
      . . .
    }

Incorporation de tableaux de bord, de Looks et d'explorations

Le framework d'extension est compatible avec l'intégration de tableaux de bord, de Looks et d'explorations.

Le droit d'accès use_embeds est requis. Nous vous recommandons d'utiliser le SDK d'intégration JavaScript de Looker pour intégrer du contenu. Pour en savoir plus, consultez la documentation du SDK Embed.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .

  const canceller = (event: any) => {
    return { cancel: !event.modal }
  }

  const updateRunButton = (running: boolean) => {
    setRunning(running)
  }

  const setupDashboard = (dashboard: LookerEmbedDashboard) => {
    setDashboard(dashboard)
  }

  const embedCtrRef = useCallback(
    (el) => {
      const hostUrl = extensionContext?.extensionSDK?.lookerHostData?.hostUrl
      if (el && hostUrl) {
        el.innerHTML = ''
        LookerEmbedSDK.init(hostUrl)
        const db = LookerEmbedSDK.createDashboardWithId(id as number)
          .withNext()
          .appendTo(el)
          .on('dashboard:loaded', updateRunButton.bind(null, false))
          .on('dashboard:run:start', updateRunButton.bind(null, true))
          .on('dashboard:run:complete', updateRunButton.bind(null, false))
          .on('drillmenu:click', canceller)
          .on('drillmodal:explore', canceller)
          .on('dashboard:tile:explore', canceller)
          .on('dashboard:tile:view', canceller)
          .build()
          .connect()
          .then(setupDashboard)
          .catch((error: Error) => {
            console.error('Connection error', error)
          })
      }
    },
    []
  )

  return (&#60;EmbedContainer ref={embedCtrRef} /&#62;)

Les exemples d'extensions utilisent des composants stylisés pour appliquer un style simple au iFrame généré. Exemple :

import styled from "styled-components"

export const EmbedContainer = styled.div`
  width: 100%;
  height: 95vh;
  & > iframe {
    width: 100%;
    height: 100%;
  }

Accéder à des points de terminaison d'API externes

Le framework d'extension propose deux méthodes pour accéder aux points de terminaison externes d'une API:

Le serveur proxy : accède au point de terminaison via le serveur Looker. Ce mécanisme permet au serveur Looker de définir de manière sécurisée les ID client et les clés secrètes.
Proxy de récupération : accède au point de terminaison depuis le navigateur de l'utilisateur. Le proxy est l'interface utilisateur de Looker.

Dans les deux cas, vous devez spécifier le point de terminaison de l'API externe dans le droit d'accès external_api_urls de l'extension.

Proxy de serveur

L'exemple suivant illustre l'utilisation du serveur proxy pour obtenir un jeton d'accès qui sera utilisé par le proxy de récupération. L'identifiant et le code secret du client doivent être définis en tant qu'attributs utilisateur pour l'extension. En règle générale, lorsque l'attribut utilisateur est configuré, la valeur par défaut est définie sur l'ID client ou le code secret.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .
  const requestBody = {
    client_id: extensionSDK.createSecretKeyTag('my_client_id'),
    client_secret: extensionSDK.createSecretKeyTag('my_client_secret'),
  },
  try {
    const response = await extensionSDK.serverProxy(
      'https://myaccesstokenserver.com/access_token',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(requestBody),
      }
    )
    const { access_token, expiry_date } = response.body
. . .
  } catch (error) {
    // Error handling
    . . .
  }

Le nom de l'attribut utilisateur doit être mappé sur l'extension. Les tirets doivent être remplacés par des traits de soulignement, et les caractères :: doivent être remplacés par un seul trait de soulignement.

Par exemple, si le nom de votre extension est my-extension::my-extension, les attributs utilisateur qui doivent être définis pour l'exemple précédent sont les suivants:

my_extension_my_extension_my_client_id
my_extension_my_extension_'my_client_secret'

Extraire le proxy

L'exemple suivant illustre l'utilisation du proxy de récupération. Il utilise le jeton d'accès de l'exemple de proxy de serveur précédent.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .

  try {
    const response = await extensionSDK.fetchProxy(
      'https://myaccesstokenserver.com/myendpoint',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${accessToken}`,
        },
        body: JSON.stringify({
          some_value: someValue,
          another_value: anotherValue,
        }),
      }
    )
    // Handle success

. . .

  } catch (error) {
    // Handle failure

. . .

  }

Intégration OAuth

Le framework d'extension est compatible avec l'intégration des fournisseurs OAuth. OAuth permet d'obtenir un jeton d'accès permettant d'accéder à une ressource particulière, par exemple un document Google Sheets.

Vous devrez spécifier le point de terminaison du serveur OAuth dans le droit d'accès extension oauth2_urls. Vous devrez peut-être également spécifier des URL supplémentaires dans le droit d'accès external_api_urls.

Les frameworks d'extension acceptent les flux suivants:

Flux implicite
Type d'attribution avec clé secrète pour le code d'autorisation
Défi et vérificateur de code PKCE

En général, une fenêtre enfant s'ouvre et charge une page de serveur OAuth. Le serveur OAuth authentifie l'utilisateur et le redirige vers le serveur Looker avec des informations supplémentaires pouvant être utilisées pour obtenir un jeton d'accès.

Flux implicite:

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .

    const response = await extensionSDK.oauth2Authenticate(
      'https://accounts.google.com/o/oauth2/v2/auth',
      {
        client_id: GOOGLE_CLIENT_ID!,
        scope: GOOGLE_SCOPES,
        response_type: 'token',
      }
    )
    const { access_token, expires_in } = response

Type d'attribution du code d'autorisation avec la clé secrète:

  const authenticateParameters: Record&#60;string, string&#62; = {
    client_id: GITHUB_CLIENT_ID!,
    response_type: 'code',
  }
  const response = await extensionSDK.oauth2Authenticate(
    'https://github.com/login/oauth/authorize',
    authenticateParameters,
   'GET'
  )
  const exchangeParameters: Record&#60;string, string&#62; = {
    client_id: GITHUB_CLIENT_ID!,
    code: response.code,
    client_secret: extensionSDK.createSecretKeyTag('github_secret_key'),
  }
  const codeExchangeResponse = await extensionSDK.oauth2ExchangeCodeForToken(
    'https://github.com/login/oauth/access_token',
    exchangeParameters
  )
  const { access_token, error_description } = codeExchangeResponse

Défi et vérificateur de code PKCE:

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .

  const authRequest: Record&#60;string, string&#62; = {
    client_id: AUTH0_CLIENT_ID!,
    response_type: 'code',
    scope: AUTH0_SCOPES,
    code_challenge_method:  'S256',
  }
  const response = await extensionSDK.oauth2Authenticate(
    'https://sampleoauthserver.com/authorize',
    authRequest,
    'GET'
  )
  const exchangeRequest: Record&#60;string, string&#62; = {
    grant_type: 'authorization_code',
    client_id: AUTH0_CLIENT_ID!,
    code: response.code,
  }
  const codeExchangeResponse = await extensionSDK.oauth2ExchangeCodeForToken(
    'https://sampleoauthserver.com/login/oauth/token',
    exchangeRequest
  )
  const { access_token, expires_in } = codeExchangeResponse

Spartiate

Le terme "spartan" désigne une méthode qui consiste à utiliser l'instance Looker en tant qu'environnement pour exposer des extensions seulement à un ensemble désigné d'utilisateurs. Un utilisateur sobre qui accède à une instance Looker verra s'afficher le flux de connexion configuré par l'administrateur Looker. Une fois l'utilisateur authentifié, une extension lui est présentée en fonction de son attribut utilisateur landing_page, comme illustré ci-dessous. L'utilisateur peut uniquement accéder aux extensions ; il ne peut accéder à aucune autre partie de Looker. Si l'utilisateur a accès à plusieurs extensions, les extensions déterminent sa capacité à accéder aux autres extensions à l'aide de extensionSDK.updateLocation. Une méthode spécifique du SDK d'extension Looker permet à l'utilisateur de se déconnecter de l'instance Looker.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .
  // Navigate to another extension
  extensionSDK.updateLocation('/spartan/another::extension')

. . .
  // Logout
  extensionSDK.spartanLogout()

Définir des utilisateurs spartiates

Pour définir un utilisateur spartiate, vous devez créer un groupe nommé "Extensions uniquement".

Une fois le groupe "Extensions uniquement" créé, accédez à la page Attributs utilisateur dans la section Admin de Looker et modifiez l'attribut utilisateur landing_page. Sélectionnez l'onglet Valeurs du groupe et ajoutez le groupe "Extensions uniquement". La valeur doit être définie sur /spartan/my_extension::my_extension/, où my_extension::my_extension est l'ID de votre extension. Lorsque cet utilisateur se connectera, il sera redirigé vers l'extension désignée.

Fractionnement du code

Dans la technique de division du code, le code n'est demandé que lorsqu'il est nécessaire. Généralement, les blocs de code sont associés aux routes React où chaque route obtient son propre bloc de code. Dans React, cette opération s'effectue à l'aide des composants Suspense et React.lazy. Le composant Suspense affiche un composant de remplacement pendant le chargement du bloc de code. React.lazy est responsable du chargement du bloc de code.

Configuration de la division du code:

import { AsyncComp1 as Comp1 } from './Comp1.async'
import { AsyncComp1 as Comp2 } from './Comp2.async'

. . .

                <Suspense fallback={<div>Loading...</div>}>
                  <Switch>
                      <Route path="/comp1">
                        <Comp1 />
                      </Route>
                      <Route path="/comp2">
                        <Comp2 />
                      </Route>
                  </Switch>
                <Suspense>

Le composant à chargement différé est implémenté comme suit:

import { lazy } from 'react'

const Comp1 = lazy(
 async () => import(/* webpackChunkName: "comp1" */ './Comp1')
)

export const AsyncComp1 = () => &#60;Home />

Le composant est implémenté comme suit. Le composant doit être exporté en tant que composant par défaut:

const Comp1 = () => {
  return (
    &#60;div&#62;Hello World&#60;/div&#62;
  )
}

export default Comp1

Tremblements d'arbres

Bien que les SDK Looker prennent actuellement en charge le tree shaking, cette fonction doit encore être améliorée. Nous modifions continuellement nos SDK afin d'améliorer la compatibilité avec le tree shaking. Certaines de ces modifications peuvent nécessiter de refactoriser votre code pour en profiter, mais lorsque cela sera nécessaire, cela sera documenté dans les notes de version.

Pour utiliser le tree shaking, le module que vous utilisez doit être exporté en tant qu'esmodule, et les fonctions que vous importez doivent être exemptes d'effets secondaires. Le SDK Looker pour TypeScript/JavaScript, la bibliothèque d'exécution du SDK Looker, les composants d'UI Looker, le SDK d'extension Looker et le SDK d'extension pour React répondent tous à ces exigences.

Dans une extension, utilisez le SDK Looker 4.0, et le composant ExtensionProvider2 ou ExtensionProvider40 de l'extension de SDK pour React.

Le code suivant configure le fournisseur d'extensions. Vous devrez indiquer au fournisseur quel SDK vous souhaitez:

import { MyExtension } from './MyExtension'
import { ExtensionProvider40 } from '@looker/extension-sdk-react'
import { Looker40SDK } from '@looker/sdk/lib/4.0/methods'
import { hot } from 'react-hot-loader/root'

export const App = hot(() => {

  return (
    &#60;ExtensionProvider2 type={Looker40SDK}&#62;
      &#60;MyExtension /&#62;
    &#60;/ExtensionProvider2&#62;
  )
})

N'utilisez pas le style d'importation suivant dans votre extension:

import * as lookerComponents from `@looker/components`

L'exemple précédent montre tous les éléments du module. Importez uniquement les composants dont vous avez réellement besoin. Exemple :

import { Paragraph }  from `@looker/components`

Glossaire

Fractionnement de code : technique de chargement différé de JavaScript jusqu'à ce que cela soit réellement nécessaire. Idéalement, le groupe JavaScript initialement chargé doit être aussi petit que possible. Pour ce faire, vous pouvez diviser le code. Les fonctionnalités qui ne sont pas requises immédiatement ne sont pas chargées tant qu'elles ne sont pas réellement nécessaires.
IDE : environnement de développement intégré Éditeur utilisé pour créer et modifier une extension. Visual Studio Code, Intellij et WebStorm sont des exemples.
Scène : il s'agit généralement d'une page vue dans Looker. Les scènes correspondent aux principaux itinéraires. Parfois, une scène contient des scènes enfants qui correspondent à des itinéraires secondaires dans l'itinéraire principal.
Transpilation : processus qui consiste à prendre un code source écrit dans un langage et à le transformer en un autre langage présentant un niveau d'abstraction similaire. Par exemple, TypeScript vers JavaScript.