Découvrez 3 techniques avancées en développement qui vont vous permettre de développer beaucoup plus rapidement vos applications JavaScript, mais aussi de les structurer correctement, ce qui va en faciliter la maintenance et les évolutions futures.
Ces techniques vont également vous permettre de travailler en équipe sur un projet.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Les 3 stratégies avancées pour développer en équipe avec JavaScript
Bonjour à tous et bienvenu sur développement facile ici Matthieu expert en développement applicatif.
Aujourd’hui je voulais partager avec vous un ensemble de stratégies avancées en développement qui vont vous permettre, c’est 3 stratégies, déjà de développer beaucoup plus rapidement vos applications JavaScript, de les structurer donc ça va vous permette s’il y a un bug, une erreur de fonctionnement, de fonctionnement non prévu, de le corriger en un claquement de doigts, donc très rapidement également et ça va vous permet également de travailler en équipe donc vous serez une équipe de plusieurs développeurs et vous pourrez travailler ensemble sur le même projet sur la même application.
En fait trop souvent et vous êtes peut-être dans ce cas-là, des développeurs essayent de travailler à plusieurs sur un projet, donc ça c’est très bien, donc une application JavaScript qui contient plusieurs fichiers JavaScript. Le gros problème c’est que l’application n’est pas structurée. Il y a des fichiers JavaScript dans tous les sens dans tous les coins, on ne sait pas à quoi ils correspondent, comment les utiliser ? Quelle fonctionnalité a été codée ? dans quel fichier … enfin quand il y en a 10, 20 ou 30 fichiers JavaScript pour une grosse application, sans structure, travailler en équipe ça devient vite très, très, compliqué. Et donc vous êtes peut être dans ce cas là où justement vous êtes perdus dans votre projet et du coup vous préférez travailler tout seul, plutôt qu’en équipe. Donc le temps de développement du projet s’allonge et s’allonge, et ça n’avance pas. Si vous êtes dans ce cas-là, ces 3 stratégies avancées que je vais partager avec vous, ça va vraiment vous permettre de faire un grand bond en avant dans votre développement.
Donc la première chose à mettre en place avec JavaScript c’est d’utiliser la programmation orientée objet. Je sais, JavaScript de base n’est pas fait pour créer des objets, ce n’est pas un langage de classe on va dire. Maintenant il existe des solutions notamment avec prototype pour créer des classes donc des objets et justement l’organisation en langage objet ça va vous permettre d’aller beaucoup, beaucoup, plus loin, de mieux organiser votre code, donc de créer un fichier JavaScript par classe par exemple ou un fichier JavaScript par packages, d’organiser vos fichiers comme je vous le disais dans un cours précédent avec les include de fichiers JavaScript, là avec le langage objet, vous allez aller beaucoup plus loin dans l’organisation de votre code. Donc si vous ne voulez pas … si vous voulez utiliser une technique simple pour créer vos classes JavaScript je vous conseille d’utiliser des Framework. Donc par exemple Framework prototype type qui est très, très, bien fait, il contient plusieurs fonctionnalités prototypes en plus il est très léger à intégré dans les applications Web. Avec prototype vous pouvez créer des classes, envoyer des événements effectuer de l’Ajax. Donc utilisez prototypes pour créer votre code en type programmation orienté objet avec des classes, des objets.
Alors la deuxième stratégie que je veux partager avec vous c’est que le langage JavaScript c’est clairement un langage événementiel, il y a plusieurs événements qui sont envoyés, et en fonction de la réception d’un événement on effectue telle ou telle action suivant qui nous a envoyé l’événement. Pour s’en convaincre, il n’y a qu’à voir l’utilisation d’Ajax, c’est une suite d’événements, renvoyer un fichier PHP sur un serveur, ou récupérer un fichier XML, un fichier texte, communiquer avec une base de données. Tout ça c’est des actions qui sont envoyées un peu … on ne va pas dire dans la nature mais … comme ça et on attend un événement le retour de l’instruction pour continuer à avancer à dérouler le code. C’est pour ça que vous avez, quand il y a de la grosse communication JavaScript, une barre de progression « chargement en cours ». Donc deuxièmes techniques, stratégies avancées, tirez des possibilités avancées justement de la programmation événementielle parce que JavaScript si prête parfaitement. Là encore, il existe des Framework donc y’a le framework jQuery par exemple qui permet d’envoyer tout un tas d’événement, de vraiment d’un côté vous avez la programmation orientée objet avec toutes vos classes, classées dans des fichiers, dans des dossiers également de l’autre vous utilisez jQuery, qui va vous permettre d’envoyer des événements et en fonction de la réception des événements d’avancer dans l’exécution de votre code, les actions va proposer à l’utilisateur, les interfaces à modifier
Et la troisième la stratégie avancée : donc il y a très peu de développeurs qui l’utilisent ou certains l’utilisent mais ils ne savent pas trop comment ça fonctionne, c’est les modèles de conceptions ou design pattern. Alors là, si vous commencez à maîtriser les modèles de conceptions singleton, observer, y’a Factory, le modèle vue contrôleur … enfin il y en a plusieurs, adapté à chaque cas de figure type. Donc en fonction de l’architecture de votre programmation ce qu’elle va faire et tout, ça va vous permettre si vous utilisez le modèle MVC par exemple modèle vue contrôleur, vous savez qu’il y a des vues, donc un répertoire avec des vues, un ou plusieurs modèles, un ou plusieurs contrôleurs, et quand vous travaillez en équipe une personne, un développeur de l’équipe peut travailler sur le contrôleur, un autre développeur l’équipe sur les modèles, un autre ou même plusieurs développeurs de l’équipe sur les vues et à la fin tout ça s’imbrique parce que ce modèle de conception communique beaucoup avec des événements ou des … il y a des singletons également donc le modèle observer qui est dedans, le modèle de conception commande. Donc vous me direz aujourd’hui je vais vous montrer un exemple de code source mais ça ne se fait pas en 10 minutes cet apprentissage de ces trois stratégies. C’est pour ça que juste sous cette vidéo y’a un formulaire où vous renseignez votre prénom votre adresse e-mail et vous allez recevoir gratuitement une formation pour aller beaucoup plus loin où vous découvrirez le comment utiliser le langage objet avec JavaScript comment utiliser la programmation événementielle avec JavaScript et il y a également des cours pour apprendre les modèles de conceptions avec JavaScript donc par exemple observor, singleton, commande, Factory, MVC et bien d’autres encore. Et quand vous maîtriserez ces trois stratégies je peux vous garantir vos applications, vous allez passer au niveau supérieur. Vous travaillerez en équipe, vous développerez beaucoup rapidement. Des bugs, ça arrive à tout le monde, moi le premier, il y en a toujours dans mes applications le truc c’est que ça va vous permettre de les corriger en un claquement de doigts donc très, très, rapidement. Et le fait de travailler à plusieurs développeurs si vous êtes absents un autre de vos collègues développeurs d’un membre de l’équipe peut ajouter des fonctionnalités si cela s’avère nécessaire.
Donc si on prend un exemple JavaScript. On va utiliser, donc je vous montre avec le Framework Dojo, donc vous avez animations dojo et après le répertoire Dojo et donc le framework donc je y’a le fichier dojo.js à inclure uniquement celui-ci et celui-là inclure dojo.js qui est inclut ici et ensuite, comment ça fonctionne ? Et bien vous avez vu tout le code JavaScript est séparé dans plusieurs fichiers la gestion d’Ajax, un parser c’est à dire ça analyse un fichier texte ou un fichier XML y’a même des répertoires pour le debug ici, firebug.js, pour la gestion des données, des utilitaires, des API, enfin vous avez tout un tas … donc c’est l’intérêt si vous connaissez utiliser régulièrement le framework Dojo, vous savez où retrouver les informations, la gestion des erreurs. C’est ce que vous devez faire pour vos applications de plus en plus imposantes en JavaScript, les organiser avec des répertoires et différents fichiers en fonction de leur traitement. Voilà un store, tout est organisé, une API, des utilitaires et après il y a les fichiers ici JavaScript avec le code qui est dedans. Donc je vous invite vraiment très fortement …donc vous faites une inclusion même principe inclusion dojo.js et si je vous montre le fichier dojo.js que je vais chercher. Alors dojo.js il est … il est … pas très loin, il est ici et donc si on regarde dojo.js, vous allez remarquer qu’il effectue des imports d’autres fichiers JavaScript avec des URL définit.
Donc vous avez juste … vous pouvez prendre exactement le même modèle … vous avez juste le fichier dojo ici à inclure donc vous ce sera un autre fichier et ensuite vous faites des require d’autres fichiers JavaScript dont vous avez besoin comme fait dojo justement avec des URL que vous spécifiez tout simplement.
Donc maintenant c’est à vous de jouer pour organiser votre code JavaScript et le rendre beaucoup plus performant, pouvoir travailler en équipe, détecter et corriger les bugs beaucoup plus rapidement, ajouter des nouvelles fonctionnalités beaucoup plus rapidement également.
Maintenant je vous propose d’aller beaucoup, beaucoup, plus loin avec la vidéo 2. Donc au-dessus de cette vidéo ou il y a une image vidéo 2 ou à la fin de cette vidéo, elle va se transformer en lien cliquable, il suffira de cliquer dessus pour être automatiquement redirigé dans la deuxième vidéo. Et justement dans la deuxième vidéo en fait vous allez apprendre ces trois stratégies et bien d’autre. D’autres stratégies avancées, pour utiliser le potentiel du langage JavaScript à votre avantage pour utiliser les potentiels des Frameworks, par exemple prototype vous allez apprendre à utiliser prototypes, jQuery, jQuery UI, tout ça dans le détail. Donc, je vous invite à cliquer sur le lien qui va apparaître sur cette vidéo et moi je vous dis à tout de suite dans la deuxième vidéo.
[/ppmtoggle] [/ppmaccordion]
Exemple d’application complète en JavaScript avec le Framework Dojo
Et voici le code source de l’application présentée en exemple dans le cours.
Téléchargement du code source Exemple d'animations avec le Framework Dojo
