populate() est une fonction écrite en Javascript/Jquery. Sa principale fonction est de «peupler» différentes zones d’une page HTML en puisant les données dans un ilot XML se trouvant dans l’entête du document. Cet ilot fait office de source de données provisoire qui sera remplacé à terme par les données réelles (venant du serveur ou d’un service web).
Grâce à populate() et à l’ilot XML associé, les concepteurs front-end peuvent produire des pages pleinement fonctionnelles d’un bout à l’autre en créant et en modifiant leurs propres sources de données durant les tests. Grâce à des syntaxes très simples ces données fictives peuvent être exploitées comme si elles étaient réelles. Ils ont l’assurance que leur code côté client fonctionnera lorsque le serveur fournira les données réelles.
Ainsi, la charge des développeurs back-end s’en trouve soulagée. Ils n’ont plus à reprendre des maquettes avec des textes saisis «en dur» pour y insérer des champs et des processus dynamiques. Leur travail consiste uniquement à construire un ilot XML conforme à ce que la page attend.
S’ils le souhaitent les développeurs back-end peuvent imposer une structure précise de l’ilot XML et fournir à l’équipe front-end le schéma à respecter. Mais il est possible de s’affranchir de cette dépendance (souvent pénalisante pour les deux équipes), en transférant la compétence à l’équipe front-end, car la syntaxe d’un ilot XML est très facile, et nécessite très peu de formation pour des personnes connaissant le HTML.
Par ailleurs, un certain nombre d’options liées à populate() permettent de bénéficier d’opérations inexistantes en HTML, telles que les tests, les boucles, etc.
Populate() est pleinement compatible avec les normes du web et les langages habituellement utilisés. Aucun conflit n’est à craindre lors de l’utilisation de bibliothèques telles que Bootstrap, Jquery, Datatable, etc.
Première approche #
Voici une source de données XML (à placer avant la section BODY du document) :
<application>
<nomCourt>EOL</nomCourt>
<nomComplet>Etudes ONLINE</nomCourt>
<editeur>
<raisonSociale>Medsharing</raisonSociale>
<tel>01.48.75.39.14</tel>
<eMail>support@medsharing.fr</eMail>
<lienSupport>https://www.medsharing.fr/eol/support</lienSupport>
</editeur>
</application>Et voici la zone de la section BODY qui utilise ces données :
<p data-src="/">
L'application {application.nomCourt} a été créée
par la société <b>{application.editeur.raisonSociale}</b>
Pour contacter le support technique vous disposez de 3 possibilités :
</p>
<ul data-src="/application.editeur">
<li>Par téléphone : {tel} </li>
<li>Par courrier électronique :
<a href="mailto:{eMail}">{eMail}</a>
</li>
<li>Via la page Support de notre site :
<a href="{lienSupport}">cliquez ici</a>
</li>
</ul>Grâce à l’attribut data-src, la fonction populate() puise les données dans l’ilot XML. Dans notre exemple voici à quoi ressemblera le résultat :
L’application EOL a été créée par la société Medsharing. Pour contacter le support technique vous disposez de 3 possibilités :
- Par téléphone : 01.48.75.39.14
- Par courrier électronique : support
- Via la page Support de notre site : cliquez ici
Le code nécessaire pour lancer la fonction populate() est également standard :
<script language="javascript" src="/assets/jquery/3.5.1/jquery.min.js"></script>
<script language="javascript" src="/assets/javascript/populate.js"></script>
<script>
// code préalable au peuplement
populate();
// code après peuplement
</script>Note : il s’agit de l’utilisation la plus simple. La fonction populate() peut également être lancée sur l’évènement onload de <body> ou être intégrée dans une autre fonction comme $(document).ready() de Jquery :
<script language="javascript" src="/assets/jquery/3.5.1/jquery.min.js"></script>
<script language="javascript" src="/assets/javascript/populate.js"></script>
<script>
$(document).ready() {
// code préalable au peuplement
populate();
// code après peuplement
}
</script>
