Концепция «Родные Элементы»(Native Elements)

[nazarpc]

Прочитал и ничего не понял из того, что вы предлагаете. Polymer использую года полтора как + являюсь активным контрибутором, и всё равно не понял что здесь происходит.
К стати, если вам нужны классы — веб-компоненты это просто HTML элементы, и, о чудо, к ним тоже можно добавлять классы. Да и вообще суть веб-компонентов далеко не в одном внешнем виде если на то пошло.

[Voronar]

Вы для меня сделали открытие.
Через классы можно задать только CSS-свойства, но нельзя задать значение для кастомных сеттеров собственного элемента. Как в CSS через классы задать значение для сеттера xstyle.column.count элемента <ui-vboxhistogramm>? Никак. Вот о чём разговор.

[nazarpc]

А что есть xstyle.column.count на самом деле? Классы для CSS свойств, это верно, а с помощью CSS variables и CSS mixins если весьма широкое, хотя и не идеальное поле для настройки внешнего вида элемента.
А ui-vboxhistogramm из чего состоит, это canvas какой-то, или набор обычных элементов внутри, или, может, там SVG?

[Voronar]

Хочу прояснить один момент. Пример гистограммы приведён в грубой форме(сеттеры для визуализации могут быть другие), но от этого суть концепции не меняется.
Не важно из чего состоит ui-vboxhistogramm, так как реализация не влияет на интерфейс.

xstyle.column.count это пользовательский сеттер(определенный разработчиком), который задаёт количество столбцов гистограммы.
Я привожу пример, когда я хочу объединить несколько гистограмм в одну группу, схожую по визуальным свойствам, в данном случае по количеству и ширине столбцов гистограммы. И встроенные средства тут не помогут, нужно всё делать вручную.

CSS variables и CSS mixins это всё вокруг да около встроенных свойств, типа element.style.color, element.style.display и так далее. У нас же пользовательские сеттеры с реализацией на JS c использованием встроенных CSS-свойств или методов взаимодействия с canvas или SVG, как в случае с нашей гистограммой.

Суть концепции в том, чтобы предоставить набор классов(JS) и функций для реализации поведения, показанного в примерах выше:

• сеттеры для задания стиля собственного элемента, близкие по механике к нативной стилизации через element.style.property
• группировка элементов, схожих по стилю для исключения избыточности при описании одних и тех же пользовательских свойств(например число и ширина столбцов гистограммы) для нескольких элементов

[wheercool]

Не нужно городить фреймворк для такой простой задачи.
Решение лежит на поверхности. В вашем примере нужно просто создать новый компонентв скажем ui-vboxhistogramm5Columns (не очень удачное название) который внутри использует ui-vboxhistogramm с нужными аттрибутами и использовать его :)
С технической стороны это примерно тоже что и выносить повторяющийся код в новый метод.

[Voronar]

нужно просто создать новый компонентв скажем ui-vboxhistogramm5Columns...

Можете показать пример на псевдокоде? А то на словах мне сложно понять.

[wheercool]

что-то близкое к реакту

var Histogram5 = component({
      render() {
         return <Histogram columns="5" />;
      }
});

[Voronar]

Компонент — это уже готовый стилизованный элемент или это шаблон для создания? В Реакте не силен, но по-моему вы показали создание класса в Реакт.
Какую задачу решает этот кусок кода? Покажите, пожалуйста, пример создания 5 элементов, сгруппированных по свойствам columns count=5 и column width=10, чтобы не было повторения в указании свойств для каждого элемента.

[wheercool]

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
По факту это просто повторное использование кода.
В ООП для этого часто прибегают к наследованию
В функциональном программировании — частичное применение

[Voronar]

Как в таком подходе динамически, во время выполнения менять значения атрибутов(columnWidth например). Как вообще получить доступ к элементу из вне?
И допустим мне захотелось убрать из первой гистограммы сгруппированные атрибуты(по аналогии с element.classList.remove(«StyledHistogram5»)) и вернуть их к изначальным(по умолчанию) значениям?
Да, и почему Histogram5 и StyledHistogram5 описываются отдельно? Слишком много лишнего кода получается для группировки свойств.

[wheercool]

В двух предложениях тут не ответить. Лучше не поленитесь, изучите react.
Моя задача была показать как эта проблема решается, а не научить Реакту )
Вкратце метод render может содержать логику отображения и компоненты в идеале должны не иметь состояния.
Получать доступ к другим элементам из вне очень плохое архитектурное решение. Каждый компонент должен отвечать только за свои дочерние компоненты.
Histogram5 и StyledHistogram5 это два полноценных отдельных компонента. Касательно многословности, в последних версиях Реакта такого рода компоненты можно создавать используя лямбды

[Voronar]

Спасибо. Возьму на заметку.

А так зачем мне два отельных элемента, если я только один описываю?

P.S. Ушёл спать. Отвечать буду завтра.

[Voronar]

В двух предложениях тут не ответить.

Просто напишите пару строк кода.

Да, и зачем мне отдельные компоненты(элементы) для изменения вида другого элемента, если всю его визуализацию можно инкапсулировать в нём, а потом с помощью группировки свойств(просто отдельный декларативный объект или несколько объектов, которые могут применяться к любым подобным элементам) получать требуемый внешний вид.

[Voronar]

Сейчас я начинаю понимать, что Реакт мне тут ничем помочь не может.
Насколько я понимаю, Реакт — это просто композиция встроенных элементов и Реакт-компонентов, ещё конечно есть конвертация Реакт-компонентов в custom elements.

Я же говорю именно о новых встроенных элементах(custom elements), со своей логикой и поведением. Таких элементах, которые я могу включать через HTML-файл, стилизация и поведение которых делается близким по подходу как для встроенных элементов.

[nazarpc]

Хм… в Polymer оно будет выглядеть так:

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 будет слишком накладно реализовать).

Это всё к тому, что у вас получилось решение, которое решает проблему наполовину, когда упомянутые вами же альтернативы предлагают законченное и проверенное решение.

[Voronar]

Сейчас уже не могу в полном осмыслении проанализировать код потому что собираюсь спать.
Первое, что бросилось в глаза — это создание двух элементов «x-element» и «x-element-column-5», как показали на примере Реакта(«Histogram» и «Histogram5») Зачем мне два элемента для одной сущности(элемент гистограммы ведь один)?

И какую вторую половину не решает моя концепция?

P.S. Ушёл спать. Отвечать буду завтра.

[Ohar]

[Voronar]

Намёк понял.
Однако моя цель не фреймворк ради фреймворка. Просто хочется сделать веб-компоненты более удобными, для себя по крайней мере.

[rboots]

Я пользуюсь десятками библиотек, каждая из которых создана одним человеком. Да что библиотек, тот же Nginx сделан одиночкой. Вот за что я люблю наших сограждан, так за то, как отлично они могут «вдохновить» человека на созидательную деятельность. Сделал человек продукт — честь ему и хвала, хороший-плохой — тут уже можно обсуждать.

[Voronar]

Да, я не понимал сути создания фреймворков на JavaScript и вы мне её объяснили. Спасибо.
Но я и не фреймворк собираюсь делать, а небольшую библиотеку(как видно из первого обзаца статьи) сугубо для личных целей. Но если кого-то заинтересует концепция этой библиотеки, то я рад был бы выслушать их предложения по совершенствованию этой концепции.

[rboots]

Отличная идея, с CSS давно пора что-то решать. Я бы всё же сделал это патчем к уже имеющимся библиотекам для создания компонентов, во первых потому, что так всем проще, а во вторых потому, что у вас тоже нет какого-то функционала из популярных библиотек, а так вы объедините плюсы.

[Voronar]

По поводу CSS. На самом первом этапе я вообще искал возможность создать новое CSS-свойство, чтобы интегрироваться в систему классов и не придумывать группы. Но такой возможности не нашёл и тогда решил делать дополнение в виде element.xstyle.
С другой стороны появляется возможность делать вложенные подкатегории стилей типа element.xstyle.styleCategory:

element.xstyle.declare(
{
  prop1: value,
  styleCategory:
  {
    prop1: value
  }
});

[Voronar]

Тут вы попали в точку!
Сначала хотелось сделать что-то своё, но после анализа уже имеющихся библиотек захотелось предложить именно дополнение к ним. Но дополнение независимое от этих библиотек, так как многие пишут на чистых Веб Компонентах. То есть просто подключил модуль(import * as lib from «lib»;) и реализуешь непосредственно свои собственные элементы.