У меня есть этот проект, в котором я должен кодировать веб-сайт и приложения для ios и Android.

Я должен делать это с очень ограниченной командой (в основном сам). Поэтому я хочу разделить как можно больше кода между этими платформами, чтобы максимально избежать поддержки разных кодовых баз.

Я пришел к рассмотрению flutter : логика (и взаимодействие с серверной частью) в dart может быть скомпилирована как для ios, так и для Android, а также для javascript для вызова веб-сайта. Мне также нравится, как пользовательский интерфейс построен с использованием flutter.

Я знаю, что для веб-сайта существует flutter web, который можно использовать для создания веб-приложения, но я хочу, чтобы мой сайт больше походил на веб-сайт, чем на одностраничное приложение. Я думал об использовании React Gatsby для создания пользовательского интерфейса веб-сайта, вызывая js, скомпилированный dart для логики. Это обеспечит высокую скорость загрузки страницы, хорошее seo, сохраняя при этом интерактивность приложения react и логику единой кодовой базы благодаря компиляции dart в js.

Мне интересно, кажется ли вам это хорошим подходом, а если нет, то как вы это сделаете.

При таком подходе мне интересно, можно ли было бы встроить веб-виджеты flutter внутри компонентов react js, всегда заботясь о том, чтобы поддерживать как можно меньше кода, зависящего от платформы. Я не нашел другого способа сделать это, кроме как встраивать их в iframes, что не кажется хорошей идеей, или нет?

Обновить

Flutter Web теперь доступен в стабильной версии для производства.

Приведенный ниже ответ относится к тому времени, когда был задан вопрос.

Flutter Web не рекомендуется

На текущий момент я бы рекомендовал не использовать Flutter Web для производства, поскольку он находится в бета-версии. Команда Flutter все еще работает над улучшением качества, производительности и совместимости с браузерами. Вы должны быть осторожны при его использовании, так как можете столкнуться с ошибками и некоторыми другими осложнениями.

Кроме того, я считаю, что поддержка сообществом Flutter Web может быть ниже, поскольку она довольно новая.

Ограниченная поддержка браузера

Еще одним фактором, который меня беспокоит, является то, что веб-приложения Flutter на данный момент могут работать в ограниченных браузерах, что повлияет на охват вашей пользовательской базы:

• Chrome (мобильный и настольный)
• Safari (мобильный и настольный)
• Edge (для мобильных устройств и настольных компьютеров)
• Firefox (рабочий стол)

Что бы я предпочел?

Что ж, хотя может возникнуть проблема с обработкой разных кодовых баз для мобильных и веб-платформ, я бы все же предпочел придерживаться React JS, поскольку он намного стабильнее с лучшей поддержкой браузера и сообщества, в отличие от Flutter Web.

Удачи с вашим приложением! 🙂

Я не знаю, как использовать виджеты Flutter внутри приложения React. Но для решения других ваших проблем,

Поэтому я хочу разделить как можно больше кода между этими платформами, чтобы максимально избежать поддержки разных кодовых баз.

При отсутствии других ограничений это приводит к созданию единого приложения Flutter как для веб-, так и для собственного. Для такой маленькой команды, как три, нам все равно было проще, чем иметь несколько проектов.

Ключевым фактором при объединении наших первоначальных проектов в один был концепт мобильных браузеров. В мобильном браузере ваш веб-сайт должен выглядеть так же, как ваше мобильное приложение, если только у них не разные цели. И это автоматически происходит с проектами Flutter, если вы выводите точки останова макета из размера экрана. В противном случае вы бы дважды закодировали один и тот же узкий дизайн: во Flutter для собственных приложений и в React для web.

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

Также в веб-версии у вас может быть больше инструментов, чем в родном приложении, просто потому, что ваш экран позволяет это. Естественно, вы бы закодировали эту логику на JS. Но затем вы получаете приказ перенести это в собственные приложения. Не могли бы вы затем заменить свою логику JS логикой Dart, скомпилированной в JS и встроенной во фреймы? Это грязный путь.

Наконец, подумайте о платформах Mac, Linux и Windows, которые скоро появятся на Flutter. Если вам когда-нибудь понадобится собственное приложение для рабочего стола, вам понадобится тот же макет, что и в web.

Я хочу, чтобы мой сайт больше походил на веб-сайт, чем на одностраничное приложение.

Разница в ощущениях между веб-сайтом и одностраничным приложением заключается в основном в управлении состоянием и обработке URL. Вы можете сделать следующее, чтобы уменьшить его:

• Вводите URL-адреса для своих страниц. По умолчанию во Flutter каждое действие может выполняться под одним URL example.com/#/ -адресом . Затем окно кажется хрупким, поскольку нет URL-адреса для копирования и возврата. API маршрутизатора Flutter, выпущенный в октябре 2020 года, позволяет генерировать URL-адреса при любом изменении состояния вашего приложения и анализировать состояние из URL. Если вы все сделаете правильно, все на вашем экране станет функцией URL-адреса, как на традиционных веб-сайтах.
• Используйте url_stragegy package, чтобы ваши URL-адреса были example.com/path , а не example.com/#/path которые сразу кажутся поддельными.

Я не нашел другого способа сделать это, кроме как встраивать их в iframes, что не кажется хорошей идеей, или нет?

Нет, это не так. В основном потому, что вы получаете слишком узкий канал обмена сообщениями между окнами JS. Как бы вы прослушали поток блока Flutter в другом фрейме? Это заняло бы слишком много шаблонного кода. Также я не могу придумать простой процесс отладки.

Для меня у Flutter Web все еще есть недостатки:

• Загрузка занимает некоторое время.
• Многие специфические API-интерфейсы JS еще не реализованы.
• Многие сервисы, с которыми вы интегрируетесь, могут не иметь Dart SDK, хотя у них есть JS SDK. Например, я изо всех сил пытался начать Ably работать.
• Нет поисковой оптимизации.
• Вы не можете использовать em его в качестве экранного блока, поэтому масштабирование элементов может усложниться.

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

Чтобы было ясно, моя команда работала над собственным проектом web весь 2021 год. Теперь он прошел большую часть тестирования, но еще не выпущен. Для ощущения масштаба это торговая площадка из более чем 40 экранов.