Комментарии 33
Нужно больше жирного текста.
В Waterfox с noscript и разрешенными скриптами (numi и даже, на всякий случай, яндекса) примеры не отобразились. Просто серый экран. В Opera с разрешенным всем заработало только после нажатия на кнопки масштаба. Иначе правая часть пустая. Вот за это я и не люблю скрипты.
Понятно, что без них сейчас никуда, однако когда без них вообще всё не работает — это так себе.
Upd: домашняя страница тоже пустая со включенными скриптами. Без — показывает юзерагент.
Понятно, что без них сейчас никуда, однако когда без них вообще всё не работает — это так себе.
Upd: домашняя страница тоже пустая со включенными скриптами. Без — показывает юзерагент.
Custom Elements не работают без скриптов в принципе. Если есть необходимость создания JS-free решения, то это возможно на базе Numl. Нужно просто все стили и вёрстку (да, там используются внутренние элементы элементы для ссылок, картинок и т.п.) предварительно пререндерить. Я делал такой эксперимент и всё работало, даже навигация. Но более сложные взаимодействия там конечно умрут, например формы.
Но можно пойти еще дальше и сделать транспиляцию Numl в HTML. Тогда будет работать вообще всё, что может работать без JS.
У меня нет ресурсов на подобные эксперименты. Но я всегда рад контрибьютерам, которые приходят с интересными идеями и помогают их реализовать.
Но можно пойти еще дальше и сделать транспиляцию Numl в HTML. Тогда будет работать вообще всё, что может работать без JS.
У меня нет ресурсов на подобные эксперименты. Но я всегда рад контрибьютерам, которые приходят с интересными идеями и помогают их реализовать.
Что совсем без скриптов не работают — это очевидно. А вот почему совсем не завелось со включенными — это непонятно. И непонятно вообще что происходит, т.к. просто пустой экран. Думал — может адблок что ломает, но его отключение ничего не изменило. Все-таки пререндер — более предпочтительно, хотя (скорее всего) гораздо менее экономно по трафику.
Если есть проблемы с тем, что из коробки с включенными скриптами Numl не работает в некоторых браузерах, то буду очень благодарен за issue на гитхабе. Уверен, я смогу всё починить, получив подробную информацию.
Upd2:
На домашней если нажать сразу на месяц в опере (с разрешенным всем) переключается на ч/б и зависает в этом режиме намертво.
На домашней если нажать сразу на месяц в опере (с разрешенным всем) переключается на ч/б и зависает в этом режиме намертво.
В Angular это называется Attribute directives. С помощью них сделаны многие популярные библиотеки, например Flex-Layout. Соответственно поддерживается и пререндеринг всего этого и динамическое обновление.
Я правильно понимаю, что, чтобы сделать хороший интерфейс, мне нужно поставить Angular, найти несколько десятков популярных библиотек под каждую мелкую задачку, разобраться как они работают и подключаются? А что если заказчик попросит переехать на React и придётся искать новый набор библиотек? Вам самому не кажется, что что-то тут не так?
Если уж искать альтернативу, то лучше что-то на Web Components.
С динамическим обновлением у Numl проблем нет.
Интересно, какие проблемы вы решаете пререндерингом?
Если уж искать альтернативу, то лучше что-то на Web Components.
С динамическим обновлением у Numl проблем нет.
Интересно, какие проблемы вы решаете пререндерингом?
А что если заказчик попросит переехать на React и придётся искать новый набор библиотек?
А что если заказчик попросит вас переехать с numl на react?
angular поддерживает web components.
Numl не альтернатива React'у, не нужно между ними переезжать. Numl решают свою задачу связанную с созданием качественной вёрстки. Это единый инструмент для решения большого спектра задач, с которыми композиционные фреймворки не сильно дружат – доступность, управление цветам, консистентный дизайн и т.п. С другой стороны, Numl плохо работает с композицией и состоянием, поэтому не стоит с помощью него решать такие задачи.
Однако, в некоторых простых задачах Numl может заменить JS-фреймворк, если вам нужно динамически менять любые стили или атрибуты на элементах (например, показывать/прятать элемент), а также корректировать надписи.
Однако, в некоторых простых задачах Numl может заменить JS-фреймворк, если вам нужно динамически менять любые стили или атрибуты на элементах (например, показывать/прятать элемент), а также корректировать надписи.
НЛО прилетело и опубликовало эту надпись здесь
Это не замена Angular. Это скорее UI-библиотека, которая работает параллельно вашему JS-фреймворку. Она решает задачи на уровне вёрстки, а композиционные задачи и работу с состоянием оставляет другим технологиям, которые начились это делать по-настоящему круто.
Numl можно использовать с чистым HTML или с любым популярным фреймворком — Angular, Vue, Svelte, React.
Numl можно использовать с чистым HTML или с любым популярным фреймворком — Angular, Vue, Svelte, React.
надеюсь, быстрее чем он
Разрабатываю на angular с 2 версии по 10, не сталкивался с проблемами производительности. Думаю в любом фреймворке/библиотеке проблемы производительности из-за прослоек между креслом и монитором.
1. CSS-синтаксис внутри аттрибутов — строка. В IDE это будет сплошным цветом, а я хочу видеть нормальную подсветку с автоподстановкой.
2. Почему отказались от синтаксиса
+ можно сделать синтаксис:
Я так понял, что речь идет не про альтернативный язык, а про просто библиотеку компонентов.
Мне нравится идея задавать стиль на самом компоненте, но по-сути это тот же самый
КМК, если делать такой ход конем:
Это будет и покрасивее и поудобней. Почему так не стали?
2. Почему отказались от синтаксиса
shadow:hover[:1]="0"?+ можно сделать синтаксис:
(shadow="0" size="2rem"):hover[:1]Я так понял, что речь идет не про альтернативный язык, а про просто библиотеку компонентов.
Мне нравится идея задавать стиль на самом компоненте, но по-сути это тот же самый
style="...". Ну погранулярней, ну можно задавать псевдоклассы.КМК, если делать такой ход конем:
<button>
<style>
:self {
box-shadow: 1px;
}
</style>
</button>
Это будет и покрасивее и поудобней. Почему так не стали?
Спасибо за толковый комментарий!
1. Поддержку IDE всегда можно добавить при желании и будет подсвечиваться. Хотя в данном случае я согласен, что реализовать адекватную подсветку будет сложно. В целом синтаксис достаточно понятный и без подсветки. Значения CSS свойств например почти никто не подсвечивает, а там синтаксис ну очень комплексный может быть. И вроде это не вызывает проблем.
2. Во-первых, такое название атрибута не поддерживается спецификацией Custom Elements, я даже не уверен, что ваши примеры это валидный HTML. Во-вторых, такой синтаксис менее очевидный и сложнее мапится на CSS.
Можно рассматривать Numl как библиотеку элементов, но по факту это язык описания семантики + язык описания стилей + фреймворк, который позволяет инжектировать поведения в элементы и даёт им возможность понимать свой контекст. Также тут скорее UI-библиотека, но более правильное название — HTML Framework.
По сути, это ближе к атомарный CSS-фреймворкам вроде Tailwind, только мощнее по возможностям благодаря кодогенерации.
Про кусочек кода:
Я не стал так делать, 1) потому что это обычный CSS со всеми особенностями описанными в статье. 2) это очень длинное и немасштабируемое описание стилей.
1. Поддержку IDE всегда можно добавить при желании и будет подсвечиваться. Хотя в данном случае я согласен, что реализовать адекватную подсветку будет сложно. В целом синтаксис достаточно понятный и без подсветки. Значения CSS свойств например почти никто не подсвечивает, а там синтаксис ну очень комплексный может быть. И вроде это не вызывает проблем.
2. Во-первых, такое название атрибута не поддерживается спецификацией Custom Elements, я даже не уверен, что ваши примеры это валидный HTML. Во-вторых, такой синтаксис менее очевидный и сложнее мапится на CSS.
Можно рассматривать Numl как библиотеку элементов, но по факту это язык описания семантики + язык описания стилей + фреймворк, который позволяет инжектировать поведения в элементы и даёт им возможность понимать свой контекст. Также тут скорее UI-библиотека, но более правильное название — HTML Framework.
По сути, это ближе к атомарный CSS-фреймворкам вроде Tailwind, только мощнее по возможностям благодаря кодогенерации.
Про кусочек кода:
Я не стал так делать, 1) потому что это обычный CSS со всеми особенностями описанными в статье. 2) это очень длинное и немасштабируемое описание стилей.
Было уже много фреймворков, которые пытались делать свой синтаксис внутри атрибутов и это всегда боль. Вы пишете что «Поддержку IDE всегда можно добавить», но по факту, очень мало библиотек имеют такую поддержку. Я знаю только Angular, разве что, но это топ-3 фреймворк. Если поддержка синтаксиса появится когда Numl войдет в первую тройку, ждать придется очень долго.
Дальше вы делаете очень много утверждений, которые видны только из вашего опыта. Я не знаю, насколько ваш опыт типичен, но де-факто, сейчас уже смотрят на то, как живые люди пишут код. Фреймворки Angular, React, Vue (отчасти) сделаны, смотря на то, как реальные люди пишут много кода в больших компаниях. Я не знаю кто вы и где работаете, но если это ваше мнение построено не на анализе поведения живых людей, то практически без шансов. Конкурировать с одним только ангуляром сегодня чистое самоубийство а их там три с кепкой.
Дальше вы делаете очень много утверждений, которые видны только из вашего опыта. Я не знаю, насколько ваш опыт типичен, но де-факто, сейчас уже смотрят на то, как живые люди пишут код. Фреймворки Angular, React, Vue (отчасти) сделаны, смотря на то, как реальные люди пишут много кода в больших компаниях. Я не знаю кто вы и где работаете, но если это ваше мнение построено не на анализе поведения живых людей, то практически без шансов. Конкурировать с одним только ангуляром сегодня чистое самоубийство а их там три с кепкой.
Numl не конкурент Angular, React и Vue. Он работает параллельно внутри вёрстки, а поверх вы можете использовать один из этих фреймворков (или другой, поддерживающий Web Components).
Подход Numl существенно отличается от других CSS-фреймворков и Дизайн-систем. Только время покажет, насколько людям будет удобно с ним работать в реальных проектах. Но по предварительным отзывам у людей очень приятный опыт его использования. Посмотрим, что будет дальше.
Подход Numl существенно отличается от других CSS-фреймворков и Дизайн-систем. Только время покажет, насколько людям будет удобно с ним работать в реальных проектах. Но по предварительным отзывам у людей очень приятный опыт его использования. Посмотрим, что будет дальше.
Значения CSS свойств например почти никто не подсвечивает, а там синтаксис ну очень комплексный может быть. И вроде это не вызывает проблем.
WebStorm подсвечивает и подсказывает CSS:
Спасибо за картинку. Оказалась очень кстати. Так совпало, что я её увидел в момент когда писал родмап, по своему решению последней проблемы человечества, и в нём она отлично смотрится.
Хотелось бы, конечно, иметь русскую версию документации для проекта, созданного русскоговорящими людьми. Я сам особых проблем с английским не имею, но, если делается упор на русскоязычное коммьюнити, это, имхо, must-have.
Есть идея в будущем сделать краудфандинг переводов, чтобы люди могли сами добавлять переводы в документацию (например, на основе magic-string). Но пока проект не развился, сложно оправдать такую работу.
Я очень много сил и времени вложил в этот проект, потому что верю в него. Если появится хотя бы пара человек, которые меня в этом поддержат, то появятся и новые фичи и документация на разные языки и много чего еще :)
Я очень много сил и времени вложил в этот проект, потому что верю в него. Если появится хотя бы пара человек, которые меня в этом поддержат, то появятся и новые фичи и документация на разные языки и много чего еще :)
Вы написали коммерческий проект на своем новом языке разметки, но только вот я попробовал зайти на него с телефона Android 7 браузер Firefox последней версии. Страница с ценами просто не открывается — чистый лист. На главной верстка едет, появляется горизонтальный скролл у страницы. В Edge верстка сайта едет, как будто просто нет стилей. Сайтом не возможно пользоваться.
Исходя из этого возникает вопрос: что это за язык разметки и стилизации, если у него такая низкая совместимость с браузерами?
Как разработчик вы наверно получается огромное количество дофамина от своей работы
Как бизнес вы теряете клиентов и деньги
Как пользователь вы не можете пользоваться продуктом
Спасибо за вопрос.
Я не скрываю и даже подробно упоминаю, что Numl поддерживается только современными вечно-зелёными браузерами, хотя при желании можно добавить поддержку и более старых браузеров вплоть до Edge15.
Конкретно для нашего проекта такой совместимости было достаточно, а поддержка более старых браузеров в любом случае сделало бы разработку значительно дороже, не оправдав кол-во привлёченных пользователей. Поэтому мы экономим свои деньги.
Всегда важно оценивать, подходит конкретный инструмент вам или не подходит. Нам данный инструмент подошел и даже полностью оправдал усилия вложенные в его разработку.
Устройства устаревают, даже без изменений охват устройств на которых работает Numl будет только расти. Его использование на различных в проектах будет становиться более оправданным.
Я не скрываю и даже подробно упоминаю, что Numl поддерживается только современными вечно-зелёными браузерами, хотя при желании можно добавить поддержку и более старых браузеров вплоть до Edge15.
Конкретно для нашего проекта такой совместимости было достаточно, а поддержка более старых браузеров в любом случае сделало бы разработку значительно дороже, не оправдав кол-во привлёченных пользователей. Поэтому мы экономим свои деньги.
Всегда важно оценивать, подходит конкретный инструмент вам или не подходит. Нам данный инструмент подошел и даже полностью оправдал усилия вложенные в его разработку.
Устройства устаревают, даже без изменений охват устройств на которых работает Numl будет только расти. Его использование на различных в проектах будет становиться более оправданным.
Я конечно не исследовал эту тему досконально, но умозрительно кажется, что большое количество селекторов и классов у элементов могут произвести к падению производительности в отрисовке… не исследовали ли вы эту догадку более глубоко?
Куча селекторов для одной только кнопки
Всё действительно так, если вы используете кучу селекторов, которые одновременно применяются, будет падение производительности. В случае, если селекторы пассивные (не работают) их отсеивание обойдётся браузеру относительно дёшево. Мы сделали достаточно большое приложение на Numl с очень большим кол-вом элементов и всё работает достаточно быстро.
Для каждого элемента Numl предварительно генерирует много селекторов, чтобы иметь возможность использовать конкретное CSS-свойство (например, `box-shadow) в нескольких стилях: `border/shadow/inset/mark`. Я надеюсь, что в будущем удастся еще сильнее оптимизировать этот подход.
Для каждого элемента Numl предварительно генерирует много селекторов, чтобы иметь возможность использовать конкретное CSS-свойство (например, `box-shadow) в нескольких стилях: `border/shadow/inset/mark`. Я надеюсь, что в будущем удастся еще сильнее оптимизировать этот подход.
Отличная статья, приятно и структурировано написана.
Касаемо темы, не совсем понял проблематику и как следствие для меня повисло в воздухе и решение.
Не секрет, что индустрия устала от новых технологий, есть предположение, что к любому новому стеку/синтаксису уже будет предвзятое отношение. Исходя из этого, хотелось бы увидеть какие-то сравнения с существующими решениями и доказательства, что Nulm более эффективен. Как он будет выглядеть и вести себя в реальном приложении?
Если же это не цель, то конечно, как творчество, самовыражение и возможная альтернатива, имеет место быть.
Думаю придираться к синтаксису дело не очень благодарное, это вкусовщина, но для меня не совместимость с HTML/CSS является минусом. Это подразумевает более высокий порог вхождения.
В любом случаи, желаю удачи и очень интересно будет понаблюдать за развитием проекта.
Касаемо темы, не совсем понял проблематику и как следствие для меня повисло в воздухе и решение.
Не секрет, что индустрия устала от новых технологий, есть предположение, что к любому новому стеку/синтаксису уже будет предвзятое отношение. Исходя из этого, хотелось бы увидеть какие-то сравнения с существующими решениями и доказательства, что Nulm более эффективен. Как он будет выглядеть и вести себя в реальном приложении?
Если же это не цель, то конечно, как творчество, самовыражение и возможная альтернатива, имеет место быть.
Думаю придираться к синтаксису дело не очень благодарное, это вкусовщина, но для меня не совместимость с HTML/CSS является минусом. Это подразумевает более высокий порог вхождения.
В любом случаи, желаю удачи и очень интересно будет понаблюдать за развитием проекта.
И вам спасибо за отзыв!
По факту, Numl совместим с чистым HTML и CSS, вы можете перемешивать их использование, хоть это и не рекомендуется. Плюс, там, где это возможно, Numl повторяет синтаксис и именование HTML/CSS/ARIA, чтобы разработчик переиспользовал свои знания (в обе стороны). Пилить радикально отличающийся язык было бы неэффективно по многим причинам. Цель Numl сделать возможности CSS более доступными для разработчиков, а не обрезать его, как ИМХО, делают большинство Дизайн-систем.
В конце статьи я привёл ряд ссылок на реальные приложения с открытым кодом. Но, чтобы понять, насколько система удобна, нужен разумеется личный опыт.
Сравнивать Numl с другими фреймворками довольно сложно. В нём много возможностей, которых нет в других фреймворках. Некоторые возможности, такие как привязка стилей к состояниям, работают эффективнее, но это может быть не так очевидно, как хотелось бы. Тем более, чтобы качественно сравнить Numl с тем же Tailwind, нужен человек, который много писал на Tailwind, чтобы мы с ним вместе сели и расписали сильные и слабые стороны и сделали понятную таблицу сравнения.
По факту, Numl совместим с чистым HTML и CSS, вы можете перемешивать их использование, хоть это и не рекомендуется. Плюс, там, где это возможно, Numl повторяет синтаксис и именование HTML/CSS/ARIA, чтобы разработчик переиспользовал свои знания (в обе стороны). Пилить радикально отличающийся язык было бы неэффективно по многим причинам. Цель Numl сделать возможности CSS более доступными для разработчиков, а не обрезать его, как ИМХО, делают большинство Дизайн-систем.
В конце статьи я привёл ряд ссылок на реальные приложения с открытым кодом. Но, чтобы понять, насколько система удобна, нужен разумеется личный опыт.
Сравнивать Numl с другими фреймворками довольно сложно. В нём много возможностей, которых нет в других фреймворках. Некоторые возможности, такие как привязка стилей к состояниям, работают эффективнее, но это может быть не так очевидно, как хотелось бы. Тем более, чтобы качественно сравнить Numl с тем же Tailwind, нужен человек, который много писал на Tailwind, чтобы мы с ним вместе сели и расписали сильные и слабые стороны и сделали понятную таблицу сравнения.
Очень нужный проект и правильные идеи.
Только он должен быть как TS для JS, его не должно быть на клиенте в таком виде.
Только он должен быть как TS для JS, его не должно быть на клиенте в таком виде.
Спасибо за отзыв.
На самом деле, я рассматривал подобный вариант, но его потенциальная сложность меня отпугнула. Сила Numl в том, что он в runtime анализирует атрибуты и их комбинации, выдая корректные стили, независимо от того, в какой момент и кем эти атрибуты были назначены. Это очень важная фича, которой пришлось бы пожертвовать, если бы мы обрабатывали это на сервере.
Возможно в будущем, Numl сможет переползти на сервер и даже мобильные платформы. Посмотрим :)
На самом деле, я рассматривал подобный вариант, но его потенциальная сложность меня отпугнула. Сила Numl в том, что он в runtime анализирует атрибуты и их комбинации, выдая корректные стили, независимо от того, в какой момент и кем эти атрибуты были назначены. Это очень важная фича, которой пришлось бы пожертвовать, если бы мы обрабатывали это на сервере.
Возможно в будущем, Numl сможет переползти на сервер и даже мобильные платформы. Посмотрим :)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Numl – Альтернативный язык разметки и стилизации для веб