Accélérez votre développement, facilitez la maintenance et l’évolution de vos applications JavaScript.
Apprenez à structurer votre code JavaScript.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment organiser votre code JavaScript pour plus d’efficacité et de performances
Bonjour à tous et bienvenu sur développement facile ici Matthieu experts en développement applicatif.
Et dans cette vidéo, je voulais partager avec vous quelque chose de très important pour votre développement JavaScript. Quelque chose qui fera la différence et qui surtout vous permettra de développer beaucoup plus rapidement et d’assurer une maintenance, une évolution de vos applications JavaScript beaucoup plus facilement. Trop souvent je rencontre des développeurs et vous êtes peut-être dans ce cas-là, moi j’ai fait cette erreur quand j’ai débuté en JavaScript, vous mettez tout votre code JavaScript dans un fichier HTML directement, ça fait que vous avez énormément de code JavaScript dans votre fichier HTML, plusieurs fonctions, plusieurs variables et du coup vous ne savez plus trop où donner de la tête s’il y a un bug, c’est impossible de retrouver quand on a 100 ou 200 lignes de code JavaScript dans un fichier HTML, c’est très, très difficile de s’y retrouver. Donc vous êtes peut être dans ce cas-là, et du coup pour trouver les bugs, pour rajouter de nouvelles fonctionnalités, ça devient vraiment très compliqué et c’est là où l’on construit des usines à gaz et du coup les applications JavaScript rament et elles sont bugguées.
Alors comment faire pour s’en sortir ?
Il existe une fonctionnalité très simple à utiliser qui consiste à inclure des fichiers, c’est-à-dire avec la balise <script type = « text/javascript »>, vous allez dire dans le fichier HTML ou se situe votre fichier JavaScript ou vos fichier JavaScript. C’est-à-dire vous allez organiser votre code par fichier JavaScript. Dans votre fichier HTML, il y aura juste, on va dire des includes JavaScript, je vous montrerais après un exemple de code source, parce que ce n’est pas vraiment un include JavaScript, c’est une ligne script et puis le chemin vers votre fichier JavaScript. Donc on va dire des includes JavaScript pour que l’on se comprenne bien des inclusions de fichiers JavaScript. Et dans vos fichiers JavaScript, votre code sera organisé. Par exemple, sur un projet, un jeu JavaScript, Ajax qui combine php, MySQL toutes ces technologies, et bien vous aurez votre code organisé en dossiers. Vous allez créer des répertoires si vous utilisez le modèle de conception MVC, modèle vue contrôleur, vous aurez un répertoire modèle, un répertoire avec vos vues, un répertoire avec vos contrôleurs et dedans vos fichiers JavaScript, donc chaque développeur s’organise comme il veut. En principe, moi je vous conseille de créer un fichier JavaScript avec une classe JavaScript, ou alors plusieurs classes JavaScript dans le même fichier mais avec des classes qui portent sur le même thème. Ça fait que déjà dans votre code HTML, il n’y aura que quelques lignes d’inclusion de fichiers JavaScript, donc il sera beaucoup plus lisible et votre code JavaScript sera organisé sous forme de répertoires et ensuite de fichiers du coup ce sera beaucoup plus simple pour vous, pour trouver s’il y a un bug, pour faire du débuggage, j’ai mis un cours vidéo pour débugger en JavaScript, donc je vous invite à aller le consulter sur Développement Facile, pour faire des évolutions de vos fichiers JavaScript, ce sera très simple parce que vous connaîtrez le dossier justement où vous rendre et dans quel fichier JavaScript effectuer les améliorations. Donc je vous montre tout ça à travers un petit exemple de code source, comme ça vous allez voir ce que ça donne.
Alors l’exemple pratique pour améliorer votre programmation JavaScript. Alors je vous le disais juste ici, vous faîtes appel au fichier JavaScript qui contiendra tout votre code source. Vous faîtes un src = le chemin directement vers votre fichier JavaScript donc juste avec cette balise-là. Et dans votre fichier JavaScript vous avez tout votre code donc le code source permet d’afficher la date celui-là. Je fais appel à une fonction tout simplement, je lui passe la balise output la balise div avec un id output tout simplement et après vous avez votre code JavaScript qui là va récupérer la date et l’afficher avec un inner HTML dans le contenu, la div identifiée par output. L’avantage si on regarde le fichier HTML, il est relativement simple donc vous avez juste une balise output div et l’inclusion de votre fichier JavaScript c’est aussi simple que ça. Si on regarde un deuxième exemple un peu plus évolué. Donc là, on inclut le fichier JavaScript jQuery, donc jQuery qui est en version minimisé pour prendre le moins de place possible, comme ça, ça permet un chargement beaucoup plus rapide de vos sites Internet, donc c’est pour ça qu’il n’est pas très lisible, mais vous allez sur le site de jQuery, vous aurez un code source beaucoup plus lisible donc voilà. Vous avez inclus le fichier JavaScript jQuery, donc soit vous pouvez utiliser jQuery ici, donc là il n’y a pas beaucoup de ligne de code donc on peut se permettre d’utiliser du code JavaScript directement dans le fichier HTML ou alors, vous utilisez cette même méthode là, vous faîtes un inclusion de votre fichier JavaScript, et là il suffirait de déplacer tout ce code dans un fichier que vous nommez executejQuery executeApplication par exemple, tout simplement. Donc l’avantage c’est que ça vous permet de créer vos propres Framework JavaScript un peu comme jQuery ou vous pouvez utiliser jQuery, Dojo, jQuery UI, jQuery mobile, BootStrap, etc. et donc là vous faites appel à votre code JavaScript tout simplement, Je vous montre le résultat visuel des 2 exemples de code source. Alors, celui pour jQuery voilà c’est tout simple pour afficher, masquer, du texte tout simplement et le code pour afficher la date va tout simplement tout simplement ça affiche la date. Donc le code jQuery afficher/masquer et le code qui affiche la date tout simplement donc c’est aussi simple que ça, et vous allez voir ça va vous simplifier la vie de faire des inclusions de fichiers JavaScript, de mettre votre code JavaScript dans un fichier à part.
Donc maintenant je vous propose d’aller voir la deuxième vidéo, c’est-à-dire au-dessus de cette vidéo il y a une image qui s’appelle vidéo 2, ou juste à la fin de cette vidéo ça va se transformer en lien cliquable. Donc la vidéo va se transformer en lien cliquable. Ça fait que vous allez pouvoir aller sur la deuxième vidéo et dans la deuxième vidéo vous allez apprendre comment vous pouvez apprendre toutes les subtilités du code JavaScript, devenir un professionnel avec le langage JavaScript, c’est à dire apprendre à utiliser le JavaScript, à utiliser Ajax, apprendre à utiliser le Framework jQuery, apprendre à utiliser à organiser votre code en objet, c’est de faire du langage objet avec JavaScript, vous allez également le langage d’événement. Ça fait que avec toutes ces stratégies avancée de développement vous allez développer beaucoup plus rapidement et des applications JavaScript qui soient performantes et surtout très faciles à maintenir. Vous développez votre application JavaScript, vous serez capable de revenir 3, 4 mois après pour la faire évoluer sans aucun problème, justement parce que vous aurez appris des stratégies de développement qui simplifient littéralement votre développement JavaScript et vous permettre d’aller beaucoup plus rapidement dans votre développement. Donc tout ça, c’est dans la vidéo 2. Donc je vous dis à tout de suite dans la deuxième vidéo.
[/ppmtoggle] [/ppmaccordion]
Télécharger les deux exemples de la vidéo
Retrouvez les codes sources commentés qui vous ont été présentés dans la vidéo
Téléchargement du code source Exemples d'applications JavaScript
