Création de "composants" html/css

Version imprimable

10/01/2021, 01h16
codeur1989

Création de "composants" html/css

Bonjour à tous Smiley smile

J'ai une demande assez spéciale au travail.

Il m'a été demandé si il est possible de créer des 'composants' (des bouts de code réutilisables) que je pourrais utilisés et ré-utilisés dans n'importe quel projets (par exemple: des boutons, des menu responsive, des formulaires, des headers, tout ce qui est modulable.....). Le but est d’accélérer le développement (faire l'intégration html/css) pour produire plus de sites. Je pense que c'est en partie réalisable, dans la limite du possible, même si un 'composant' ne sera pas compatible à 100%, puisque chaque site possède une charte graphique unique.

J'ai donc besoin de l'avis des intégrateurs et dev front. Je cherche à créer une bibliothèque de composants en quelques sortes...

Est-il possible de créer des composants html/css que je peux importer pour n'importe quel projet ? Si oui, avec quelles technologies, quel langages ? SASS, Vue js ?

Merci pour votre aide
12/01/2021, 17h54
NoSmoking

Bonjour,

Citation:

Il m'a été demandé si il est possible de créer des 'composants' (des bouts de code réutilisables) que je pourrais utilisés et ré-utilisés dans n'importe quel projets (par exemple: des boutons, des menu responsive, des formulaires, des headers, tout ce qui est modulable.....).

justement je dirais que tout ce qui est (trop) modulable est difficile à modéliser, ne serait-ce que parce que les chartes graphiques client différentes.
Tu peux, concernant le HTML, au mieux créer des « templates » qui devront quoiqu'il arrive être modifiés.
Attention toutefois au nombre de « templates » que tu va créer, il ne faudrait pas que cela prenne plus de temps à retrouver le bon plutôt que de le saisir :mrgreen:

Citation:

Est-il possible de créer des composants html/css que je peux importer pour n'importe quel projet ?

Cela est tout à fait possible, il suffit de voir ~~l'usine à gaz~~ BootStrap, le tout une fois de plus étant de retrouver facilement tes petits à l'entame d'un nouveau projet.
Tu peux également passer par des « Web Components » ou encore par des composants vueJS.

Cela va dépendre en fait de ce que tu souhaites réellement réaliser, ou ce que l'on te demande, mais il semblerait bon de travailler avec au moins un/des framework(s) partagé(s) et maitrisé(s).
12/01/2021, 23h02
codeur1989

@NoSmoking

En fait, mon chef (designer) cherche à augmenter la productivité de la partie intégration (html, css, js). Mais, vu qu'on travaille sur des chartes uniques à chaque fois, je ne vois que très peu de composants, même si ces composants ne le sont qu'à 50%. Il souhaite créer des composants avec des header, responsive et des buttons. Mais je vois cela difficilement réalisable, vu que ces éléments sont spécifiques.

Les web components: cette techo est prometteuse mais trop instable à l'heure actuelle et compliquée (selon moi). Je préfère utiliser Vue js, ou du html/css avec SASS.
15/01/2021, 18h20
NoSmoking

Citation:

En fait, mon chef (designer) cherche à augmenter la productivité de la partie intégration (html, css, js).

La plupart des IDE permettent des raccourcis de saisie très avantageux pour des structures répétitives et le gain de temps est réel.

Citation:

Mais, vu qu'on travaille sur des chartes uniques à chaque fois,

Là comme tu l'as signalé le recours aux pré-processeurs est un avantage même si l'on peut régler pas mal de soucis de ce côté là avec les variables CSS, mais cela ne concerne que la charte graphique les styles de bases devant être posés.

Citation:

Il souhaite créer des composants avec des header, responsive et des buttons.

Un header peut contenir tellement de choses à des positions différentes, logo à gauche ou à droite, au dessus en dessous du menu, si le menu existe, ..., et j'en passe des tonnes qu'il me paraît difficile de tout modéliser.

Citation:

Les web components: cette techo est prometteuse mais trop instable à l'heure actuelle et compliquée (selon moi).

Peut être que des environnement comme vueJs, ..., lui ont coupé l'herbe sous les pieds et que ce n'est pas « mode ».

Bon courage !
17/01/2021, 18h36
Soundboy39

Bonjour,

Je ne pense pas qu'il soit légitime d'inventer un système de composant.

Effectivement, une des règles d'or en informatique et de ne jamais réinventer la roue (surtout lorsque l'on veut être rentable...).

Mais pour ce qui est du webdesign, la majeure partie des freelances et agences on des templates (ou themes pour utiliser un autre terme...) de base (et pas forcément 50...) qu'ils modifient en fonction du graphisme et de la UI élaborée pour le site.

Je pense que vous pouvez déjà tester ça avant de partir sur des trucs complexes, compliqués à maintenir... et donc pas forcement rentables.
24/01/2021, 06h40
ABCIWEB

Normalement ton chef devrait être en mesure de définir lui-même clairement ce qui est générique et que tu pourras réutiliser assez facilement. Inutile d'aller trop loin, car si cela devient compliqué à utiliser, finalement il te faudra au total plus de temps.

Après on peut faire des modules php/js fonctionnels qui passeront partout et qui pourront s'intégrer dans n'importe quel html. Par exemple j'ai fais un module complet d'administration de formulaire à partir de formbuilder, qui permet aux clients de créer des formulaires et je m'en sert également côté client s'ils ne veulent pas l'utiliser eux-mêmes. J'ai aussi ce module d'upload qui revient dans tous mes sites. Je donne ces exemple car c'est surtout pour des modules complets ou des fichiers côté serveur/administrateur, que j'ai le plus de code générique.

Sinon côté purement front end, j'ai trois menus préprogrammés qui permettent de faire pas mal de choses et que je peux adapter assez facilement, une diapobox, le js responsive, bref une petite panoplie de code communs js/html/css. Et en html je n'ai qu'un template responsive très ouvert que je réorganise suivant les besoins.

Chacun sa façon de s'organiser en fonction des sites qu'il crée et des outils qu'il utilise. Si tu fais passer l'utilisation d'un framework privilégié avant tout et qu'il t'impose une structure de code, c'est lui qui va diriger tes choix pour savoir quel code générique te seras le plus utile. Mon travail full stack solo me permet aussi plus de liberté que si je travaillais en équipe, donc au final quand on fait du sur mesure (je veux dire quand on utilise pas wordpress) les choix peuvent être très différents suivant les équipes, les besoins, les framwork etc.

Et j'en reviens à mon idée de départ, s'il n'a pas une idée claire lui-même de ce qu'il faudrait faire, il y a peu de chance que cela serve à quelque chose. Normalement c'est celui qui a une vision d'ensemble sur les techniques utilisées qui est le mieux à même de définir les grandes lignes. A plus bas niveau, cela se limite plutôt à repérer les blocs de code pour les structures répétitives, et comme disait NoSmoking cela revient à organiser son espace de travail pour les avoir sous la main.

Bref j'ai dérivé un peu par rapport à la partie purement intégration, car je n'ai rien à ajouter à ce qu'ont dit NoSmoking et Soundboy39 et avec lesquels je suis d'accord. Et je comprend aussi que tu ne sois pas chaud pour les web component, perso pour l'instant ça me compliquerait la vie plus qu'autre chose et je ne m'intéresse qu'aux technos matures car ça prend trop de temps d'essuyer les plâtres.