Mois : avril 2021

[Webpack Encore] Exploiter la méthode .addRule() et le module Assets Module pour optimiser des fichiers SVG

Testé fonctionnel Webpack Encore v1.1.2 (tournant sous Webpack v5.34.0).

Installer image-webpack-loader:

Dans webpack.config.js:

Attention au chemin renseigné pour la méthode .setOutputPath(): c’est là que vos SVG optimisés seront consignés.

Dans assets/app.js


Solution alternative avec le module svgo-loader (mais ne prend en charge que le format SVG):

Dans webpack.config.js:

[Webpack Encore] Intégration d’UIkit v3 dans un projet Symfony pour un bundle à la carte

Méthode préférée de création d’un bundle des composants du framework front-end UIkit v3 avec Webpack

Testé fonctionnel UIkit v3.6.19!
Voir aussi: la méthode la plus simple, mais extrêmement limitée en terme de choix des composants qu’on souhaite importer (embarque tous les composants JS du core, embarque les styles d’absolument tous les composants).

Suite à différents tests de génération d’un bundle entièrement à la carte des composants d’UIkit v3 que j’ai effectué et à quelques soucis rencontrés avec l’affichage des icônes, je me suis rendu à l’évidence que le framework open-source développé par YOOTheme n’allait pas pouvoir être intégré à mon projet Symfony dans les règles de l’art.

Pour pouvoir sélectionner à la carte les composants et les icônes qui doivent figurer dans notre bundle (et surtout: retirer tous ceux qui ne vont pas servir!!!) tout en consignant les informations sur notre sélection directement dans le Git de notre projet, nous allons notamment devoir:

  • Créer un dossier mirroir des sources d’UIkit (dossier ./node_modules/uikit/*) dans le dossier qui contient le code spécifique à notre projet (dossier ./assets/uikit/* dans mon cas).
  • Commenter tous les composants dont nous n’aurons pas besoin pour notre build custom dans les fichiers assets/uikit/src/scss/theme/_import.scss et assets/uikit/src/scss/components/_import.scss (mirroirs de ceux du dossier source ./node_modules/uikit/src/scss/*).
  • Commenter tous les composants dont nous n’aurons pas besoin pour notre build custom dans les fichiers assets/uikit/src/js/core/index.js et assets/uikit/src/js/components/index.js (mirroirs de ceux du dossier source ./node_modules/uikit/src/js/*).
  • Consigner notre sélection d’icônes dans des dossiers mirroirs de ceux du dossier source ./node_modules/uikit/src/images/*
  • Exécuter un script bash qui va s’occuper de:
    • Remplacer les fichiers source de ./node_modules/uikit/* par leurs versions mirroirs consignées dans ./assets/uikit/* (et ajouter les nouveaux fichiers si il y en a).
    • Lancer, depuis ./node_modules/uikit, les commandes de build fournies dans les sources d’UIkit pour notre sélection de composants et d’icônes.
    • Lancer, depuis la racine du projet Symfony, la commande Webpack de build des sources SCSS, JS et icônes de notre projet (yarn encore dev).

Cette technique s’inspire du concept de fork, à la différence qu’ici nous n’aurons pas à maintenir un fork à chaque montée de version d’UIkit (un nouveau tag tous les 15 jours au moment où j’écris ces lignes).
Ici, les modifications relatives aux sources d’UIkit sont également versionnées directement dans les sources de notre projet custom alors qu’avec un fork doit avoir par définition son propre dépôt (donc un seul repository à gérer au lieu de deux).

Il s’agit de générer de nouvelles sources « dist » d’UIkit, taillées sur-mesure sur la base de notre propre sélection de composants et d’icônes.

C’est la source présente dans le dossier ./node_modules/uikit/dist qui est importée par défaut par Webpack lorsque nous déclarons la ligne import UIkit from 'uikit'; dans le fichier assets/app.js.

Note: en procédant ainsi il devrait (je n’ai pas encore testé) être possible d’ajouter également vos propres composants, développés sur les bases d’UIkit, au build custom.

La configuration de Webpack

Fichier webpack.config.js

Dans la configuration de Webpack, ajouter l’alias pour le chemin vers les sources SCSS d’UIkit dans le dossier ./node_modules:

Le bundle à la carte des styles (format SCSS)

Note: le build standard des styles d’UIkit (format de sortie/dist CSS) a ceci de particulier qu’il est réalisé à partir des sources LESS. Le framework est bien fourni avec une version SCSS des styles, mais il s’agit juste d’une conversion faite à partir des sources LESS et générée via un script.

En d’autres termes, si nous souhaitons travailler à partir du format SCSS, le build pour cette partie devra être réalisé côté Webpack.

Fichier assets/styles/app.scss

Note: selon votre propre organisation de vos fichiers SCSS, l’import de _uikit-explicit-pieces.scss devrait intervenir très tôt (en tout premier?) dans votre chaîne d’imports.

Fichier assets/styles/_uikit-explicit-pieces.scss

Créer un fichier _uikit-explicit-pieces.scss qui suit à la lettre les directives de mise en place des styles relatifs au framework front-end UIkit.

L’alias @uk-scss déclaré plus haut dans le fichier webpack.config.js est utilisé ici comme racine du chemin vers les fichiers sources.

Edit: l’utilisation de PurgeCSS avec Webpack rend le reste de la partie SCSS de cet article totalement OBSOLèTE!

Attention: les styles propres à la grille d’UIkit comportent des déclarations de type .uk-child-width-1-4@m. L’arobase n’étant pas présent dans la regex du defaultExtractor de PurgeCSS, il faudra faire comme moi dans le code ci-dessous et le rajouter si vous voulez éviter que les styles de la grille soient considérés comme non-utilisés et dégagés du bundle.

En effet, plus besoin d’éditer les fichiers _import.scss des sources d’UIkit pour commenter les composants dont nous n’avons pas besoin! PurgeCSS se charge de faire le boulot à notre place en scannant les chemins et fichiers que nous allons pointer dans sa configuration pour repérer les IDs et classes que nous utilisons et purement et simplement supprimer toutes les autres de notre bundle!

Voici un exemple à rajouter à la toute fin de votre fichier webpack.config.js:

Cette technique reste une suggestion, mais reconnaissez que c’est tout-de-même bien pratique!

Fichier assets/uikit/src/scss/theme/_import.scss

Ce fichier est, à la base, une copie conforme du fichier source https://github.com/uikit/uikit/blob/v3.6.19/src/scss/theme/_import.scss.

Commenter tous les composants dont vous n’aurez pas besoin pour votre build custom (où commenter carrément l’import de ce fichier dans assets/styles/_uikit-explicit-pieces.scss si vous pensez que rien ne va vous servir):

Fichier assets/uikit/src/scss/components/_import.scss

Ce fichier est, à la base, une copie conforme du fichier source https://github.com/uikit/uikit/blob/v3.6.19/scss/components/_import.scss.

Commenter tous les composants dont vous n’aurez pas besoin pour votre build custom:

Les fichiers JS

Fichier assets/app.js

  • On importe le fichier SCSS « racine/maître » app.scss. C’est celui qui va concentrer l’ensemble des @import des différents composants.
  • On importe le bundle* de notre sélection de composants JS via la directive import UIkit from 'uikit';.
  • On importe le bundle* de notre sélection d’icônes via les directives import Icons from 'uikit/dist/js/uikit-icons'; UIkit.use(Icons);
  • On initialise un composant Notification (test)

*: j’explique ça juste en-dessous.

Fichier assets/uikit/src/js/core/index.js

Ce fichier est, à la base, une copie conforme du fichier source https://github.com/uikit/uikit/blob/v3.6.19/src/js/core/index.js.

Commenter tous les composants dont vous n’aurez pas besoin pour votre build custom:

Fichier assets/uikit/src/js/components/index.js

Ce fichier est, à la base, une copie conforme du fichier source https://github.com/uikit/uikit/blob/v3.6.19/src/js/components/index.js.

Commenter tous les composants dont vous n’aurez pas besoin pour votre build custom:

Les icônes

Structure des dossiers (à respecter)

Attention: la documentation d’UIkit vous explique comment remplacer des icônes existantes ou ajouter de nouvelles icônes à votre projet.
Cependant, cette dernière fait mention d’un dossier custom/ dans lequel placer les nouvelles icônes à ajouter à votre projet (avant d’effectuer votre build)… sans préciser à quel endroit de l’arborescence des fichiers du framework celui-ci devrait se trouver (edit: dans src/custom/icons/)!

La manipulation des icônes fonctionnera très bien si vous déposez vos fichiers de remplacement et vos nouveaux fichiers dans l’un des 3 dossiers suivants:

  • Icônes des… erm… (reste à définir): ./assets/uikit/src/images/backgrounds/
  • Icônes des composants: ./assets/uikit/src/images/components/
  • Icônes de la bibliothèque d’icônes: ./assets/uikit/src/images/icons/

Note: dans le cas où une même icône est utilisée pour un ou plusieurs composants ET dans la bibliothèque (la croix de fermeture par exemple, présente au minimum dans le composant Notification ET dans la bibliothèque), le fichier doit être présent dans les deux dossiers ./assets/uikit/src/images/components/close-icon.svg et ./assets/uikit/src/images/icons/close.svg (libellé différent, et le code peut-être différent également pour une même icône, cf. ici (components/close-icon.svg) et là (icons/close.svg)).

Fichier assets/uikit/build/util.js

Ce fichier est, à la base, une copie conforme du fichier source https://github.com/uikit/uikit/blob/v3.6.19/build/util.js.

Je ne donne ci-dessous que la constante const svgo = new SVGO qui est à modifier avec l’ajout de deux nouveaux paramètres, mais l’intégralité du code issu du fichier source est, bien entendu, à conserver!:

  • removeAttrs qui va s’occuper de nettoyer le fichier SVG source en supprimant des attributs, inutiles pour nous, qu’on va par exemple retrouver dans les icônes issues de la populaire bibliothèque Font Awesome.
  • addAttributesToSVGElement qui va s’occuper d’ajouter les attributs width="20" et height="20", nécessaires au bon fonctionnement de la bibliothèque d’icônes UIkit, là où ils manquent. Attention: si ces attributs existent déjà avec des valeurs similaires ou d’autres valeurs, ils ne seront pas écrasés par ce paramètre!

Petit récapitulatif de l’arborescence attendue

…sous forme de capture d’écran.


Le script bash

Nouvelle méthode (au 04/05/2021):

Dans le fichier package.json qui devrait se trouver à la racine de votre projet, nous allons ajouter un script qui va générer automatiquement les sources dist optimisées d’UIkit:

Nous allons ensuite créer un fichier build/build-uikit.sh qui va contenir le script en question:

ATTENTION: afin de rendre ce script exécutable, il faut lancer depuis la racine de votre projet la commande chmod +x ./build/build-uikit.sh!

Désormais, vous pourrez lancer différentes commandes pour générer votre build à la carte d’UIkit:

  • yarn run uk: générer les sources JS et le sprite d’icônes SVG d’UIkit
  • yarn run uk uikit: générer uniquement les sources JS d’UIkit
  • yarn run uk icons: générer uniquement le sprite d’icônes SVG d’UIkit

Note: nous n’avons bien sûr pas de commande relative aux styles car ils sont générés directement via Webpack Encore.

Méthode précédente (dépréciée):

Attention: les sources du framework front-end UIkit consignées dans le dossier node_modules/ de votre projet ont leur propre fichier package.json. Pour exécuter les différents scripts de build, il convient donc d’avoir au préalable déployé les dépendances Node au sein du dossier à l’aide de la commande npm install. En d’autres termes, si le dossier node_modules n’est pas présent dans le dossier ./node_modules/uikit/, les commandes de build vont vous péter à la tronche :D.

Depuis la racine de votre projet:

On copie nos fichiers custom d’UIkit vers le dossier où sont consignées les sources issues du Git officiel (les fichiers initiaux existants seront écrasés par les nôtres; c’est ce qu’on veut):

On se rend dans le dossier où sont consignées les sources d’UIkit:

La manipulation suiffante n’est à effectuer que dans deux cas:

  1. Vous n’avez encore jamais lancé la commande npm install depuis ce dossier et le dossier node_modules n’est donc pas présent à la racine de ./node_modules/uikit/.
  2. Vous avez effectué des modifications dans le fichier ./node_modules/uikit/package.json (vérifier que ce fichier est présent dans ./assets/uikit/; ça peut être une bonne indication du fait qu’il faille lancer les deux commandes ci-dessous).

Effectuer un build non-minifié (paramètre -d – c’est Webpack Encore qui assurera la minification par la suite) des sources JS d’UIkit qui contient uniquement notre sélection de composants et la bibliothèque d’icônes:

Note: voir les autres paramètres possibles pour la commande node build/build.

On retourne à la racine de notre projet et on lance la commande de build propre à Webpack Encore:

Vos sources pour afficher votre site dans le navigateur sont prêtes!

Quelques chiffres suite à mes tests

Caveats connus!

  • Les icônes des composants, si elles proviennent d’une autre source que la bibliothèque UIkit, ne sont pas nettoyées par par les modifications apportées au script de build de cette dernière ce qui occasionne des soucis d’affichage. Solution de correction possible: passer au préalable par Webpack (plutôt que par une modification des scripts de build d’UIkit) pour nettoyer tous les SVG et les rendre « UIkit-compliant » avant de les envoyer vers ./node_modules/uikit/* et d’effectuer un build.

Méthode alternative (attention: limitations connues au niveau des icônes)

ATTENTION: plusieurs limitations au niveau des icônes avec cette méthode de bundle:

Diagnostique des erreurs:

M’affiche l’erreur suivante en console:

fastdom.js:67 TypeError: Cannot read property ‘cloneNode’ of undefined
at getIcon (icon.js:186)
at UIkitComponent.getSvg (icon.js:63)
at UIkitComponent.connected (svg.js:38)
at hooks.js:10
at Array.forEach ()
at UIkitComponent.UIkit._callHook (hooks.js:10)
at UIkitComponent.UIkit._callConnected (hooks.js:31)
at UIkitComponent.UIkit.$mount (instance.js:28)
at UIkitComponent.UIkit._init (state.js:23)
at new UIkitComponent (global.js:30)

Les icônes des composants sont générées séparément du sprite d’icônes utilisables à la carte (et qui, lui, fonctionne!).
Lorsque je compare aux sources JS fournies dans le dossier dist, je remarque l’absence du code suivant dans mon bundle Webpack:

Pas de résolution à ce jour.

Fichiers impliqués

Fichier assets/app.js

Fichier webpack.config.js:

Bundle Javascript – Fichier assets/uikit-explicit-pieces.js:

Bundle Styles – Fichier: uikit-explicit-pieces.scss:

[Webpack Encore] Mes retours de tests d’intégration du code source du framework front-end UIkit v3 sous forme de bundle à la carte dans un projet ou thème

Expérience réalisée avec .

Forces et faiblesses du framework UIkit v3

Attention: je vais mettre en garde par rapport à un certain nombre de défauts de conception du projet qu’il convient de rattacher au contexte d’utilisation dans lequel je souhaite l’intégrer. Je recherche une bibliothèque de composants front-end:

  • suffisamment documenté, autant pour les utilisateurs type webmaster que pour les développeurs front-end avec au moins 3 ans d’expérience)
  • dont la partie Javascript est écrite en natif/Vanilla JS (i.e.: n’a pas recours à un framework tiers type Angular, React, VueJS, jQuery…)
  • …mais qui sit tout-de-même capable d’accueillir avec facilité des composants tiers écrits en VueJS (pas testé à l’heure ou j’écris ces lignes, mais la documentation nous assure que c’est possible
  • dont la partie Styles est écrite au format SCSS (exit: LESS)
  • dont les composants sont suffisamment séparés pour générer des bundles à la carte (via Webpack ou autre) et ne soumettre au serveur que du code nécessaire

Si vous recherchez une bibliothèque front-end proposant un choix large de composants, qui soit légère et facile à poser et que vous ne l’utiliserez que depuis des pages en HTML (i.e.: sans chercher à l’étendre vous-même), UIkit dans sa version 3 est un bon challenger.

Dans un cas plus proche du mien, voir ci-dessous.

Défauts majeurs d’UIkit v3 pour réaliser un bundle pertinent et à la carte avec Webpack

UIkit a beau se targuer d’être bundle-able via Webpack dans sa documentation officielle, à y regarder d’un peu plus près sa conception va poser un certain nombre de problèmes:

  • La doc propose un bundle à partir des fichiers présents dans le dossier dist du framework, soit des fichiers déjà compilés!. En effet, le projet inclut un certain nombre de scripts de génération/compilation des assets CSS, JS et icônes à exécuter via NPM/Yarn.
    En d’autres termes, vos possibilités de bundle se limitent:
    • Pour le JS et les icônes: à exclure à la carte une petite dizaine de composants non présents dans le core (117,6 kB de gagnés au total lorsque le code est minifié) et le fichier uikit-icons.min.js (65,0 kB) qui contient la bibliothèque d’icônes en SVG. Le reste des composants est indissociable du core et inclus dans le fichier uikit-core.min (88,2 kB).
    • Pour le CSS: à choisir entre uikit-core.min.css (256,1 kB (et perso je trouve ça lourd pour un framework…) ou uikit.min.css (271,9 kB) qui exclut la dizaine de composants non présents dans le core (pas de bundle à la carte possible pour les styles).

    Sans modifier ou surcharger (encore faut-il pouvoir le faire!) directement des fichiers du framework (oui, oui, ceux qui sont dans votre dossier node_modules et par définition pas modifiables) pour commenter les composants JS et CSS qu’on ne souhaite pas utiliser dans notre projet et lancer une compilation avec les scripts fournis par UIkit, impossible de faire un build vraiment à la carte…

  • Les sources SCSS fournies sont obtenues à partir d’une compilation des sources LESS. En d’autres termes, vous pouvez modifier les fichiers SCSS fournis autant que vous voulez: ils ne seront jamais pris en compte si vous effectuez une compilation via les scripts fournis par le framework!
    Donc si j’ai bien tout compris: les sources LESS sont vos sources de référence que ce soit:
    • pour effectuer un bundle à la carte via les scripts fournis par le framework
    • ou pour écrire vos propres composants UIkit-friendly.

Personellement, après avoir été séduit par la documentation et les démos en ligne d’UIkit v3, mais après quelques tests d’intégration à mon projet, je me sens un peu refroidi à l’idée d’utiliser UIkit dans sa version 3…

Sources en Vanilla Javascript, oui mais…

Si les sources JS n’ont bien recours à aucun framework tiers, il convient de noter que les développeurs d’UIkit on repris un certain nombre de méthodes et de logiques issues de jQuery qu’ils ont converti en fonctions.

Vous rencontrez le système d'import/export propre aux modules E6+. Mais si vous êtes familier avec jQuery, vous retrouverez notamment un certain nombre d’événements (.on()) et de méthodes pour traverser le DOM (.empty(), .html(), .prepend(), .append(), .before(), etc…) qui vous seront familières.
Vous retrouverez aussi le fameux dollar $ de jQuery.

Chacun trouvera du pour et du contre à cette philosophie. Pour ma part:

  • La documentation développeur est inexistante (la documentation utilisateur, par contre, est plutôt bien faite et on parvient rapidement à mettre en place les composants en utilisant les exemples et en tripatouillant un peu de code HTML… dans la mesure où on est un profil d’intégrateur HTML un minimum expérimenté).
  • Nous ne sommes PAS débarrassés de jQuery
  • …et à ce moment là, il faut se poser les questions suivantes:
    • Si je veux écrire des composants custom pour mon projet, est-ce que ça vaut le coup de les intégrer à UIkit?
    • Est-ce que la learning curve en vaut la chandelle sachant qu’une fois intégrés à UIkit, mes composants custom ne fonctionneront sur d’autres projets qu’à condition d’être rattachés par, au minimum, le code core du framework?
    • Est-ce que (toujours pour mon code custom) ça vaut le coup de se traîner des concepts qui nécessitent une connaissance des concepts de jQuery (dont tout le monde à désormais l’air de vouloir se défaire au plus vite) au détriment de l’utilisation des événements et méthodes natifs ES6+? (penser à faciliter l’intégration d’autres développeurs front-end au projet)

[UIKit v3] Boilerplate pour ajouter un composant javascript custom au framework

Attention: article en work-in-progress! Testé fonctionnel UIKit v3.6.18.

Nous allons ajouter un composant Drilldown. Ce billet vous donnera seulement un boilerplate. Pas le composant complet.

Quelques petites choses à savoir avant de démarrer:

  • Un développement custom sous UIKit doit obligatoirement partir de la branche develop si vous souhaitez soumettre par la suite votre composant pour ajout au framework. Sinon, vous pouvez partir du dernier tag en date.
  • LESS est la langage de style principal pour développer sous UIKit et les fichiers générés dans le dossier dist/css/*.css le sont à partir des sources LESS. La commande npm run build-scss ne fait que générer une version au format SCSS des sources LESS! Vous pouvez tout-à-fait partir des sources SCSS pour vos développements custom, mais il vous faudra fournir vous-même le moyen de les compiler (via Gulp, Webpack ou autre) et votre composant ne pourra pas être ajouté au framework. Corrigez-moi si je dis des bêtises.

Les fichiers de style à créer/à modifier

Créer src/less/components/drilldown.less

Modifier src/less/components/_import.less

Ajouter la ligne @import "drilldown.less"; après le bloc contenant tous les imports // JavaScript:

Créer src/less/theme/drilldown.less

Modifier src/less/theme/_import.less

Ajouter la ligne @import "drilldown.less"; après le bloc contenant tous les imports // JavaScript (même manip’ que pour la partie components:

Commande pour compiler les fichiers source au format LESS:

yarn compile-less (les icônes sont également compilées via cette commande).