Так это пункты идеального по мнению автора фреймворка для Node. Эти принципы были руквовдствующими при создании Sapper и в некоторой степени к этим принципам приближаются Next.js и Nuxt.js. Это практически никак не коррелируют непосредственно с UI фреймоврком Svelte.
Конечно же, не без хелперов — атомарные операции над DOM и прочее, например:
// append
export function append(target, node) {
target.appendChild(node);
}
Вся эта история с "исчезновением", конечно же, рекламный трюк, всего там насобирается аж 1043 байта загзипованного кода для пустого приложения.
Под отстутсвием рантайма можно понимать всю ту логику, которая происходит при вычислении изменений представления при изменении стейта. Это то всё как раз и происходит во время компиляции, а не во время выполнения.
Главная особенность, отличающая Svelte от мейнстрима — он компилируется, а не тащит рантайм с собой. В статье про это ни слова, по-скольку у нее цель помочь ангулярщикам "въехать" в Svelte. А особенности уже не раз обсуждались в других статьях, в том числе и на Хабре.
Просто поясню, что в Svelte в атрибутах внутри {} всегда используется javascript выражение, по аналогии с правой частью стрелочной функции. Поэтому, и в шаблонах Svelte можно написать такую же короткую запись как и в Vue(даже еще короче):
<input on:input={onChange(‘a’)} />
Просто надо понимать, что обработчиком события станет не сама функция с переданным ей параметром, а то, что она вернёт.
Поэтому, можно в компоненте объявить функцию для обработчика таким образом:
const onChange = (param)=>(e)=>console.log(e,param);
// или специально для нелюбителей скобок:
const onChange = param => e => console.log(e,param);
Мне кажется — это дело вкуса и привычек. Мне лично структуры в Svelte симпатизируют больше — легче писать и сильно легче читать и воспринимать. Особенно если структуры в несколько этапов или имеют вложенность.
Если подумать, написать для Svelte препроцессор, который развернет теги со структурными атрибутами в HTMLx, совсем не сложно. Но пока, видимо, без надобности.
. Проведите эксперимент — создайте динамически (js) таблицу с большим количеством элементов, а потом её же но уже через установку innerHTML — разница будет ощутима.
Не поленился — провёл. Вставка 1000 Div. Мои результаты: innerHTML — 4ms, fragment — 9ms. Вы правы — разница более 2 раз не в пользу fragment. Но есть пара моментов:
Бенчмарк не учитывает последующую работу с getElementById() в случае innerHTML
После фрагмента у нас уже есть ссылки на все ноды в документе и не надо выдумывать ничего с getElementById() — что тоже заняло бы какое-то время.
Я рад, что кто-то смотрит на скомпилированный код, прежде чем теоретизировать по поводу работы Svelte. Тот фрагмент кода, что вы указали, выполняется один раз при инициализации экземпляра данного компонента. Далее работа ведётся уже точечно с нужными нодами, обычно с текстовыми(напомню, что сам текст в элементе — это отдельная нода). Эти функции просто сокращения нативных функций Javascript для прямой работы с DOM: append(h1,t0) это не что иное, как h1.appendChild(t0).
Если использовать в лоб node.innerHTML('...'), то потом всё равно придется распарсивать DOM, чтобы получить ссылки на ноды(иначе как работать фреймворку?). Поэтому используется метод document.createDocumentFragment() — тоже достаточно производительный и все ссылки имеются сразу.
Ещё можно использовать SSR с гидратацией. Это Svelte тоже умеет.
Ну, не весь имеющийся туллинг же, а по синтаксису. Поэтому для Svelte с первых версий сразу была годная подсветка синтаксиса и притир в любой IDE(особенно, когда компоненты были в *.html файлах ещё). Иначе, в комментариях к статьям про Svelte, только и делали бы, что жаловались на невозможность писать на Svelte где бы то ни было. Сейчас уже экосистема потихоньку обрастает. Есть плагин и для того же ESLint.
Смысл в том, что Svelte — это языки, которые вы уже знаете. HTML, CSS и JS. Т.е. если вы знакомы с этими языками — вы уже знаете 90% Svelte. В каждый из этих языков добавлено немного магии — на изучение которой хватит 15 минут чтения учебника на сайте.
Формально 0 строк кода — тоже компонент.
Так это пункты идеального по мнению автора фреймворка для Node. Эти принципы были руквовдствующими при создании Sapper и в некоторой степени к этим принципам приближаются Next.js и Nuxt.js. Это практически никак не коррелируют непосредственно с UI фреймоврком Svelte.
Вот, кстати, эта статья в переводе.
Не встречал такого утверждения.
Конечно же, не без хелперов — атомарные операции над DOM и прочее, например:
Вся эта история с "исчезновением", конечно же, рекламный трюк, всего там насобирается аж 1043 байта загзипованного кода для пустого приложения.
Под отстутсвием рантайма можно понимать всю ту логику, которая происходит при вычислении изменений представления при изменении стейта. Это то всё как раз и происходит во время компиляции, а не во время выполнения.
* Отключаем сурсмапы — получаем дебаг по тому коду, который генерирует компилятор(который к слову весьма очевидный).
* Ошибки, специфичные для Svelte отлавливает сам компилятор.
Мне кажется, тут можно провести полную аналогию с цепочкой `Typescript -> Javascript -> браузер`
Source maps же для этого и придуманы?
Можно почитать вводную статью по Svelte3 — https://habr.com/ru/post/449450/
Комментарии, как всегда, сильно интереснее самой статьи =)
Главная особенность, отличающая Svelte от мейнстрима — он компилируется, а не тащит рантайм с собой. В статье про это ни слова, по-скольку у нее цель помочь ангулярщикам "въехать" в Svelte. А особенности уже не раз обсуждались в других статьях, в том числе и на Хабре.
Возможно.
Просто поясню, что в Svelte в атрибутах внутри
{}всегда используется javascript выражение, по аналогии с правой частью стрелочной функции. Поэтому, и в шаблонах Svelte можно написать такую же короткую запись как и в Vue(даже еще короче):Просто надо понимать, что обработчиком события станет не сама функция с переданным ей параметром, а то, что она вернёт.
Поэтому, можно в компоненте объявить функцию для обработчика таким образом:
Мне кажется — это дело вкуса и привычек. Мне лично структуры в Svelte симпатизируют больше — легче писать и сильно легче читать и воспринимать. Особенно если структуры в несколько этапов или имеют вложенность.
Если подумать, написать для Svelte препроцессор, который развернет теги со структурными атрибутами в HTMLx, совсем не сложно. Но пока, видимо, без надобности.
А чем не подошло решение из официального репозитория Onlyoffice?
https://github.com/ONLYOFFICE/docker-onlyoffice-nextcloud
На вкус и цвет все фломастеры разные. Всем сразу не угодишь.
Но, вероятно, при желании можно придумать препроцессор, для подобных хотелок.
Тестируйте, пожалуйста, на всех моих устройствах результаты меняются в пределах погрешности.
Не поленился — провёл. Вставка 1000
Div. Мои результаты: innerHTML — 4ms, fragment — 9ms. Вы правы — разница более 2 раз не в пользу fragment. Но есть пара моментов:А, ну так в Svelte то же самое же. Любому атрибуту можно задавать javascript выражение. Просто это вроде не называется привязкой.
Совсем нет. Существует ссылка на текстовую ноду — в нашем случае
t1. Эта нода и обновляется, нет необходимости заново рисовать весь компонент:PS: долго писал… уже объяснили
Такого нет. Покажите, пожалуйста, кейс для примера. Может оно и не надо =)
Sourcemaps имеются — всё в порядке.
Я рад, что кто-то смотрит на скомпилированный код, прежде чем теоретизировать по поводу работы Svelte. Тот фрагмент кода, что вы указали, выполняется один раз при инициализации экземпляра данного компонента. Далее работа ведётся уже точечно с нужными нодами, обычно с текстовыми(напомню, что сам текст в элементе — это отдельная нода). Эти функции просто сокращения нативных функций Javascript для прямой работы с DOM:
append(h1,t0)это не что иное, какh1.appendChild(t0).Если использовать в лоб
node.innerHTML('...'), то потом всё равно придется распарсивать DOM, чтобы получить ссылки на ноды(иначе как работать фреймворку?). Поэтому используется методdocument.createDocumentFragment()— тоже достаточно производительный и все ссылки имеются сразу.Ещё можно использовать SSR с гидратацией. Это Svelte тоже умеет.
Ну, не весь имеющийся туллинг же, а по синтаксису. Поэтому для Svelte с первых версий сразу была годная подсветка синтаксиса и притир в любой IDE(особенно, когда компоненты были в *.html файлах ещё). Иначе, в комментариях к статьям про Svelte, только и делали бы, что жаловались на невозможность писать на Svelte где бы то ни было. Сейчас уже экосистема потихоньку обрастает. Есть плагин и для того же ESLint.
Смысл в том, что Svelte — это языки, которые вы уже знаете. HTML, CSS и JS. Т.е. если вы знакомы с этими языками — вы уже знаете 90% Svelte. В каждый из этих языков добавлено немного магии — на изучение которой хватит 15 минут чтения учебника на сайте.