Apprenez toutes les bonnes pratiques JavaScript pour créer des sites optimisés pour mobile dès la conception.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Utilisez ces 5 bonnes pratiques JavaScript pour des applications performantes sur mobile
Bonjour à tous et bienvenu sur Développement Facile.
Ici Matthieu expert en développement applicatif, dans cette nouvelle vidéo toujours consacrée au développement sur mobile, sur les Smartphones et sur les tablettes, vous allez apprendre toutes les bonnes pratiques que vous devez utiliser avec votre code JavaScript, avec le JavaScript, pour créer des sites optimisés pour mobile dès leur conception, c’est très important.
Les bonnes pratiques JavaScript
Il y a un certain nombre de règles, il n’y en a pas beaucoup à suivre et ça va vous permettre de créer une expérience beaucoup plus agréable pour vos visiteurs. Comme avec le HTML 5, comme avec le CSS 3, bien évidemment le site pour un mobile doit être le plus léger possible et effectuer le moins de requête possible avec le serveur donc vous devez utiliser la balise qui permet d’inclure des fichiers JavaScript, du code JavaScript via un fichier externe, c’est vraiment très important parce que si vous avez plusieurs pages HTML qui utilisent le même code JavaScript, le fait d’intégrer un fichier externe, ce fichier JavaScript va être mis en cache dans le navigateur du client donc de votre utilisateur et ainsi quel que soit la page qu’il appelle, si il utilise toujours le même code JavaScript, ce sera chargement beaucoup plus rapide.
Pensez également à minimiser vos fichiers JavaScript, je vous ai mis une URL qui le fait automatiquement, vous envoyez votre fichier JavaScript et vous allez recevoir le code compressé qui prend beaucoup moins de place, ça peut réduire jusqu’à 50 % le poids de vos fichiers JavaScript dans certains cas donc c’est très important de toujours compresser vos fichiers JavaScript avant de les rendre accessibles à vos utilisateurs.
Vous pouvez également utiliser la technologie Ajax, pensez à l’utiliser avec parcimonie, tout en sachant que dans certains cas elle est très bien, il faut savoir que l’Ajax a des inconvénients, ça nécessite beaucoup plus de connexion serveur, beaucoup plus de bande passante et beaucoup plus de ressources processeur de l’appareil de l’utilisateur, vous savez que sur un Smartphone, sur une tablette, les ressources processeur et mémoire sont réduites par rapport à un ordinateur de bureau, donc Ajax à ces trois inconvénients donc privilégiez plutôt la méthode statique avec des fichiers HTML que vous rechargez complètement quand c’est nécessaire, vous affichez le maximum d’informations sur un fichier HTML donc en méthode statique, par contre dans certains cas, ça peut être beaucoup plus intéressant de modifier seulement une partie de la page grâce à Ajax si vous avez plusieurs informations sur la même page avec un accordion ou que vous faites beaucoup d’interaction avec les utilisateurs, au lieu de recharger une grosse page Web qui prend énormément de poids, de place, et qui est longue à charger, surtout avec une connexion qui est en 3G sur un Smartphone, Ajax ça va recharger uniquement un élément de la page donc ça va être beaucoup plus rapide à l’affichage pour vos utilisateurs. Vous savez qu’Ajax à trois défauts, plus de connexion pour le serveur, plus de bande passante, plus de ressources processeur sur un Smartphone mais il a l’avantage de recharger uniquement une certaine zone d’une page HTML, à vous de voir en fonction de vos applications, de vos sites Web sur les mobiles, à vous de voir la technique qu’il faut utiliser, ça, c’est à vous de faire des tests en fonction de vos préférences.
Bien évidemment, pensez à utiliser le système événementiel, JavaScript c’est un langage basé sur les événements donc utilisez les éléments pour optimiser vos pages Web, donc vous pouvez ajouter un event lister, un écouteur d’événement et vous lui indiquez quel type d’événement à utiliser donc objet écouter.addEventLister le nom de l’événement, la fonction JavaScript a appeler et un booléen. Une fonction dans le document HTML est lancée quand la page a été lue dans sa totalité sans pour autant être complètement chargée, donc c’est cet événement que vous allez utiliser DOMContentLoaded dès que le DOM est chargé dans la page HTML, cet événement est envoyé et ça va appeler votre fonction JavaScript, celle que vous avez définie dans le addEventLister et dans cette fonction JavaScript, vous allez pouvoir lancer votre code JavaScript et tout un tas d’interactions que vous souhaitez, par exemple, une connexion Ajax, ou alors le chargement d’une image, le chargement d’un contenu, à vous de voir, donc l’utilisation de cette fonction ça réduit fortement le temps d’attente avant de lancer votre fonction JavaScript, c’est une fonction très utile pour appeler des fonctions en fin de page sans devoir attendre tous les chargements de la page, tous les chargements des fichiers CSS, tous les chargements des images ect. Pensez à écouter les événements JavaScript DOMContentLoaded très pratique cet événement.
Voir l’exemple JavaScript
Je vais vous montrer un exemple de code source, pour écouter un événement JavaScript et effectué une action derrière, c’est toujours plus parlant quand on le voit visuellement donc c’est partit pour l’exemple de code.
Alors l’exemple de code source sur les bonnes pratiques avec JavaScript, le fichier CSS reste classique il ne change pas, c’est le gabarit HTML 5, par compte tout se joue ici, donc je vous ai dit incluez plutôt des fichiers JavaScript externes, ça va permettre au navigateur de les mettre en cache, donc c’est très pratique pour utiliser le cache du navigateur, surtout sur les Smartphones et les tablettes pour un chargement beaucoup plus rapide de vos sites, donc utilisez ceci et après j’ai mis un code JavaScript tout simple, il suffit d’écouter cet événement qui est appelé dès le chargement du DOM, et donc ça va appeler la fonction JavaScript, ici, donc c’est vraiment tout simple en fait, j’ai mis du code JavaScript très simple, vous incluez votre fichier JavaScript donc tout ce qui est de dans ça va être exécuté donc document, on s’abonne à l’élément DOMContentLoaded et dès que cet événement est appelé par JavaScript, on appelle cette fonction, la page est lue entièrement. Qu’est-ce que ça donne au chargement ?
Voilà tout simplement, je recharge la page et vous avez l’événement qui est notifié, c’est un exemple vraiment très simple pour vous permettre de comprendre le système des événements avec JavaScript parce que la programmation événementielle c’est un des piliers de JavaScript c’est vraiment très important à comprendre, une fois que vous avez compris comment vous abonner à des événements et appeler une fonction JavaScript derrière une fois que l’événement est généré, vous avez compris beaucoup de choses.
Votre plan d’actions !
Maintenant c’est à vous de jouer, optimisez votre code JavaScript pour créer vos sites pour les Smartphones, les tablettes donc pensez à suivre toutes les bonnes pratiques que je vous ai données dans ce cours, c’est un cours piliers, si vous avez des questions comme d’habitude vous les posez directement sous ce cours vidéo. Je vous invite maintenant à cliquer sur ce lien, sur l’image, lancer la deuxième vidéo, dans la deuxième vidéo ensemble on va aller beaucoup plus loin dans la création d’applications complexes avec JavaScript, vous allez découvrir des Framework qui vous simplifient la vie, qui vous permettent de créer deux à trois fois plus rapidement des sites performants et qui sont en même temps compatible sur les Smartphones, les tablettes, les ordinateurs de bureau et qui s’affiche correctement quel que soit le navigateur utilisé par votre visiteur, tout ça c’est dans la deuxième vidéo, en plus vous pourrez me poser toutes vos questions et je vous fournirai des exemples de code source dès que vous en avez besoin, cliquez simplement sur l’image, sur ce lien, cliquer ici pour lancer la deuxième vidéo. Je vous retrouve tout de suite dans la deuxième vidéo pour tout vous expliquer à tout de suite.
[/ppmtoggle][/ppmaccordion]
Télécharger l’exemple de code du cours
Retrouvez l’exemple de code source ci-dessous
Téléchargement du code source bonnes pratiques JavaScript
