Cette histoire a commencé en 2012, lorsque Windows 8 a commencé son voyage avec de grandes étapes sur la planète. Étant impressionné par l'interface carrelée de la page de démarrage de ce système d'exploitation, j'ai décidé de faire de même en HTML, CSS et JavaScript.
Ensuite, il n'y avait aucune idée de créer une bibliothèque de composants, juste un ensemble de styles et leur application, et cela dans le navigateur et cela magnifiquement et cela fonctionnait. Et c'est parti. Au début, il n'y avait que des tuiles (tuiles), puis ils ont acquis divers effets, puis cela n'est pas devenu suffisant. Sur Internet (je plaisante, sur le site Web de Microsoft), le Guide du développeur Microsoft pour l'interface utilisateur de Windows 8 a été trouvé. Après avoir lu un peu sur cette création d'ingénieurs Microsoft, il a été décidé de commencer à créer la bibliothèque de composants, lentement, pour des besoins personnels, sans publicité ni excitation.
Eh bien, comme on dit, c'est dit - fait. Le projet a été baptisé Metro UI CSS .
La première version , qui, soit dit en passant, n'a pas obtenu le numéro 1, mais est restée dans l'histoire avec le numéro 0,95, avait des styles de base et une douzaine de composants.
Sergey Volkov de Russie et Valerio Battaglia de Suisse ont rejoint le projet. Immédiatement, je tiens à les remercier beaucoup pour leur travail dans le projet.
Bien que le projet n'ait été annoncé nulle part, il a quand même été remarqué par la communauté. Le nombre de visiteurs sur la page du projet a rapidement atteint le chiffre de 2 000 hôtes par jour, et les étoiles ont commencé à s'accumuler lentement sur la page GitHub du projet.
Après un certain temps, le projet a été remarqué par les responsables du programme Microsoft Bizspark et a rapidement reçu le statut correspondant en tant que participant au programme BizSpark, et nous tous qui avons travaillé sur le projet avons reçu des chignons de Microsoft sous la forme de licences logicielles du géant du logiciel.
Un peu plus tard, le projet a également reçu le soutien de JetBrain (la société soutient activement l'open source) sous forme de licences pour leur merveilleux IDE PhpStorm .
En juin 2013, il a été décidé d'arrêter de travailler sur la version 0.95 et de commencer le développement de la version 2.0. À ce moment-là, une certaine expérience s'était accumulée, la prise de conscience était venue que ce qui avait été fait était mal, ce qui devait être amélioré et ce qui avait été complètement supprimé. Le TODO global s'est avéré si étendu qu'il était inutile de faire des corrections et des ajouts à la version 0.95, mais il était plus opportun de commencer le développement à partir de zéro.
Ainsi commença la version 2.0 de sa vie.
Lors du développement de la version 2.0, les erreurs et les décisions incorrectes de la version 0.95 ont été prises en compte. Les styles de base ont été optimisés et l'ensemble des composants a été étendu 3 fois à 30 pièces, la possibilité d'initialiser les composants à l'aide de l'approche déclarative via l'attribut HTML de l'élément de rôle de données a été ajoutée.
Les commentaires positifs de la communauté ont montré que c'était la bonne étape - abandonner la poursuite des travaux sur 0,95 en faveur de la toute nouvelle Metro UI CSS 2.0.
Malheureusement, au début des travaux sur la version 2.0, la communication a été perdue, pour une raison ou une autre, avec Sergey et Valerio, et le projet a été rédigé par une seule personne. C'était un travail difficile mais très intéressant. En général, j’ai remarqué que si votre travail profite à quelqu’un, il procure à l’auteur un tel bénéfice, que vous ne pouvez pas acheter pour de l’argent et les sensations qui en découlent ont leur propre coloration psychologique incomparable.
La version 2.0 a duré 2 ans. Au fur et à mesure que tout se développe, le projet se développe, à la fois en pensée et en code. En août 2015, il est venu à la compréhension que quelque chose devait être changé dans le projet et radicalement changé et que cela profiterait à ceux qui utilisaient la bibliothèque pour leurs tâches.
L'une des décisions clés pour la sortie de la version 3.0 a été la décision d'aller encore plus loin de l'initialisation fonctionnelle des composants et de la rendre aussi déclarative que possible et de permettre aux personnes qui n'avaient pas d'expérience en programmation JavaScript (comme les experts SEO) de créer des pages de page et de garder ces pages interactives.
Le principal inconvénient de l'approche déclarative dans la version 2.0 était le fait qu'elle ne fonctionne que pour les composants prédéfinis. Si le composant a été chargé sur la page via Ajax ou créé par du code JavaScript, alors la seule façon de l'initialiser était d'appeler la fonction correspondante.
Fin août 2015, j'ai commencé à travailler sur la 3e version de Metro UI CSS .
Comme je l'ai dit plus haut, la tâche principale était de tout faire dans un style déclaratif. Et si auparavant, afin d'initialiser un composant qui était chargé à l'aide d'Ajax ou créé à l'aide de JavaScript et attaché au DOM, il était nécessaire d'écrire le code JavaScript approprié avec un appel à la fonction d'initialisation de composant requise, alors dans la 3ème version, il a été décidé de corriger cela, en outre, que les navigateurs ont déjà commencé à prendre en charge la technologie nécessaire pour cela (Observateur).
Dans la troisième version, le code des styles de base a été grandement optimisé, un mécanisme a été écrit pour initialiser les composants et suivre leur apparence sur la page avec une initialisation automatique ultérieure. L'ensemble des composants et leurs fonctionnalités ont été étendus, le code du composant a été réécrit pour prendre en charge les fonctions d'initialisation et de suivi. Des innovations étaient en place, comme en témoignaient un grand nombre de commentaires positifs des utilisateurs de la bibliothèque.
En avril 2018, en examinant à nouveau le code source de Metro UI CSS et les sites écrits sur Metro 3, je suis arrivé à la conclusion qu'il y avait tellement de code HTML à écrire au programmeur et que vous deviez faire quelque chose.
Ainsi, la décision a été prise que même si tout le code d'encapsulation HTML supplémentaire, et de nombreux composants à ce moment-là, avait un wrapper d'éléments HTML au-dessus d'eux pour assurer leur opérabilité, pas le programmeur écrit, mais la bibliothèque peut le gérer. Un autre problème était que Metro 3 ne suivait pas la modification des valeurs des attributs clés des composants, dont la modification entraînait une modification du comportement du composant. Ces deux facteurs m'ont amené à écrire Metro 4.
Les travaux préparatoires ont duré trois mois, au cours desquels un plan a été établi pour restructurer Metro 3, en déterminant ce qui était nécessaire et comment le faire. En août, j'ai commencé à travailler sur la 4ème version, qui à ce moment-là, même dans le nom, était passée de Metro UI CSS à Metro 4. Le changement de nom n'était pas non plus simplement fait. La bibliothèque, bien qu'elle ait conservé la base visuelle établie dans les trois versions précédentes, n'était plus seulement une stylisation d'éléments de Windows 8. Elle est devenue quelque chose de plus. Tout a été réécrit à partir de zéro. Le nombre de composants a été augmenté de 2 fois pour atteindre 70+ et continue d'augmenter. Maintenant qu'il est devenu un produit autosuffisant, il n'y a plus besoin de nombreux composants et bibliothèques tiers (à l'exception de jQuery Core, alors qu'il s'agit de la seule et principale dépendance).
Alors, quelle est la particularité de Metro 4 qui n'est pas disponible dans d'autres bibliothèques, par exemple Bootstrap? En fait, je ne comparerai même pas! C'est ma vision personnelle, c'est mon monde que je construis depuis plusieurs années. Si vous êtes complètement satisfait de Bootstrap ou d'une autre bibliothèque, vous pouvez continuer à les utiliser, mais si vous voulez essayer quelque chose de nouveau et plus dans cette vie (au diable la pudeur!), Bienvenue dans le monde de Metro 4.
Principales caractéristiques du projet:
- Un ensemble de styles de base - Metro 4 comprend différents styles pour changer l'apparence des éléments html.
- Plus de 70 composants avec un style déclaratif d'utilisation sont disponibles pour résoudre presque toutes les tâches.
- Outils - Diverses fonctions et classes intégrées amélioreront votre productivité.
- Police d'icônes avec un ensemble de plus de 500+ icônes.
- Builder ( https://builder.metroui.org.ua ) - en utilisant le collecteur, vous pouvez assembler votre propre ensemble de composants Metro 4. Le code source est disponible sur Github.
- Sandbox ( https://sandbox.org.ua ) - son propre sandbox pour tester les capacités de Metro 4 et pas seulement. À propos, le sandbox est écrit dans Metro 4, écrit par Metro 4 et son code source est disponible sur GitHub.
- Réponse rapide aux erreurs détectées et leur élimination. Une nouvelle version est publiée chaque semaine le dimanche, et dans la semaine, la Developer Branch est disponible sur GitHub avec les correctifs et extensions actuels déjà implémentés.
- Une description détaillée de tous les éléments de la bibliothèque Metro 4 ( https://metroui.org.ua ).
- Forum - Obtenez plus d'aide de la communauté sur le forum Metro 4.
- Metro 4 est une boîte à outils open source pour le développement à l'aide de HTML, CSS et JS. Metro 4 vous permet de créer rapidement et sans frais supplémentaires des prototypes de pages et de sites complets, et même sans connaissance de JavaScript.
- Metro 4 dispose actuellement d'une licence MIT et restera toujours gratuit pour les projets open source à but non lucratif.
Un merci spécial, je veux dire:
- À mon ami Alexander Zadorozhny, pour son soutien financier dans les premières étapes du projet
- À mon ami et patron Alexander Olshansky pour son soutien et un grand nombre d'idées originales pour le projet
Les ressources