Hello les agrumes !
Comme ça fait longtemps que je n'ai pas créé de sujet par ici, je me suis dit que j'allais vous parler d'un projet que j'ai mis en place depuis quelque temps : Adm'in.2.
Le principe est simple : fournir une template pour créer des interfaces d'administration simples et jolies, sans passer par des outils lourds comme Bootstrap et jQuery.
Je suis donc parti d'un constat simple : garder les choses simples, ça passe par oublier les vieux navigateurs. À partir de là il n'y avait plus qu'à profiter des joies du duo HTML5/CSS3.
Un repo Git
Le projet étant open-source, les sources sont entièrement sur le repo GitHub.
Ça veut dire que vous pouvez contribuer, que vous soyez développeurs ou non !
Une documentation claire
GitHub permettant de mettre en place un site statique simplement, j'en ai profité pour proposer une documentation une ligne que je complète au fur et à mesure. J'essaie de faire en sorte qu'elle soit aussi claire que possible, n'hésitez pas à faire des retours si certains points sont encore obscurs.
Du CSS simple avec LESS
Le plus gros de l'interface est fait avec LESS, qui est ensuite compilé en CSS : ça permet de ne pas alourdir inutilement le HTML ni le JS : pas de balises inutiles, pas de code inutile.
En plus, LESS permet de personnaliser l'interface : les couleurs sont définies sous forme de variables, ce qui permet d'adapter le thème très facilement.
Du JS vanilla, le meilleur des frameworks
Pour rester léger jusqu'au bout, les frameworks et librairies sont exclus de base. Je vous rassure, rien de vous empêche d'en utiliser : tout le code (y compris celui des plugins) est regroupé sous la variable Admin2
pour éviter les conflits.
Des plugins pour beaucoup de choses
Comme les interfaces de gestion nécessitent souvent des fonctionnalités plus avancées, des plugins ont été créés pour mettre en place différente choses :
- Des toasts, façon Android, pour notifier discrètement
- Des tabs pour regrouper des contenus sous forme d'onglets
- Un éditeur de texte (WYSIWYM) : basique mais facilement extensible et personnalisable
- Du tri par drag'n'drop pour ordonner des éléments facilement
Les plugins nécessitent pour la plupart du JS spécifique. Certains nécessitent également quelques lignes de CSS en plus (comme les toasts ou les tabs).
D'où viennent les idées ?
L'origine du projet vient tout simplement d'une envie personnelle de créer quelque chose d'utile et léger, tout en ayant un côté visuel agréable.
J'ai ensuite décider d'utiliser cette interface pour l'administration de mon site pro lorsque je l'ai refait. Cela m'aura permis d'améliorer quelques détails.
Ensuite un client ayant eu besoin d'un back-office sur mesure pour un projet (une appli mobile), j'ai encore utilisé Adm'in.2. Ce projet m'aura d'ailleurs permis d'introduire quelques nouveautés (comme les sortables par exemple).
Tout cela pour dire que le projet s'appuie sur des exemples concrets : les fonctionnalités ne sont donc pas là pour faire joli mais pour être utiles.
Une démo pour tester tout ça
Si vous souhaitez voir à quoi ça ressemble (en plus de la doc qui montre l'interface de base), n'hésitez pas à faire un tour sur la démo. Il s'agit en réalité de ma page de développement/test, mais ça permet de se faire une idée des principales fonctionnalités.
Et pour la suite ?
C'est bien beau de présenter l'existant, mais il faut bien regarder vers l'avant un peu !
Résoudre quelques petits bugs
Forcément, qui dit développement, dit bugs ! Certains sont déjà repérés, il faudra donc les fixer. Quant aux autres, vous pouvez les signaler.
De nouveaux plugins
Des modals, par exemple, seraient les bienvenues. C'est en tout cas une des idées dans les cartons
Des releases plus claires
Actuellement le code est versionné via Git, mais il n'y a pas de numéros ni de releases. C'est quelque chose d'important pour la suite. Ce point implique aussi de proposer le code prêt à l'emploi (LESS compilé, JS assemblé) autre part que sur la page de démo/tests.
Si vous avez des idées pour gérer tout ça, n'hésitez pas à commenter l'issue en question.
Faciliter l'intégration avec d'autres systèmes
Le point qui veut tout dire et rien qui en même temps.
L'idée est à la fois de permettre une intégration aux systèmes de génération d'interfaces (suite à la question de Kje), mais aussi de proposer une intégration avec les principaux gestionnaires de paquets (npm, composer…) pour pourvoir installer et utiliser rapidement et simplement tout ça.
Voili voilou, n'hésitez pas à me faire part de vos retours : s'il y a des points qui posent problème ou des fonctionnalités qui vous intéresseraient, profitez-en !