Первоначальные мысли о Svelte
Введение
В джунглях интерфейсных фреймворков возникает Svelte, чтобы немного оживить этот спор. В сценарии, где существуют уже известные альтернативы, такие как: Vue, Angular и React, Svelte предлагает переосмыслить реактивность.
Что такое Свелте?
Согласно документации Svelte:
Svelte — это фреймворк компонентов, как React или Vue, но с важным отличием. Традиционные фреймворки позволяют вам писать декларативный код, управляемый состоянием, но есть и недостаток: браузер должен проделать дополнительную работу, чтобы преобразовать эти декларативные структуры в операции DOM, используя такие методы, которые съедают бюджет вашего фрейма и облагают налогом сборщик мусора.
Вместо этого Svelte запускается во время сборки, преобразуя ваши компоненты в высокоэффективный императивный код, который хирургически обновляет DOM. В результате вы можете писать амбициозные приложения с отличными характеристиками производительности.
Но что значит быть реактивным?
Реактивная система является отзывчивой, устойчивой, эластичной и использует концепцию управляемой сообщениями.
Согласно Реактивному манифесту:
Отзывчивые системы обеспечивают быстрое и постоянное время отклика, устанавливая надежные верхние границы, чтобы обеспечить постоянное качество обслуживания. Это согласованное поведение, в свою очередь, упрощает обработку ошибок, повышает доверие конечных пользователей и поощряет дальнейшее взаимодействие.
Отказоустойчивые системы сохраняют работоспособность даже в случае сбоя.
Эластичные системы остаются отзывчивыми при различных рабочих нагрузках. Реактивные системы могут реагировать на изменения скорости ввода, увеличивая или уменьшая ресурсы, выделенные для обслуживания этих входов.
Реактивные системы полагаются на асинхронную передачу сообщений для установления границы между компонентами, которая обеспечивает слабую связь, изоляцию и прозрачность местоположения.
Реактивное программирование
Согласно Википедии:
В вычислительной технике реактивное программирование – это парадигма декларативного программирования, связанная с потоками данных и распространением изменений. С помощью этой парадигмы можно с легкостью выражать статические (например, массивы) или динамические (например, генераторы событий) потоки данных, а также сообщать о существовании предполагаемой зависимости в связанной модели выполнения, что облегчает автоматическое распространение измененных данных. поток.
Таким образом, парадигма реактивного программирования применяет концепции реактивного манифеста к программированию.
Реактивность со Svelte
В этом простом примере я получаю пользовательский ввод и использую реактивность Svelte для отображения текста на основе этого ввода. Вы можете видеть, что Svelte автоматически обновляет DOM при изменении состояния моего компонента.
Например, учитывая код App.svelte:
Когда я даю неправильный ответ, Svelte определяет состояние переменной rightAnwser и показывает текст Неверный ответ!:
Когда я даю правильный ответ, Svelte определяет состояние переменной rightAnwser и показывает текст Правильный ответ!:
Это был простой пример использования реактивности Svelte. Если вы хотите узнать больше о Svelte, я предлагаю начать с учебника.
Вывод
Опыт разработки очень большой. Легче делать удивительные вещи с небольшим кодом. Я знаю, что такие фреймворки, как React, Vue и Angular, уже консолидированы, но я думаю, что у Svelte есть место для вас.
