Comment automatiser une conception –

Cet article a été créé en partenariat avec JotForm . Merci de soutenir les partenaires qui rendent SitePoint possible.

Le problème

Tout a commencé en octobre 2017, lorsque nous cherchions des idées de projets HackWeek.

Notre équipe de JotForm a remarqué que notre nouvelle conception de formulaire, JotForm Cards, ne semblait pas aussi bonne qu'une version autonome lorsqu'elle était intégrée au site Web d'un utilisateur. Oh oh.

Fondamentalement, la conception des cartes JotForm ne convenait pas parfaitement au site Web en question. Bien que le formulaire lui-même soit beau, utiliser le design dans un contexte si différent du cas d'utilisation standard le ruinait.

Et comme nous continuions à intégrer des cartes JotForm dans des sites Web, nous avons réalisé que cette situation était assez courante. Double oh oh.

Nous avons remarqué que des formes comme étaient compressées en colonnes … :

Et des couleurs qui ne correspondaient pas au site:

Et titres répétés avec différentes polices

Ces questions ne semblent pas énormes à première vue, mais parce que nous avons seulement eu notre HackWeek de 7 jours pour les réparer , nous étions nerveux, vraiment nerveux.

Structure

Avant de plonger dans l'implémentation, je vais partager quelques informations structurelles sur les cartes JotForm.

La structure de style sur le frontal utilise SCSS (fondamentalement SASS avec une syntaxe sophistiquée) comme préprocesseur et PostCSS comme Post-processeur. La structure frontale restante (balisage, logiques) est principalement basée sur React.

Note de côté: les fichiers CSS des formulaires sont préparés et servis par PHP, qui est le principal langage de back-end pour cette implémentation.

Challenges

Nous avons décidé d'automatiser la conception pour atteindre les objectifs suivants:

• Générer un gabarit propre pour les cartes JotForm (sans gâcher sa conception)
• Créer une pièce pour manipuler le formulaire en fonction du design de chaque site Web
• Comprendre le choix de conception des sites Web que nous intégrons le formulaire dans
• Appliquer ce choix de conception à notre modèle sans diminuer la qualité de la conception autonome des cartes JotForm

Et enfin, faire tout cela dans

Nettoyer le gabarit

Notre premier obstacle était de nettoyer les cartes JotForm. Heureusement, la génération du modèle que nous voulions était facile, grâce à la structure déjà dynamique du formulaire.

Nous avons commencé par structurer notre style entièrement sur des variables SCSS. Cela nous a permis de générer un template JotForm Cards plus simple en ajoutant le flag! Default sur les variables nécessaires

Gabarit JotForm Cards par défaut (à gauche) et template nettoyé (à droite).

Comme notre objectif principal était d'habiller un modèle propre d'une manière facilement ajustable, nous avons décidé de prendre en compte quelques aspects stylistiques de la conception de sites Web:

• Couleur
• Typeface
• conteneurs dans la page web (frontière, taille, etc.)
• Shadows

Première étape: récupérons CSS

Nous avons décidé d'utiliser PHP pour lire le contenu CSS des sites Web et en extraire des informations. La raison pour laquelle nous l'avons fait en back-end était que notre système, la génération CSS, était déjà basé sur PHP.

Cela signifiait fusionner un style de formulaire par défaut et des propriétés de style définies par l'utilisateur en utilisant un analyseur SCSS. Par conséquent, le plan consistait à ajouter une autre couche – fusionner le processus – afin de remplacer les propriétés de style par défaut avec des informations provenant du CSS du site Web.

Cette implémentation comportait trois étapes:

1. Obtenir le HTML de la page
2. Parse style / link tags
3. Récupérer les propriétés associées à partir du contenu CSS

Le code simplifié peut être trouvé dans cet objet .

Afin de compresser ce contenu CSS dans un format compatible (comme ainsi que le filtrage des variables de style inutiles), nous avons converti tout le contenu en SCSS avec une bibliothèque personnalisée Css2less.

L'étape suivante consistait à obtenir des informations significatives à partir des variables SCSS. Notre première approche était la "naïve". Fondamentalement, nous voulions nous assurer que nous étions sur la bonne voie – sans investir trop de temps (encore).

Cette approche consistait à:

• Obtenir une moyenne de propriétés numériques, telles que couleur, ombre, bordure, taille . etc
• En utilisant la police la plus utilisée comme notre police par défaut

Étonnamment, les résultats n'étaient pas mauvais.

Bien que nous ayons eu des résultats hilarants Je ne m'attendais pas …

Comme trop de rayon de bordure …

Et les icônes au lieu d'une famille de polices régulière …

[19659004] Et l'absence d'une barre d'action:

Sur la base de ces exemples, nous avons placé des limites sur les valeurs permises pour les variables afin de ne pas s'écarter de notre conception initiale. Quelques-uns de ces réglages étaient:

• Placer une limite maximum sur les rayons des frontières afin de les considérer comme utilisables, tout en calculant le rayon moyen
• Montrer notre ombre par défaut si une ombre existait, et l'enlever sinon
• Éliminer les polices d'icônes et promouvoir certaines familles de polices

Il ne restait qu'un problème: la couleur

La couleur est une histoire complètement différente des autres propriétés. Il est impossible de savoir à quel point une page sera couverte par un conteneur HTML coloré ou quelles seront les couleurs des images utilisées dans les pages Web. Nous devions placer le code HTML dans un navigateur pour le savoir. C'est à ce moment-là que nous nous sommes demandés: "Pourquoi n'utilisons-nous pas un navigateur sans tête pour trouver des couleurs?"

Nous avons alors décidé de faire une extraction de pages web en couleur, ce qui impliquait

Après avoir testé quelques navigateurs sans écran et suites de tests pour des captures d'écran, nous avons décidé d'aller avec Puppeteer parce que ses couleurs sont de haute qualité et il dispose corriger les hauteurs de page web dans ses captures d'écran pleine page.

Nous avons ensuite développé une simple application Node pour l'extraction des marionnettes et des couleurs. L'implémentation de l'extraction des couleurs sur Node garantit que l'heure n'est pas perdue lors de l'envoi de captures d'écran à PHP

Voir l'aperçu général pour la capture d'écran et l'extraction des couleurs. Après avoir transmis cette information à PHP, nous étions finalement prêts à habiller nos formulaires en utilisant les schémas de couleurs des sites Web.

Automation and Performance

Nous avions une dernière question: comment éviter de déranger les utilisateurs tout en automatisant ces processus?

Le processus prenait environ 5 à 10 secondes selon le site Web. Bien qu'il ne dérange pas nos utilisateurs que beaucoup, il aurait été excessif de traiter des pages Web dans chaque forme de charge.

Exemple de processus

C'est pourquoi nous avons décidé de conserver des caches de fichiers de style supplémentaires pour chaque page Web en fonction de leurs URL. Des caches de style séparés permettraient aux utilisateurs d'intégrer le même formulaire dans plusieurs pages avec des conceptions différentes sur chaque page. En plus du problème de mise en cache, il y a eu un autre problème avec le processus d'automatisation: transmettre l'URL du site à partir de la copie et du code d'intégration collé (que nous ne pouvons pas changer à partir du web d'un utilisateur) page) en PHP

Initialement, nous avons essayé d'obtenir cette URL via des référents en PHP, ce qui a échoué horriblement dans quelques versions de Safari.

Suite à cela, nous avons été obligés d'obtenir l'URL de JavaScript avec un usage général »

Remarque: la raison de ce dernier combat était que nous utilisions le rendu côté serveur pour les composants React et les balises de style afin d'éviter de surcharger les utilisateurs. Il n'y a vraiment aucun moyen de savoir avec certitude si la requête est faite par iframe ou directement sur le serveur.

Et nous l'avons fait!

Finalement, tous ces changements ont été implémentés par un petit groupe de cinq personnes. les gens pendant notre HackWeek.

Il y a beaucoup de choses qu'une équipe pourrait améliorer dans une automatisation comme celle-ci et elles impliquent principalement l'utilisation de la puissance de l'apprentissage automatique. Par exemple, au lieu d'affiner l'approche comme nous l'avons fait, vous pouvez former un modèle d'apprentissage automatique pour mieux détecter les propriétés importantes liées à l'automatisation de votre produit ou projet.

Néanmoins, notre équipe à JotForm

Cem Göktuğ Sorgun est un développeur de logiciels expérimenté à JotForm un populaire, facile à utiliser en ligne outil de construction de formulaire basé à San Francisco. Il est passionné par tous les aspects du développement Web, de l'intelligence artificielle, de l'apprentissage automatique et des systèmes automatisés.