IFT 1005 - Design et développement Web

6. Structure

Sébastien Roy, Université de Montréal

IFT 1005 - Design et développement Web

6. Structure

Sébastien Roy, Université de Montréal
21 février 2022
 

Remerciements

Merci à Guy Lalpame et Louis Salvail pour avoir partager le matériel qu'ils ont monté pour IFT1005.

XML n'est qu'un début

Il est l'ancêtre de beaucoup de formats...

Pouquoi? En fait, XML est un peu lourd...

pour les humains: ?

entre machines: xml oui mais lourd à parser... donc JSON, YAML, TOML

Mais certains dérivés très cool...

Ce qu'on apprécie de XML

Représentation de données et documents. Lisible par un humain, et par une machines... Standardisé Simple, général, internet-friendly... ...structures arbitraires variables... (VS sql par exemple)

Ce qu'on reproche à XML

lourd, pas facile à parser, etc... verbeux, complexe, redondant... Une question: combien d'information contient ce xml? Lisibilité... Un lien: lien

Sérialisation

On veut représenter des données hautement structurée...

Plusieurs alternatives...

JSON

Format d'échange de donné entre serveur et navigateur web...

très utilisé dans les API

RFC8259 ( voir aussi ECMA-404 )

JSON, un exemple


{
  "prénom": "John",
  "nom": "Smith",
  "citoyen": true,
  "âge": 27,
  "addresse": {
    "rue": "21 rue du ouèbe",
    "ville": "Montréal",
    "province": "QC"
  },
  "téléphone": [
    {
      "type": "maison",
      "numéro": "212 555-1234"
    },
    {
      "type": "bureau",
      "numéro": "646 555-4567"
    }
  ]
}
        

<?xml version="1.0" encoding="UTF-8"?>
<root>
   <prénom>John</prénom>
   <nom>Smith</nom>
   <citoyen>true</citoyen>
   <âge>27</âge>
   <addresse>
      <rue>21 rue du ouèbe</rue>
      <ville>Montréal</ville>
      <province>QC</province>
   </addresse>
   <téléphone>
      <element>
         <type>maison</type>
         <numéro>212 555-1234</numéro>
      </element>
      <element>
         <type>bureau</type>
         <numéro>646 555-4567</numéro>
      </element>
   </téléphone>
</root>
        

JSON

Les valeurs sont objet, liste, nombre, chaîne de caractère, true, false, ou null.

JSON

Un Objet est une collection de paires clé:valeur, entre { et }, séparé par ,


{ "a":123, "b":"xyz", "z":true }

JSON

Une liste ordonnée est délimitée par [ et ], avec des valeurs séparées par des ,


[ 3, 4, "a", 5.6, true, null ]

JSON

Un nombre est entier ou flottant, optionellement avec exposant (E), mais jamais un NaN (not a number).

12 34.56 7.8E6 2e-6

JSON

Une chaîne de caractère est en UTF-8 et toujours entourée de guillemets (").

Séquences d'échappement:
\"Le caractère "
\\Le caractère \
\nLe caractère Nouvelle ligne
... et quelques autres.

JSON

Les string en détail...

JSON et attributs

Il n'y a pas d'attribut en JSON

<quantité système="métrique" unité="cm">15</quantité>
{
   "@système": "métrique",
   "@unité": "cm",
   "#text": "15"
}
(selon XML to JSON)

JSON et attributs

On peut faire mieux?

<quantité système="métrique" unité="cm">15</quantité>
{
   "quantité": {
      "système": "métrique",
      "unité": "cm",
      "mesure": 15
   }
}

JSON n'aime pas les documents

XML adore les documents...

<doc>
    <p>Here is some text</p>
    <p>Here is some more <em>text</em> with emphasis</p>
</doc>
{
    "paragraphs": [
        [ "Here is some text" ],
        [ "Here is some more ", { "type": "emphasized", "content": "text" },
          " with emphasis" ]
    ]
}

JSON sépare liste et objet

XML voit la liste comme un objet avec des clés répétées...

<?xml version="1.0" encoding="UTF-8"?>
<personne>
  <prénom>John</prénom>
  <nom>Smith</nom>
  <citoyen>true</citoyen>
  <addresse>
    <rue>21 rue du ouèbe</rue>
    <ville>Montréal</ville>
    <province>QC</province>
  </addresse>
  <téléphone>
    <type>maison</type>
    <numéro>212 555-1234</numéro>
  </téléphone>
  <téléphone>
    <type>bureau</type>
    <numéro>646 555-4567</numéro>
  </téléphone>
</personne>

JSON peut faire une liste sans nom, pas XML

[ { "firstName": "Albert", "lastName": "Albertson" },
  { "firstName": "James", "lastName": "Jameson" }
]
<?xml version="1.0" encoding="UTF-8"?>
<root>
   <element>
      <firstName>Albert</firstName>
      <lastName>Albertson</lastName>
   </element>
   <element>
      <firstName>James</firstName>
      <lastName>Jameson</lastName>
   </element>
</root>

GeoJSON

Geospatial data interchange format, basé sur JSON.
{
  "type":"FeatureCollection",
  "bbox":[
    -7.362712552279537e1, 4.54951424642044e1,
    -7.360153447720467e1, 4.551313752156117e1
  ],
  "features":[
    {
      "type":"Feature",
      "properties":{
        "marker-color":"#ca3300",
        "marker-symbol":""
      },
      "geometry":{
        "type":"Point",
        "coordinates":[ -7.361433e1, 4.550414e1 ]
      }
    }
  ]
}

UBJSON ( Universal Binary JSON )

{1, 2, 3, "ABC"}
Devient ceci en binaire...
00000000  5b 23 69 04 69 01 69 02  69 03 53 69 03 41 42 43  |[#i.i.i.i.Si.ABC|
note: les nombres sont big-endian

YAML (Yet another markup language)

Ressemble à JSON, mais en plus lisible.
Sert lorsque le fichier soit être lu, ou modifié, par un humain

Utilise les indentations à la python :-(

Ca fait plus propre...

Voici une courte référence.

YAML, un exemple


{
  "prénom": "John",
  "nom": "Smith",
  "citoyen": true,
  "âge": 27,
  "addresse": {
    "rue": "21 rue du ouèbe",
    "ville": "Montréal",
    "province": "QC"
  },
  "téléphone": [
    {
      "type": "maison",
      "numéro": "212 555-1234"
    },
    {
      "type": "bureau",
      "numéro": "646 555-4567"
    }
  ]
}

---
prénom: John
nom: Smith
citoyen: true
âge: 27
addresse:
  rue: 21 rue du ouèbe
  ville: Montréal
  province: QC
téléphone:
- type: maison
  numéro: 212 555-1234
- type: bureau
  numéro: 646 555-4567
        

YAML, en un mot

Un peu trop flexible, finalement.... mais bon, c'est plutôt minimal et lisible.

TOML

Tom's Obvious, Minimal Language

Les espaces ne comptent pas.

TOML, un exemple


{
  "prénom": "John",
  "nom": "Smith",
  "citoyen": true,
  "âge": 27,
  "addresse": {
    "rue": "21 rue du ouèbe",
    "ville": "Montréal",
    "province": "QC"
  },
  "téléphone": [
    {
      "type": "maison",
      "numéro": "212 555-1234"
    },
    {
      "type": "bureau",
      "numéro": "646 555-4567"
    }
  ]
}
"prénom" = "John"
nom = "Smith"
citoyen = true
"âge" = 27

[addresse]
rue = "21 rue du ouèbe"
ville = "Montréal"
province = "QC"

[["téléphone"]]
type = "maison"
"numéro" = "212 555-1234"

[["téléphone"]]
type = "bureau"
"numéro" = "646 555-4567"
        

Bon JSON,YAML,TOML
GeoJSON,UBJSON!