wui_builder

Библиотека DART для создания пользовательских интерфейсов для Интернета, вдохновленная ReactJS

Для строительства декларативных интерфейсов на основе компонентов веб -пользовательских интерфейсов в DART.

Предоставляет богатую библиотеку типичных виртуальных элементов для SVG и стандартного HTML.

Поддерживает определение пользовательских компонентов с интерфейсом, аналогичным React. Все те же методы жизненного цикла поддерживаются.

С самого начала построен с асинхронным рендеринг.

Полностью совместимо с DART 2, сильным режимом и DDC.

Документация и примеры

Проверьте документацию на страницах GitHub, чтобы получить подробное посмотрите на структуру

Что отличает эту виртуальную структуру DOM?

Это написано в Дарте. Плюс:

Сгенерированные виртуальные элементы DOM

Генератор является самой уникальной особенностью wui_builder. Генератор генерирует виртуальный строитель элементов DOM для каждого типа элемента, определяемого в пакетах DART HTML и SVG. Каждый виртуальный строитель элементов DOM обеспечивает те же типичные сеттеры, что и соответствующий его элемент HTML/SVG. Это позволяет легко писать устойчивые компоненты.

Настраиваемое планирование обновления

Затем WUI_BUILDER поддерживает итеративный рендеринг, чтобы не блокировать основную резьбу в больших обновлениях. Итерационные обновления только процессы на холостых обратных вызовах, что означает, что задание и макет рендеринга будут разделены на несколько кадров. Wui_builder дает власти разработчику решать, когда компоненты должны отображаться. Это позволяет разработчику решать, обновляет ли компонент синхронно, на анимационной кадре или на обратном вызове. В идеале компонент будет:

• рендеринг на анимационной раме для обновлений с высоким приоритетом, которые должны закончиться. Обновления от компонентов Mulitiple могут быть приведены на анимационных рамах.
• рендеринг на праздничные вызовы для обновлений с низким приоритетом, которые можно разделить по кадрам.

Тем не менее, синхронистые обновления также разрешаются запускать по требованию, не ожидая анимационной рамки или холостого обратного вызова.

Умное обновление партии

Наконец, WUI_BUILDER предотвращает необычные обновления, когда несколько обновлений одного и того же компонента находятся в очереди перед тем, как какая -либо может обрабатывать. Например, скажем, у меня есть компонент, который обновляет рамку анимации с использованием SetStateOnanimationFrame. Если SetStateOnanimationFrame вызывает дважды между кадрами, процесс обновления будет выполнен только один раз, позволяя выполнять обе функции сеттера состояния.

Примечание, requestIdlecallback в настоящее время не поддерживается всеми браузерами, а wui_builder в настоящее время не включает полифилл. Синхронное рендеринг по -прежнему работает во всех браузерах. Смотрите диаграмму совместимости здесь.

Синтаксис

 class HelloWorldProps {
    final String text;
    HelloWorldProps ( this .text);
}

class HelloWorld extends PComponent < HelloWorldProps > {
    HelloWorld ( String text) : super ( HelloWorldProps (text));

    @override
    VNode render () => VDivElement ()
        ..text = props.text;
}

// instantiate the component, pass it an instance of HelloWorldProps
final component = HelloWorld ( 'Hello world' );

// render the virtual element into a container
render (component, querySelector ( '#container' ));

Проверьте документацию на страницах GitHub для более глубоких примеров.