Metro 4 — путь длиною в 6 лет. Краткая история Metro UI CSS

Эта история началась в далеком 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 и всегда будет оставаться бесплатным для некоммерческих проектов с открытым исходным кодом.

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


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

Русурсы


Поделиться публикацией

Комментарии 64

    0

    Недавно наткнулся на ваш проект и в целом он понравился. Один только вопрос крутился у меня в голове пока смотрел на компоненты — зачем стилизация компонентов сделана через data-style а не через классы?

      0
      Наверное Вы имете ввиду стилизацию через атрибут data-cls-*? Многие компоненты имеют сложную структуру, при этом задаются одним элементом. Что бы применить в дальнейшем изменение к отдельной части компонента и используются специальные атрибуты data-cls-*, через которые Вы можене применить собственные классы к компоненту.
        0

        Я имел в виду через обычный CSS class (например для чекбоксов), но идею я понял — спасибо.

          0
          С чекбоксами отдельная история. Первый вариант не очень понравился шефу, поэтому был добавлен второй вариант через атрибут data-style. Он есть только у чекбоксов и радио кнопок.
      –2
      Наверное, оффтопик, и меня сейчас жутко заминусят, особенно в карму, но я всё же хочу это сказать. Уже не раз бросается в глаза, как авторы различных проектов, если это не крупные компании, нацеленные чисто на бабки, а вот простые (хоть и крутые, безусловно) разработчики обозначают своё происхождение, когда делают проект международного уровня. У российских разработчиков — это зачастую международный домен и всё на английском. У украинцев же — национальный домен и в about — гордо «сделано в Украине». Заставляет задуматься.

      По сути проекта же. Молодцы, безусловно. Или… молодец, я так понял, что ведёт проект сейчас один человек. Поправьте, если ошибаюсь. Идея, казалось бы, плавает (плавала) на поверхности, — но реализовали её именно вы. Более того, обратили на себя внимание Microsoft и Jet Brains… Интересует вот такой момент — а что в плане лицензии? Изначально не боялись, не задумывались, что те же товарищи из Microsoft могут придраться и задавить проект?
        0
        Спасибо. По поводу лицензии: я изначально озадачился этим вопросом и получил от Майкрософт (точнее от ее представителя, который активировал Bizspark) ответ, что проблем не будет.
        • НЛО прилетело и опубликовало эту надпись здесь
            0
            Нет.
              +2
              Вот вы написали комментарий. Потом отредактировали его в «del». Я полез в почту и посмотрел, что вы там за комментарий написали, который потом отредактировали, и ответил на него кратко «нет». А теперь вы опять отредактировали комментарий, и теперь моё «нет» смотрится неуместно, но убрать или изменить вслед за вашими изменениями я уже не могу. Зачем так делать?
              +2
              Да, проект международного уровня может быть сделан в одной стране.

              Проект, который сделан в одной стране, вполне может поддерживаться и развиваться в дальнейшем участниками из других стран.

              Многие (но не все) толковые проекты сделаны в Штатах. Но поддерживаются и развиваются всем миром. Например, Википедия. И тысячи других.
                +1
                Многие (но не все) толковые проекты сделаны в Штатах.
                Ни разу не видел у них обозначения, что это Американский проект.
              +2

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

                –5

                Речь не о том, на каком языке делать. А о том, что украинцы гордятся своей страной, а россияне – нет.

                  +4
                  Почему обязательно нужно заявлять о своем проекте от лица целой страны?

                  Дискуссия
                  Чтобы так писать, нужно, чтобы гражданство разработчиков было одинаковым? Или географическое положение во время работы над проектом? Инструментальная база или даже спонсорство со стороны государства? А можно ли к проекту подключать библиотеки, сделанные в другой стране, чтобы не потерять национальный статус? Можно ли открывать исходники таких софтин под позволяющими модицикацию лицензиями? Если да, то в какой момент национальный статус теряется?

                  Или же это просто тренд в отдельно взятой стране и демонстрация чего-то кому-то?
                    +1
                    Да и российских проектов достаточно, где используется национальный домен и русский язык (правда вот, гордого «Сделано в России/Испании/Франции» я нигде не встречал).
                    Ну и чтобы делать такие громкие заявления, нужна какая-то статистика, а не — «Уже не раз бросается в глаза».
                      0
                      Made in China встречается повсеместно, например. Правда, это скорее не в Сети, а в реале.
                        0
                        нужна какая-то статистика

                        Я боюсь, меня в глубокий минус сольют, если я пособираю статистику и статью набросаю. Видишь, «патриоты» уже в карму нагадили. Да и формат Хабры всё же не о том.
                        +1
                        А зачем писать везде, что проект «Made in noname country»? Люди делали этот проект, а не страна. Делали проект на свои деньги, вкладывали свой труд. Ни вы, ни я, ни кто-то еще из России отношения к этому проекту не имел, кроме этих нескольких людей. Я, наверно, очень не «патриотичен», но не умею «гордиться страной». Потому что считаю, что прошлыми достижениями гордиться глупо (а-ля победа на Куликово поле), а из современных достижений — «крымнаш», «сочинаш», «сириянаш», «четвертьфиналнаш», «пенсияненаш» чем тут гордится — хз.
                          0
                          Комментарием ниже написал, но повторюсь. Я не говорил, надо или не надо так делать. Я лишь констатировал такой факт, особенность. Как её трактовать — это отдельная тема.
                            0
                            Что плохого в военных победах страны («сириянаш»)? А вообще странно, возникает ощущение, что вас волки в лесу вырастили и обучили пользоваться хабром и видимо программировать, если так то вы правы.
                              0
                              В этом ничего наверное плохого нет, если это делается не за счёт наших пенсий.
                                0
                                Тссс… тебе сейчас тоже карму «патриоты» сольют.
                                +1
                                Что плохого в военных победах страны («сириянаш»)?

                                Во-первых, я считаю, что войны — это впринципе плохо. И никакая власть, территория, ресурсы и прочая чушь — не стоят человеческих жизней.

                                Во-вторых, мне глубоко плевать, что там «ваш» или «не ваш». Вы эту пургу втирайте по первому каналу, а не мне в уши.

                                В-третьих, я считаю единственно адекватной идеологией — космополитизм, и упарываться по достижениям конкретной страны — не вижу никакого смысла.

                                А вообще странно, возникает ощущение, что вас волки в лесу вырастили и обучили пользоваться хабром и видимо программировать, если так то вы правы.

                                Я родился в предразвальном Советском Союзе. Вырос в Крыму при украинской власти. А теперь вот живу при российской. Нет, меня вырастили не волки в лесу, а родители, которые задницу рвали, чтобы выжить. Сейчас я задницу рву с той же целью.

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

                                Поэтому, можете собрать свои достижения и победы и шагать стройными рядами. Для меня ваше светопредставление и бряцанье медалями — яйца выеденого не стоят.
                              0
                              Стоит так делать или лет — это уже другой разговор. Я просто констатировал факт. Не понимаю, почему меня заминусовали и нагадили в карму за это.
                            0
                            Жанр «Совпадение? Не думаю...» и сюда уже завезли…
                            +1
                            Как бы на дворе 2018 год, пора уже потихоньку и от JQuery отходить. )
                              0
                              Кстати у меня был примерно тот же вопрос. А как быть тем кто пишет под Ангуляр или Реакт?
                                0

                                Ну формально ни angular ни react не конфликтуют с jquery, хотя их совместное использование это треш, да.

                                +2

                                А куда отходить то, в какую сторону? Или поддерживать весь этот ворох не совместимых друг с другом фреймворков? А как быть со старыми (но не очень) браузерами? Я понимаю, сейчас модно всё ставить через npm, тащить за собой стопятьсот зависимостей и тормозить, будто не сайт отрисовыватся, а моделируется работа токамака в реальном времени.

                                  0
                                  В поддержке указано IE11+ и другие вечнозеленые, так что про какие старые браузеры вообще разговор. Многие вещи можно уже и на ванильном js делать, а так я бы порекомендовал бы Vue в тех местах где много зависимостей и нужна реактивность.
                                    0

                                    IE 11 выпущен 5 лет назад. И у него нет "+".

                                      +2
                                      Ну наверное автор имел ввиду Edge как наследие от IE.
                                        0
                                        C ru.vuejs.org:
                                        Vue не поддерживает IE8 и ниже, так как использует возможности ECMAScript 5, которые невозможно эмулировать в IE8. В остальном, поддерживаются все браузеры, совместимые с ECMAScript 5.

                                        Так что я, в принципе, не против использования Vue. Но, опять же, встаёт вопрос, почему Vue? Может, я пишу на реакте? Или ангуляре? Или другом *someframework*…
                                          0
                                          Ванильный javascript?)
                                            –1
                                            Да, наверное. А те, кому нужна поддержка старых браузеров, воспользуется транспайлером. Только я не уверен, что транспайлер сможет заткнуть все бреши старых браузеров, особенно в области различных API.
                                            0
                                            Ну банально потому что Vue элементарно можно встроить в часть страницы + реактивность из коробки, ну и низким порогом входа в фреймоворк + поддержка и развитие экосистемы. С ангуляром и реактом дела не имел, поэтому на их счет ничего сказать не могу.
                                  0
                                  Находясь под впечатлением плиточного интерфейса
                                  Я первым делом поставил Classic Shell. А потом Remove — AppxPackage
                                    0
                                    Забыли ещё Remove-AppxProvisionedPackage -online
                                      0
                                      Она не сработала, несмотря на права админа.
                                        –1
                                        В таком виде и не должна, это только часть. Ниже полностью, пользуйтесь на здоровье

                                        Get-AppXPackage -AllUsers | ? name -CNotLike *Store* | Remove-AppxPackage

                                        Get-AppxProvisionedPackage -online | ? DisplayName -CNotLike *Store* | Remove-AppxProvisionedPackage -online
                                          0
                                          Вы серьезно думаете, что я использовал эту команду исключительно после вашего комента и именно в таком виде?
                                      +1
                                      Вы молодец! Мы вам все стоя апплодируем.
                                      0
                                      Песик классный
                                        0
                                        Основным недостатком в декларативном подходе в версии 2.0 был тот факт, что он работа только для заранее сверстанных компонентов. Если компонент загружался на страницу через Ajax или создавался JavaScript кодом, то единственной возможностью его инициализации оставался вызов соответствующей функции.

                                        Как раз в те же годы, что делалась вторая версия, я делал cornerjs (https://habr.com/company/uprock/blog/192740/), который бы решал именно эту проблему. Чертовски обидно — я писал ребятам из бутстрапа, материала, кучи фреймворков поменьше, все либо думали, что это усложнит проект, либо пугались фразы "полифилл для ie9-10", хотя он работал на нативных свойствах. и тут бы он тоже идеально вписался. Но, к сожалению, прошли те времена, когда такое решение ("легкие" хуки на странице без написания реального JS) было бы ощутимо актуально, сейчас в тренде несколько иные вещи.

                                          0
                                          редкая хрень эта ваша МЕТРО. неудобно буквально всё.
                                            0

                                            Скажите, а в чём был смысл обязательной декларативной инициализации компонентов, подтянутых через AJAX (как я понял, неумение этого версией 2 и было её основным «фатальным недостатком»)? Если без JavaScript'а вам всё равно никакого AJAX'а не видать.

                                              0
                                              Например вы подтянули через аякс кусок html кода, который содержит, в том числе, компоненты, которые требуется инициализировать. Вот мне и хотелось, что бы этот кусок html был добавлен в DOM и на этом все. Все компоненты проиницализировались автоматички, не нужно помнить и даже знать, какие компоненты прилетели. Как то так.
                                                0

                                                Это я понял, но зачем? Вам же всё равно писать код для вставки куска html в DOM, тут же все компоненты можно и проинициализировать. «Главное обоснование» выглядит как-то несерьёзно. Просто на моей памяти подобная магия рано или поздно обязательно вылезала боком и приходилось костылить жуткие вещи, что-бы отрубить её там, где она не нужна.

                                                  0
                                                  Это не магия — это MutationObserver
                                                    +1

                                                    чтобы верстальщики могли делать интерактивные элементы, не касаясь кода

                                                +1
                                                Сергей, ваша трудоспособность — это просто что-то с чем-то! Нужно быть просто локомотивом, чтобы в одиночку такое осилить. Просто хочу выразить вам свое уважение :)

                                                BTW если не секрет — всегда интересовал порядок величины донатов на таких проектах. Насколько я понял, вас напрямую не поддерживает какой-нибудь гигант индустрии, так что все в руках пользователей. Если нет желания называть прямых цифр, то можете просто поделиться своими ощущениями — есть ли возможность хотя бы перейти на парт тайм или приходится 8 часов днем работать + ночью над Metro? Вообще, думаю многим было бы очень интересно почитать статью на эту тему от человека, прошедшего путь от 0 до ~6000 звезд на гитхабе :)
                                                  0
                                                  Спасибо. Нет никаких донатов (на странице Support ксть ссылки, и можете убедиться, что фиктически проект живет без финансовой поддержки). Работать приходится много, но это мой любимый проект, и иногда это позволяет переступить через себя и работать сверх и в любом состоянии (как то пришлось при темп 39 фиксить найденные баги и выпускать релиз). А что до звезд, я очень рад, что кому то мой проект нравится и это дает дополнительные силы для работы.
                                                    0
                                                    А, значит меня смутила кнопка Donate на скриншоте из статьи и BTC адрес :)
                                                    Заголовок спойлера
                                                    image
                                                      0

                                                      К сожалению толку от этого было ноль :(

                                                      0
                                                      А вы прикрутите добровольный донат. Я уже как-то пользовался вашей библиотекой для небольшого проекта, и 5-10 баксов закинуть в копилку проекта меня бы не задавило.

                                                        0

                                                        Спасибо. На странице Support аж целых три канала доната :)

                                                    0
                                                    Слайдеры анимируют свойство left в 2018, спасибо, до свидания.
                                                      0
                                                      Спасибо. Обязательно пересмотрю слайдер. Библиотека больша и уследить за всем сложно. Всегда есть что сделать, что бы стало лучше.
                                                      0
                                                      Когда-то давно делал проект, и использовал ту самую первую версию (0.95). Получилось в итоге неплохо, примите мои благодарности.

                                                      P.S. К Metro так и не привык в итоге.
                                                        0
                                                        Ну 4-я версия — это уже нечто другое.
                                                        0
                                                        В разработке принимает участие человек из Швейцарии, и при этом в футере присутствует надпись: Made in Ukraine.
                                                        Уместнее было бы сделать отдельную страницу участников с краткой биографией. А то как-то не совсем честно получается по отношению к остальным участникам.

                                                          0
                                                          Сергей Волков и Валерио Батаглия принимали участие только в разработке первой версии. Начиная со 2-й я занимсался этим в одиночку. Так что ничего нечестного не вижу. Там где они принимали участие, они отмечены и там нет надписи сделано в Украине.

                                                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                        Самое читаемое