DataTable — сравнение на Angular 2, React и JQuery

Решил сравнить трендовые JS фреймворки Angular и React со старым добрым JQuery подходом. В Интернете много статей, где сравнивают их абсолютно предвзято, на изначально неверных примерах. Сравнивают как апельсины с картошкой:)

Я вот лично всегда беру для сравнения какой-то одинаковый элемент, притом очень сложный и показательный для крупных приложений. Таким компонентом является сложная таблица с фильтрами и сортировками (DataGrid или DataTable), и как пик эволюции — табличный ввод (TabularInput или EditableGrid). Притом ввод не просто текста (input) или из статичных выпадающих списков (select), а из динамического выпадающего списка с AJAX подкачкой значений (по типу библиотеки JQuery Select2). Чтобы можно было организовать гибкий табличный CRUD интерфейс.

И так, какие самые продвинутые компоненты я нашел (Open Source), ссылки на Demo, где можно попробовать:

AngularJS2библиотека PrimeNG, компонент DataTable. Функции по отображению вроде все есть, и работает достаточно быстро. Пример достаточно долго загружается. Но в примерах из коробки вообще отсутствует реализация сложных вариантов ввода (select, checkbox) — только text input.

ReactJSReact Data Grid от Adazzle. Функций по форматированию и манипуляции данных намного больше чем в PrimeNG. Загружается чуть быстрее, но тоже долго. Предусмотрены сложные варианты табличного ввода (rich cell edits) — простые селекты и с живым поиском (из массива). Есть явные визуальные недоработки (например, отсутствие иконок сортировки, кривые чекбоксы и т.п.) — проект находится в стадии активной фазы доработки.

JQuery — есть шикарная бесплатная библиотека DataTables, но как всегда, всё шикарное и полностью готовое не бывает полностью бесплатным. Если вы хотите сделать редактируемые таблицы, то модификация Editable будет стоить денег:( Зато там множество проверенных временем плагинов и отличная документация. Генераторы экранов. Интернационализация и готовые переводы из коробки. Из коробки интеграция с Select2. Жаль что платно..

Из бесплатных же на JQuery есть другая вполне приличная библиотека: EditableGrid.net. В примере сразу показано редактирование через select. Дизайн немного устаревший, но мнего фишек. Очевидно, Select2 в неё можно будет прикрутить.

Итого

В очередной раз убедился, что сложные табличные решения для манипуляции большими данными, которые делаются на Desktop технологиях за пару кликов и через удобные визуальные конструкторы в IDE, всё еще сложно достижимы в Веб-технологиях. Ах, как всё просто было в Delphi 6 (2000 год) и тем более сейчас в 1С:)

А из представленных Веб решений, для крупного проекта, сейчас уже наверное можно брать технологии построенные на ReactJS + Flux. Хоть они и не до конца зрелые, но перспективней JQuery ввиду того что не работают с DOM напрямую, и прозрачнее работают с состоянием данных (state).

Хотя пока еще решения на JQuery выглядят всё-таки более презентабельными (особенно лицензионная DataTables). И более устоявшимися, по сравнению с новыми Angular2 и React, не обросшимися качественными комплексными библиотеками.

 

 

Один комментарий

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *