Accélérez le développement de vos interfaces web

1

Grégoire Larreur de Farcy

Human Talks du 18/11/2014 à Laval

Accélérez le développement de vos interfaces web

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

3



Pratiques pour insérer du JavaScript dans une page HTML

• Inline

<a href='uneurl' onclick='javascript:return confirm("Etes vous sur ? ") '>

cliquez ici

</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



Pratiques pour insérer du JavaScript dans une page HTML• Non-inline

Avec jQuery:<a href='uneurl' id='id1'>cliquez ici</a>

<script>

(function($){

$(function(){

$("#id1").on("click" , function(e){

if(! confirm("Etes vous sur ? ")){

e.preventDefault();

}

});

});

})(jQuery);

</script>

5



• 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



Solution proposée

• 1 fichier de script global passant par l’utilisation d’éléments HTML 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



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();

}

});

}

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 ?

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();

}

});

});

}

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

11



Exemple de gestion des formulairesStructure JSON renvoyée par le serveur

{

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



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");

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



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

• …

Internet

Accélérez le développement de vos interfaces web