Какой самый универсальный инструмент для работы с анимацией и графикой на js?

Question

[Serzio]

Всем привет! Проблема такая:
Т.к. задачи на фронтенде у меня самые разнообразные, мне не хочется юзать отдельные инструменты со своим АПИ для каждого случая - для графиков одно, для различных анимаций другое и т.п.
Хочется найти некий швейцарский нож, которым можно делать все.
Покопавшись с гугле - чаще всего попадается D3 для этих целей. Но есть мнение, что D3 является рудиментом и сейчас все можно реализовывать на js фреймворках с виртуальным DOM, типо React и Vue. С фреймворками я знаком, а вот с D3 - нет. Есть ли что то такое, что можно делать на D3, но нельзя на Vue/React?
Еще такой вопрос - с canvas и svg я знаком поверхностно. Но canvas выглядит поуниверсальней. Какие плюсы у SVG перед ним? На что лучше делать ставку? Вообще вроде как почти все можно реализовывать сейчас на css и html, обламывает меня только делать на них пончиковые диаграммы всякие и что то еще, где нужны кривые линии.
Особенно сильно заниматься графикой мне неохота. Она меня не торкает. Нужен низкоуровневый инструмент для утилитарных задач. Потому что больше этим заниматься на работе у нас просто некому...

Answer 1

[dollar]

Вы хотите, чтоб у вас всё было, и вам за это ничё не было.
Но так не может быть.

Любой, даже супер навороченный фреймворк, это, как минимум, увеличение размера страницы и потребления памяти. Если у вас простая задача, типа нарисовать 7 красных линий, то это можно сделать на нативном JS, без фреймворков.

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

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

Comments

[Serzio]

В основном я и так все стараюсь реализовывать нативно. Но с некоторыми видами графиков и анимаций это сделать сложновато.
Проблема в том, что задачи слишком разные. и ковырять новую библиотеку под каждую задачу не охота. Тем более под те же графики абсолютно гибкого решения я не нашел. Точнее есть например Hightcharts, но там нужно так много ковырять апи и экспериментировать, что мне это не по нраву.
Нужен какой то уровень абстракции над голым canvas или SVG, из которого можно было бы "сверстать" что угодно. Разумеется, сперва изучив АПИ этой библиотеки, но одной библиотеки, а не десятка. Например, дизайнер сошел с ума и ему нужен график с барами, на макушке каждого бара сидит медвежонок Барни, данные для баров динамически приходят с сервера, а потом при скролле линии баров складываются в птичку, которая улетает за верхний край страницы. Утрирую, но что то подобное часто приходит от наших ПМ-ов.
Смотрю в сторону D3 или GSAP, но хотелось бы услышать мнение специалиста по графике.

Answer 2

[MamaLuyba]

Animate CC

Comments

[Serzio]

спасибо, но совсем не то