Music player et expérience dynamique avec Vue.js

Le 19/09/2017

Dans Développement

Aujourd'hui, le BlogDuWebdesign vous propose de decouvrire deux petits exemples d'utilisation de Vue.js.

Pourquoi faire une experience au lieu d'un exemple "utile" ?

J'ai longtemps hésité sur ce point, et j'ai finalement decié de partir sur un petit jeu, principalement car cela permettra d'aborder plus de points intéressants tout en restant. Neanmoins, j'ai tout de meme pris quelques minutes pour "porter" sur vue une UI de Music Player fait par Alex Devero.

Je n'ai fait ici que passer la partie "visuelle" de l'UI en dynamique : l'image de couverture et les noms de l'auteur, l'album et la chanson, mais cela peut deja permettre de gagner du temps si vous utilisez ce genre de modules a plusieurs endroits.

Note : pour bien réussir la template Vue, suivez scrupuleusement ces deux règles. Premièrement, ayez toujours qu'un seul élément racine, sinon seul le premier element sera affiche. Enfin, pensez bien à lister tous les attributs dynamiques de votre element dans le tableau "props" du Javascript.

Utiliser Vue avec du SVG comme base de jeu

Comme premier exemple pratique de l'utilisation de vue, je vous propose une petite expérience faite pour montrer le fonctionnement de vue à quelqu'un. L'objectif ici est de déplacer le petit carre noir que vous voyez au milieu de l'écran avec les flèches du clavier, et bien évidemment d'utiliser pour cela Vue.js et des composants.

En quelques mots, le composant littlecar utilise le composant Mousetrap pour lui permettre de gérer la vitesse de notre bolide avec les flèches de directions de votre clavier, ainsi qu'un composant timer permettant de mettre à jour la vitesse de notre composant toutes les x secondes (pour notre exemple, x est de 50 millisecondes). Le contenu de la fonction updatePosition peut etre un peu complexe à comprendre si vous avez quelques lacunes en maths,

Comme vous pouvez le voir, il est assez simple d'obtenir des résultats sympathiques avec très peu de travail en utilisant des composants permettant un support des raccourcis claviers ou un timer.

Attention, ce dernier exemple serait perfectible en de nombreux points : il serait par exemple interessant d'utiliser Window.requestAnimationFrame() en lieu et place du timer, pour avoir un déplacement plus souple et pouvoir utiliser le delta t. De plus, à partit du moment ou nous avons de multiples éléments en mouvement, le SVG va commencer à souffrir énormément, ce qui ferait de Canvas un choix plus judicieux pour ce genre d'exercices.

C'est tout pour aujourd'hui ! Je vous donne rendez-vous jeudi pour la dernière étape tout publique de notre voyage sur Vue : la création de fichiers .vue ou .js pour permettre le déplacement de vos composants de projets en projets.