web-dev-qa-db-fra.com

formulaires html5 avec polyfills - ça vaut le coup?

Malgré tout le buzz autour des formulaires html5, il me semble que vous créez du travail supplémentaire, dans la plupart des scénarios, en empruntant cette voie.

Prenons, par exemple, un champ de datepicker. L'implémentation html5 native de ceci s'affiche différemment dans chaque navigateur. De plus, votre solution polyfilled (jquery UI par exemple), pour un navigateur ne prenant pas en charge cette fonctionnalité, sera également rendue différemment.

Maintenant, nous avons introduit plusieurs points de personnalisation et de maintenance pour la même forme, lorsque nous avions une solution parfaitement fonctionnelle et unifiée avec jquery!

J'adorerais entendre parler de certaines expériences du monde réel dans ce domaine, car je suis ennuyé par tout le buzz!

htmlformspolyfillswebshim
42
drogon

Tout d'abord je suis le créateur de webshims lib (un de ces polyfills, qui n'est plus maintenu). Pour répondre à ta question:

Vaut-il la peine de créer un polyfill de formulaires pour un projet?

Non, c'est vraiment difficile de le faire pour un seul projet. Eh bien, je l'ai fait, simplement parce que je veux utiliser des technologies modernes.

Vaut-il la peine d'utiliser un formulaire polyfill comme une librairie webshims pour un projet?

Oui absolument! Et voici pourquoi:

1. Belle API de balisage déclarative normalisée

Après avoir inclus les webshims et les scripts suivants:

//polyfill forms (constraint validation) and forms-ext (date, range etc.)    
$.webshims.polyfill('forms forms-ext');

Vous pouvez simplement écrire vos widgets et vos contraintes dans votre formulaire:

<input type="date" />
<input type="date" min="2012-10-11" max="2111-01-01" />
<input type="range" disabled />
<input type="email" required placeholder="Yo you can use a placeholder" />

Cela créera 3 widgets différents et chacun est configuré différemment. Aucun JS supplémentaire n'avait besoin d'un code standardisé, propre et allégé.

2. DOM-API normalisé

Il en va de même pour l'API DOM. Voici deux exemples: combinaison de deux champs de date et combinaison d'un champ de plage avec un champ de date .

3. fonctionne sans JS dans les navigateurs modernes

Se dégrade gracieusement dans les anciens navigateurs et fonctionne bien dans les navigateurs modernes.

4. Moins de taille de fichier dans les navigateurs modernes

Particulièrement bon pour mobile (iOS 5, Blackberry ont un support pour la date par exemple)

5. Une meilleure expérience utilisateur [principalement mobile]

Meilleure UX mobile (meilleure interface utilisateur d'entrée pour le toucher, meilleures performances, s'adapte au système), si vous l'utilisez: type = "email" , type = "number" et type = "date"/type = "range"

Mais encore, qu'en est-il de la personnalisation?

Je suis développeur dans une agence plus grande et vous avez absolument raison, la plupart des clients et la plupart des concepteurs ne toléreront pas beaucoup de différences, mais je veux toujours utiliser des technologies modernes, ce qui signifie que les librairies Webshims peuvent vous offrir le meilleur des deux mondes.

Personnalisation de la validation des contraintes

La partie polyfilling 

//polyfill constraint validation
$.webshims.polyfill('forms');

Personnalisation de l'interface utilisateur pour la bulle d'erreur: 

//on DOM-ready
$(function(){
    $('form').bind('firstinvalid', function(e){ 
        //show the invalid alert for first invalid element 
        $.webshims.validityAlert.showFor( e.target ); 
        //prevent browser from showing native validation message 
        return false; 
    });
});

génère le balisage suivant:

<!-- the JS code above will generate the following custom styleable HTML markup for the validation alert -->
<span class="validity-alert-wrapper" role="alert"> 
    <span class="validity-alert"> 
        <span class="va-arrow"><span class="va-arrow-box"></span></span> 
        <span class="va-box">Error message of the current field</span> 
    </span> 
</span>

Personnalisation du style d'un champ de formulaire invalide/valide: 

.form-ui-invalid {
    border-color: red;
}

.form-ui-valid {
    border-color: green;
}

Personnalisation du texte de l'alerte de validité: 

<input required data-errormessage="Hey this is required!!!" />

Et maintenant, quel est le point:

  1. fonctionne toujours sans JS
  2. les navigateurs modernes ne chargent que le code de personnalisation (3 kb min/gzip) et les anciens navigateurs chargent l'API supplémentaire (environ 13 kb min/gzip) (les formulaires incluent bien plus qu'une simple API de validation des contraintes, par exemple, il y a aussi la mise au point automatique, l'espace réservé, la sortie etc)

Et quel est votre exemple spécial, la personnalisation du champ de date?

Aucun problème:

//configure webshims to use customizable widget UI in all browsers
$.webshims.setOptions('forms-ext', { 
    replaceUI: true
});

$.webshims.polyfill('forms forms-ext');

Et aussi ici:

  1. fonctionne toujours sans JS dans les navigateurs modernes
  2. les navigateurs modernes ne chargent que l'interface utilisateur et la colle UI-API, mais pas la DOM-API (valueAsNumber, valueAsDate ...)

Et maintenant, voici le meilleur:

//configure webshims to use customizable widget UI in all non mobile browsers, but a customizable one in all desktop and all non-capable mobile browsers
$.webshims.setOptions('forms-ext', { 
    //oh, I know this is bad browser sniffing :-(
    replaceUI: !(/mobile|ipad|iphone|fennec|Android/i.test(navigator.userAgent))
});

$.webshims.polyfill('forms forms-ext');
  1. moins de taille de fichier et une meilleure UX pour les navigateurs mobiles (la plupart des clients et la plupart des concepteurs vous adoreront pour avoir une interface utilisateur différente dans le mobile !!!)
  2. fonctionne toujours sans JS dans les navigateurs modernes
  3. les navigateurs modernes ne chargent que l'interface utilisateur et la colle UI-API, mais pas la DOM-API (valueAsNumber, valueAsDate ...)
85
alexander farkas

À l'appui de la réponse d'Alexander sur les webshims, j'ai fait des recherches considérables sur le comportement entre les navigateurs des entrées HTML5 d'un point de vue UX, UI et frontal. Ma conclusion est que la seule façon d'avoir un comportement préféré entre les appareils et les navigateurs est d'utiliser un polyfill comme des webshims. Cela est en grande partie lié au fait de ne pas pouvoir utiliser les fonctionnalités natives sur des appareils tels que les rouleaux de barillet pour les dates et les pavés numériques pour les nombres sans avoir également un moyen de prendre en charge les navigateurs de bureau qui n'implémentent pas ces fonctionnalités.

Voici une analyse du comportement d'une entrée de date sur différentes implémentations natives par rapport aux plugins populaires:
Analyse de saisie de date - Feuille de calcul Google
(Vous pouvez voir comment les webshims tirent le meilleur parti de toutes les implémentations)

Voici une analyse de la façon dont les types d'entrée du monde réel se comportent sur les navigateurs courants de manière native et avec un repli webshim:
analyse UX des entrées HTML5 avec repli webshim - feuille de calcul Google

Voici la page de démonstration utilisée pour analyser ces entrées:
Démo de la page des entrées HTML5 - CodePen

5
davidelrizzo

J'étais également sceptique, si cela vaut vraiment la peine de passer par la couche polyfill au lieu d'utiliser l'interface utilisateur jquery droite. Après avoir utilisé les librairies Webshims et HTML5, j'ai pu immédiatement voir qu'il y avait beaucoup moins de code javascript. Plus de plugin de validation requis. Merci Alexander d'avoir créé et soutenu ce merveilleux polyfill, webshims lib. Voici un exemple pour effectuer un appel ajax dans le clic de soumission d'un formulaire.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js" type="text/javascript"></script>
<script>
    // set options for html5shiv
    if(!window.html5){
        window.html5 = {}; 
    }
    window.html5.shivMethods = false;
</script>
<script src="webshims/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="webshims/js-webshim/minified/polyfiller.js"></script>
    <script class="example">
        $.webshims.setOptions({
            //we do not use any DOM-/JS-APIs on DOM-ready, so we do not need to delay the ready event <- good against fouc
            waitReady: false
        });
        //load all polyfill features
        $.webshims.polyfill('forms forms-ext');     
    </script>
<script type="text/javascript">
$(function(){
    var frm = $('#tstForm');
    frm.submit(function () {
    var someDate=$('#someDate').val();
     alert('someDate:'+someDate);
     // you can make your ajax call here. 

        return false;
    });
});
</script>
</head>
<body>
<form id="tstForm">
  Some Date:<input id="someDate" name="someDate" type="date" min="2013-01-01" max="2013-06-01" ></input>
  Full Name:<input id="fullName" name="fullName" type="text" required></input>
  Age:<input id="age" name="age" type="number" required min="18" max="120"></input>
  <input type="submit" value="Submit"/>
</form>

</body>
</html>
4
Karthik Sankar