Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

HTML5 : Optimisation des flux de production

Travailler en JavaScript natif

Testez gratuitement nos 1340 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Travailler en JavaScript amène à employer trop souvent les mêmes librairies. Voyez pourquoi ces librairies ne sont parfois pas nécessaires et pénalisent les performances de vos sites.
07:36

Transcription

Par habitude, par réflexe, par recopie, peu importe, on a toujours tendance à faire une liaison vers jQuery ou toute autre librairie javaScript qui va nous permettre d’écrire des fonctionnalités dans nos pages. En fait, on oublie souvent une librairie qui est fabuleuse et qui est incontournable et qu’on devrait regarder de plus près tout le temps c’est Vanilla JS. Alors pour ceux d’entre vous qui la connaissent, vous pouvez aller un peu plus loin dans le film. Pour ceux qui ne la connaissent pas, je vous invite à venir ici regarder par exemple en cochant toutes les fonctionnalités et à télécharger cette librairie ici. Voilà ici, dès que vous avez téléchargé la librairie, vous l’affichez dans le dossier et surtout vous l’ouvrez directement dans un navigateur et voyez, il y a strictement rien à l’intérieur. Et en fait, il n’y a rien parce que tout simplement c’est ce qui est pris de manière native en charge par l'intégralité des navigateurs. Et donc je vous invite à venir regarder ces tests de comparaison ici, ce qui peut y avoir entre Vanilla JS qui est notre bon vieux javaScript derrière les fagots, combien d’opérations vous allez pouvoir faire par seconde par rapport à Ext JS ou Prototype, jQuery, etc. De voir donc que vous êtes bien plus rapide de travailler avec du natif que de passer par des librairies. Ça veut pas dire qu’il faut pas travailler avec des librairies mais dès l’instant vous en avez pas besoin, vous pouvez éviter. Le plus simple, c’est de le mettre en application ici, c'est-à-dire de récupérer par exemple un html ici, classique, avec un article, des id, des h1, des id, du p, et de texte. Alors j’en conçois, c’est pas des plus optimisés mais ça va vous permettre de pouvoir tester. Et ici on va aller sur un cdn. On va aller récupérer un lien vers une librairie jQuery que généralement on utilise tout le temps ici, voilà, tout simplement. Donc c’est simplement un crossorigin on verra ça un peu plus tard. Déjà, je vais mettre un petit commentaire pour supprimer cette espace-là, voilà. Et ce que je vous propose de faire, c’est d’utiliser différents script ici qui vont nous permettre de pouvoir tester directement les rapidités, les puissances d’exécution que nos navigateurs vont pouvoir nous proposer. La meilleure façon de faire, c’est de faire un console.time. Alors, je vais l’écrire la première, après on fera du copier-coller, ça ira plus vite, console.time ici. On va créer un pointeur qu’on va appeler get-tree par exemple, ici vous l’appelez comme vous voulez c’est purement arbitraire ici, et on va créer une variable directe, et cette variable directe on va dire qu’elle est égale à « document. » et on va utiliser par exemple le tag name, getElementsByTagName. Voilà. Et on va chercher par exemple article h1. Je vais dire : « voilà, donne-moi tous les articles h1 s’il te plait, de la vitesse, voilà. » Et là je vais faire un console timeEnd cette fois-ci de get-tree. Et donc là, ça va nous permettre de pouvoir tester la vitesse d’exécution pour aller rechercher un article h1 dès que j’utilise le tag name comme ça. Et on va pouvoir faire la comparaison maintenant avec le query selector par exemple que l’on utilise en HTML5 et par exemple le fameux jQuery avec un $article, h1. Si on enregistre et qu'on bascule dans un navigateur ici, je passe dans ma première page ici, je la télécharge et je regarde et on s’aperçoit que le getElementsByTagnames est beaucoup plus rapide que les deux autres. Et on ne parle pas de jQuery. Voyez qu’ici, il est carrément cinq fois, dix fois plus lent. Voilà, donc on va pouvoir comme ça tester d’autres types de performance en prenant par exemple, si j’utilise le getElementById, donc ici j’ai le getElementById. Dans la foulée, on peut aller se dire : on pourrait faire aussi le getElementsByClass directement, d’accord, className, voilà ici. Donc ici on va pouvoir venir dans le navigateur et retester, on recharge, et on compare les vitesses d’execution. Et vous voyez qu'à chaque fois, il n’y pas photo, la version native est beaucoup plus rapide. Alors on pourrait se dire : mais dès qu’on a des tâches un peu plus complexes à exécuter comme par exemple charger du document avec du ajax travaillé, jQuery c’est plus souple. Oui, c’est une question d’habitude. Regardez, là je vais enlever la console, on n'a pas spécialement besoin de la console, c’est surtout de javaScript en lui-même qu’on va s’amuser à comparer. Ici j’ai un document html de base, dans ce document de la version 2 ici, et on pourrait se dire qu'on rajoute notre librairie jQuery pour pouvoir utiliser du jQuery derrière ici. Donc on met un cdn, on va placer un script, et qu’est ce que ça donnerait un script jQuery pour charger ce document ? Quel document va t-on charger ? Ici regardez, j’ai document 01-0 qui contient du pur texte. Donc on pourrait dire : un jQuery, c’est du $.ajax, method GET, on pointe vers ce document. Quand tu reçois un success, tu appelles jQueryaction. Et JQueryaction, qu’est ce qu’il fait ? Il va chopper le $ départ ici, cet élément-là, et il va placer le text, ça va être data. Je fais un CONTRÔLE-S, on bascule dans le navigateur, j’actualise ma page. Bingo, cela fonctionne. Ok. Maintenant, ce que je vais faire c'est : je vais commenter cette partie-là, et puis je vais rajouter l’équivalent, on va dire en natif, qui serait de passer par XMLHttpRequest. Donc ici, si je vais rajouter un petit / ici pour rallumer notre chanson, si je regarde le code, c’est très simple, si on fait un instance de XMLhttpRequest, on envoie une ouverture du canal pour pointer vers ce document-là. On dit : « quand tu vas charger tu me feras la fonction domaction xhr qui est ce pointeur-là, on va récupérer le texte et maintenant tu peux envoyer l’instruction. » Donc dans domaction quand c’est récupéré, qu’est ce qu’on fait ? On fait un getElementById, on lui demande ici, cette partie-là, on n'en a pas besoin, ça serait dans le cas où on était sur des ClassName, si au lieu de travailler avec un id, ici on travaille avec un ClassName, il faudrait penser à prendre l’élement zéro, c’est juste pour pouvoir le récupérer ici mais là si je fais un innerhtml Donc j’enregistre cette partie-là, je bascule dans le navigateur ici et une fois que je suis dans le navigateur, j’actualise ma page et bingo, je recupère mes éléments. Donc souvent on va courir pour utiliser jQuery, alors qu’on n'a pas spécialement besoin de passer par une telle librairie, on s’aperçoit qu’on a un gain de performance en production, qui est largement souhaitable. Donc ici vous avez ce site-là : YOU MAY NOT NEED JQUERY, qui est super bien fait, qui va vous permettre de vous dire : regardez les alternatives que vous pouvez avoir. Si vous travaillez avec du JSON, voilà comment vous allez faire pour travailler avec du JSON unnative. Ici en jQuery, c’est vrai que c’est une simple ligne d’instructions, mais ici il y a guère plus, dès l’instant où vous êtes dans un navigateur assez contemporain avec un IE9+ vous avez directement un json parse qui va pouvoir être utilisé Ici si vous êtes dans du POST, voilà comment vous allez pouvoir travailler, les requêtes que vous allez utiliser, et donc tout va être passé au crible. Et c’est vrai que si vous faites du fadeIn, en jQuery, c’est une seule ligne de code, si c’est guère plus quoi, vous allez avoir cette fonction à placer quelque part dans vos fichiers javaScript, puis vous pourrez l’invoquer directement avec un fadein sur l’élément que vous allez attraper. Voilà donc, c’est quelque part dès fois surenchérir que de passer par jQuery, et regardez que quasiment tout ne tient à une comparaison quelque part où il n’y a pas nécessité de passer par cette librairie. Voilà donc, je vous invite à reprendre en considération la manière dont vous aller lier vos librairies.

HTML5 : Optimisation des flux de production

Optimisez vos flux de production lors de vos développements en HTML5. Explorez les méthodes et les éléments essentiels à la mise en place de processus automatisés.

5h29 (62 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :26 déc. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !