В настоящее время Strudel находится в версии 0.6.2 - приближается большой выпуск 1.0!

Не стесняйтесь делиться своими отзывами и сообщать о недостающих функциях на странице Strudel на github - https://github.com/strudeljs/strudel/issues

Strudel.js никогда не задумывался как фреймворк для создания больших динамических приложений, таких как React или Angular. Фактически, он нацелен на страницы, на которых больше документов, чем приложений. Однако не редкость необходимость иметь больше динамических компонентов даже на классических страницах, подобных документам - простой калькулятор, календарь событий, викторина - есть несколько приложений, в которых управление состоянием вручную было бы головной болью. Необходимость вручную вызывать цепочку функций после изменения свойства звучит как головная боль. Войдите в мир Mobx и реактивного программирования.

Реактивное программирование с Mobx

Если вы никогда не слышали о Mobx - это библиотека управления состоянием, похожая на Redux, но совсем другая. Он знакомит с такими понятиями, как: действия, наблюдаемое состояние, вычисленные значения и реакции. Библиотека основана на шаблоне наблюдателя, который упрощается до единой предпосылки: реакции вызываются каждый раз при изменении наблюдаемого состояния. Такой подход позволяет забыть о громоздких вызовах функций каждый раз, когда мы изменяем состояние, поскольку наши методы реагируют на изменение состояния. Использовать Mobx так же просто, как настроить наблюдаемые объекты и наблюдатели, 🎉 все обновляется автоматически. Если вы хотите узнать больше о Mobx, вот ссылка на Github - https://github.com/mobxjs/mobx.

@observable
todos = [];
@computed
get completedTodos() {
   return todos.filter(todo => !todo.finished).length;
}

Что действительно замечательно в Mobx, так это его простота в сочетании с использованием декораторов. Кажется, идеально подходит для комбинирования со штруделем, поскольку он также использует декораторы, что мы можем сделать, чтобы сделать это сочетание более официальным?

Представляем крепления Strudel Mobx

Strudel Mobx - это проект, вдохновленный React Mobx. Он доступен на Strudel Github - https://github.com/strudeljs/strudel-mobx.

Библиотека связывает компоненты Strudel с наблюдаемыми свойствами и расширяет компоненты с помощью новой функции жизненного цикла, названной так же, как в React - render. Эта функция является реакцией, поэтому она вызывается при каждом изменении наблюдаемого состояния, которое объявляется декоратором @observable, используемым для свойств компонента. Чтобы связать компонент Strudel с Mobx, его нужно украсить Observer декоратором, который настроит привязки.

Вот пример простого списка задач, созданного с использованием привязок Mobx, Strudel и Strudel-Mobx.

import { Component } from 'strudel';
import { Observer } from 'strudel-mobx';
import { observable } from 'mobx';
import { html } from 'lit-html';
@Observer
@Component('.todo')
class TodoList {
    @observable
    todos = [
        { id: 0, title: "Todo 1", completed: true },
        { id: 1, title: "Todo 2", completed: false }
    ]
    
    @Evt('click .add')
    add() {
       this.todos.push({
           "id": this.todos.length,
           "title": "",
           "completed": false
       });
    }
    render() {
        return html`
            ${this.todos.map((todo) => html`<div class="todo" data-id="${todo.id}" data-completed="${todo.completed}" data-title="${todo.title}"></div>`)}
            <button class='add'>ADD TODO</button>
        `;
    }
}

Производительные обновления DOM

Strudel работает непосредственно с DOM, поэтому нет виртуального слоя DOM, как в React. Использование innerHTML и рендеринг целых компонентов имеет огромные недостатки с точки зрения производительности, но и простые вещи, такие как сохранение фокуса ввода или положение полосы прокрутки, чрезвычайно сложно достичь с таким наивным использованием DOM.

Чтобы обновления DOM были такими же производительными, как в React, я рекомендую использовать lit-html вместе с Mobx и Strudel. . Это проект, поддерживаемый Polymer, доступный на Github: https://github.com/PolymerLabs/lit-html с предпосылкой облегчения и оптимального обновления DOM. Это идеальный компаньон для использования в методе render, поскольку он обновляет только необходимые части DOM, сохраняя ненужные макеты и перекомпоновки. Похоже, идеальное трио для выполнения динамических компонентов в приложениях Strudel.

Следующие шаги

Этот подход должен быть идеальным для предоставления динамических деталей меньшего размера в ваших реализациях Strudel. Однако вы должны полностью осознавать, что если вы создаете больше кода в своих динамических компонентах, чем в документах, возможно, стоит подумать об адаптации React или Angular в качестве фреймворка, запускающего ваше приложение.

Тем не менее, я надеюсь, что это будет полезно в ваших проектах Strudel, не стесняйтесь делиться отзывами и экспериментировать со Strudel Mobx, если у вас возникнут проблемы, дайте мне знать на Strudel Github или Strudel Gitter.