Эта история началась в далеком 2012 году, когда широкими шагами по планете начала свой путь Windows 8. Находясь под впечатлением плиточного интерфейса стартовой страницы это операционной системы, я решил сделать такую же на HTML, CSS и JavaScript.
Тогда не было и мысли делать библиотеку компонентов, просто набор стилей и их применение и чтобы в браузере и чтобы красиво и чтобы работало. И понеслась. Сначала были просто плитки (тайлы), затем они обрели различные эффекты, а затем этого стало мало. На просторах интернета (шучу, на сайте Microsoft) был найден Microsoft Developer Guide for Windows 8 UI. Почитав немного сие творение инженеров Microsoft, было принято решение начать делать библиотеку компонентов, потихоньку, для личных нужд, без рекламы и ажиотажа.
Ну, как говорится, сказано — сделано. Проект был запущен по кодовым названием Metro UI CSS.
Первая версия, которая, к слову сказать, так и не получила номер 1, а осталась в истории с номером 0.95 имела базовые стили и десяток компонент.
К работе над проектом присоединились Сергей Волков из России и Валерио Баттаглия из Швейцарии. Сразу, хочу сказать им огромное спасибо за их работу в проекте.
Хотя проект нигде не рекламировался, но все таки был замечен сообществом. Количество посетителей страницы проекта быстро дошло до цифры в 2000 хостов ежедневно, начали потихоньку накапливаться звездочки на GitHub странице проекта.
Через какое то время проект был замечен менеджерами программы Microsoft Bizspark и вскоре получил соответствующий статус как участник программы BizSpark, а мы все, кто работал на проектом, получили плюшки от Microsoft в виде лицензий на программное обеспечение от софтверного гиганта.
Чуть позже проект также получил поддержку от компании JetBrains (компания активно поддерживает open source) в виде лицензий на их замечательную IDE PhpStorm.
В июне 2013 года было принято решение прекратить работу над версией 0.95 и начать разработку версии 2.0. К этому времени накопился некоторый опыт, пришло осознание, что было сделано не так, что нужно улучшить, а что убрать совсем. Общий TODO получился таким обширным, что не было смысла вносить исправления и дополнения в версию 0.95, а целесообразнее было начать разработку с чистого листа.
Так начала свою жизнь версия 2.0.
При разработке версии 2.0 были учтены ошибки и неверные решения в версии 0.95. Были оптимизированы базовые стили, а набор компонент был расширен в 3 раза до 30 штук, добавлена возможность инициализировать компоненты с использованием декларативного подхода через атрибут HTML элемента data-role.
Положительные отзывы сообщества показали, что это был правильный шаг — отказаться от продолжения работы над 0.95 в пользу полностью новой Metro UI CSS 2.0.
К сожалению, в начале работы над версией 2.0 была потеряна связь, по тем или иным причинам, с Сергеем и Валерио и далее проект писался одним человеком. Это была трудная, но очень интересная работа. Вообще я заметил, что если твоя работа приносит кому то пользу, это дарит автору такой себе профит, который не купишь за деньги и ощущения от этого имеют свою собственную, ни с чем не сравнимую психологическую окраску.
Версия 2.0 просуществовала 2 года. Так как все развивается, развивался и проект, как в мыслях так и в коде. В августе 2015 года пришло понимание, что в проекте нужно что то менять и менять коренным образом и так, что бы это пошло на пользу тем, кто использовал библиотеку для своих задач.
Одним из ключевых решений для выпуска версии 3.0 стало решение отойти еще дальше от функциональной инициализации компонент и сделать ее максимально декларативной и дать возможность верстать страницы сайтов людям, не имеющим опыта программирования на JavaScript (например СЕО специалисты) и чтобы эти страницы сохранили свою интерактивность.
Основным недостатком в декларативном подходе в версии 2.0 был тот факт, что он работа только для заранее сверстанных компонентов. Если компонент загружался на страницу через Ajax или создавался JavaScript кодом, то единственной возможностью его инициализации оставался вызов соответствующей функции.
В конце августа 2015 года я начал работу над 3-й версией Metro UI CSS.
Как я говорил выше, основная задача была сделать все в декларативном стиле. И если раньше, чтобы инициализировать компонент, который был загружен посредством Ajax или создан с использованием JavaScript и присоединен в DOM, нужно было написать соответствующий JavaScript код с вызовом нужной функции инициализации компонента, то в 3-й версии было решено исправить это, тем более, что браузеры уже начали поддерживать нужную для этого технологию (Observer).
В третьей версии был сильно оптимизирован код базовых стилей, написан механизм инициализации компонент и отслеживания их появления на странице с последующей автоматической инициализацией. Набор компонент и их функциональные возможности были расширены, код компонент был переписан для поддержки функций инициализации и отслеживания. Нововведения были к месту, о чем говорили большое количество положительных отзывов пользователей библиотеки.
В апреле 2018 года, в очередной раз пересматривая исходный код Metro UI CSS и сайтов, написанных на Metro 3, я пришел к мысли о том, что уж очень много HTML кода приходится писать программисту и нужно с этим что то делать.
Так было принято решение, что пусть весь лишний оберточный HTML код, а многие компоненты к тому времени имели над собой обертку из HTML элементов для обеспечения своей работоспособности, пишет не программист, а библиотека сама с этим справляется. Еще одной проблемой было то, что Metro 3 никак не отслеживало изменение значений ключевых атрибутов компонент, изменение которых влекло за собой изменение поведения компонента. Два этих фактора привели меня к необходимости написания Metro 4.
Подготовительные работы заняли три месяца, за это время был составлен план по реструктуризации Metro 3, определения, что нужно и как это делать. В августе я начал работу на 4-й версией, которая к тому времени даже в названии поменялась с Metro UI CSS в просто Metro 4. Изменение названия тоже было не просто так сделано. Библиотека, хоть и сохранила визуальную базу, заложенную в предыдущих трех версиях, но уже не была только стилизацией элементов Windows 8. Это стало нечто большее. Все было переписано с нуля. Количество компонент было увеличено в 2 раза до 70+ и продолжает увеличиваться.Теперь это стал самодостаточный продукт, отпала необходимость во многих сторонних компонентах и библиотеках (кроме jQuery Core, пока это основная и единственная зависимость).
Итак что же такого в Метро 4 особенного, чего нет в других библиотеках, например Bootstrap? На самом деле даже сравнивать не буду! Это личное мое виденье, это мой мир, который я строил несколько лет. Если Вас полностью устраивает Bootstrap или нека другая библиотека, то Вы можете продолжать их использовать, но если Вам захочется попробовать чего то нового и большего в этой жизни (к черту скромность!), милости просим в мир Metro 4.
Ключевые особенности проекта:
- Набор базовых стилей — Metro 4 включает в себя различные стили для изменения внешнего вида элементов html.
- 70+ компонент с декларативным стилем использования доступны для решения практически всех задач.
- Инструменты — различные встроенные функции и классы повысят вашу производительность.
- Иконочный шрифт с набором из более чем 500+ иконок.
- Builder (https://builder.metroui.org.ua) — при помощи сборщика, Вы сможете собрать собственный набор из компонентов Metro 4. Исходный код доступен на Github.
- Sandbox (https://sandbox.org.ua) — собственная песочница для тестирования возможностей Metro 4 и не только. К слову сказать песочница написана на Metro 4, автором Metro 4 и ее исходный код доступен на GitHub.
- Быстрая реакция на обнаруженные ошибки и их устранение. Новая версия выходит каждую неделю по воскресеньям, а в течении недели доступен Developer Branch на GitHub с текущими уже реализованными фиксами и расширениями.
- Подробное описание всех элементов библиотеки Metro 4 (https://metroui.org.ua).
- Форум — получите дополнительную помощь от сообщества на форуме Metro 4.
- Metro 4 — это инструментарий с открытым исходным кодом для разработки с помощью HTML, CSS и JS. Metro 4 позволяет быстро и без лишних затрат создавать прототипы страниц и полнофункциональные сайты и даже без знания JavaScript.
- Metro 4 в данный момент имеет лицензию MIT и всегда будет оставаться бесплатным для некоммерческих проектов с открытым исходным кодом.
Отдельное спасибо хочу сказать:
- Моему другу Александру Задорожному, за финансовую поддержку на первых этапах проекта
- Моему другу и шефу Александру Ольшанскому за поддержку и большое количество оригинальных идей для проекта
Русурсы
- Официальный сайт проекта
- GitHub
- Sandbox: https://sandbox.org.ua, https://github.com/olton/Sandbox
- Builder: https://builder.metroui.org.ua, https://github.com/olton/Metro4-Builder
Автор: olton
