Как вы можете использовать отзывчивые веб-компоненты сегодня

Можно в виде кода попробовать разобраться. Как я понимаю у вас в упрощённом виде что-то вроде того: https://gist.github.com/Riim/6fe27c2ee69b13c9d1b41c48ff5ceabb
Мне не нравится, что при записи в online произойдёт две лишние записи в innerHTML (https://gist.github.com/Riim/a3fab035befe77a6c90ab4cccfe17818#file-app-js-L44-L45).

Как вы можете использовать отзывчивые веб-компоненты сегодня

Сеттер модели знает, как компонент узнаёт?
Да.

Как вы можете использовать отзывчивые веб-компоненты сегодня

Конструктор компонента

тогда всё норм.

через сеттер свойства модели

так модель может узнать изменилась ли она и нужно ли генерить событие, но как компонент узнает, что изменилось в модели? Тут нужны либо события типа 'change:someprop', либо какая-то инфа в объекте события. Дальше либо много подписок и обработчиков, либо огромное ветвление в единственном обработчике. Дальше опять биндинги.

Как вы можете использовать отзывчивые веб-компоненты сегодня

Какая нагрузка была? Сколько рендеров, скажем, в минуту?

Как вы можете использовать отзывчивые веб-компоненты сегодня

myModel.bindedDomInstances = [myComponent, myComponent2, myComponent3];

кто наполняет bindedDomInstances?

Ничего, как вы видите, не обновляется без разбора

как компонент узнаёт какие свойства модели, выводимые им, нужно обновить в dom-е?

Как вы можете использовать отзывчивые веб-компоненты сегодня

реальном времени будет очень медленным

как то замеряли это?

Как вы можете использовать отзывчивые веб-компоненты сегодня

По вашей фразе:

вызывает его обновление через сеттеры или через специальный метод update()

создаётся впечатление, что речь не о подписке на модель, а модель сама знает о сеттерах и метод update()

Ладно, здесь вроде разобрались, ещё вопрос про это:

Если компонентов несколько — обновляет все. Без лишних событий и проверок на правильного подписчика.

если обновляется всё без разбора, то что с сохранением позиций выделения/скролла (про скролл не уверен, в современных браузерах не замечал, но во всяких IE6 и флешах сталкивался)? В реакте это зашито в сам фреймворк, в вебкомпонентах ничего про это нет. Как-то решаете или не сталкивались ещё? Просто в реакте само устройство фреймворка таково, что приходится обновлять много лишнего, но зачем намеренно так делать с вебкомпонентами мне не понятно. Какой профит?

UPD: хотя понял, вместо одного model.on('change', ...) прийдётся делать множество подписок на изменения отдельных свойств (model.on('change:someprop', ...)), тут то первый раз и захочется биндингов, потому вы и не понимаете зачем они.

Как вы можете использовать отзывчивые веб-компоненты сегодня

рассылает данные экземплярам, но ещё и хранит их

имеется ввиду, что хранит данные (хотя и сами экземпляры тоже).

Как вы можете использовать отзывчивые веб-компоненты сегодня

Ok, но я бы не стал называть это моделью, можно было бы назвать въюмоделью, если бы не "Модель знает о всех экземплярах", так это скорее какой-то ComponentManager, но, опять же, создаётся впечатление, что у вас эта штука не только рассылает данные экземплярам, но ещё и хранит их. В общем, чудо-юдо какое-то)). Может тудулист для примера сбацаете?

Как вы можете использовать отзывчивые веб-компоненты сегодня

Я верно понял, что, для того что бы просто передать данные компоненту, вы предлагаете создавать событие на родительском компоненте и подписавшись на него в дочернем вытаскивать данные из объекта события?

Как вы можете использовать отзывчивые веб-компоненты сегодня

Модель знает о всех экземплярах связанного с ней компонента и вызывает его обновление через сеттеры

то есть у вас модель знает о компоненте и сама обновляет его? Это как-то… кхм, необычно))

Как вы можете использовать отзывчивые веб-компоненты сегодня

Через параметры только строки/числа, ссылосный тип, как в реакте, уже не передать, прийдётся вызывать метод, что не так удобно.

Как вы можете использовать отзывчивые веб-компоненты сегодня

Это всё очевидно, данные то как биндить? Вариант с мешаниной калбеков не предлагать.

Как вы можете использовать отзывчивые веб-компоненты сегодня

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

пока логика приложения простая, можно и самому написать, но с усложнением логики получается нехилая такая мешанина из обработчиков. Мне нравятся вебкомпоненты, но всё же они именно для контролов типа слайдера/аккордеона, а для склеивания всего этога уже в готовое приложение нужен какой-то фреймворк и желательно с нормальными биндингами.

Этажи: 3D-навигация на WebGL в 2gis.ru

Афигенно получилось!!!

Есть небольшие замечания:

• Появляющийся тултип может вылазить за пределы экрана, надо поднастроить.
• Задержка перед появлением тултипа нужна, но уже после появления малейшее движение мыши скрывает его, это не удобно, надо добавить какое-то минимальное расстояние, которое должна пройти мышь для скрытия. Ну или ещё что-то придумать.
• Исчез плавный переход между подложками кнопок зума, я сначала подумал, что это специально, но на основной карте он ещё есть.
• Опять разное поведение кнопок: наводим на кнопку зума, зажимаем кнопку и не отпуская уводим мышь в сторону, кнопка по прежнему выглядит зажатой и отжимается только при отпускании кнопки мыши. Кнопки переключения этажей отжимаются уже при mouseout. Первый вариант мне кажется более правильным, но как минимум это поведение должно быть одинаковым во всём приложении.
• При выполнении пункта выше можно получить выделенный текст в тултипе.
• Два маркера и тултипа друг над другом: https://yadi.sk/i/2_guZvsKrCm5o .

ES5 руководство по JavaScript

Разве здесь [].slice.call(arguments) есть утечка аргументов? slice же тоже ничего не меняет в arguments.

Почему я НЕ являюсь фанатом TypeScript

Согласен на счёт FlowType, действительно как-то ненавязчиво он типы добавляет, указал тип — проверяет, не указал — пытается как-то его вывести и если уж возникает, то очень редко и действительно по делу. С typescript приходиться пол дня разбираться как его так настроить, что бы он уткнулся и не лез там где его не просят. Причём совсем утыкаться он всё же не хочет и кучу any всё равно приходиться добавлять. FlowType ещё долго до ума доводить (typescript тут всё же сильно впереди), но основа у него явно поудачней будет.

Шорткаты в JavaScript

Меня одного напрягает, что в конструкциях типа:

var i = list.length;
while (i--) {
  var item = list[i];
  // ...
}

в последней итерации произойдёт лишний декремент?
Иногда он конечно нужен, но чаще лучше без него:

var i = list.length;
while (i) {
  var item = list[--i];
  // ...
}

Понятно, что это не даст какого-то улучшения производительности, но так оно как-то правильней что ли.
Ну и раз уж `i` нужна только для цикла, то в идеале вообще так:

for (var i = list.length; i;) {
  var item = list[--i];
  // ...
}