Выпуск Flitter 1.0.0: SVG-библиотека, призванная заменить D3

Введение в библиотеку Flitter

История создания Flitter

В современной веб-разработке визуализация данных стала неотъемлемым элементом. Преобразование сложных наборов данных в легко понимаемый формат – это постоянная задача для разработчиков. Flitter был создан для решения этой проблемы. Несмотря на существование различных библиотек визуализации данных, разработчики часто сталкивались с трудностями в поиске функций, полностью удовлетворяющих их потребностям среди предлагаемых вариантов. Зачастую даже реализация простых диаграмм или графиков требовала значительных усилий и времени на обучение.

Проблемы, решаемые Flitter

Основная цель Flitter – дать разработчикам возможность легко и быстро создавать визуализации данных, такие как диаграммы и графики. Для этого Flitter предоставляет две основные функции.

1. Декларативное программирование с использованием виджетов: Flitter использует декларативную модель программирования, которая позволяет разработчикам описывать желаемые визуальные элементы простым и интуитивно понятным способом. Этот подход применяет парадигму, широко распространенную в современных веб-фреймворках, таких как React, к визуализации данных.
2. Расширенные расчеты компоновки: В визуализации данных точность компоновки и расположения элементов имеет важное значение. Flitter автоматизирует сложные расчеты компоновки, такие как определение ширины текста, что позволяет разработчикам сосредоточиться на более важных аспектах логики приложения.

Когда нужен Flitter

Flitter идеально подходит для проектов с высокими требованиями к визуализации данных, а также для ситуаций, когда необходимо быстро создать простые диаграммы или графики. Кроме того, он предоставляет разработчикам, знакомым с Flutter, привычный синтаксис и структуру, что позволяет максимизировать синергию между веб- и мобильными платформами.

Основные обновления и улучшения

Новые функции

• Улучшенная поддержка SSRВ версии 1.0.0 значительно усилена поддержка SSR (рендеринг на стороне сервера). В предыдущих версиях использовались определенные зависимости Node.js, но теперь они полностью устранены, что обеспечивает стабильную работу в различных средах, таких как Vercel или Cloudflare. Это позволяет разработчикам без ограничений фреймворка легко интегрировать Flitter в свои проекты.
• Улучшенная функциональность GuestureDetectorТеперь Flitter предоставляет эффект всплытия событий, соответствующий дереву виджетов. Это позволяет более точно управлять пользовательскими взаимодействиями и обеспечивает большую гибкость для разработчиков при реализации сложных взаимодействий.
• Добавлен виджет ZIndexРанее SVG не поддерживал атрибут z-index напрямую. Flitter 1.0.0 обходит это ограничение с помощью виджета ZIndex, позволяя разработчикам явно управлять приоритетом слоев элементов.

Улучшения производительности

• Flitter значительно улучшил скорость первой отрисовки диаграммы и производительность взаимодействия. Была проведена оптимизация производительности, в том числе сокращение времени отрисовки сложных диаграмм с 140 мс до 30 мс.
• При возникновении изменений состояния в одном стеке вызовов выполняется пакетная обработка, что сокращает количество перерендерингов.

Основные исправления ошибок

• Исправлена ошибка, при которой вызов setState внутри обработчика событий, зарегистрированного с помощью addPostFrameCallback(), не приводил к перерендерингу.
• Исправлена ошибка, возникавшая при реализации адаптивности браузера, когда установка height на 100% приводила к некорректному значению высоты по сравнению с высотой родительского элемента.

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

React

Для использования в React установите два следующих пакета.

Импортируя виджеты из flitter-react, вы можете легко использовать Flitter в среде React.

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

Сообщество и способы участия

Сообщество Flitter активно общается через GitHub и Discord. Разработчики могут предлагать новые функции или сообщать об ошибках непосредственно через GitHub, а также делиться идеями и опытом, связанными с Discord каналом. Все участники вносят свой вклад в развитие проекта Flitter.Flitter

Планы на будущее и видение

В краткосрочной перспективе Flitter сосредоточен на исправлении ошибок и повышении производительности, а в долгосрочной – на улучшении опыта SSR и разработке дополнительных функций для визуализации данных. Конечная цель Flitter – предоставить комплексное и масштабируемое решение для визуализации данных, тем самым революционизируя доступ к визуализации данных в экосистеме веб-разработки.