L’auteur a sélectionné Mozilla Foundation pour recevoir un don dans le cadre du programme Write for DOnations .
introduction
Reactive Programming est un paradigme concernant les «flux de données asynchrones», dans lequel le modèle de programmation considère que tout est un flux de données étalé dans le temps. Cela comprend les frappes au clavier, les requêtes HTTP, les fichiers à imprimer et même les éléments d’un tableau, que l’on peut considérer comme cadencés sur de très courts intervalles. Cela en fait un ajustement parfait pour JavaScript, car les données asynchrones sont courantes dans le langage.
RxJS est une bibliothèque populaire pour la programmation réactive en JavaScript. ReactiveX, le parapluie sous lequel repose RxJS, a ses extensions dans de nombreux autres langages tels que https://www.java.com [Java], https://www.python.org/ [Python], C++, Swift et Dart. RxJS est également largement utilisé par des bibliothèques telles que Angular et React.
L’implémentation de RxJS est basée sur des fonctions chaînées conscientes et capables de traiter des données sur une période de temps donnée. Cela signifie que l’on peut implémenter pratiquement tous les aspects de RxJS avec rien de plus que des fonctions recevant une liste d’arguments et de rappels, puis de les exécuter en cas de demande. La communauté autour de RxJS a fait ce travail difficile et le résultat est une API que vous pouvez directement utiliser dans n’importe quelle application pour écrire du code propre et maintenable.
Dans ce didacticiel, vous allez utiliser RxJS pour créer une barre de recherche riche en fonctionnalités qui renvoie des résultats en temps réel aux utilisateurs. Vous utiliserez également HTML et CSS pour formater la barre de recherche. Le résultat final ressemblera à ceci:
image: https: //assets.digitalocean.com/articles/CART-62307/introduction_search.gif [Démonstration de la barre de recherche]
Quelque chose d’aussi commun et apparemment simple qu’une barre de recherche doit avoir plusieurs vérifications en place. Ce didacticiel vous montrera comment RxJS peut transformer un ensemble assez complexe d’exigences en code facile à comprendre et à gérer.
Conditions préalables
Avant de commencer ce tutoriel, vous aurez besoin des éléments suivants:
-
Un éditeur de texte prenant en charge la coloration syntaxique JavaScript, tel que http://atom.io [Atom], Visual Studio Code ou https://www.sublimetext.com/ [ Texte sublime]. Ces éditeurs sont disponibles sous Windows, MacOS et Linux.
-
Familiarité avec l’utilisation de HTML et JavaScript ensemble. Pour en savoir plus, rendez-vous sur Comment ajouter du code JavaScript au code HTML.
-
Familiarité avec le format de données JSON, sur lequel vous pouvez en savoir plus en consultant Comment utiliser JSON en JavaScript .
Le code complet du didacticiel est disponible sur Github.
Étape 1 - Création et style de votre barre de recherche
Dans cette étape, vous allez créer et styliser la barre de recherche avec HTML et CSS. Le code utilisera quelques éléments communs de Bootstrap pour accélérer le processus de structuration et de style de la page afin que vous puissiez vous concentrer sur l’ajout d’éléments personnalisés. Bootstrap est un framework CSS qui contient des modèles pour des éléments communs tels que la typographie, les formulaires, les boutons, la navigation, les grilles et d’autres composants d’interface. Votre application utilisera également Animate.css pour ajouter une animation à la barre de recherche.
Vous commencerez par créer un fichier nommé + search-bar.html + avec + nano + ou votre éditeur de texte préféré:
nano search-bar.htmlCréez ensuite la structure de base de votre application. Ajoutez le code HTML suivant au nouveau fichier:
search-bar.html
<!DOCTYPE html>
<html>
<head>
<title>RxJS Tutorial</title>
<!-- Load CSS -->
<!-- Load Rubik font -->
<!-- Add Custom inline CSS -->
</head>
<body>
<!-- Content -->
<!-- Page Header and Search Bar -->
<!-- Results -->
<!-- Load External RxJS -->
<!-- Add custom inline JavaScript -->
<script>
</script>
</body>
</html>Comme vous avez besoin de CSS de l’ensemble de la bibliothèque Bootstrap, allez-y et chargez le CSS pour Bootstrap et Animate.css.
Ajoutez le code suivant sous le commentaire + Load CSS +:
search-bar.html
...
<!-- Load CSS -->
...Ce didacticiel utilisera une police personnalisée appelée Rubik de la bibliothèque Google Fonts pour styliser la barre de recherche. Chargez la police en ajoutant le code en surbrillance sous le commentaire + Charger la police Rubik +:
search-bar.html
...
<!-- Load Rubik font -->
...Ensuite, ajoutez le CSS personnalisé à la page sous le commentaire + Ajouter un CSS personnalisé en ligne. Cela garantira que les titres, la barre de recherche et les résultats de la page sont faciles à lire et à utiliser.
search-bar.html
...
<!-- Add Custom inline CSS -->
...Maintenant que tous les styles sont en place, ajoutez le code HTML définissant l’en-tête et la barre de saisie sous le commentaire + En-tête de page et barre de recherche +:
search-bar.html
...
<!-- Content -->
<!-- Page Header and Search Bar -->
...Ceci utilise le système de grille de Bootstrap pour structurer l’en-tête de page et la barre de recherche. Vous avez attribué un identifiant + search-input + à la barre de recherche, que vous utiliserez pour lier un écouteur ultérieurement dans le didacticiel.
Ensuite, vous allez créer un emplacement pour afficher les résultats de la recherche. Sous la commande + Results Of, créez un` + div` avec l’identifiant + response-list + pour ajouter les résultats ultérieurement dans le didacticiel:
search-bar.html
...
<!-- Results -->
...À ce stade, le fichier + search-bar.html ressemblera à ceci:
search-bar.html
<!DOCTYPE html>
<html>
<head>
<title>RxJS Tutorial</title>
<!-- Load CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />
<!-- Load Rubik font -->
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<!-- Add Custom inline CSS -->
<style>
body {
background-color: #f5f5f5;
font-family: "Rubik", sans-serif;
}
.search-container {
margin-top: 50px;
}
.search-container .search-heading {
display: block;
margin-bottom: 50px;
}
.search-container input,
.search-container input:focus {
padding: 16px 16px 16px;
border: none;
background: rgb(255, 255, 255);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1) !important;
}
.results-container {
margin-top: 50px;
}
.results-container .list-group .list-group-item {
background-color: transparent;
border-top: none !important;
border-bottom: 1px solid rgba(236, 229, 229, 0.64);
}
.float-bottom-right {
position: fixed;
bottom: 20px;
left: 20px;
font-size: 20px;
font-weight: 700;
z-index: 1000;
}
.float-bottom-right .info-container .card {
display: none;
}
.float-bottom-right .info-container:hover .card,
.float-bottom-right .info-container .card:hover {
display: block;
}
</style>
</head>
<body>
<!-- Content -->
<!-- Page Header and Search Bar -->
<div class="container search-container">
<div class="row justify-content-center">
<div class="col-md-auto">
<div class="search-heading">
<h2>Search for Materials Published by Author Name</h2>
<p class="text-right">powered by <a href="https://www.crossref.org/">Crossref</a></p>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-sm-8">
<div class="input-group input-group-md">
<input id="search-input" type="text" class="form-control" placeholder="eg. Richard" aria-label="eg. Richard" autofocus>
</div>
</div>
</div>
</div>
<!-- Results -->
<div class="container results-container">
<div class="row justify-content-center">
<div class="col-sm-8">
<ul id="response-list" class="list-group list-group-flush"></ul>
</div>
</div>
</div>
<!-- Load RxJS -->
<!-- Add custom inline JavaScript -->
<script>
</script>
</body>
</html>Dans cette étape, vous avez défini la structure de base de votre barre de recherche avec HTML et CSS. Dans l’étape suivante, vous allez écrire une fonction JavaScript qui acceptera les termes de recherche et renverra les résultats.
Étape 2 - Écrire le JavaScript
Maintenant que la barre de recherche est formatée, vous êtes prêt à écrire le code JavaScript qui servira de base au code RxJS que vous écrirez plus tard dans ce didacticiel. Ce code fonctionnera avec RxJS pour accepter les termes de recherche et renvoyer les résultats.
Comme vous n’avez pas besoin des fonctionnalités fournies par Bootstrap et JavaScript dans ce didacticiel, vous ne les chargerez pas. Cependant, vous utiliserez RxJS. Chargez la bibliothèque RxJS en ajoutant ce qui suit dans le commentaire + Load RxJS +:
search-bar.html
...
<!-- Load RxJS -->
...Vous allez maintenant stocker les références du + div + du HTML auquel les résultats seront ajoutés. Ajoutez le code JavaScript en surbrillance dans la balise + <script> + sous le commentaire + Ajouter un JavaScript personnalisé en ligne:
search-bar.html
...
<!-- Add custom inline JavaScript -->
<script>
</script>
...Ensuite, ajoutez le code pour convertir la réponse JSON de l’API en éléments HTML à afficher sur la page. Ce code effacera d’abord le contenu de la barre de recherche, puis définira un délai pour l’animation du résultat de la recherche.
Ajoutez la fonction en surbrillance entre les balises + <script> +:
search-bar.html
...
<!-- Add custom inline JavaScript -->
<script>
const output = document.getElementById("response-list");
<^> <h5 class="mb-1">${(item['title'] && item['title'][0]) || "<Title not available>"}</h5>
</script>
...Le bloc de code commençant par + if + est une boucle conditionnelle qui recherche les résultats de la recherche et affiche un message si aucun résultat n’a été trouvé. Si des résultats sont trouvés, la boucle + forEach + fournira les résultats avec une animation à l’utilisateur.
Au cours de cette étape, vous avez défini la base du RxJS en écrivant une fonction pouvant accepter les résultats et le renvoyer sur la page. Dans l’étape suivante, vous rendrez la barre de recherche fonctionnelle.
Étape 3 - Configuration d’un auditeur
RxJS concerne les flux de données, qui dans ce projet sont une série de caractères que l’utilisateur entre dans l’élément d’entrée ou dans la barre de recherche. Dans cette étape, vous allez ajouter un écouteur sur l’élément d’entrée pour écouter les mises à jour.
Tout d’abord, notez l’identifiant + search-input + que vous avez ajouté précédemment dans le didacticiel:
search-bar.html
...
<input type="text" class="form-control" placeholder="eg. Richard" aria-label="eg. Richard" autofocus>
...Ensuite, créez une variable qui contiendra des références pour l’élément + search-input. Cela deviendra le ` + Observable + que le code utilisera pour écouter les événements d’entrée. `+ Observables +