Techniques pour développer rapidement des interfaces web de gestion

1. 1
Accélérez le
développement de vos
interfaces web
Grégoire Larreur de Farcy
Human Talks du 18/11/2014 à Laval

2. 2
Constats sur le développement
d’interfaces web dynamiques
• Assez répétitif:
– Validation et soumissions de formulaire
– Affichages de tableaux dynamiques
– Boites de dialogues
• Frameworks devenant des standards
de facto:
– jQuery pour le JavaScript
– Bootstrap pour le CSS
Grégoire Larreur de Farcy
Human Talks du 18/11/2014 à Laval

3. 3
Pratiques pour insérer du
JavaScript dans une page HTML
• Inline
<a href='uneurl' onclick='javascript:return confirm("Etes vous sur ? ") '>
cliquez ici
Grégoire Larreur de Farcy
Human Talks du 18/11/2014 à Laval
</a>
• Avantage: gestion fine des évènements
• Inconvénients:
• Code pas très lisible:
mélange HTML / Javascript difficilement maintenable
• Alourdit le poids des pages car chaque élément doit posséder le script
• Code non réutilisable
• JavaScript non compressible et non mis en cache
• Pas de gestion si JavaScript est désactivé

4. 4
Pratiques pour insérer du
JavaScript dans une page HTML
• Non-inline
Avec jQuery:
<a href='uneurl' id='id1'>cliquez ici</a>
<script>
(function($){
Grégoire Larreur de Farcy
Human Talks du 18/11/2014 à Laval
$(function(){
$("#id1").on("click" , function(e){
if(! confirm("Etes vous sur ? ")){
e.preventDefault();
}
});
});
})(jQuery);
</script>

5. 5
Grégoire Larreur de Farcy
Human Talks du 18/11/2014 à Laval
• Avantage:
• Plus grande lisibilité et maintenabilité du code
• Gestion fine des évènements
• Inconvénients:
• Code long à écrire
• Code non réutilisable
• JavaScript non compressible et non mis en cache (sauf si
passage par un fichier de script spécifique par page).

6. 6
Solution proposée
• 1 fichier de script global passant par l’utilisation d’éléments HTML
Grégoire Larreur de Farcy
Human Talks du 18/11/2014 à Laval
standardisés
 Equivalent à ce que fait Bootstrap pour le CSS
 Ex: <span class="col-md-3">…</span>
• Avantages:
– Pas de réécriture de code inutile
– Allégement des pages
– Possibilité de mettre en cache
– Maintenabilité extrêmement simple
• Scan des éléments possédant une certaine classe CSS après le
chargement de la page (ou la création dynamique d’éléments
HTML) et création de composants en fonction des données de ces
éléments

7. 7
Dans la page
<a href="uneurl" class="confirmation-link" >cliquez ici</a>
Dans le script
$.fn.refresh = function(){
$(this).find(".confirmation-link").on("click", function(e){
if(! confirm("Etes vous sur ? ")){
e.preventDefault();
Grégoire Larreur de Farcy
Human Talks du 18/11/2014 à Laval
}
});
}

8. 8
Inconvénient majeur: la
personnalisation
• Il n’est pas possible avec de simples
classes CSS de personnaliser le
contenu ou le comportement des
composants
– Ex: comment changer la phrase « êtes
vous sûr ? » des exemples précédents ?
Grégoire Larreur de Farcy
Human Talks du 18/11/2014 à Laval

9. 9
HTML 5 à la rescousse
• Arrivée des attributs data-* permettant de mettre n’importe quel
contenu texte dans une balise sans rendre le HTML non valide
Dans la page
<a href="uneurl" data-confirm="Etes vous vraiment sûr ?"
class="confirmation-link" >cliquez ici</a>
Dans le script
$.fn.refreshComponents = function(){
$(this).find(".confirmation-link").each(function(){
$(this).on("click", function(e){
if(! confirm($(this).data("confirm")){
e.preventDefault();
Grégoire Larreur de Farcy
Human Talks du 18/11/2014 à Laval
}
});
});
}

10. 10
Cas des formulaires
• Dans 90% des cas la gestion d’un formulaire se résume à :
1. Vérifier les entrées utilisateur du côté navigateur et si elles sont
incorrectes bloquer l’envoi
2. Vérifier les entrées utilisateur du côté serveur et si elles sont
incorrectes renvoyer une liste d’erreurs au navigateur
3. Effectuer un traitement côté serveur
4. Demander au navigateur d’effectuer une action en cas de succès
(redirection vers une url, affichage d’un message de succès, insertion
d’une ligne dans un tableau…)
• En appliquant une standardisation du résultat renvoyé par le
serveur et l’utilisation des attributs data-* il est très facile
de gérer cela automatiquement sans une ligne de script
spécifique
Grégoire Larreur de Farcy
Human Talks du 18/11/2014 à Laval

11. 11
Exemple de gestion des formulaires
Structure JSON renvoyée par le serveur
{
Grégoire Larreur de Farcy
Human Talks du 18/11/2014 à Laval
Success: bool,
ErrorMessages: array,
Data: object
}
Code HTML
<form class="auto-form" action="uneurl" method="post"
data-success="votre demande a été envoyée avec succès">
<div class="summary">
</div>
<div>
<label for="email">Votre email</label>
<input type="email" name="email"/>
</div>
<button type="submit">Valider</button>
</form>

12. 12
Code JavaScript (incomplet)
$.fn.refreshComponents = function(){
$(this).find(".auto-form").each(function(){
$(this).on("submit", function (e) {
e.preventDefault();
var form = $(this);
form.find(".validation-summary-success").removeClass("alert");
Grégoire Larreur de Farcy
Human Talks du 18/11/2014 à Laval
form.ajaxSubmit({
dataType: 'json',
type: form.attr("method") || "POST",
success: function (data) {
if (data.Success) {
alert(form.data("success"));
}
else {
form.displayErrors(data.Messages, error);
}
}
});
});
});
}

13. 13
Applications possibles
• Lien chargeant un dialogue Ajax
• Auto-validation de formulaire Personnalisation automatique de
contrôles (ex: ajout automatique de datepicker sur les contrôles de
type date)
• Tableau dynamiques
• Sélecteurs d’images
• Boutons de suppression avec confirmation
• Autocomplete
• …
Grégoire Larreur de Farcy
Human Talks du 18/11/2014 à Laval