Хабрахабр

[Из песочницы] Metro 4 — путь длиною в 6 лет. Краткая история Metro UI CSS

Находясь под впечатлением плиточного интерфейса стартовой страницы это операционной системы, я решил сделать такую же на HTML, CSS и JavaScript. Эта история началась в далеком 2012 году, когда широкими шагами по планете начала свой путь Windows 8.

И понеслась. Тогда не было и мысли делать библиотеку компонентов, просто набор стилей и их применение и чтобы в браузере и чтобы красиво и чтобы работало. На просторах интернета (шучу, на сайте Microsoft) был найден Microsoft Developer Guide for Windows 8 UI. Сначала были просто плитки (тайлы), затем они обрели различные эффекты, а затем этого стало мало. Почитав немного сие творение инженеров Microsoft, было принято решение начать делать библиотеку компонентов, потихоньку, для личных нужд, без рекламы и ажиотажа.

Проект был запущен по кодовым названием Metro UI CSS. Ну, как говорится, сказано — сделано.

95 имела базовые стили и десяток компонент. Первая версия, которая, к слову сказать, так и не получила номер 1, а осталась в истории с номером 0.

Сразу, хочу сказать им огромное спасибо за их работу в проекте. К работе над проектом присоединились Сергей Волков из России и Валерио Баттаглия из Швейцарии.

Количество посетителей страницы проекта быстро дошло до цифры в 2000 хостов ежедневно, начали потихоньку накапливаться звездочки на GitHub странице проекта. Хотя проект нигде не рекламировался, но все таки был замечен сообществом.

Через какое то время проект был замечен менеджерами программы Microsoft Bizspark и вскоре получил соответствующий статус как участник программы BizSpark, а мы все, кто работал на проектом, получили плюшки от Microsoft в виде лицензий на программное обеспечение от софтверного гиганта.

Чуть позже проект также получил поддержку от компании JetBrains (компания активно поддерживает open source) в виде лицензий на их замечательную IDE PhpStorm.

95 и начать разработку версии 2. В июне 2013 года было принято решение прекратить работу над версией 0. К этому времени накопился некоторый опыт, пришло осознание, что было сделано не так, что нужно улучшить, а что убрать совсем. 0. 95, а целесообразнее было начать разработку с чистого листа. Общий TODO получился таким обширным, что не было смысла вносить исправления и дополнения в версию 0.

0. Так начала свою жизнь версия 2.

0 были учтены ошибки и неверные решения в версии 0. При разработке версии 2. Были оптимизированы базовые стили, а набор компонент был расширен в 3 раза до 30 штук, добавлена возможность инициализировать компоненты с использованием декларативного подхода через атрибут HTML элемента data-role. 95.

95 в пользу полностью новой Metro UI CSS 2. Положительные отзывы сообщества показали, что это был правильный шаг — отказаться от продолжения работы над 0. 0.

0 была потеряна связь, по тем или иным причинам, с Сергеем и Валерио и далее проект писался одним человеком. К сожалению, в начале работы над версией 2. Вообще я заметил, что если твоя работа приносит кому то пользу, это дарит автору такой себе профит, который не купишь за деньги и ощущения от этого имеют свою собственную, ни с чем не сравнимую психологическую окраску. Это была трудная, но очень интересная работа.

0 просуществовала 2 года. Версия 2. В августе 2015 года пришло понимание, что в проекте нужно что то менять и менять коренным образом и так, что бы это пошло на пользу тем, кто использовал библиотеку для своих задач. Так как все развивается, развивался и проект, как в мыслях так и в коде.

0 стало решение отойти еще дальше от функциональной инициализации компонент и сделать ее максимально декларативной и дать возможность верстать страницы сайтов людям, не имеющим опыта программирования на JavaScript (например СЕО специалисты) и чтобы эти страницы сохранили свою интерактивность. Одним из ключевых решений для выпуска версии 3.

0 был тот факт, что он работа только для заранее сверстанных компонентов. Основным недостатком в декларативном подходе в версии 2. Если компонент загружался на страницу через Ajax или создавался JavaScript кодом, то единственной возможностью его инициализации оставался вызов соответствующей функции.

В конце августа 2015 года я начал работу над 3-й версией Metro UI CSS.

И если раньше, чтобы инициализировать компонент, который был загружен посредством Ajax или создан с использованием JavaScript и присоединен в DOM, нужно было написать соответствующий JavaScript код с вызовом нужной функции инициализации компонента, то в 3-й версии было решено исправить это, тем более, что браузеры уже начали поддерживать нужную для этого технологию (Observer). Как я говорил выше, основная задача была сделать все в декларативном стиле.

Набор компонент и их функциональные возможности были расширены, код компонент был переписан для поддержки функций инициализации и отслеживания. В третьей версии был сильно оптимизирован код базовых стилей, написан механизм инициализации компонент и отслеживания их появления на странице с последующей автоматической инициализацией. Нововведения были к месту, о чем говорили большое количество положительных отзывов пользователей библиотеки.

В апреле 2018 года, в очередной раз пересматривая исходный код Metro UI CSS и сайтов, написанных на Metro 3, я пришел к мысли о том, что уж очень много HTML кода приходится писать программисту и нужно с этим что то делать.

Еще одной проблемой было то, что Metro 3 никак не отслеживало изменение значений ключевых атрибутов компонент, изменение которых влекло за собой изменение поведения компонента. Так было принято решение, что пусть весь лишний оберточный HTML код, а многие компоненты к тому времени имели над собой обертку из HTML элементов для обеспечения своей работоспособности, пишет не программист, а библиотека сама с этим справляется. Два этих фактора привели меня к необходимости написания Metro 4.

В августе я начал работу на 4-й версией, которая к тому времени даже в названии поменялась с Metro UI CSS в просто Metro 4. Подготовительные работы заняли три месяца, за это время был составлен план по реструктуризации Metro 3, определения, что нужно и как это делать. Библиотека, хоть и сохранила визуальную базу, заложенную в предыдущих трех версиях, но уже не была только стилизацией элементов 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 и всегда будет оставаться бесплатным для некоммерческих проектов с открытым исходным кодом.

Отдельное спасибо хочу сказать:

  • Моему другу Александру Задорожному, за финансовую поддержку на первых этапах проекта
  • Моему другу и шефу Александру Ольшанскому за поддержку и большое количество оригинальных идей для проекта

Русурсы

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть