Как проектировать адаптивное spa приложение?

Question

[Виталий]

Вопрос о компоновке и маршрутизации. Экраны мобильного приложения меньше по вместимости, следовательно самих экранов больше. В настольном варианте ситуация обратная. Следовательно, обработчики тоже разные: в одном случае это переход на новый экран, в другом - открытие модального окна. Значит ли это, что адаптивная вёрстка неприменима для приложений и придётся делать различные представления на разные устройства? Или всё же можно грамотно строить адаптивные приложения? Желательно использовать при этом динамическую загрузку модулей.

Использую Angular, начинаю осваивать Ionic.

Comments

[napa3um]

Можно.

[Виталий]

napa3um: поделитесь же опытом, мудрый человек!

[napa3um]

Виталий: так вы проблему не описали.

[Виталий]

napa3um: не понимаю, как это делается. Вот к примеру: есть кнопка. По нажатии на неё в мобильной версии идёт редирект на новый экран. В настольной версии открывается модальное окно. Как это реализовать?

[napa3um]

Виталий: роутер в SPA может и страницу полностью обновить, и модальное окно показать, в чём проблема?

Answer 1

[Никита Гущин]

Значит ли это, что адаптивная вёрстка неприменима для приложений и придётся делать различные представления на разные устройства

Смысл адаптивной верстки в том, что содержимое подстраивается под размеры экрана. Ваш кэп :) В приведенном примере нету противоречий с принципами адаптивки

Следовательно, обработчики тоже разные: в одном случае это переход на новый экран, в другом - открытие модального окна.

Это можно реализовать внутри приложения. Вот пример реакта и react-router v4: https://reacttraining.com/react-router/web/example... . Там изображения в галерее открываются либо на странице, либо модальным окном. В зависимости от того, как была открыта страница (заметьте, что url у элементов галереи одинаковый при разных способах отображения)

Или всё же можно грамотно строить адаптивные приложения?

Да, можно. Но надо все моменты заранее продумывать

Желательно использовать при этом динамическую загрузку модулей?

Это позволяет оптимизировать производительность (время начального рендера, объем передаваемых данных\кода, время парсинга скриптов и так далее). Если вам это нужно - используйте)

Comments

[Виталий]

Значит ли это, что url-маршрутизацию мы делаем desctop-first? Или наоборот mobile-first? Или я не понял эту идею...

[Никита Гущин]

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

В вопросе адаптивности хороший подход - mobile first. Но его надо внедрять начиная от создания макетов (вайрфреймов) и далее по цепочке. То есть делаете какую-то фичу для телефонов, потом расширяете ее на десктопах. Но большинство url и прочего должно быть одинаковое...

Answer 2

[Роман Александрович]

Идеология компонентов как раз и заключается в том что бы один компонент описывался так что бы его можно было переиспользовать в нескольких местах. Благодаря этому вы не копируете куча кода по 500 раз в разных местах.
Что качается адаптивности то существует куча различных сеток позволяющих верстать не боясь за адаптивность.
Примеры: bootstrap или material ui

Comments

[Виталий]

Вы говорите только про сетку, я же говорю о компонентах как "представление + логика". Да, можно легко сверстать какой-нибудь блог, пользуясь сетками, где задача - какие-то блоки показать, какие-то скрыть или переиначить. Здесь речь ведётся о том, что в spa кроме внешнего вида компонентов меняется ещё и поведение.

[Роман Александрович]

Вы что нибудь знаете о flux или redux из реакта?
Как только вы поймёте что такое например редакс и как он работает многие вопросы отпадут. Концепция примерно такая вся логика приложения ложится на роутеры и редукс. Они отвевчают за передачу и потоки данных. И на основе получаемых данных отрисовываются представления.

Answer 3

[Ярослав Сиваков]

Если экраны сильно отличаются, я бы посоветовал делать 2 разных приложения, но с частично общими компонентами (которые выглядят одинаково или почти одинаково). В противном случае, сложность вёрстки легко может выйти за разумные пределы.