Comments 13
Выбор ui либ странный, есть же chadcn, mantine, chakra, prime.
Так же еще хорошо бы бекенд какой то иметь, не все можно сделать на клиентской стороне
В статье основной упор делается на B2B-стартап, где важна работа с таблицами и формами. Я привел ссылку на хороший обзов UI-библиотек, где подробно разбираются плюсы и минусы, там есть mantine, chakra, prime и других UI либ.
Для B2B важна работа с таблицами и сложными формами. Можно посмотреть доступные возможности разных UI-фреймворков на примере таблиц:
https://ui.shadcn.com/docs/components/table
https://mantine.dev/core/table/
https://v2.chakra-ui.com/docs/components/tabs/usage
https://primereact.org/datatable/
https://mui.com/material-ui/react-table/
https://ant.design/components/table
У Ant просто чуть больше примеров для таблиц и сложных форм. А если посмотреть на популярность, то там будет два лидера: MUI и Ant.
Аналогичные мысли есть от @LyuMih в соседнем треде.
Автор, продолжай, тема очень интересная и актуальная!
По ui либам.
Между Material UI и Ant рекомендую брать Ant.
Причина - в Ant есть компоненты, которые в MUI закрыты за "платной" лицензией.
Например, RangePicker . Чтобы собрать похожий функционал на MUI, нужно потратить +- несколько часов на отладку, т.к. он собирается из двух не связанных между собой DatePicker из бесплатной версии. Это может быть критичным в рамках хакатона.
Также Ant имеет более упрощённый вариант к работе с формами - это позволяет делать немого быстрее валидацию полей формы, что тоже может оказать на результат хакатона, т.к. там обычно в конце не хватает пары часов на исправление багов.
Настроить тему Ant под проект можно в Theme Editor
Если нужны графики и чарты, к анту идёт ant-charts , что тоже может пригодиться в некоторых кейсах.
Что с поддержкой мобильной версии? Почему не Flutter стек?
Базовая поддержка мобильной верстки есть у Ant и Refine. Можно посмотреть в демо.
Вторая часть вопроса религиозная. Часть ответа есть тут. Можно было бы и на Flutter.
Работа с таблицами
Мы собираем стартовый набор для B2B-приложений, где важна работа с таблицами и сложными формами. Не хочется тратить время на проектирование и разработку таких компонентов с нуля. На Reddit есть тред, где ищут готовые компоненты для работы с таблицами для Flutter. Для таблиц, нужны функции сортировки и фильтрации по колонкам, возможность перестановки колонок, "инлайн" редактирование и работа с "горячими клавишами" из коробки.
Можно создать эти компоненты самостоятельно или купить их, например, у Syncfusion. В Ant эти функции доступны из коробки под лицензией MIT.
Примеры B2B-интерфейсов
Хочется иметь доступ к типовым админкам с открытым исходным кодом (лицензия MIT), чтобы не начинать с чистого листа и не разрабатывать все компоненты самостоятельно.
Можно также приобрести готовые решения на CodeCanyon для Flutter.
Итог
В целом, можно использовать Flutter, если вас устраивает размер сообщества, тренд развития и популярность Dart.
Речь не про мобильную верстку, когда пользователь открывает сайт в мобильной версии браузера, а про нативное мобильное приложение для iOS и Android. Но в принципе ограничение условий до B2B стартапа отвечает на оба вопроса.
Вопросы не ради холиваров, сейчас люди проводят 90% времени в приложениях и conversion rate в 3 раза выше, чем у мобильных сайтов.
Разбор хороший, если говорить про B2B не хватило параграфа про анализ функций которые чаще всего привлекают бизнес (ACL, SSO, etc) в отличии от community версии продукта. Тот же Refine уже потребуется в Enterprise версии.
Думаю b2b приложения (с объемными и функциональными дашбордами и таблицами) все же пользуются с ПК чаще из реального опыта подобных приложений. Чаще всего ими пользуются офисные сотрудники, которым гораздо удобнее пользоваться ПК, чем мобильными устройствами. Мы делали приложения для мобильных телефонов, планшетов и ПК, и соотношение использования 1% / 4% / 95% (для POS системы управления продажами, складской учет и документооборот)
Вижу, что возникают вопросы: почему не "Х" или мой любимый фреймворк? Чтобы избежать дискуссий на тему "моя религия лучше", подчеркну основные тезисы статьи:
Разрабатывать веб-приложение можно на любых технологиях: Flutter, Angular, Vue, BEM или mol.
Выбор технологий в статье основан на размере сообщества, драйверах роста популярности и личном опыте.
Если вы создаете стартап, важно не тратить время на обучение новым технологиям, а сосредоточиться на захвате рынка.
Размер сообщества и популярность технологий влияют на наличие специалистов с релевантными знаниями, что снижает временные затраты на их обучение.
Сейчас, если что-то популярно, ChatGPT, скорее всего, об этом знает и может дать более релевантные ответы.
Опять реакт.. Что же все на этот оверхайп ведутся. Одна из компаний, в которых я работал, запустила проект на реакте, потому как, якобы, проще на него найти разработчиков. И народ идёт реакт учить, потрму что с ним больше вакансий.
Между тем, реакт объективно (как технология) много хуже вью. Да, с ним возможно создавать сайты, но куда сложнее и с намного худшей производительностью, с большим числом багов.
Ручное управление реактивными зависимостями — главный источник багов.
Второй источник — компонент как функция, выполняющаяся при каждом обновлении компонента. Легче лёгкого привнести бесконечные циклы.
По производительности — при каждом проходе аллоцируем тонны массивов (для зависимостей), каждый вызов useState при обновлении компонента аллоцирует под капотом ещё один массив (кортеж). Каждый коллбэк — функция. Функции в джаваскрипте — объекты, и стало быть — дополнительные аллокации при каждой перерисовке компонента. Например, при вводе текста в инпут.
По DX — нет двустороннего биндинга. Для циклов — callback hell. Условия — те ещё извращения. Попытка запихнуть и логику, и шаблон, и стили в джаваскрипт, закончилась плачевно. Имеем PHP-подобный JSX (с htmlFor и className вместо for и class), тонны кривого CSS-in-JS.
Про сторы вроде редакса я вообще молчу: мантра об иммутабельности — пляска бойлерплейта на костях сборщика мусора.
Вью, с другой стороны, имеет идеальную автоматическую реактивность. Не аллоцирует лишнего. Легко управляется. Темплейт — валидный HTML, удобные директивы v-if, v-for, v-model (для двустороннего биндинга), оптимизация на этапе компиляции. Идеальный стор Pinia, простой роутер, идеальные provide и inject. Вью может всё, что может реакт, но проще, быстрее и лучше. А уж если взять Nuxt — так жизнь и вовсе мёдом покажется.
Реакт давно пора оставить на свалке истории. Он был хорош только на фоне ангуляра и jQuery.
На чем разработать свой стартап или с чего начать хакатон в 2024? (часть 1)