Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 25
Прочитал и ничего не понял из того, что вы предлагаете. Polymer использую года полтора как + являюсь активным контрибутором, и всё равно не понял что здесь происходит.
К стати, если вам нужны классы — веб-компоненты это просто HTML элементы, и, о чудо, к ним тоже можно добавлять классы. Да и вообще суть веб-компонентов далеко не в одном внешнем виде если на то пошло.
К стати, если вам нужны классы — веб-компоненты это просто HTML элементы, и, о чудо, к ним тоже можно добавлять классы. Да и вообще суть веб-компонентов далеко не в одном внешнем виде если на то пошло.
Вы для меня сделали открытие.
Через классы можно задать только CSS-свойства, но нельзя задать значение для кастомных сеттеров собственного элемента. Как в CSS через классы задать значение для сеттера xstyle.column.count элемента <ui-vboxhistogramm>? Никак. Вот о чём разговор.
Через классы можно задать только CSS-свойства, но нельзя задать значение для кастомных сеттеров собственного элемента. Как в CSS через классы задать значение для сеттера xstyle.column.count элемента <ui-vboxhistogramm>? Никак. Вот о чём разговор.
А что есть xstyle.column.count на самом деле? Классы для CSS свойств, это верно, а с помощью CSS variables и CSS mixins если весьма широкое, хотя и не идеальное поле для настройки внешнего вида элемента.
А ui-vboxhistogramm из чего состоит, это canvas какой-то, или набор обычных элементов внутри, или, может, там SVG?
А ui-vboxhistogramm из чего состоит, это canvas какой-то, или набор обычных элементов внутри, или, может, там SVG?
Хочу прояснить один момент. Пример гистограммы приведён в грубой форме(сеттеры для визуализации могут быть другие), но от этого суть концепции не меняется.
Не важно из чего состоит ui-vboxhistogramm, так как реализация не влияет на интерфейс.
xstyle.column.count это пользовательский сеттер(определенный разработчиком), который задаёт количество столбцов гистограммы.
Я привожу пример, когда я хочу объединить несколько гистограмм в одну группу, схожую по визуальным свойствам, в данном случае по количеству и ширине столбцов гистограммы. И встроенные средства тут не помогут, нужно всё делать вручную.
CSS variables и CSS mixins это всё вокруг да около встроенных свойств, типа element.style.color, element.style.display и так далее. У нас же пользовательские сеттеры с реализацией на JS c использованием встроенных CSS-свойств или методов взаимодействия с canvas или SVG, как в случае с нашей гистограммой.
Суть концепции в том, чтобы предоставить набор классов(JS) и функций для реализации поведения, показанного в примерах выше:
Не важно из чего состоит ui-vboxhistogramm, так как реализация не влияет на интерфейс.
xstyle.column.count это пользовательский сеттер(определенный разработчиком), который задаёт количество столбцов гистограммы.
Я привожу пример, когда я хочу объединить несколько гистограмм в одну группу, схожую по визуальным свойствам, в данном случае по количеству и ширине столбцов гистограммы. И встроенные средства тут не помогут, нужно всё делать вручную.
CSS variables и CSS mixins это всё вокруг да около встроенных свойств, типа element.style.color, element.style.display и так далее. У нас же пользовательские сеттеры с реализацией на JS c использованием встроенных CSS-свойств или методов взаимодействия с canvas или SVG, как в случае с нашей гистограммой.
Суть концепции в том, чтобы предоставить набор классов(JS) и функций для реализации поведения, показанного в примерах выше:
- сеттеры для задания стиля собственного элемента, близкие по механике к нативной стилизации через element.style.property
- группировка элементов, схожих по стилю для исключения избыточности при описании одних и тех же пользовательских свойств(например число и ширина столбцов гистограммы) для нескольких элементов
Не нужно городить фреймворк для такой простой задачи.
Решение лежит на поверхности. В вашем примере нужно просто создать новый компонентв скажем ui-vboxhistogramm5Columns (не очень удачное название) который внутри использует ui-vboxhistogramm с нужными аттрибутами и использовать его :)
С технической стороны это примерно тоже что и выносить повторяющийся код в новый метод.
Решение лежит на поверхности. В вашем примере нужно просто создать новый компонентв скажем ui-vboxhistogramm5Columns (не очень удачное название) который внутри использует ui-vboxhistogramm с нужными аттрибутами и использовать его :)
С технической стороны это примерно тоже что и выносить повторяющийся код в новый метод.
нужно просто создать новый компонентв скажем ui-vboxhistogramm5Columns...
Можете показать пример на псевдокоде? А то на словах мне сложно понять.
что-то близкое к реакту
var Histogram5 = component({
render() {
return <Histogram columns="5" />;
}
});
Компонент — это уже готовый стилизованный элемент или это шаблон для создания? В Реакте не силен, но по-моему вы показали создание класса в Реакт.
Какую задачу решает этот кусок кода? Покажите, пожалуйста, пример создания 5 элементов, сгруппированных по свойствам columns count=5 и column width=10, чтобы не было повторения в указании свойств для каждого элемента.
Какую задачу решает этот кусок кода? Покажите, пожалуйста, пример создания 5 элементов, сгруппированных по свойствам columns count=5 и column width=10, чтобы не было повторения в указании свойств для каждого элемента.
var StyledHistogram5 = component({
render() {
return <Histogram5 columnWidth="100px" />;
}
});
//App - корневой компонент. (Можно воспринимать как body в html)
var App = component({
render() {
return (<StyledHistogram5/><StyledHistogram5/><StyledHistogram5/><StyledHistogram5/><StyledHistogram5/>)
}
});
Можете это воспринимать так:
component — создает «шаблон» внешний вид которого определяется функцией render.
для создания «элемента» мы просто объявляем компонент в виде html-элемента вот так:
<myComponent>
Все аттрибуты могут быть доступны внутри render через this.props и предполагается что они используются в компоненте Histogram
По факту это просто повторное использование кода.
В ООП для этого часто прибегают к наследованию
В функциональном программировании — частичное применение
Как в таком подходе динамически, во время выполнения менять значения атрибутов(columnWidth например). Как вообще получить доступ к элементу из вне?
И допустим мне захотелось убрать из первой гистограммы сгруппированные атрибуты(по аналогии с element.classList.remove(«StyledHistogram5»)) и вернуть их к изначальным(по умолчанию) значениям?
Да, и почему Histogram5 и StyledHistogram5 описываются отдельно? Слишком много лишнего кода получается для группировки свойств.
И допустим мне захотелось убрать из первой гистограммы сгруппированные атрибуты(по аналогии с element.classList.remove(«StyledHistogram5»)) и вернуть их к изначальным(по умолчанию) значениям?
Да, и почему Histogram5 и StyledHistogram5 описываются отдельно? Слишком много лишнего кода получается для группировки свойств.
В двух предложениях тут не ответить. Лучше не поленитесь, изучите react.
Моя задача была показать как эта проблема решается, а не научить Реакту )
Вкратце метод render может содержать логику отображения и компоненты в идеале должны не иметь состояния.
Получать доступ к другим элементам из вне очень плохое архитектурное решение. Каждый компонент должен отвечать только за свои дочерние компоненты.
Histogram5 и StyledHistogram5 это два полноценных отдельных компонента. Касательно многословности, в последних версиях Реакта такого рода компоненты можно создавать используя лямбды
Моя задача была показать как эта проблема решается, а не научить Реакту )
Вкратце метод render может содержать логику отображения и компоненты в идеале должны не иметь состояния.
Получать доступ к другим элементам из вне очень плохое архитектурное решение. Каждый компонент должен отвечать только за свои дочерние компоненты.
Histogram5 и StyledHistogram5 это два полноценных отдельных компонента. Касательно многословности, в последних версиях Реакта такого рода компоненты можно создавать используя лямбды
Спасибо. Возьму на заметку.
А так зачем мне два отельных элемента, если я только один описываю?
P.S. Ушёл спать. Отвечать буду завтра.
А так зачем мне два отельных элемента, если я только один описываю?
P.S. Ушёл спать. Отвечать буду завтра.
В двух предложениях тут не ответить.
Просто напишите пару строк кода.
Да, и зачем мне отдельные компоненты(элементы) для изменения вида другого элемента, если всю его визуализацию можно инкапсулировать в нём, а потом с помощью группировки свойств(просто отдельный декларативный объект или несколько объектов, которые могут применяться к любым подобным элементам) получать требуемый внешний вид.
Сейчас я начинаю понимать, что Реакт мне тут ничем помочь не может.
Насколько я понимаю, Реакт — это просто композиция встроенных элементов и Реакт-компонентов, ещё конечно есть конвертация Реакт-компонентов в custom elements.
Я же говорю именно о новых встроенных элементах(custom elements), со своей логикой и поведением. Таких элементах, которые я могу включать через HTML-файл, стилизация и поведение которых делается близким по подходу как для встроенных элементов.
Насколько я понимаю, Реакт — это просто композиция встроенных элементов и Реакт-компонентов, ещё конечно есть конвертация Реакт-компонентов в custom elements.
Я же говорю именно о новых встроенных элементах(custom elements), со своей логикой и поведением. Таких элементах, которые я могу включать через HTML-файл, стилизация и поведение которых делается близким по подходу как для встроенных элементов.
Хм… в Polymer оно будет выглядеть так:
Если вам нужно группировать в том смысле что вы описали в статье — то здесь нужно просто наследовать элементы, жаль, что в Polymer 1.x этого ещё нет, хотя в принципе достигается выносом всего JS в то, что там называется behaviors:
Ну и никто не запрещает вам создать такой behavior, который будет подгружать параметры по умолчанию извне на основании значения атрибута group.
Могу быть не объективен поскольку давно работаю с Polymer, но по-моему это гораздо проще чем то, что предлагаете вы. Разве что менять свойства нужно через метод set() из соображений производительности и универсальности (к примеру, когда у вас некоторое свойство не было объявлено изначально, то есть не будет и сеттера, что без ES2015 Proxy будет слишком накладно реализовать).
Это всё к тому, что у вас получилось решение, которое решает проблему наполовину, когда упомянутые вами же альтернативы предлагают законченное и проверенное решение.
Polymer({
is: 'x-element',
properties: {
column: {
count: 1
}
}
});
var element = document.createElement('x-element');
element.set('column.count', 5);
Если вам нужно группировать в том смысле что вы описали в статье — то здесь нужно просто наследовать элементы, жаль, что в Polymer 1.x этого ещё нет, хотя в принципе достигается выносом всего JS в то, что там называется behaviors:
var behavior = {
properties: {
column: {
count: 1
}
}
};
Polymer({
is: 'x-element',
behaviors: [behavior]
});
Polymer({
is: 'x-element-column-5',
behaviors: [behavior],
created: function () {
this.set('column.count', 5);
}
});
Ну и никто не запрещает вам создать такой behavior, который будет подгружать параметры по умолчанию извне на основании значения атрибута group.
Могу быть не объективен поскольку давно работаю с Polymer, но по-моему это гораздо проще чем то, что предлагаете вы. Разве что менять свойства нужно через метод set() из соображений производительности и универсальности (к примеру, когда у вас некоторое свойство не было объявлено изначально, то есть не будет и сеттера, что без ES2015 Proxy будет слишком накладно реализовать).
Это всё к тому, что у вас получилось решение, которое решает проблему наполовину, когда упомянутые вами же альтернативы предлагают законченное и проверенное решение.
Сейчас уже не могу в полном осмыслении проанализировать код потому что собираюсь спать.
Первое, что бросилось в глаза — это создание двух элементов «x-element» и «x-element-column-5», как показали на примере Реакта(«Histogram» и «Histogram5») Зачем мне два элемента для одной сущности(элемент гистограммы ведь один)?
И какую вторую половину не решает моя концепция?
P.S. Ушёл спать. Отвечать буду завтра.
Первое, что бросилось в глаза — это создание двух элементов «x-element» и «x-element-column-5», как показали на примере Реакта(«Histogram» и «Histogram5») Зачем мне два элемента для одной сущности(элемент гистограммы ведь один)?
И какую вторую половину не решает моя концепция?
P.S. Ушёл спать. Отвечать буду завтра.
Намёк понял.
Однако моя цель не фреймворк ради фреймворка. Просто хочется сделать веб-компоненты более удобными, для себя по крайней мере.
Однако моя цель не фреймворк ради фреймворка. Просто хочется сделать веб-компоненты более удобными, для себя по крайней мере.
Я пользуюсь десятками библиотек, каждая из которых создана одним человеком. Да что библиотек, тот же Nginx сделан одиночкой. Вот за что я люблю наших сограждан, так за то, как отлично они могут «вдохновить» человека на созидательную деятельность. Сделал человек продукт — честь ему и хвала, хороший-плохой — тут уже можно обсуждать.
Да, я не понимал сути создания фреймворков на JavaScript и вы мне её объяснили. Спасибо.
Но я и не фреймворк собираюсь делать, а небольшую библиотеку(как видно из первого обзаца статьи) сугубо для личных целей. Но если кого-то заинтересует концепция этой библиотеки, то я рад был бы выслушать их предложения по совершенствованию этой концепции.
Но я и не фреймворк собираюсь делать, а небольшую библиотеку(как видно из первого обзаца статьи) сугубо для личных целей. Но если кого-то заинтересует концепция этой библиотеки, то я рад был бы выслушать их предложения по совершенствованию этой концепции.
Отличная идея, с CSS давно пора что-то решать. Я бы всё же сделал это патчем к уже имеющимся библиотекам для создания компонентов, во первых потому, что так всем проще, а во вторых потому, что у вас тоже нет какого-то функционала из популярных библиотек, а так вы объедините плюсы.
По поводу CSS. На самом первом этапе я вообще искал возможность создать новое CSS-свойство, чтобы интегрироваться в систему классов и не придумывать группы. Но такой возможности не нашёл и тогда решил делать дополнение в виде element.xstyle.
С другой стороны появляется возможность делать вложенные подкатегории стилей типа element.xstyle.styleCategory:
С другой стороны появляется возможность делать вложенные подкатегории стилей типа element.xstyle.styleCategory:
element.xstyle.declare(
{
prop1: value,
styleCategory:
{
prop1: value
}
});
Тут вы попали в точку!
Сначала хотелось сделать что-то своё, но после анализа уже имеющихся библиотек захотелось предложить именно дополнение к ним. Но дополнение независимое от этих библиотек, так как многие пишут на чистых Веб Компонентах. То есть просто подключил модуль(import * as lib from «lib»;) и реализуешь непосредственно свои собственные элементы.
Сначала хотелось сделать что-то своё, но после анализа уже имеющихся библиотек захотелось предложить именно дополнение к ним. Но дополнение независимое от этих библиотек, так как многие пишут на чистых Веб Компонентах. То есть просто подключил модуль(import * as lib from «lib»;) и реализуешь непосредственно свои собственные элементы.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Концепция «Родные Элементы»(Native Elements)