[Théorie] Exploiter le format de données JSON dans les applications WEB modernes (2011-2020).

Introduction json


Attiré depuis longtemps par la programmation objet, avec PHP-MySql (Objet), et Java avec UML ; je me trouva, il y a un an, fort attiré par la programmation objet et Mvc en Javascript avec le framework AngularJs.

Mais …je ne comprenais pas, au début, comment utiliser le format de données JSON avec ce nouveau framework AngularJs 1.x.

Au fil du temps, j’ai commencé à comprendre que c’était d’une simplicité, d’une puissance et d’une flexibilité déconcertante.

Depuis, je ne conçois pas de revenir à une autre technologie, mais plutôt à améliorer mes connaissances du façonnage de données au format JSON.

La programmation objet avec la technologie JSON est très agréable face aux autres technologies, bien plus rapide, simple et extrêmement intuitive, orientée Temps réel et collaborative.

Ce qu’il faut comprendre, c’est que JSON permet la manipulation en temps réel des données, en permanence, en particulier avec AngularJS 1.x ou Aurélia qui ont exploité ce format pour permettre une gestion extrêmement facile de la création d’applications.

Ensuite, il faut comprendre que la plupart du temps,on passe notre temps à éditer des tableaux d’objets Json dans les applications modernes Js, ceci en temps réel.

Chaque objet dispose d’un indice($index), qui nous permet de retrouver son rang dans le tableau. Des solutions de stockage Back-End comme Firebase(2013) attribuent carrément un id à chaque nouvel objet JSON créé, il n’y a plus de mapping objet/relationnel à faire, car tout est objet, cela implique une simplicité accrue de développement, sans compter les possibilités de créations d’applications collaboratives en temps réel !.

Je ne dis pas cela au hasard, c’est au fil de mes périgrinations sur les sites anglo-saxons que j’ai compris tout cela.

Sommaire


  • L’objet Json {}
  • Le tableau d’objets Json []
  • L’affichage en temps réel d’un objet Json avec AngularJs 1.x
  • L’édition en temps réel d’un objet Json.
  • Rappel du Modèle-Vue-Controleur avec AngularJs 1.x

L’objet Json {}


Un objet Json contient des données. Cela veux dire « Javascript Objet notation ».

Un objet est un abstraction d’un évènement ou d’un objet réel .

Il est contenu entre accolades, les infos sont séparées par des virgules.

Exemple :


{ "nom":"Dupuis","prenom":"Henri","email":"henri.d@gmail.com"}

Petite astuce… Lorsque tu crées ton Json, mecton, tu peux carrément injecter des variables JS dedans :

Exemple :


var email = "jojo@jo.fr";

$scope.monObjet = { "nom":"Dupuis","prenom":"Henri","email":email};

Le tableau d’objets Json []


Le tableau d’objets Json est ce qu’on utilise en permanence dans les applications web modernes .

C’est tout simplement une liste d’objets Json, que l’on peut modifier en temps réel !

Généralement, il porte un nom, le nom de notre exemple sera personnes.json, ou en angularJs 1.x, $scope.personnes

On peut l’initialiser comme ça : $scope.personnes = [];

Puis, on peut « pusher »(ajouter) à loisir de nouveaux objets Json dedans ! On peut aussi supprimer un objet !

Il est contenu entre crochets, et les objets sont séparés par des virgules.

Exemple :


[
{ "nom":"Dupuis","prenom":"Henri","email":"henri.d@gmail.com"},
{ "nom":"Hammed","prenom":"Mohammed","email":"h.m@gmail.com"},
{ "nom":"Gonzales","prenom":"José","email":"h.m@gmail.com"}
];

L’affichage en temps réel d’un tableau Json avec AngularJs 1.x

On écrira ceci dans le HTML pour afficher toutes les données de notre tableau JSON $scope.personnes :

<div ng-repeat="personne in personnes">{{personne.nom}}  {{personne.prenom}} {{personne.email}}</div>

Ca, c’est avec AngularJs, mais on peut également lister notre tableau Json avec Jquery, Aurelia, ou un autre framework Js, bien sur ! ng-repeat est en l’occurence une sorte de boucle foreach améliorée, avec un processus qui tourne derrière et qui remets tout à jour en permanence … (Le dirty Checking)

L’édition en temps réel d’un objet Json.


Question : Mais comment que je fais pour le modifier en temps réel mon tableau, tu veux dire qu’on peut modifier l’émail d’un
gars comme ça sur le vif en mémoire vive ?

Tout à fais, la spécialité de JS est de travailler en temps réel, en mémoire vive. On peut donc facilement modifier l’émail d’un « gars » en mémoire vive, mecton !

Question : Ah bon et comment que tu ferais ?

Si je veux changer l’email de José avec Angular JS en temps réel, je taperais ceci dans mon controleur :

$scope.personnes[2].email = "nouvelEmaildeJosé@gmail.fr";

On verrais alors la modif s’appliquer en temps réel dans la page WEB, grace au 2 ways binding (qui à ses défauts, mais qui et sympa.)

Question : Mais pourquoi que c’est un 2 alors que José est à la ligne 3 dans le tableau d’objets JSON?

Parce que dans un tableau, le premier indice est zéro, mecton.

Une dernière chose, si tu utilises la base de données Firebase et AngularJs 1.x, et que tu modifies un objet Json dans ta base de données, tous les navigateurs connectés(Dans le monde entier…) afficheront ton objet json mis à jour en temps réel, sans rien faire, mecton ! C’est ce qu’on appelle le « 3 ways binding ».

Rappel du Modèle-Vue-Controleur avec AngularJs 1.x


Angular Js 1.5 c’est :

. Le modèle : Ben…Mes données quoi…,
. La vue :
Ben le code Html c’est tout… Ben ça fait que afficher mes données quoi…,
. Le controleur
: Les opérations mathématiques sur mes données quoi….Mecton

Publicités