Un site avec Node ; Vue / React... le tout avec des animations ?!

Par ofilot, il y a 8 ans

Javascript NodeJS

Bonjour,

J’ai besoin d’avis.

Je voudrai apprendre à utiliser Node JS et un framework front-end (Vue JS, React JS, …)

1/ Est-ce une bonne idée d’associer Node JS avec Vue ? Ou vaut-il mieux choisir un autre framework comme React ou autre… (pourquoi) ?

Tout cela pour créer un site avec des animations. Voici le genre d’animations que je souhaite savoir faire : barre de chargement, barre de scroll personnalisée, transitions entre les pages, effets sur les éléments, effets sur les blocs, chargement du contenu sans rechargement de toute la page, … pour être plus clair, je cherche à faire un site du même type : https://www.krealid.com

2/ Un framework front-end est-il pensé pour gérer ce genre d’animations ?

D’après ce que j’ai compris, les frameworks front-end fonctionnent sur le principe de composants.

3/ Imaginons que j’ai un bloc avec du contenu à gauche et un autre bloc à droite. Ces deux éléments sont considérés comme des composants ?

4/ Comment fonctionne le codage avec un framework front-end ? Il faut planifier actions par actions, du genre :

Et on indique au framework, si l’utilisateur clic ici tu joues l’action 1 et 3 et s’il clic ici uniquement l’action 2 ? Ou alors il faut faire par composants ce qui sous-entend qu’une même action est codée plusieurs fois ?

5/ Imaginons que je dispose d’une galerie de photos sur mon site développé via Vue / React ou autre et que je souhaite donner la possibilité à mon visiteur de cliquer dessus pour voir chaque photo en xxl… comme avec les lightbox. Il faut intégrer une librairie spécifique ou le framework front-end gère ça par défaut ?

6/ Comment gérer un site créé via Node JS ? Existe-t-il un CMS développé sous Node pour que le site soit facilement modifié par une personne lambda ?

7/ Est-il possible de générer des .pdf avec Node JS (ex: facture) ?

Merci pour vos retours.

3 réponses

jean-smaug, il y a 8 ans

Salut,
Avec le site que tu as donné en exemple, n'importe quelle lib, framework front fera l'affaire.

C'est une bonne idée d'associer Node et React, Vue, Angular... pour faire du Server side rendering :
=> 1er chargement plus rapide
=> pour le SEO, comme ton site est généré côté serveur il est indexable par google

Avec react et le paquet https://github.com/reactjs/react-transition-group/tree/v1-stable c'est assez simple.
Tu peux faire tes animations en CSS et tu englobe le composant que tu veux animer dans le composant CSSTransition

pour la 3/ ca dépend ^^

5/ a toi de l'implémenter mais des librairie externes existent surrement

6/ tu as Ghost comme plateforme de blogging

7/ oui

Pandazaur, il y a 8 ans

Salut,

C'est une bonne idée d'utiliser Node.js avec Vue.js, il existe une surcouche à Express.js pour gérer Vue.js, ça s'appelle Nuxt.js

Pour la gestion des PDF il existe des librairies.

Il ne faut pas croire qu'un framework comme React ou Vue va tout te faire. Si tu utilises un framework, c'est pour avoir une certaine structure dans tes apps. Pour gérer les animations, tu peux t'aider de animate.css et Vue.js embarque un composantn transition pour réaliser des animations plus facilement: https://vuejs.org/v2/guide/transitions.html

Si tu es intéressé par Nuxt: il est simple a comprendre, la documentation est suffisante pour une application de base. Tu pourras générer un site rapidement. Tu peux créer un projet via le vue-cli.

Sinon l'équivalentpour React.js c'est Next.js

ofilot, il y a 8 ans

Merci pour vos retours.

Pour le moment je commence seulement à m'intéresser à ces technologies (Node JS et Vue JS). Je n'ai aucune idée de comment ça fonctionne concrètement.

  • Node JS envoie les données au navigateur sous un format spécifique (une sorte de Json ?) ;
  • Vue JS récupère ces données et les positionne dans les bons blocs de l'application ? ;
  • Un template HTML de base est obligatoire pour que Vue JS fonctionne ou peut-on créer l'application / site web virtuellement à 100% (appeler les blocs à la volée) ?

Mon gros soucis, c'est que je ne vois pas trop par où commencer...

Vous auriez des ressources à me conseiller qui expliqueraient comment fonctione l'association Node JS et Vue JS, le tout avec une petite dose d'animations ?

Merci encore à vous.