État de nounou est une petite bibliothèque que j’ai écrite pour faciliter la création d’applications Web basées sur l’état à l’aide de Vanilla JS. C’est similaire à React, mais avec beaucoup moins de frais généraux et une nouvelle syntaxe à apprendre. Il utilise également un seul objet d’état à l’échelle de l’application au lieu que chaque composant individuel ait son propre état. Il a été inspiré par HyperApp et présente de nombreuses similitudes avec Elm.
Dans cet article, je vais expliquer comment fonctionne Nanny State, puis démontrer ce qu’il peut faire avec quelques exemples.
Nanny State utilise un modèle de flux de données à sens unique, composé de 3 parties :
- État – un objet qui stocke toutes les données de l’application
- Voir – une fonction qui renvoie une chaîne HTML basée sur l’état actuel
- Mise à jour – une fonction qui est le seul moyen de changer l’état et de restituer la vue
Dans Nanny State, l’État est tout. L’objet d’état est la seule source de vérité pour votre application – chaque bit de données d’application est une propriété de cet objet. Même les gestionnaires d’événements utilisés dans la vue sont des méthodes de l’objet d’état.
La vue est une représentation de l’état au format HTML. Il change chaque fois que l’état change et permet aux utilisateurs d’interagir avec l’application.
La fonction de mise à jour est le seul moyen de modifier l’état. Il s’agit d’un point d’entrée unique pour la mise à jour de l’état et garantit que les changements sont déterministes, cohérents et prévisibles.
Ces 3 choses sont tout ce dont vous avez besoin pour créer une application dans Nanny State. En fait, cela peut se résumer en se posant les 3 questions suivantes :
- Quelles données dois-je stocker dans mon application ? Cela constituera les propriétés de la
Stateobjet - Comment est-ce que je veux que les données de l’application soient présentées sur la page ? Cela vous aidera à créer le
Viewfonction - Comment les données de l’application changent-elles lorsque l’utilisateur interagit avec ? La
Updatefonction sera nécessaire pour cela
Bonjour Nanny State !
La façon la plus simple de voir comment fonctionne Nanny State est d’écrire du code ! Nous allons commencer par un exemple de base, puis essayer de rendre quelque chose d’un peu plus complexe.
Le moyen le plus simple d’exécuter l’exemple suivant consiste à utiliser un éditeur de code en ligne tel que CodePen, ou vous pouvez l’exécuter localement en installant le nanny-state paquet utilisant NodeJS.
Copiez le code suivant dans la section JS de CodePen :
import { Nanny,html } from 'https://cdn.skypack.dev/nanny-state';
const View = state => html`<h1>Hello ${state.name}</h1>`
const State = {
name: "Nanny State",
View
}
const Update = Nanny(State)
Cela montre comment les 3 parties de Nanny-State fonctionnent ensemble. Examinons de près chaque partie individuellement :
const View = state => html`<h1>Hello ${state.name}</h1>`
L’état de nounou utilise µhtml pour rendre HTML. La View fonction toujours accepte les objets d’état comme son seulement paramètre. Il utilise alors le html fonction fournie par µhtml pour créer du code HTML basé sur le modèle littéral fourni en argument.
L’utilisation d’un modèle littéral signifie que nous pouvons utiliser le ${variable} notation pour insérer les propriétés de l’état dans la vue. Dans cet exemple, nous l’utilisons pour insérer la valeur de name propriété à l’intérieur du <h1> élément.
const State = {
name: "Nanny State",
View
}
La State l’objet est où tout les données de l’application sont stockées. Il inclut toutes les propriétés et valeurs qui seront affichées dans le View et peuvent changer au cours du cycle de vie de l’application, comme le name propriété dans cet exemple.
Remarquerez que View est aussi une propriété du State en utilisant la notation abrégée d’objet. Rappelles toi l’état est tout – chaque partie de l’application est la propriété de l’État.
const Update = Nanny(State)
La dernière ligne définit le Update fonction comme valeur de retour de la Nanny fonction. Cela peut maintenant être utilisé pour mettre à jour la valeur de toutes les propriétés de la State. En fait c’est le seulement façon que toutes les propriétés du State peut être mis à jour. Il effectue également le rendu initial du View sur la base des valeurs fournies dans le State. Cela signifie qu’un en-tête sera affiché indiquant « Hello Nanny State » comme on peut le voir dans le CodePen ci-dessous :
Cet exemple est fondamentalement juste une page statique cependant. Rendons-le dynamique en ajoutant une zone de saisie qui permet à l’utilisateur d’entrer un nom à qui il veut dire bonjour. Mettez à jour le code pour qu’il ressemble à ceci :
import { Nanny,html } from 'https://cdn.skypack.dev/nanny-state';
const View = state => html`<h1>Hello ${state.name}</h1><input oninput=${state.changeName}>`
const changeName = event => Update({name: event.target.value})
const State = {
name: "Nanny State",
changeName,
View
}
const Update = Nanny(State)
Dans cet exemple, nous avons ajouté un <input> élément à la View. Les écouteurs d’événement sont définis en ligne dans la vue, donc dans cet exemple, nous avons un oninput écouteur d’événement attaché au <input> élément. Cela appellera le changeName gestionnaire d’événements, qui est une méthode de l’objet d’état, chaque fois qu’une entrée est détectée. Cet écouteur d’événement doit être défini, alors examinons-le de plus près :
const changeName = event => Update({name: event.target.value})
Il s’agit d’un gestionnaire d’événements standard écrit en Vanilla JS. Il accepte un objet événement comme paramètre comme d’habitude et quand il est appelé, nous voulons mettre à jour le State objet, nous utilisons donc le Update fonction, car c’est la seule façon de mettre à jour la State.
L’argument que nous fournissons au Update function est un objet qui contient toutes les propriétés que nous voulons mettre à jour dans l’état et les nouvelles valeurs respectives. Dans ce cas, nous voulons mettre à jour le name propriété à la valeur qui a été saisie par l’utilisateur dans le champ de saisie, qui fait partie de l’objet d’événement et accessible à l’aide de event.target.value. Cela mettra à jour l’état avec la nouvelle valeur du champ de saisie et restituera instantanément la page. L’utilisation de µhtml pour le rendu signifie que seules les parties du View qui ont réellement changé sont mis à jour. Cela signifie que le nouveau rendu après unState La mise à jour est à la fois efficace et incroyablement rapide.
Et c’est tout – votre première application Nanny State ! Essayez de taper et vous verrez à quelle vitesse il réagit aux entrées de l’utilisateur… et tout cela avec seulement quelques lignes de code. Vous pouvez voir le code dans le CodePen ci-dessous :
Nanny State facilite l’écriture d’applications réactives basées sur l’état. Comme vous pouvez le voir, il n’y a pas beaucoup de code requis pour créer une application dynamique basée sur l’état qui réagit à l’interaction de l’utilisateur. C’est la beauté de Nanny State.
Questionnaire vrai ou faux
Maintenant que nous avons vu un exemple de base, essayons de rendre quelque chose d’un peu plus complexe. Nous utiliserons Nanny State pour créer un jeu-questionnaire Vrai ou Faux. Ouvrez un nouveau stylet sur CodePen et suivez.
On va commencer de la même manière, en important la librairie Nanny State :
import { Nanny,html } from 'https://cdn.skypack.dev/nanny-state'
Ensuite, nous allons créer le State object et remplissez-le avec les valeurs de propriété initiales que le jeu utilisera :
const State = {
score: 0,
index: 0,
questions: [
{question: "A Nanny State is a country where nannies are employed by the state", answer: false},
{question: "Nanny State is also the name of a beer", answer: true},
{question: "Mila Kunis and Ashton Kutcher employ 16 nannies to help raise their children", answer: false},
{question: "The Nanny McPhee films are based on the Nurse Matilda books", answer: true},
{question: "Nanny State uses the µhtml library for rendering", answer: true},
]
}
Cet objet contient 3 propriétés :
score– cela garde une trace du nombre de questions auxquelles le joueur a répondu correctement et commence à 0index– cela garde une trace de la question à laquelle le joueur se trouve et correspond à la dernière propriété qui est laquestionsdéployer.questions– Il s’agit d’un tableau d’objets avecquestionetanswerPropriétés. Laquestionpropriété est une chaîne et laanswerpropriété est un booléen
Maintenant que nous avons créé les données, créons le View pour visualiser ces données :
const View = state => html`
<h1>True or False?</h1>
<h2>Score: ${state.score}</h2>
${state.index < state.questions.length ?
html`<p>${index + 1}) ${state.questions[state.questionNumber].question}</p>
<button onclick=${state.checkAnswer(true)}>TRUE</button>
<button onclick=${state.checkAnswer(false)}>FALSE</button>`
:
html`<h2>Game Over, you scored ${state.score}</h2>`
}`
C’est un peu plus compliqué View que nous avons vu dans l’exemple précédent, mais la plupart devraient être assez explicites. Après l’en-tête du titre, nous affichons la partition à l’aide de la score propriété de la State objet. Ensuite, nous utilisons un opérateur ternaire pour bifurquer la vue. Étant donné que la vue est écrite à l’aide de littéraux de modèle, vous ne pouvez pas utiliser if-else déclarations au code fork, il faut donc utiliser des déclarations ternaires.
Cette instruction ternaire vérifie si questionNumber est inférieure à la longueur du questions array, qui vérifie essentiellement s’il reste encore des questions à répondre. S’il y en a, la question est affichée avec deux boutons, un pour VRAI et un pour FAUX. S’il n’y a plus de questions, nous affichons un message GAME OVER avec le score du joueur.
Une chose à noter lors de la dérivation du code de vue à l’aide d’opérateurs ternaires est que vous devez utiliser le html fonction pour chaque nouvelle fourche.
Les boutons ont tous deux une ligne onclick un écouteur d’événements qui leur est attaché et qui appelle le même gestionnaire d’événements, checkAnswer et accepte un argument soit true ou false selon le bouton sur lequel vous avez appuyé. Écrivons maintenant ce gestionnaire d’événements :
const checkAnswer = answer => event => Update(state => ({
score: answer === state.questions[state.index].answer ? state.score + 1 : state.score,
index: state.index + 1
}))
Ce gestionnaire d’événements accepte un argument supplémentaire de answer aussi bien que event objet que tous les gestionnaires d’événements acceptent, il doit donc être mis au curry en utilisant la notation à double flèche vue ci-dessus. Il appelle le Update fonction qui utilise un opérateur ternaire pour vérifier si la réponse fournie en argument correspond à la réponse à la question courante, si c’est le cas, alors le score la propriété est augmentée de 1, sinon le score reste le même. Il augmente également la valeur de la index propriété, de sorte que la question suivante s’affichera.
Ce gestionnaire d’événements doit maintenant être ajouté au Stateavec le View. Nous pouvons le faire en utilisant la notation abrégée d’objet, tant que checkAnswer et View sont définis avant State:
const State = {
score: 0,
index: 0,
questions: [
{question: "A Nanny State is a country where nannies are employed by the state", answer: false},
{question: "Nanny State is also the name of a beer", answer: true},
{question: "Mila Kunis and Ashton Kutcher employ 16 nannies to help raise their children", answer: false},
{question: "The Nanny McPhee films are based on the Nurse Matilda books", answer: true},
{question: "Nanny State uses the µhtml library for rendering", answer: true},
],
checkAnswer,
View
}
Maintenant que tout fait partie du Stateil ne reste plus qu’à définir Update fonction en appelant le Nanny fonction et fournir State comme argument :
const Update = Nanny(State)
Et c’est tout! Le quiz devrait commencer immédiatement et vous devriez pouvoir répondre à chaque question et le score changera selon que la réponse est bonne ou non. Un autre exemple d’application interactive rapide à créer avec une quantité minimale de code. Essayez de répondre aux questions et voyez comment vous vous en sortez. Vous pouvez voir le code fini dans le CodePen ci-dessous :
Une fois que vous vous êtes amusé à jouer et que vous vous êtes habitué au fonctionnement de Nanny State, voici quelques idées pour étendre le jeu :
- Ajouter d’autres questions
- Ajoutez des boutons « Démarrer » et « Rejouer » pour permettre aux joueurs de rejouer
- Sélectionnez des questions au hasard
- Gardez une trace du score le plus élevé
- Ajouter des questions avec d’autres réponses, sauf vrai ou faux
- Créer un quiz à choix multiples
Nanny State inclut beaucoup plus d’autres avantages tels que la prise en charge intégrée de l’utilisation du stockage et du routage locaux. Voir les docs pour plus d’informations ou contactez-nous si vous avez des questions.
J’aimerais savoir ce que vous pensez de Nanny State. Envisageriez-vous de l’utiliser pour un projet ? Y a-t-il autre chose que vous aimeriez savoir à ce sujet ? Laissez un commentaire dans notre communauté!
Source link