Qu'est-ce que Vue.js ? Un aperçu pour les débutants

Vue est un framework frontal moderne qui peut aider n'importe qui à créer un site Web ou une application Web. Il est léger, flexible et facile à utiliser. Mais c'est aussi un cadre complet et riche qui peut évoluer pour répondre aux besoins des créateurs d'applications Web les plus avancés.

Regardons Vue.js et ce que vous devez savoir pour commencer à l'utiliser.

Apprendre à connaître Vue

Vue est le framework le plus polyvalent actuellement disponible pour JavaScript. C'est aussi le plus facile à comprendre pour les programmeurs et les non-programmeurs.

Vue est facile à apprendre pour les personnes qui débutent dans le développement de sites Web. Presque tous ceux qui ont travaillé avec HTML se sont heurtés à un mur où ils veulent faire quelque chose que HTML ne peut pas faire.

Par exemple, que se passe-t-il si vous souhaitez ajouter un interrupteur pour changer le thème de votre site Web du mode clair au mode sombre ? Que diriez-vous d'ajouter un menu simple caché derrière un bouton hamburger ? C'est alors que vous devrez peut-être apprendre un peu de Javascript.

Ce sont des tâches assez faciles à faire en JavaScript. Vous pouvez ajouter un extrait de code JavaScript à une balise de script, et le tour est joué. Voici à quoi ressemble l'insertion de texte avec du JavaScript vanille :

La façon dont JavaScript référence les éléments de la page peut être déroutante pour les débutants. Ajouter du JavaScript avec Vue est aussi simple que d'ajouter du JavaScript vanille. Mais avec Vue, vous obtenez plus de fonctionnalités et un accès aux techniques JavaScript modernes. Voici comment insérer du texte avec Vue :

  
  
 
  
  
 
 {{ un message }} 
 
 
  
  
  

Disséquons un peu ces exemples. En JavaScript, le code devait rechercher l'élément, en choisir un aspect et le modifier. Dans Vue, nous avons indiqué au HTML où attendre le texte variable. Ensuite, nous avons créé un objet JavaScript, l'avons affecté à l'élément et défini le texte variable.

Cet exemple simple illustre un point important. Il est préférable de garder votre code découplé de votre code HTML. Dans l'exemple de Vue, Vue ne manipule pas directement le HTML. Elle ne gère que ses propres affaires. Et cela a donné à HTML plus de fonctionnalités sans y ajouter de code.

Est-ce que Vue est un framework ou pas ?

Si vous connaissez d'autres frameworks, vous savez peut-être qu'ils ont généralement besoin de vous pour créer une application à partir de zéro en utilisant leur technologie. Cela implique généralement de créer une application à partir de la ligne de commande et de démarrer un serveur. Mais dans l'exemple précédent, nous avons ajouté Vue à un site Web statique sans toute cette complexité.

Vue est un framework, cependant. Sur sa page d'introduction, il est écrit :"Contrairement à d'autres frameworks monolithiques, Vue est conçu dès le départ pour être progressivement adoptable." Cela signifie que vous pouvez utiliser aussi peu ou autant de puissance de Vue que vous le souhaitez dans vos applications.

Vous pouvez utiliser Vue pour gérer un diaporama d'images, ou vous pouvez créer une application complète d'une seule page avec toutes les cloches et tous les sifflets. Cela inclut les tests, le routage, la gestion des états, la sécurité et bien plus encore.

À qui s'adresse Vue ?

Grâce à sa puissance et sa polyvalence, Vue s'adresse à un large public.

Vue est pour les puristes HTML/CSS/JS

JavaScript est un écosystème en évolution rapide avec beaucoup de désabonnement. Il est possible de se consacrer à une collection d'outils et de les voir devenir obsolètes deux ans plus tard. JavaScript ajoute également de la complexité aux sites Web à lui seul. L'installation d'un framework et d'une énorme pile bancale de packages Node ne fait qu'empirer les choses.

Certaines personnes préfèrent s'en tenir aux bases pour cette raison. HTML fonctionne bien, CSS a ses bizarreries et JavaScript est plutôt funky. Mais ils sont tous solides comme le roc ! Ils continuent de changer et d'évoluer, mais lentement et régulièrement. De nombreux frameworks finissent par ajouter des modifications qui cassent votre code.

Cependant, il existe quelques scripts, comme jQuery et Handlebars, qui vous facilitent la vie en tant que programmeur frontal. jQuery démarre très bien, mais se transforme en spaghetti lorsque votre base de code devient trop complexe. Le guidon est également agréable, mais ne fait pas grand-chose pour rendre JS plus facile à utiliser.

Vue peut remplacer ces deux outils et résoudre leurs problèmes. Et il le fait sans prendre complètement le contrôle de votre site Web. Il introduit les pratiques JavaScript modernes sans les maux de tête JavaScript modernes.

Vue est pour le prototypage rapide

Vue est un framework léger avec les fonctionnalités de frameworks beaucoup plus lourds. Si vous avez de l'expérience dans le développement Web frontal, vous pouvez apprendre Vue en quelques jours. Si vous ne le faites pas, vous pouvez commencer avec seulement la quantité dont vous avez besoin.

L'une des principales raisons d'utiliser un framework est que les outils qu'il vous donne pour rendre le développement plus rapide et plus facile. Par exemple, une application Web progressive s'appuie sur la navigation par programmation, la mise en page personnalisée et la structure qui change à la volée. Les frameworks front-end rendent ce défi presque trivial. Et Vue ne fait pas exception.

Vous pouvez désormais terminer des projets qui prenaient des mois voire des semaines, grâce à des frameworks modernes. Et parce que Vue est si léger et facile à utiliser, vous pouvez terminer des prototypes en quelques heures ou quelques jours.

Vue est pour le développement d'applications Web

Les développeurs en sont venus à attendre certains avantages des frameworks frontaux modernes. Le remplacement de chaînes pour HTML, l'architecture basée sur les composants et les outils en sont de bons exemples. Vue présente tous ces avantages, ainsi que ceux mentionnés dans la section cadre ci-dessus.

Vue est destiné au développement d'applications mobiles natives

Les développeurs d'applications Web souhaitent souvent rendre leurs produits disponibles sous forme d'application mobile. Traditionnellement, ils l'ont fait en embauchant des développeurs supplémentaires pour créer pour iOS et Android. Ensuite, ils devraient trouver un moyen de se coordonner entre les trois plates-formes. Mais aujourd'hui, il existe d'autres options.

Une option consiste à utiliser NativeScript pour créer des applications mobiles, ce qui permet aux développeurs de créer pour Android et iOS avec le même code JavaScript. Les développeurs Nativescript peuvent même porter leur code Web sur mobile sans avoir à embaucher de nouveaux développeurs. Et il a un excellent support pour Vue.

Comment Vue se compare-t-il aux autres frameworks ?

Vue, Angular et React sont les trois frameworks les plus populaires selon l'enquête State of JS 2019. Voici quelques points à considérer à leur sujet :

Les trois grands cadres

• Angular a été le premier framework Web frontal de grande renommée. Il est publié par Google et existe depuis 2010. Il a introduit le monde au HTML dynamique via des directives et une liaison de données à trois voies qui permet au code de se mettre à jour comme par magie sur la page sans actualisation.
• React a été publié pour la première fois en 2013 par Facebook et est une alternative plus accessible à Angular. React est surtout connu pour utiliser JSX et ses composants.
• Vue a été lancé en 2014 par Evan You, un ancien employé de Google. Vue n'a rien introduit de trop révolutionnaire. Mais cela a introduit une méthode de travail bien meilleure et plus propre.

Avantages des Trois Grands

• Angular est une bête d'entreprise d'un framework. Il existe depuis le plus longtemps et est construit et maintenu par Google.
• React a été le plus largement adopté des trois grands frameworks, selon l'état de JavaScript 2019. Il est connu pour être facile à utiliser et flexible.
• Vue est subjectivement le framework le plus facile à apprendre et à mettre en œuvre. Et cela reste aussi simple qu'il l'est sans sacrifier un ensemble de fonctionnalités riches et puissantes.

Critiques des Trois Grands

Angulaire

Angular a été notoirement difficile à apprendre dans le passé. La version 1 (AngularJS) utilisait beaucoup de jargon informatique de niveau collégial dans sa documentation. La version 2 (Angular) a beaucoup simplifié et rationalisé, cependant.

• Lorsque Google a lancé Angular, il a conservé les concepts de niveau supérieur d'AngularJS. Mais la société a tellement modifié les détails que de nombreux développeurs ont encore trouvé cela déroutant.
• Il y a eu beaucoup de désabonnement au début d'Angular, avec des changements de rupture de code dans presque toutes les versions. Angular est meilleur maintenant, mais il reste très formel, rigide et difficile à apprendre pour certains développeurs.

Réagir

L'un des aspects les meilleurs et pourtant les plus difficiles de React est JSX. Il condense HTML, CSS et JS en un seul langage. Cela rend tout plus simple pour les développeurs, mais plus difficile pour les concepteurs.

• JSX rend également plus difficile le travail avec les bibliothèques existantes. En outre, il est considéré comme un anti-modèle de mettre la conception, la mise en page et le code au même endroit. Cela peut créer un code désordonné et illisible.
• React gère cela avec élégance en utilisant des composants pour séparer le code. Mais c'est aux développeurs individuels d'utiliser correctement les composants.
• React est techniquement un framework. Mais il manque certaines fonctionnalités importantes telles que la navigation et la gestion de l'état à l'échelle de l'application.

Vue

Vue résout tous les problèmes mentionnés à propos des deux autres grands. Contrairement à Angular, il est facile à apprendre. Et contrairement à JSX, les composants Vue séparent HTML, CSS et JS.

• Il est beaucoup plus facile pour les concepteurs de travailler dans un composant Vue. Et garder tout propre ne dépend pas entièrement du développeur.
• Les plus grands défis auxquels est confronté Vue sont une adoption relativement faible et un manque d'"applications qui tuent". Un certain nombre d'entreprises utilisent Vue, mais aucune d'entre elles n'a de reconnaissance de marque.

Est-ce que Vue est une autre mode ?

Même si Vue existe depuis plusieurs années, c'est toujours le nouveau venu. Il n'a pas non plus le soutien corporatif des deux autres. Et comme nous l'avons déjà mentionné, il n'y a pas d'application qui tue qui montre ce qu'il peut faire.

Ce qui manque à Vue dans le soutien au niveau de l'entreprise, il le compense par la passion et le soutien de la base. Evan You lance une campagne Patreon pour subvenir à ses besoins et à ceux d'un autre développeur. Dans un sens, Vue est géré démocratiquement. Tant qu'il y aura suffisamment d'intérêt pour Vue pour que les entreprises soient prêtes à le soutenir, Vue restera là.

Les meilleures parties de Vue

Vue offre les meilleures parties des autres frameworks frontaux, ainsi que de nombreuses autres fonctionnalités uniques à Vue. Voici juste une liste partielle :

• Vue utilise une architecture basée sur des composants pour la structure et la réutilisabilité.
• Il sépare HTML, CSS et JS dans ses composants.
• Vue ressemblera et se sentira familier aux développeurs et aux concepteurs.
• Il offre une interface graphique complète pour servir, construire et créer des projets.
• Vue utilise le rechargement à chaud lorsqu'il est exécuté en tant qu'application. Le rechargement à chaud met à jour uniquement ce qui a changé sur une page sans actualisation.

Vue est un projet privé sans les frais généraux et politiques de l'entreprise. Cela peut le rendre moins souhaitable pour les entreprises. Mais il est facile à apprendre et amusant à utiliser, ce qui le rend idéal pour les startups avant-gardistes.

Peut-être que la meilleure caractéristique est qu'il est conçu par pragmatisme, et non par comité, ce qui est la raison d'être d'un logiciel open source.