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

Découvrir Ember.js

Comprendre les principes

Testez gratuitement nos 1336 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous allez comprendre les principes qui animent Ember Data. Faites le tour des avantages de ce dernier par rapport aux requêtes Ajax standards.
06:26

Transcription

Nous avons d'abord vu les routes et les templates, nous avons ensuite vu les composants, tout ceci pour voir finalement comment présenter notre application, et offrir des intéractions. Nous avons très peu vu la notion de modèle c'est à dire comment gérer les données de notre application. Le principe jusqu'à présent consistait à télécharger les données depuis un serveur local, donc qui était généré par Gson server le serveur de test, et pour les télécharger, on utilisait Ajax. Donc une requête basique de type get qui nous retourne du json, et puisque on est en Javascript, le json est interprété directement par ember, et on peut utiliser ça comme si c'était des objets. C'est ce qu'on a fait par exemple dans groups.js, dans la route, c'est à dire qu'on demande la liste de tous les groupes, et dans group js, là on demande pas tous les groupes, on demande uniquement celui qui correspond à l'ID qu'on est en train d'afficher. Il y a plusieurs inconvénients à utiliser ça. Le premier inconvénient c'est qu'on n'a pas de fichier classe pour notre objet, c'est à dire qu'on n'a pas créé une nouvelle classe pour chacun des objets, ça se base uniquement sur le format Json qui est retourné, et comme on sait qu'on a un attribut title et un attribut image, on peut commencer à s'en servir. Mais on n'a pas la possibilité par exemple d'ajouter des nouvelles méthodes pour des objets un petit peu plus complexes. Ça pourrait intéressant d'avoir par exemple des méthodes dans l'objet qui nous retourne une contanétion du nom et de l'image je sais pas, on aurait pu faire plein de choses avec ces objets-là, mais là, on ne peut pas puisqu'on récupère des objets tels quel et on s'en sert, donc on ne peut pas ajouter de code dessus, c'est le premier problème et c'est pas le plus gros problème. Le deuxième problème c'est qu'on doit aussi construire nous-même les URL, c'est à dire que c'est à nous à savoir que pour avoir cet ID de groupe, ce groupe-là, il faut faire un slash group slash, l'ID qui est ici. En plus de ça, on a les URL qui sont directement présentes dans chacune des routes, donc avec le chemin de départ, si on a plusieurs serveurs sur lesquels travailler, ça peut très vite être source d'erreur. La construction d'URL nous a aussi posé problème ici, lorsqu'on a voulu supprimé, c'est pour ça d'ailleurs qu'on ne l'a pas fait, parce qu'il fallait encore une fois construire une URL avec une requête un petit peu spéciale. C'était largement faisable, mais ça ne valait pas le coup, encore une fois d'essayer de comprendre et d'insérer la logique de réseau la-dedans, alors que ce qu'on cherche à faire, c'est uniquement à supprimer des données qu'on a en local. Donc il y a plusieurs inconvénients, il y a encore un dernier inconvénient je vous le montre, quelque chose que je ne vous avais pas montré volontairement. Pour vous le montrer, je vais d'abord ajouter ici, je vais remettre l'input qu'on avait tout à l'heure. Voilà, input value group title on se regarde. Pour vous montrer ici, si je modifie ce texte on voit qu'il se met à jour ici, mais par contre il ne se met pas à jour ici. c'est bizarre, alors on va voir pourquoi, maintenant si je clique là et que je modifie, tiens, là il se met bien à jour. Pourquoi on a ce problème ? Le problème, il est tout à fait logique finalement , parce que ember, quand vous téléchargez ces données-là et que vous téléchargez ces données-là, pour lui, ce sont deux chargements complètement séparés. Il a aucune idée que dans la liste de groupes qui est ici, le deuxième item qui était amis, c'est exactement le même que celui qu'on charge dans cet URL-là. En effet, ils ont les mêmes ID, mais c'est pas associé à un modèle d'objet, donc pour lui, il a reçu une liste d'objet qui n'ont pas de nom, qui n'ont pas de type, il s'en sert d'un côté, puis il s'en sert de l'autre. Quand on modifie les objets qui ont été chargés dans cette route, quand j'actualise, il a d'abord changé la liste d'URL pour construire cette liste-là Et ensuite, il a chargé séparément, d'ailleurs on peut le voir en allant sur l'inspecteur, si je vais dans network, on voit qu'on a deux chargements séparés, la liste de groupes, qui a retourné ceci. Et uniquement le groupe 2 qui a retourné ceci, mais pour ember, voyez, entre ça et ça, il a aucun moyen de savoir que c'est la même chose. Ça pourrait d'ailleurs être des choses complètement différentes, avec un petit trait et une image il n'y a pas que des groupes. Donc pour lui, c'est des choses séparées. Quand je modifie celui-ci, il modifie l'objet qui a été chargé pour cette route mais pas celui-là. Alors que si j'arrive ici, et que je clique sur le lien, en fait, il utilise cet objet-là, c'est dans le link-to qu'on avait fait passer les données à cette route-là, cette fois-ci, il n'utilise pas le chargement Ajax pour cette page-là, il utilise la donnée récupérée de là, donc si on modifie, on voit que ça modifie partout. Donc ça, c'est un problème, c'est à dire que ember n'a aucune idée de ce que l'on télécharge, donc il ne peut pas nous aider à garder les choses synchronisées. Pour arriver à palier à tous ces problèmes ce qui a été envisagé, ça s'appelle ember data. ember data passe par ce qu'on appelle le Store, et le Store, c'est un objet qui va gérer automatiquement les liens avec un serveur. Le Store, vous allez lu demander uniquement : dis-moi, s'il te plait le store, retourne-moi la liste des groupes. et c'est lui qui va s'occuper de construire l'URL, de trouver le serveur, de lancer le téléchargement, de récupérer le Json, et ce Json, de le convertir en une suite d'objets, que vous lui aurez indiqué auparavant. Vous aurez créé des types de classe pour chaque objet, La seule chose que vous allez faire, vous c'est : dis-moi s'il te plait le store, retourne-moi la liste de tous les groupes. Ou alors, vous pouvez lui dire, retourne-moi le groupe numéro n° 1 ou n° 2 ou numéro 2 ou numéo 3. Et lui, automatiquement il va essayer de voir s'il ne l'a pas déjà téléchargé dans une précédente requête. S'il ne l'a pas téléchargé, il va faire la requête il va construire l'URL spéciale pour récupérer ce groupe-là. Obtenir un résultat, analyser ce résultat et créer un objet en question. En faisant ça, il est au courant de ce qu'il est en train de télécharger, il connait le type et s'il le retourne à plusieurs endroits différents, même si c'est via des requêtes différentes il sait que c'est le même objet, c'est un objet de type groupe, et donc il va garder la synchronisation automatiquement. Ça vous permet donc dans votre projet, dans le code logique, de ne plus vous préoccuper de la logique réseau. C'est ember data qui va chercher automatiquement tout ça pour nous. En plus de ça, si vous faites des modifications sur les objets, et que vous décidez de dire, j'ai modifié, est-ce que tu peux enregistrer s'il te plait, Le store va s'occuper de construire la requête spéciale pour envoyer pour envoyer au serveur la modification pour que le serveur le conserve. Pareil pour la suppression, vous avez un objet, et vous lui dites : s'il te plait, j'aimerais que tu détruises cet objet-là. et que tu l'envoies au serveur. Et c'est lui qui s'occupe de faire la requête de l'envoyer au serveur et de vous retourner s'il y a eu un problème ou pas, si tout a bien marché. Donc c'est quelque chose de très puissant, et qui n'est pas très difficile à mettre en place, il y a des normes à respecter, mais c'est relativement simple. Et c'est surtout 100% automatique. Donc, on sépare la logique de téléchargement de la logique de manipulation des données. Nous on s'occupe uniquement de la manipulation et c'est lui qui va s'occuper de la conversion. Et ensuite, et bien il existera ce qu'on appelle des adapters entre le côté store et le côté serveur. Lui, il nous fournit des acteurs en standard, si votre serveur respecte des normes, après vous pouvez créer d'autres adapters si votre serveur est un petit peu spécial.

Découvrir Ember.js

Créez vos composants et mettez en page vos sites avec une facilité déconcertante avec Ember.js. Apprenez à créer des routes et à charger vos modèles depuis un service web externe.

2h57 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :31 mars 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 !