Share
Faisons le décor.
Vous construisez des sites Web depuis quelques années maintenant. Vous avez commencé avant que React ne devienne une grosse affaire et jQuery était toujours populaire.
Et, en fait, c'est exactement ce que votre jeu d'outils était. En tant que designer, vous étiez à la pointe de la technologie parce que vous maîtrisiez le HTML, les CSS et assez de jQuery pour appliquer une certaine logique à vos pages..
Avancez quelques années maintenant et vous vous sentez un peu laissé pour compte.
"Web designer" devient lentement une phrase chargée, comme "programmeur". L’ensemble d’outils possibles pour un concepteur de sites Web est bien plus vaste qu’une personne.
Les domaines de changement les plus importants n’ont certainement pas été HTML. Ce que vous saviez il y a cinq ans est encore largement applicable aujourd'hui.
Le CSS a changé, mais pas de manière ingérable. Certaines nouvelles spécifications ont été adoptées et de nouveaux outils tels que CSS Grid ont fait leur apparition, mais rien ne change tellement et si vite que vous ne pouvez pas vous mettre à jour assez rapidement..
JavaScript, en revanche, est complètement différent de ce qu'il était il y a dix ans et de manière sensiblement différente de ce qu'il était il y a cinq ans..
Notez qu'il y a dix ans, NodeJS n'avait même pas été publié. "Back-end" et "JavaScript" n'étaient pas utilisés pour décrire le même travail. En regardant le graphique Google Trends pour NodeJS, la popularité de Node a commencé à croître vers 2010, mais il y a deux ans à peine, elle avait seulement atteint la moitié du niveau d'intérêt record qu'elle avait reçu en 2017. Traduction: backend JavaScript est maintenant très populaire.
Graphique Google Trends pour NodeJSEn 2013, de nouveaux frameworks basés sur JavaScript ont commencé à apparaître sur la scène. React a été introduit pour la première fois en mars de cette année-là, dans le but de fournir une approche logicielle du type «apprendre une fois, écrire partout» sur toutes les plateformes. VueJS a été introduit moins d'un an plus tard en tant que framework JavaScript alternatif orienté vue. Le concept de JavaScript en tant que langage de script simple était en train d'être extirpé et remplacé par un écosystème JavaScript beaucoup plus mature. À peu près à la même époque, il y avait non seulement un nouvel intérêt et développement pour les frameworks JavaScript, mais également dans la maturation du langage lui-même. Avec ES5 et désormais ES2015-ES2017, de nouvelles fonctionnalités sont ajoutées à JavaScript chaque année..
Il n’est pas étonnant que si vous êtes un développeur Web utilisant un ensemble d’outils que vous avez largement adopté il ya cinq ans, vous vous sentez un peu pris au dépourvu par ce développement récent..
Dans cette série d'articles, je vais vous présenter Vue JS, un framework JavaScript moderne orienté composants. À la fin de la série en trois parties, vous saurez utiliser Vue JS, mais plus important encore, vous serez sur la voie de la fluidité avec la conception Web moderne et les techniques de développement front-end qui propulsent les meilleures plates-formes Web les plus utilisées au monde. et applications.
Commençons!
Vue JS fonctionne principalement comme un framework orienté vue. Cela devrait vous faire sentir à la maison en tant que designer! La «vue» est la pièce maîtresse de tout ce qui se passe dans Vue (d'où son nom).
Avec Vue, l'interface est la représentation ultime de l'interaction de votre utilisateur. Toutes les données, méthodes, logiques et événements ne sont importants que s'ils affectent correctement la vue elle-même..
Vue vous permet de définir assez facilement une seule vue de rendu. Regardons une instance de Vue qui rend une chaîne au navigateur. Nous chargeons Vue (comme les versions hébergées de CDN, par exemple: https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js), puis nous ajoutons notre code JavaScript:
let vm = new Vue (el: "# my-app", données: prénom: "Jonathan", nom: "Cutrell",)
Et quelques balises:
Bonjour, firstName lastName!
Voici à quoi ça ressemble:
Cet exemple simple montre quelques concepts importants.
Accentsconagua
Vue constructeur prend quelques options. Une de ces options est la el option, raccourci pour «élément». Ceci est un sélecteur qui pointe sur un élément de votre code HTML - dans ce cas, le div avec la classe mon-app.Les données option à la vue en utilisant le dataKey syntaxe. Dans ce cas, la chaîne rendue à l'intérieur du h1 la balise est "Bonjour, Jonathan Cutrell".el est passé, Vue restituera automatiquement à cet élément sans autre code. Nous verrons plus tard comment cette gestion du cycle de vie du rendu rend votre application beaucoup moins susceptible d'être boguée.Regardons comment nous pourrions accomplir la même chose avec jQuery pur.
let options = firstName: "Jonathan", lastName: "Cutrell" let $ app = $ ("# my-app"); $ app.find (".js-prénom"). html (options.firstName); $ app.find (". js-nom de famille"). html (options.lastName);Bonjour,
À première vue, cela pourrait ne pas sembler très différent du premier exemple. Et, pour des cas simples comme celui-ci, cela pourrait certainement être vrai.
Cependant, Vue possède un punch caché dans les coulisses. Par exemple, si vous voulez changer le nom sur la page?
let vm = new Vue (el: "# my-app", données: prénom: "Jonathan", nom: "Cutrell", monté: function () setInterval (() => this.firstName = this .firstName.split (""). reverse (). join ("");, 1000);)Dans notre scénario de chaîne, bien sûr, ce n'est pas un changement réaliste, mais chaque intervalle de 1 s met à jour le prénom afin qu'il soit une version inversée de lui-même. Aucune autre manipulation ou rendu DOM n'est nécessaire.
Maintenant, pour accomplir la même chose avec juste jQuery?
let options = firstName: "Jonathan", lastName: "Cutrell" let $ app = $ ("# my-app"); $ app.find (".js-prénom"). html (options.firstName); $ app.find (". js-nom de famille"). html (options.lastName); setInterval (function (let firstName = $ app.find (".js-prenom"). html (); let newFirstName = firstName.split (""). reverse (""). join (""); $ app.find (".js-prénom"). html (newFirstName);, 1000)Là encore, l'impact sur le nombre total de lignes de code est relativement faible pour cet exemple. Cependant, la différence conceptuelle est significative. Nous en reparlerons dans la section suivante.
L’un des problèmes auxquels le concepteur Web moyen est confronté lorsqu’il utilise jQuery ou une bibliothèque similaire pour développer des applications est le manque de séparation des préoccupations. Je suis sûr que vous avez déjà entendu cette phrase, mais rendons-la plus concrète avec notre exemple de rendu de nom.
À tout moment du cycle de vie de votre application, où est la "version" correcte de Prénom stockée?
Avec la version Vue, les informations sont toujours stockées dans le répertoire. Les données objet. Si vous le mettez à jour ici, il se mettra à jour partout ailleurs correctement. Les données sont contenues et géré en un seul endroit.
Dans la version jQuery, les données sont réellement stockées dans le dom. Il n'y a pas de représentation des données dans le code JavaScript qui est mis à jour puis reflété. Par exemple, vous remarquerez que nous avons mis en place un options objet. Cet objet est défini statiquement une fois. Cependant, lorsque nous mettons à jour le nom dans le setInterval call, l'objet de cette option n'est plus valide! Cela peut être un problème. De plus, l'objet options peut être mis à jour à tout moment ou entièrement supprimé et aucun impact ne sera affecté à la vue (tant que le rendu initial a déjà eu lieu)..
Pourquoi c'est un problème?
Encore une fois, avec des applications de ce niveau de simplicité, il peut être difficile de comprendre pourquoi cela est important. Mais au fur et à mesure que votre application devient de plus en plus complexe, le stockage de données dans le DOM peut devenir extrêmement fragile et fastidieux..
"Alors pourquoi ne pas simplement séparer mes problèmes sans utiliser Vue?"
C'est une question naturelle à poser. Comment pourrions-nous séparer nos préoccupations sans Vue alors?
let options = firstName: "Jonathan", lastName: "Cutrell" function setOption (k, v) options [k] = v; rendre(); function render () let $ app = $ ("# mon-application"); $ app.find (".js-prénom"). html (options.firstName); $ app.find (". js-nom de famille"). html (options.lastName); setInterval (function (let firstName = options.firstName; let newFirstName = prenom.split (""). reverse (""). join (""); setOption ("prenom", newFirstName);, rendu 1000 ();Aha! Nous avons donc créé notre propre machine de rendu qui permet de séparer les problèmes. Nous avons notre objet options, et aussi longtemps que nous utilisons notre setOption () fonction, nous le rendrons à chaque fois que l’option est mise à jour. Ainsi, la source de données est maintenant séparée de la vue. La victoire!
C’est en fait un simple pas en avant vers certains des modèles que Vue utilise sous le capot. Cependant, Vue a beaucoup plus de fonctionnalités et de puissance que celles présentées dans ce cas d'utilisation très simple..
Par exemple, si nous définissons la Prénom à la même chose qu'il est déjà réglé à? Nous n'avons pas besoin de rediffuser tout ça, n'est-ce pas? Mais notre code d'application ne sait pas comment différencier ce scénario. C’est quelque chose que Vue fait pour vous, sous le capot.
Il y a eu beaucoup de choses à regarder pour la première fois, alors asseyez-vous et absorbez-les! Dans la deuxième partie de cette série de didacticiels, Vue sera opérationnel en répondant à certaines de vos questions initiales..
Apprenez Vue.js avec notre guide complet du didacticiel Vue.js, que vous soyez un codeur chevronné ou un concepteur web qui souhaite acquérir de nouvelles techniques de développement front-end.
