L du pop, qui utilise le composant comme structure de données plutôt que comme graphique. Le nom de ce serveur provient du pool de construction de composants PHP sur lequel il est basé. (je suis lrsquoauteur de ces deux projets.)
Cet article est divisé en cinq Parties pour expliquer ce qursquoest un composant comment un POP fonctionne comment définir un composant dans un POP comment les composants sont naturellement adaptés à la performance de graphql pour résoudre les requêtes graphql en utilisant des composants. 1. Qursquoest ce qursquoun composant? Vous pouvez utiliser des composants pour représenter la disposition de chaque page Web. Les composants ne sont qursquoun ensemble de codes (comme HTML, Javascript et CSS) combinés pour créer une entité autonome qui peut envelopper drsquoautres composants pour créer des structures plus complexes ou qui peut être encapsulée par drsquoautres composants. Chaque composant a un but qui peut être très simple, comme un lien ou un bouton, ou très complexe, comme un carrousel ou un chargeur drsquoimage glisser déposer.
Construire un site à partir de composants est comme jouer au golf. Par exemple, dans la page suivante, des composants simples (liens, boutons, avatars) sont combinés pour créer des structures plus complexes (widgets, sections, barres latérales, menus) jusqursquoà ce que obteniez la page: Une page est un composant qui encapsule un composant, comme indiqué dans une boîte. Le composant peut être implémenté dans nrsquoimporte quelle langue du côté client (comme les bibliothèques JS vue et React, ou les bibliothèques de composants CSS Bootstrap et Material ui) ou du côté serveur. Comment le pop fonctionne le pop décrit une architecture basée sur un modèle de composant côté serveur et est implémenté en PHP via une bibliothèque de modèle de composant.
Dans les sections suivantes, les termes « composant » et « module » sont utilisés de façon interchangeable. Emballage hiérarchique des composants
« du module supérieur au dernier niveau, on srsquoappelle la hiérarchie des composants. Cette relation peut être représentée par un tableau associatif côté serveur (Key = gt attribut Array) dans lequel chaque module déclare son nom comme attribut clé et son module interne sous lrsquoattribut
La hiérarchie des composants est similaire à: $componenthierarchy =
« niveau du module 11» = gt
« module» = gt []
],
« niveau du module 12» = gt
« niveau du module 121» = gt
« module» = gt []
[1]
[1]
[1]
[1]
],
« niveau du module 21» = gt
« module» = gt []
[1]
[1]
[1]
[1]
[1]
[1]
La relation entre les modules est strictement définie de haut en bas: un module encapsule drsquoautres modules, sait qui ils sont, mais ne sait pas et ne se soucie pas de savoir quels modules lrsquoencapsulent.
Par exemple, dans la hiérarchie des composants ci dessus, le module « module niveau 1» sait comment emballer les modules « module niveau 11» et « module niveau 12», et il sait également comment emballer « module niveau 121» pendant la transmission Mais module Level 11 ne se soucie pas de qui lemballe, donc il ne sait pas module Level 1. En utilisant une structure basée sur les composants, nous avons ajouté les informations réelles requises pour chaque module, qui sont divisées en paramètres (tels que les valeurs de configuration et drsquoautres attributs) et données (tels que les ID drsquoobjet de base de données interrogés et drsquoautres attributs) et placées en conséquence sous les entrées de configuration de module et de configuration de module:
$Component Hierarchy Data =
Un objet commun (comme deux articles du même auteur). En drsquoautres termes, les données drsquoun objet de base de données sont normalisées. La structure est un dictionnaire organisé drsquoabord sous chaque type drsquoobjet, puis sous lrsquoid de lrsquoobjet, à partir duquel nous pouvons obtenir les propriétés de lrsquoobjet: $componenthierarchydata =
Je
« base de données» = gt
Je
],
Je
],
Je
[1]
[1]
Par exemple, lrsquoobjet sous jacent contient une hiérarchie de composants qui contient deux modules, page = gt post feed, où le module post feed récupère les billets de blog. Veuillez noter ce qui suit:
Chaque module sait quel objet est interrogé par la propriété dbobjectid (les ID du billet de blog sont 4 et 9). Chaque module connaît le type drsquoobjet de lrsquoobjet interrogé par la propriété dbkeys (les données de chaque billet sont sous
« données du module» = gt
« par» = gt
« feed back» = gt
[1]
[1]
[1]
],
« par» = gt
« feed back» = gt
lsquoidrsquo = gt
« auteur» = gt « utilisateur»
[1]
[1]
[1]
[1]
],
« base de données» = gt
lsquopostrsquo = gt
4 = gt
« title» = gt « Hello, the world! »,
],
9 = gt
« en tête» = gt « est ce que tout va bien? »,
[1]
],
« utilisateur» = gt
7 = gt
« nom» = gt « leo»
[1]
[1]
[1]
[1]
Chargement des données lorsque le formulaire affiche des propriétés dans un objet de base de données, le formulaire peut ne pas être au courant.
Et sera soumis à un nouveau champ: lrsquoattribut
Const post _ Widget Home = lsquopost width
Auteur: Classe abstraite postwidgetlayoutabstractmoduleprocessor extension abstractmoduleprocessor
{Y}
Fonction getsubmodules ($modules): Tableau
{Y}
$ret =
$this gt getcontentmodule ($Module),
G)
($Thumbnail _ module = $this gt getthumbnailmodule ($Module))
{Y}
$ret [] = $Thumbnail _ module
}
($aftercontent _ modules = $this gt getaftercontentmodules ($Module))
{Y}
$ret = array _ merge
$Oui,
$aftercontent _ module
)
}
Renvoie $RET
}
Fonction de protection abstraite getcontentmodule ($Module): Tableau
Fonction protégée getthumbnailmodule ($Module):? Beaucoup.
{Y}
Par défaut (réécrit)
Retourner [Self:: class, self:: Thumbnail _ Layout]
}
Fonctions protégées getaftercontentmodules ($modules): tableaux
{Y}
Renvoie []
}
Fonction getimmutableconfiguration ($module, amp $props): Tableau
{Y}
Retour
« Description» = gt $this gt getdescription (),
G)
}
Fonction protégée getdescription ($Module): chaîne
{Y}
Renvoie »
}
}
La classe moduleprocessor personnalise ensuite le moduleprocessor pour étendre la classe abstraite et définir ses propres propriétés: la classe postlayoutmoduleprocessor étend abstractpostlayoutmoduleprocessor {
Const post _ Context = lsquopublish contentrsquo
Const post _ extract = lsquopost Extractrsquo
Const post _ Thumbnail large = lsquoPost thumbnail LARGErsquo
Const post _ Thumbnail medium = lsquoPost thumbnail Mediumrsquo
Const post _ share = lsquopost sharersquo
Fonction getsubmodulestoprocess () {
Retour
Self:: Post _ content,
Self:: Post _ Extract,
Self:: Post _ Thumbnail page,
Self:: Post _ Thumbnail Medium,
Self:: Post _ Share,
G)
}
}
Classe postwidgetlayoutmoduleprocessor Extended Abstract postwidgetlayoutmoduleprocessor
{Y}
Fonction protégée getcontentmodule ($Module):? Beaucoup.
{Y}
Commutateur ($module [1])
{Y}
Case self:: Post _ Widget Homepage page:
Retour
Postlayoutmoduleprocessor:: class,
Postlayoutmodule Processor:: Post _ content
G)
Case self:: Post _ Widget Homepage Medium:
Case self:: Post _ Widget Homepage Small:
Retour
Postlayoutmoduleprocessor:: class,
Postlayoutmodule Processor:: Post _ Extract
G)
}
Renvoie le parent:: getcontentmodule ($Module)
}
Fonction protégée getthumbnailmodule ($Module):? Beaucoup.
{Y}
Commutateur ($module [1])
{Y}
Case self:: Post _ Widget Homepage page:
Retour
Postlayoutmoduleprocessor:: class,
Postlayoutmodule Processor:: Post _ Thumbnail Page
G)
Case self:: Post _ Widget Homepage Medium:
Retour
Postlayoutmoduleprocessor:: class,
Postlayoutmodule Processor:: Post _ Thumbnail Medium
G)
}
Renvoie le parent:: getthumbnailmodule ($Module)
}
Fonctions protégées getaftercontentmodules ($modules): tableaux
{Y}
$ret = []
Commutateur ($module [1])
{Y}
Case self:: Post _ Widget Homepage page:
$Right [] =
Postlayoutmoduleprocessor:: class,
Postlayoutmodule Processor:: Post _ Share
G)
Casse toi.
}
Renvoie $RET
}
Fonction protégée getdescription ($Module): chaîne
{Y}
Retour (lsquoce sont mes billets de blog,rsquo mon nom de domaine lsquo)
}
}
Comment les composants srsquoadaptent naturellement au modèle de composants graphql permet naturellement de cartographier les requêtes graphql en forme drsquoarbre, ce qui en fait lrsquoarchitecture idéale pour déployer un serveur graphql. Le graphql de POP implémente la classe moduleprocessor nécessaire pour convertir une requête graphql en une hiérarchie de composants appropriée et lrsquoanalyser à lrsquoaide du moteur de chargement de données POP. Crsquoest pourquoi et comment cette solution fonctionne. Mapping client components to graphql Queries les requêtes graphql peuvent être représentées en utilisant la hiérarchie des composants POP, où chaque type drsquoobjet représente un composant et chaque champ de relation drsquoun type drsquoobjet à un autre représente un composant qui peut être représenté par la hiérarchie des composants POP.
Et encapsule un autre composant. Prenons un exemple pour comprendre la situation. Supposons que nous construisions le Widget suivant
Pays: {pays}
{foreach Films as films}
♪ foreach ♪
gt
Titre: {Titre}
Image: {vignettes}
{foreach actors as actors}
♪ foreach ♪
gt
Nom: {name}
Photo: {Avatar}
lt! Component:
Ensuite, nous déterminons quelles données sont nécessaires pour chaque composante. Pour
Il nous faut des noms, des avatars et des pays. Pour Il nous faut des vignettes et des titres. Pour
Nous avons besoin de noms et de portraits: lt! Component: Identifier les propriétés des données de chaque composant et construire une requête graphql pour récupérer les données demandées: requête {
Répertoire des fonctions
Nom
Pays
Avatar
Film
Titre
Vignettes
Acteur
Nom
Avatar
}
}
}
}
Comme pouvez le voir, il existe une relation directe entre la forme de la hiérarchie des composants et la requête graphql. En fait, les requêtes graphql peuvent également être considérées comme une hiérarchie représentant les composants. Résoudre une requête graphql en utilisant des composants côté serveur parce qursquoune requête graphql a la même forme que la hiérarchie des composants, POP convertit la requête en sa hiérarchie équivalente des composants, lrsquoanalyse en utilisant sa méthode de récupération des données des composants, et enfin recréer la forme de la requête pour envoyer des données en réponse. Voyons comment ça marche. Pour traiter les données, POP convertit le type graphql en composant:
=gt Manager =gt Film
=gt Participants et utilisation du document sur les exigences opérationnelles
Lorsqursquoils apparaissent dans la requête, POP crée une hiérarchie de composants virtuels avec les mêmes éléments: le composant racine du réalisateur, qui entoure le composant film, et le composant acteur. À partir de maintenant, il nrsquoy a aucune différence à parler de type graphql ou de composant POP. Pour charger leurs données, POP les traite en itérations, récupérant chaque type de données objet dans ses itérations comme suit: lt! Component: Le moteur de chargement de données POP de type dans lrsquoitération de gestion implémente le pseudo algorithme suivant pour charger les données: Préparation: utiliser une file drsquoattente vide pour stocker la liste drsquoidentification des objets à récupérer de la base de données, Organiser par type (chaque entrée sera: [type = gt Liste drsquoidentification]) pour récupérer lrsquoid de lrsquoobjet de répertoire de premier plan et lrsquoentrer dans la file drsquoattente sous la boucle du Contrôleur de type jusqursquoà ce qursquoil nrsquoy ait plus drsquoentrées dans la file drsquoattente: obtenir la première entrée de la file drsquoattente: le type et la liste drsquoid (par exemple, le Contrôleur et [2]), Et supprimer cette entrée de la file drsquoattente pour lancer une seule requête de base de données pour récupérer tous les objets de ce type en utilisant ces ID, si le type a des champs relationnels (par exemple, le type de réalisateur a des films de champ relationnel de type film), Tous les id de ces champs sont ensuite recueillis à partir de tous les objets récupérés dans lrsquoitération courante (par exemple, tous les ID dans les films de champ dans tous les objets de type réalisateur) et placés dans une file drsquoattente sous le type approprié (par exemple: ID [3, 8] sous le type de fichier). À la fin de lrsquoitération, nous chargerons tous les types de données objet comme suit:
Gérer les types dans une itération notez comment tous les identifiants drsquoun type sont recueillis avant qursquoil ne soit traité dans une file drsquoattente. Par exemple, si nous ajoutons les champs de relation préférés des acteurs au type de directeur, ces ID sont ajoutés à la file drsquoattente sous le type drsquoacteur et traités avec lrsquoID des acteurs du champ de type de fichier:
Cependant, si
Po a été traité, donc nous devons charger plus de données de ce type, et crsquoest la nouvelle itération sur ce type. Par exemple, lorsque ajoutez un champ de relation de directeur préféré au type drsquoauteur, le type de Contrôleur est ajouté à nouveau à la file drsquoattente: Lrsquoitération sur le type de répétition Notez également que nous pouvons utiliser le mécanisme de cache ici: dans la deuxième itération du type de contrôleur, lrsquoobjet avec ID 2 nrsquoest plus récupéré parce qursquoil a été récupéré dans la première itération, de sorte qursquoil peut être récupéré à partir du cache. Maintenant que nous avons récupéré les données de tous les objets, nous devons les modéliser dans la réponse attendue pour refléter la requête graphql. Actuellement, les données sont organisées en une base de données relationnelle: tableaux par type contrôleur: Nom du pays ID Avatar film 2. George Lucas États Unis d amp apos Amérique
| Tableau (par type de film): | Titre de la vignette de lrsquoacteur id | 3. | La menace des Wraith | ||||||||||||||||||||||||
| 8. | Attaques de Clones | Episode 2. Jpg | [6, 7] | ||||||||
| Nom de lrsquoAvatar id | 4. | Ivan McGregor | |||||||||
| Portman | Portman. Jpg | ||||
| Hayden Christensen | Christensen. Jpg | À ce stade, le pop organise toutes les données sous forme de tableaux, car chaque type se réfère à drsquoautres types (c. à d. Le réalisateur fait référence au film par lrsquointermédiaire du domaine cinématographique et le film fait référence à lrsquoacteur par lrsquointermédiaire du domaine cinématographique). Ensuite, en itérant la hiérarchie des composants à partir de la racine, en naviguant dans les relations et en récupérant les correspondances à partir de la table des relations, POP génère un arbre à partir de la requête graphql: | |||
