Houdini похож на Babel, но для CSS
или что я узнал о Houdini после недели чтения текущей спецификации.
Что такое Вавилон
Если вы занимались веб-разработкой в течение последних нескольких лет, вы, вероятно, использовали (или, по крайней мере, слышали) о Babel. Это транспилятор JavaScript, который дает вам возможность писать современную версию JavaScript, которая работает в браузерах, но еще не поддерживает ее. Babel - одна из причин большой эволюции javascript за последние несколько лет. Транспилер дает вам возможность создавать доказательства концепции определенной языковой функции / спецификации, тестировать настоящими разработчиками в реальных проектах, получать быструю обратную связь и повторять ее. Есть много хороших примеров с такими функциями, как async / await и декораторами.
Что такое Гудини
Houdini - это новый набор API-интерфейсов браузера, которые предоставляют доступ для просмотра внутренних компонентов, в частности движка CSS. Первая версия спецификаций (!!! это еще черновик !!!) описывает Layout API, Painting API, Parser API, типизированную объектную модель, Font Metrics и Properties and Values API.
Layout API: добавляет возможность создавать настраиваемое свойство display (display: layout ('myCustomLayout')), например, вы можете создать собственный гибкий дисплей. или сетка. Насколько я понимаю, API предоставит информацию о геометрических данных, положении, размере дочерних, родительских и текущих элементов, доступном пространстве в контейнере и т. Д.
API рисования: текущая спецификация позволит вам рисовать собственные границы, фоновое изображение, в будущей версии может быть добавлена поддержка клипа, альфа-канала и фильтров. По сути, API дает вам доступ к API холста, в котором вы можете рисовать каждый кадр.
Parser API: в основном идея состоит в том, чтобы передать строку синтаксическому анализатору и получить объект (я предполагаю, что это своего рода абстрактное синтаксическое дерево, похожее на синтаксический анализатор babel?).
Типизированная объектная модель: добавляет типы в CSS, этот API решит проблему с синтаксическим анализом строковых значений из CSS.
let pos = new CSSPositionValue(
new CSSUnitValue(5, "px"),
new CSSUnitValue(10, "px"));
Параметры шрифта: как следует из названия, это API, который предоставляет методы для измерения текста.
API свойств и значений: то же самое, что и настраиваемые свойства CSS (переменные CSS), единственное различие, которое я вижу, - это возможность добавлять типы свойства.
CSS.registerProperty({
name: "--my-color",
syntax: "<color>",
initialValue: "black"
});
Стоит упомянуть, что Layout and Painting API будет работать в Worklet, который является своего рода Web Worker, поэтому они не зависят от основного потока.
Чем Houdini по сравнению с Babel
Я считаю, что Houdini окажет такое же влияние на CSS, как Babel на JS. Разработчики начнут создавать собственные свойства CSS и новый тип макета. Houdini даст возможность гораздо больше экспериментов и простой способ создания прототипов.
Давайте посмотрим на пример с Masonry Layout, представьте, что кто-то решает создать индивидуальный макет каменной кладки, создать красивый и простой в использовании API, и внезапно разработчики по всему миру начинают использовать его (даже больше, чем сегодняшний JS-плагин). Это подтолкнет людей в W3C к созданию спецификации, и поставщики браузеров смогут поставлять ее изначально.
Другой пример - CSS Grid. Вы знаете, сколько времени прошло от первого черновика спецификации до первого выпуска во всех браузерах? Около 5 лет, извините, что пишу, но это слишком долго. Я твердо верю, что Houdini решит проблему с помощью итераций и создания прототипов, может подтолкнуть Интернет в том направлении, которое хотят разработчики.
В настоящее время некоторые спецификации Houdini реализованы в Chrome Canary с пометкой «Экспериментальные функции веб-платформы».
