1 
Accélérez le 
développement de vos 
interfaces web 
Grégoire Larreur de Farcy 
Human Talks du 18/11/2014 à Laval
2 
Constats sur le développement 
d’interfaces web dynamiques 
• Assez répétitif: 
– Validation et soumissions de formulai...
3 
Pratiques pour insérer du 
JavaScript dans une page HTML 
• Inline 
<a href='uneurl' onclick='javascript:return confirm...
4 
Pratiques pour insérer du 
JavaScript dans une page HTML 
• Non-inline 
Avec jQuery: 
<a href='uneurl' id='id1'>cliquez...
5 
Grégoire Larreur de Farcy 
Human Talks du 18/11/2014 à Laval 
• Avantage: 
• Plus grande lisibilité et maintenabilité d...
6 
Solution proposée 
• 1 fichier de script global passant par l’utilisation d’éléments HTML 
Grégoire Larreur de Farcy 
H...
7 
Dans la page 
<a href="uneurl" class="confirmation-link" >cliquez ici</a> 
Dans le script 
$.fn.refresh = function(){ 
...
8 
Inconvénient majeur: la 
personnalisation 
• Il n’est pas possible avec de simples 
classes CSS de personnaliser le 
co...
9 
HTML 5 à la rescousse 
• Arrivée des attributs data-* permettant de mettre n’importe quel 
contenu texte dans une balis...
10 
Cas des formulaires 
• Dans 90% des cas la gestion d’un formulaire se résume à : 
1. Vérifier les entrées utilisateur ...
11 
Exemple de gestion des formulaires 
Structure JSON renvoyée par le serveur 
{ 
Grégoire Larreur de Farcy 
Human Talks ...
12 
Code JavaScript (incomplet) 
$.fn.refreshComponents = function(){ 
$(this).find(".auto-form").each(function(){ 
$(this...
13 
Applications possibles 
• Lien chargeant un dialogue Ajax 
• Auto-validation de formulaire Personnalisation automatiqu...
Prochain SlideShare
Chargement dans…5
×

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

506 vues

Publié le

Techniques pour développer rapidement des interfaces web de gestion

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
506
Sur SlideShare
0
Issues des intégrations
0
Intégrations
51
Actions
Partages
0
Téléchargements
10
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×