HTML5 : Optimisation des flux de production

Moderniser YepNope

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Afin de gérer la prise en compte ou pas des API par nos navigateurs, étudiez les différentes possibilités selon des contextes des librairies.
11:55

Transcription

Qu’en est il de la prise en charge ou non de la fonctionnalité par le navigateur sur lequel l’internaute est en train de visualiser la page ? Alors pour cela, on a plusieurs types de librairies qui vont pouvoir nous aider, et notamment Mordernizr qui est une des plus répandues, qui va nous permettre de checker donc la prise en compte par le navigateur de la fonctionnalité que l’on souhaite. Pour cela, ce qu’on va faire, c’est d’abord installer Modernizr. Alors pour télécharger Modernizr, vous avez plusieurs manières soit vous récupérez le download depuis Modernizr et vous allez uniquement charger ce que vous recherchez. Par exemple, tout à l’heure on parlait de fullscreen API, vous recherchez cette fonctionnalité-là, vous dites : je veux que le fullscreen, pas besoin de télécharger l’intégralité de l’élément et là, quand je vais pouvoir récupérer build, je ne récupérerai que cette fonctionnalité-là. Si maintenant vous voulez checker toutes les API prises en charge ou non par le navigateur, soit vous téléchargez le full package ici, soit vous utilisez un cdn, notamment cdnjs, ici vous allez taper modernizr, et une fois que vous avez trouvé la librairie modernizr, vous allez pouvoir copier en fonction de la version que vous cherchez, vous aurez peut-être souhaiter une version antérieure ou la dernière version. Vous allez récupérer, soit la version full development, soit la version minimisée ici. Vous allez demander de copier l’Url le SRI, le Script Tag, ou directement l’intégralité. Moi je vais prendre l’intégralité. On reviendra en détail sur ça dans une étape dédiée. Donc une fois que vous avez récupéré ce script, vous allez le pouvoir le coller dans votre fichier html. Prenons des fichiers html adaptés ici et je vais prendre celui adapté à Modernizr. Je vais venir copier le script. Alors théoriquement le bon sens voudrait qu'on le copie en fin de document, mais pour simplifier la lisibilité, je vais le copier dans l’entête ici. Et toujours dans l’entête, je vais placer une autre balise de script différente. Alors j’aurais pu le placer là dans le body, peu importe, là je vais le placer dans l’entête volontairement et je vais checker une vérification. Je vais dire var verification et dans cette vérification, je vais dire simplement l’objet Modernizr, je vais checker son websqldatabase. J’ai besoin de cette fonctionnalité dans mon application, et je veux m’assurer que le navigateur la prenne en compte. Et donc je vais recevoir un true ou false de par modernizr qui me dira si oui ou non c’est pris en compte. Donc si je fais if verification, à ce moment là, je vais lui dire deux cas de figure. Le premier cas, c’est le cas donc console.log et là je vais taper Modernizr Pris en charge, par exemple dans le console, et puis dans le cas contraire, cela ne sera pas pris en charge. J’enregistre et je teste dans un navigateur. Donc j’actualise, et là, dans la console log, on me dit : Modernizr pris en charge. Donc c’est que c’est cette fonctionnalité pris en charge. Mais si je regarde du côté des éléments, vous avez vu au niveau du html class, j’ai toute une série de classes et notamment une classe qui s’appelle websqldatabase, c'est-à-dire que si c’est pris en compte, ça me dit directement le nom de la classe. Si cela n’est pas pris en compte, ça me dirait « non-» le nom de la classe. Donc pour mieux le mettre en évidence, regardons ici, retournons dans le code ici, je vais créer un élément div avec une classe que je vais appeler detection par exemple. Voilà. Et je vais rajouter un style ici. Ce style, je vais lui dire que l’élément detection va être un carré de 200 sur 200, et je vais écrire deux couleurs différentes en disant : « dans le cas où il y a no-websqldatabase, tu me mets une couleur rouge, et dans le cas où il y a la classe websqldatabase, tu me mets une couleur verte, pour, bien entendu, le carré detection. » Si j’enregistre et que je retourne dans mon navigateur pour tester ici, j’actualise la page « carré vert, » c'est pris en charge et si je vais dans un navigateur différent, par exemple si je vais sur firefox, j’actualise et j’ai un carré rouge parce que ce n’est pas pris en compte. Si je regarde du côté de la console, on me dit bien : Modernizr : Non-Pris en charge. Alors comme cela, on a d’autres librairies qui vont nous aider à pouvoir travailler. Par exemple, on a le yepnope. Le yepnope n’existe plus maintenant, il a été modifié, il a été adapté. Mais je vous invite à regarder de près une vieille version de yepnope qui fonctionne toujours et qui peut être intéressante. Il y a HeadJS aussi qui peut être intéressant. Et il peut y avoir jQuery qui va être intéressant. Alors, la meilleure façon de les mettre en application encore une fois, c’est de les tester directement en plein pot dans le navigateur. Alors pour le yepnope, on va avoir besoin de deux librairies. La première, en cdn c’est modernizr et la seconde yepnope. Par contre, faites bien attention, j’ai récupéré volontairement sur l’autre cdn, la version 1.5.0 qui est une vieille version de yepnope qui prenait en compte un certain nombre de fonctionnalités qui ne sont plus le cas aujourd’hui dans les versions contemporaines. Donc pour cela, on va créer une balise de script, on va rajouter notre testeur verification, on va vérifier la même fonctionnalité, c'est-à-dire websqldatabase parce qu’on sait qu’il fonctionne dans l’un, Chrome, et pas dans l’autre, Firefox. On va créer la fonction yepnope et on va y passer un objet paramètre. Dans cet objet paramètre, la première propriété qu’on va passer ça va être le test, la vérification de la prise en compte de la fonctionnalité. Donc là, c’est vérification : true/false. Ensuite on va dire yep. Alors c’est la propriété qui s’appelle comme ça. Yep, oui c’est pris en compte, alors tu exécutes ce script. Yepnope, fonction JavaScript, alors qu’est ce que c’est ? Regardez, ici c’est tout classé par yepnope, Voyez, ici c’est les fonctions yepnope. Si je prends yepnope yepfct, ça me dit simplement : oui c’est pris en charge. Si je prends la nope, ça me dira : non ce n’est pas pris en charge. Donc il n’y pas besoin d’aller chercher plus compliqué que ça c’est juste des console log qui sont affichées, on va pas les regarder à chaque fois. Donc si je reviens ici dans cette fonctionnalité, la deuxième possibilité c’est nope, ce n’est pas pris en compte. Donc j’appelle la fonction. On a aussi une propriété both, c'est-à-dire dans les deux cas : dans les deux cas tu m’exécuteras ce script. Au chargement, la fonction load, alors là, je peux mettre un tableau et lui dire, on aurait pu mettre le tableau un peu partout d’ailleurs, ça va être : « tu vas me charger à la fois le script fonction 1, et à la fois le script fonction 2. » Et puis ensuite on va pouvoir créer une fonction qu’on appellerait par exemple callback function qui elle serait en interne qui aurait pu être dans un javascript ailleurs bien entendu mais on appelle un callback un premier rappel et là on va pouvoir dire qu'il y une fonction callback qui sera effectuée à chaque fois qu’on aura exécuté une des tâches. Et puis on va pouvoir faire un complete function c'est-à-dire on lui dira : « quand t’es complètement complet, à ce moment là, tu appelles complete function. » Si on enregistre et qu’on charge dans un navigateur, eh bien on s’aperçoit que oui c’est pris en charge, il y a un premier rappel, une fois chargé, un autre rappel, une fois chargé, un autre rappel, et complete quand c’est complet. Par contre, vous avez vu que le both n’est pas pris en compte, alors c’est vrai qu’il y a eu une polémique à l’époque qui disait mais dans les deux cas tu le fais et quand c’est chargé tu le fais aussi. Donc load et both c’est à peu près pareil. Mais vous voyez qu’ici vous avez toute une série d’éléments qui peuvent être vachement intéressants à travailler. Côté HeadJS maintenant : nous avons accès à une API qui va nous permettre de réaliser un certain nombre de tests ici, donc je vous invite à venir vérifier tous ces types de tests auxquels vous avez la possibilité d’accès. Encore une fois, rien ne vaut le script en exemple. Donc sur le cdn, on va récupérer la librairie, on va ouvrir un script, et on va commencer à lui dire : « une fois que tout est prêt, » alors c’est un objet head qui est fourni par cette librairie donc, on va lui dire : « quand le document est prêt, tu m’exécutes cette fonction native qui va commencer par un test. » Et on fait un head test. Dans ce test, on va checker d’une part si il s’agit du browser firefox, et d’autre part si ce browser a une version qui soit supérieure à 39 par exemple. C’est un tripartite vous savez : if... then... else.... Dans le cas où ça c’est bon, tu vas exécuter un tableau, et dans ce tableau tu vas me charger le yep fonction pour, cette fois-ci, head pour le yep, on va dire le load fonction 1, puis le load fonction 2, tu vas m’exécuter ces trois scripts consécutivement. Dans le cas maintenant, virgule, où c’est non, à ce moment là tu me feras le nopefct. Alors bien entendu, tous ces noms de fichier sont purement arbitraire ici, d’accord ? Et ensuite, on pourrait très bien envisager d’avoir une fonction callback qu'on placerait ici de manière anonyme, et on lui dirait : « là maintenant, quand tout est terminé tu m’appelles un callback pour me dire que c’est fini. » Testé dans Chrome, si j’actualise, il me dit bien : Non pris en charge chez le callback. Et testé dans Firefox, je teste : Pris en charge, HeadJS, HeadJS, Callback. Vous voyez que tout donc est bien pris en compte dans la mesure où on utilise cette version de détecteur pris en compte par head. Alors maintenant on peut très bien travailler avec un simple jQuery ici, donc vous allez voir que là, on a besoin de Modernizr pour détecter de jQuery si on travaille avec jQuery. Donc à ce moment là, on va pouvoir dire qu’on fait notre vérification toujours sur websqldatabase, on ne change pas une équipe qui gagne et puis dans notre script, si la vérification s’exécute, on peut faire un getScript directement, en disant : « mais tu me choppes le jQuery yep, » voilà jQuery yep ici que je vais placer ici. Et si on a besoin d’un callback, il suffit de faire un done auprès de cette fonctionnalité, on va rajouter une fonction ici, qu’on va appeler callback, qui fera un simple rappel, et puis là, on passe notre callback de fonction ici. Et bien entendu, dans le cas où la vérification n’est pas faite, on fera un getScript qui fera un nope, voilà, et avec toujours un callback qui pourra être ajouté. Dernier élément qu’on pourra faire ici, c’est utiliser ce qu’on appelle le DOM. Donc du côté du DOM, c’est très simple, on va pointer vers Modernizr toujours pour faire notre check, on va rajouter un script, dans ce script on va chercher une variable head, alors rien à voir avec HeadJS de tout à l’heure, et on va récupérer le getElementsByTagName et on va chercher les tagname de type head ici. Alors bien entendu, comme ça va nous renvoyer un tableau, il va falloir en extraire la zéroième valeur parce qu’on sait qu’on a qu’un head, n’importe comment, mais malheureusement ça sera sous forme de tableau, et on va pouvoir donc avoir cet élément pour pointer sur le head. On va créer un élément de type script ici, avec un document createElement de type script tout simplement. On va définir le type, alors attention, ce n’est pas nécessaire en HTML5. Mais on le définit pour montrer qu’on est bien dans une balise, un objet de type script, un objet de type node, d’accord ? C’est pas du tout un autre élément que cela quoi. Ici on va faire notre vérification. On va avoir toujours la même chose : Modernizr.websqldatabase et on va lui dire : « si à la vérification, à ce moment-là, on pourra mettre le src de ce script comme étant égal vers le DOM ici. » Alors ici, je l’ai là, pour le yep et le nope, alors attention yep et nope encore une fois c’est purement arbitraire, ça n’a rien à voir avec yepnope de tout à l’heure. Et donc on dit : « DOM yep, tu exécutes ce script, dans le cas contraire, tu exécutes un autre script. Donc ici, on n'aura pas du tout de possibilité de faire de callback puisqu’on écrit en dur un seul et unique src. Par contre attention, ce script, il va nous falloir l’ajouter le head, donc dans l’objet head ici qu’on avait récupéré, on va faire un appendChild script pour pouvoir gérer ce script à la volée. Et en fonction donc de la détection, le DOM va accrocher l’un ou l’autre de ces éléments pour pouvoir le checker. Alors si vous voulez qu’on vérifie les deux derniers éléments qu’on avait faits, ici on avait dans notre premier cas le jQuery, alors je passe sur la console ici, si j’actualise, on me dit bien c’est pris en charge et voici un rappel et pour le DOM, ici le DOM, hop console ici, c’est le DOM, c’est pris en charge. Bien entendu, si on passe sur Firefox, elle ne sera pas pris en charge. Voilà donc plusieurs approches qui vont nous permettre de pouvoir gérer ou non des fonctionnalités API en plus de manière native ou alors suppléée par des scripts complémentaires. Rapidement, je vous présente d’autres éléments qui sont LABjs, browserify-handbook aussi, et RequireJS qui sont donc des librairies JavaScript qui vont vous permettre non seulement de charger, mais aussi d’optimiser le chargement de ces fichiers JavaScript, mais là ça dépasserait un peu le scope de cette formation sur le HTML5 en production.

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 !