Svelte 3: Переосмысление реактивности

Поэтому я думаю что это не стоит называть cd.

А что вы подразумеваете под «cd»?

Такого cd не было и не может быть в любом другом, не компилируемом, фреймворке

Англяры делают компилляцию на лету, поэтому там тоже самое но в другом виде.
В этом плане не важно в какой момент откомпилировалось, главное что отрабатывает именно скомпилленый кусок.

Svelte 3: Переосмысление реактивности

Единственный момент — это не имеет никакого отношения к dirty checking

Это как раз и есть dirty-checking, когда проверяются все биндинги на изменения даже если они не менялись (в пределах scope), пример:

<script>
	let scope = {
		name: 'linux',
		foo: () => { console.log('DC'); return 'static';}
	};
</script>
<input type=text bind:value={scope.name} />
{scope.foo()}

scope.foo() будет дергаться каждый раз даже если он не менялся, так же и в ангуляре, только в ангуляре идет несколько проходов — до финального статуса, а тут только один проход, что может дать не консистентное состояние если скомпиллируется.

Более того, это абсолютно ничего не стоит.

Не абсолютно, но не значительно — почти так же как и в ангуляре*.

Svelte 3: Переосмысление реактивности

Кстати лайфхак для сторонников DirtyChecking (angular), если в Svelte 3 использовать выделенную переменную как VM (View Model) (let vm = {...};), то эта компонента будет работать как чисто DirtyChecking и все изменения будут отлавливаться и без compound "$:".
Так что DirtyChecking пришел и в Svelte ;)

Svelte 3: Переосмысление реактивности

постим ишаки

кстати на мелкую багу сегодня натыкался, что-то типа:
$: a = changed
$: c = a + b
$: b = a + 1
так работает,

$: c = a + b
$: a = changed
$: b = a + 1
а так нет

Svelte 3: Переосмысление реактивности

Ну и вот я еще один пример набросал — тут ну вообще во время компиляции про структуру объекта ничего не известно, неправда ли?

Тут весь «obj» будет инвалидирован, не важно что вы там поменяли.
Т.е. берется корневое имя переменной, например если вы меняете только «obj.user.status.name», то инвалидируется весь «obj», поэтому ваш пример будет нормально работать.

Svelte 3: Переосмысление реактивности

Сейчас заглянул в «исходник», $: «computed» переменные не являются какими-то observable объектами — это простые переменные (которые «решаются» на уровне компиляции) — и это жирный плюс в отличие от knockout/vue и подобных.

Svelte 3: Переосмысление реактивности

переменная могла измениться. Вы никак не можете заранее скзаать какая — могла любая.

Если какое-то изменение нельзя отловить «в лоб» на уровне компиляции, то Svelte его просто «не видит». Для этого нужно обкладывать computed и пр. махинации (второй пример)

вы просто перерендериваете весь дом для bar целиком — подход ангуляра

Ангуляр как раз делает обновления точечно, т.е. ваш 2-й вариант:

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

— подход реакта

А вот реакт наоборот, генерирует VDOM целиком и потом уже ищет что в нем изменилось (т.е. такой dirty-checking только по VDOM), чтобы сделать минимальные изменения в DOM.
Т.е. ангуляр ищет изменения в данных, чтобы сделать точечный апдейт, а реакт ищет изменения в VDOM для точечного обновления.

Svelte 3: Переосмысление реактивности

И у всех свои минусы.

Svelte 3: Переосмысление реактивности

До тех пор, пока в фигурные скобки мы можем засунуть любой JS код

Дак это же наоборот хорошо что можно засунуть любое выражение — упрощает разработку, например не нужно делать кучу однотипных биндингов.

мы не сможем воспользоваться преимуществами декларативности

Что за преимущества?

Банально — получить список свойств, от которых зависит шаблон

Svelte по видимому получает список зависимостей.

Или вместо count подставить не текст, а другой компонент. Ну или перевести его на иной язык, где плюрализация делается совсем иначе.

И это решаемо.

Да и вообще, можно назвать это не логикой, а просто гибким шаблоном, на «for/if/switch» в шаблоне же никто не жалуется и тут тот же «if» (тем более изменение данных не происходит, чисто представление даннных).

Svelte 3: Переосмысление реактивности

Если один раз запустить, то да, но что-то я не видел, чтобы JS умел отслеживать свойства и строить зависимости.

c() можете несколько раз запустить, все ранво завист от «a», это же не перменная.
А в DOM должно рендерится актуальное значение, для этого фреймворк и нужен.

А решил все ваши кейсы с минимальными изменениями

Вы подтвердили, что «js код без изменений может не заработать», я не знаю почему вы продолжаете спорить.

Svelte 3: Переосмысление реактивности

а также объяснял зачем мы придумали $:

Не вы его придумали — это обычный «computed» который есть во многих фреймворках.

Лично на мой взгляд если выбирать — исполнять один и тот же код на каждый пчих или написать $: вместо просто let (ваш пример), то для меня выбор очевиден.

«Красота требует жертв», хотя там и жертв то нет при правильном подходе, вообщем минусы есть в каждом фреймворке — вы просто выбираете те минусы которые для вас менее важны.

Svelte 3: Переосмысление реактивности

Тут c не зависит от a через b потому что b не зависит от a.

Зависит — запуситие такой пример на js или любом другом языке — увидите что значение «c» меняется в зависимости от «a». Вообще это очевидно, вы просто пытаетесь оправдать фреймворк.

тогда нужно писать так:

Вот, нужно «адаптировать» и как я уже писал выше:

если просто взять и вставить рабочий кусок js в svelte — он не заработает*

Svelte 3: Переосмысление реактивности

Если он внутри цикла, лишний код будет в каждой итерации.

Исходя из этого, не думаю что это проблема.

ecmaeology имел ввиду скорость выполнения, например этот код:

for(let j=0;j<100;j++) i++;

превращается в

for(let j=0;j<100;j++) { i++; $$invalidate('i', i); }

что медленее в на порядок (порядки), но в данном случае это не существенно, вообще похоже нужно отделять переменные которые летят на view от внутренних переменных + computed тоже, нужно держать в голове какие переменные чем являются, ну или префиксы им делать.

Svelte 3: Переосмысление реактивности

Я про ф-ии которые зависят от контекста, или вы в js только чистые ф-ии пишите?

let a = 1;
const b = () => a + 1;
// const c = () => b() + 1;
$: c = b() + 1;

Очень простой и очевидный пример где функция зависит от контекста («c» зависит от «a» через «b»). Но Svelte это не может осилить, когда тот же ангуляр (да и реакт*) без проблем (как и в нативном JS).

Или вот ещё пример который не работает:

<script>
let user = {name: 'linux'};
let user2 = user;
</script>
<input type="text" bind:value={user.name} />
<h1>Hello {user.name}!</h1>
<h1>Hello {user2.name}!</h1>

Тут нужно вручную привязку делать чтобы заработало (опять же в ангуляр и реакт нет этой проблемы).

Не объясняйте, я знаю почему это не работает (и как исправить), это «болевые точки» всех фреймворков основанных на «observable», я как раз поэтому и привел эти (не единственные) примеры.
И это негативно сказывается в больших проектах. Но все равно Svelte заслуживает что-бы его попробовать.

Svelte 3: Переосмысление реактивности

Я понимаю как работает эта часть Svelte, я говорю про другое — если просто взять и вставить рабочий кусок js в svelte — он не заработает*, как мне показалось вначале (когда в некоторых других фреймворках оно работает).

какой тип API был бы лучшим для нас… и поняли, что лучший API — это отсутствие API. Мы можем просто использовать язык

Поэтому «просто использовать язык» — нужно с оговоркой, т.к. это все же «апи».

Но в целом идеи фреймворка очень интересные, посмотрим насколько он станет популярным, думаю первый его конкурент — vue (по типу отслеживания).

Svelte 3: Переосмысление реактивности

Тут тоже ничего не изменяется, почему double должен как-то изменяться?

Оно как минимум должно запускаться, но нет.

Мы можем просто использовать язык

Просто взять и вставить «кусок js» не получится, если у меня вызывается какая-то библиотека в коде, то нужна адаптация.

Svelte 3: Переосмысление реактивности

const getData = () => 'x';
$: double = () => getData() + getData();

Так тоже не работет, видимо в голове нужно будет держать где «computed», а где обычные ф-ии.

Svelte 3: Переосмысление реактивности

А как сделать отслеживание «внешней» ф-ии, типа получения данных из стора и т.п.
Так не работает:

$: now = Date.now();

Svelte 3: Переосмысление реактивности

Svelte как то может отслеживать ф-ии?

<script>
	let name = 'test';
	const double = () => name + name;
</script>
<input type="text" bind:value={name}> {double()}

Каково быть мейнтейнером свободного ПО

я не поддерживаю почти ни один из дистрибутивов, потому что мой код уже во всю использует C++17

А как это связано? У меня тоже есть проект на C++17, нормально работает на убунтах, предполагаю, что и на других дистрибутивах заветедся без проблем.