Construire une application monopage avec Vue et Kendo UI

Un SPA est un bon choix lors de la création d’un site Web avec des fonctionnalités minimales ou de la mise en évidence d’une expérience utilisateur fluide et réactive. Découvrez comment en créer un, stylisé avec Kendo UI pour Vue.

Les applications à page unique (SPA) ont gagné en popularité parmi les développeurs Web car elles offrent une bien meilleure expérience utilisateur que les applications Web traditionnelles. Les SPA présentent plusieurs avantages, notamment des temps de chargement plus rapides, des coûts réduits et une meilleure expérience utilisateur. De plus, les SPA améliorent l’expérience utilisateur en incorporant des fonctionnalités dynamiques et interactives telles que les mises à jour en temps réel et la récupération de données.

Cet article explique comment créer une application d’une seule page à l’aide de Vue.js et Kendo UI pour Vue, une bibliothèque complète de composants d’interface utilisateur professionnels pour le développement Web, et comment créer une application de liste de tâches en tant qu’application d’une seule page. À la fin de cet article, nous aurons une solide compréhension de la création d’une application d’une seule page avec Vue et Kendo UI.

Conditions préalables

Avant de commencer, il est supposé que vous avez une certaine expérience de travail avec Vue.js et un peu de connaissances sur les applications d’une seule page et la consommation d’API.

Table des matières

1. Introduction à Vue.js et à l’interface utilisateur de Kendo
2. Qu’est-ce qu’une application monopage (SPA)
3. Importance d’une application d’une seule page
4. Configurer un projet Vue.js
5. Installation et configuration de notre interface utilisateur Kendo pour les composants Vue
6. Création d’une application monopage
7. Conclusion

Introduction à Vue.js et à l’interface utilisateur de Kendo

Vue est un framework JavaScript progressif, performant et open source utilisé pour créer des interfaces utilisateur interactives et des applications d’une seule page. Il utilise le modèle d’architecture Modèle-Vue-Vue-Modèle. En plus de cela, il contient une documentation adaptée aux débutants, une bonne courbe d’apprentissage et des ressources pour vous aider à démarrer.

Interface utilisateur de Kendo est une collection de composants d’interface utilisateur et d’outils de cadre pour le développement d’applications Web et mobiles. Il est conçu nativement pour votre technologie JavaScript préférée : jQuery, Angular, React et Vue. Chaque bibliothèque comprend divers composants d’interface utilisateur, tels que des grilles, des graphiques et des éléments de navigation, ainsi qu’un ensemble d’outils et de composants de cadre pour créer des interfaces utilisateur réactives et interactives.

Interface utilisateur de Kendo pour Vue est conçu pour vous faire gagner du temps lorsque vous fournissez des applications Vue.js professionnelles, cohérentes et accessibles. Construits par des experts de Vue, les composants sont conçus pour être fiables, évolutifs, personnalisables et faciles à utiliser.

Qu’est-ce qu’une application monopage (SPA) ?

Une application monopage (SPA) est une application Web ou un site Web qui charge une seule page Web et restitue dynamiquement le contenu lorsque l’utilisateur interagit avec l’application, éliminant ainsi le besoin de recharger la page entière. Il améliore les performances de notre site Web et crée une expérience utilisateur dynamique en ne chargeant que les informations requises de l’utilisateur.

Importance des applications à page unique

Une application d’une seule page est importante car elle offre une expérience utilisateur fluide et réactive similaire à celle d’une application mobile native. En plus de cela, cela améliore les performances de notre application en réduisant la quantité de données transférées entre le client et le serveur, ainsi que le temps nécessaire pour un rechargement complet de la page. De plus, les SPA améliorent l’optimisation des moteurs de recherche en rendant le contenu dynamique côté serveur et en fournissant aux moteurs de recherche une version HTML statique de l’application.

Configurer un projet Vue.js

La configuration de notre projet Vue est facile si nous avons les packages nécessaires. Pour créer un nouveau projet Vue, nous devons avoir la CLI Vue installée globalement et la dernière version de npm.
Nous pouvons utiliser Node.js ou le gestionnaire de packages Yarn pour installer Vue.js globalement sur notre système. Pour installer Vue CLI (Command Line Interface) globalement, exécutez la commande suivante :

npm install -g @vue/cli

Si vous utilisez Yarn, exécutez la commande suivante :

yarn global add @vue/cli

Cette commande installe la Vue CLI globalement sur notre système, nous permettant d’utiliser la commande vue dans notre terminal pour créer de nouveaux projets Vue quand nous le voulons.

Nous avons installé Vue.js avec succès dans le monde entier ; la prochaine étape consiste à créer notre nouveau projet Vue. Pour ce faire, nous allons exécuter la commande suivante :

npm create vue@3

Lorsque nous exécutons la commande ci-dessus, nous serons invités à sélectionner plusieurs fonctionnalités. Voir le schéma ci-dessous des fonctionnalités que nous avons sélectionnées pour notre projet.

Après avoir sélectionné les fonctionnalités dont nous avons besoin dans notre projet, nous allons entrer le nom de notre projet, qui est « page unique », et installer les dépendances avec la commande ci-dessous :

npm installl

La dernière étape consiste à lancer le serveur avec la commande suivante :

npm run dev

Installation et configuration de notre interface utilisateur Kendo pour les composants Vue

Nous allons installer et configurer l’interface utilisateur de Kendo pour Vue Mise en page composant, car c’est ce que nous utiliserons pour afficher les données que nous récupérons à partir de notre API.

Kendo UI pour Vue est une bibliothèque de composants d’interface utilisateur commerciale, et dans le cadre de cela, vous devrez fournir une clé de licence lorsque vous utilisez les composants dans vos projets Vue.js. Vous pouvez obtenir une clé de licence via un essai gratuit ou en possédant une licence commerciale. Pour plus d’informations, vous pouvez vous diriger vers Kendo UI pour la page des licences Vue.

Installez le composant Layout à l’aide de la commande suivante :

npm install --save @progress/kendo-vue-layout 

Voici les dépendances homologues que le package Layout nous oblige à installer avant le composant :

npm install --save @progress/kendo-vue-intl @progress/kendo-licensing @progress/kendo-svg-icons

L’étape suivante consiste à importer le module package dans l’application où nous voulons créer la mise en page de notre application :

import { Card } from '@progress/kendo-vue-layout';

Création d’une application monopage

Nous allons créer une simple application de liste de tâches pour illustrer ce qu’est une application d’une seule page.

Dans la première étape, nous allons créer un nouveau composant appelé « TodoApp » qui affichera une liste d’éléments à faire. Ce composant aura la structure de notre application.

Ensuite, nous allons créer une carte qui affiche la liste de nos tâches à l’aide d’un v-for directif. Chaque élément doit être affiché sous forme d’élément de liste avec une case à cocher pour indiquer s’il est terminé ou non :

<card class="card-section" style="width: 650px; margin: auto; ">
            <h1>Manage your Task <span class="k-icon k-i-track-changes" id="icon"></span> </h1>
            <hr />
            <div class="list">
                <li v-for="(task, index) in todoTask" :key="index" :class="{ removed: task.checked }">
                    <div class="form-box">
                        <input type="checkbox" v-model="task.checked" class="check-box" />
                        <label class="heading">
                            {{ task.text }}
                        </label>
                        <br />
                        <label class="paragraph">
                            {{ task.description }}
                        </label>
                        <div class="icon-wrapper">
                            <KButton :icon="'trash'" :fill-mode="'outline'" class="btn-func"
                                v-on:click="removeSingleTask(index)">Delete</KButton>
                        </div>
                    </div>
                </li>
            </div>
        </card>

Après avoir créé la première carte, nous allons créer une deuxième mise en page qui nous permettra d’ajouter de nouveaux éléments à faire à la liste. Le formulaire aura un champ de saisie pour le nom de la tâche, sa description et un bouton pour soumettre le nouvel élément :

<card class="container-card" style="width: 650px; margin: auto">
            <div class="form-group">
                <KInput class="form-input" :style="{ width: '490px' }" v-model="newTaskList" name="task name"
                    :icon="'plus'" :fill-mode="'outline'" placeholder="Write a new task">
                </KInput>
            </div>
            <div class="form-group">
                <KInput class="form-input" :style="{ width: '490px' }" v-model="desTaskList" name="description"
                    placeholder="Description"></KInput>
            </div>
            <div class="col-xs-12 col-sm-6 example-col">
                <div class="btn-func">
                    <KButton :fill-mode="'outline'" class="btn-func">Due Date</KButton>
                    <!-- <KButton :fill-mode="'outline'" class="btn-func">Assign To</KButton> -->
                    <!-- <KButton :icon="'trash'" :fill-mode="'outline'" class="btn-func">Cancel</KButton> -->
                    <KButton :icon="'plus'" :fill-mode="'outline'" class="btn-func" id="btn-func" @click="addNewTask">
                        Add Task</KButton>
                </div>
            </div>

        </card>

Nous allons créer une propriété de données dans la section script qui renvoie les éléments Todo, les nouveaux éléments et les descriptions :

data() {
        return {
            todoTask: [],
            newTaskList: "",
            desTaskList: "",
        };
    },

Ensuite, nous créons une méthode qui ajoutera et supprimera nos éléments todo :

methods: {
        addNewTask() {
            this.todoTask.push({ text: this.newTaskList, description: this.desTaskList, checked: false });
            this.newTaskList = "";
            this.desTaskList = "";
        },
        removeSingleTask(index) {
            this.todoTask.splice(index, 1);
        },
    },

Enfin, nous testerons l’application pour nous assurer qu’elle fonctionne comme prévu et que de nouveaux éléments de tâche peuvent être ajoutés et marqués comme complets ou incomplets.

Vous pouvez consulter le projet complet sur GitHub et ajoutez plus de fonctionnalités comme la fonction d’édition et plus encore à votre application todo.

Conclusion

Un SPA est un bon choix pour créer un site Web qui a des fonctionnalités minimales ou qui nécessite une expérience utilisateur fluide et réactive, comme une application Web ou un site Web avec de nombreuses interactions. Dans ce guide, vous avez appris le concept d’un SPA et comment en construire un.