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

Question

[Kaisar Kuanysh]

Доброе время суток, коллеги. Имеется такой стэк:
1) Flask (restapi) - сервер
2) Vuejs, которое общается с сервером через api
Появилась необходимость написать мобильную версию сайта (не адаптив, а именно отдельную версию, как vk.com и m.vk.com), как должна выглядеть реализация? Применять миксины на vuejs страницы, чтобы компоненты грузились в зависимости от устройства? Или же полностью написать отдельное vuejs приложение? Где именно должна происходить переадресация с site.com на m.site.com и каким скриптом? Хотелось бы узнать наиболее "элегантный" вариант без костылей

Answer 1

[ThunderCat]

троллейбусизбуханки.жпег
Во первых - мобильная версия плохо, во всех смыслах, и в разделении статистики, и в плане сео и в плане удобства. Вообще не понятно откуда назрело такое решение. Это была вынужденно-популярная тема лет этак 10-15 назад, когда и браузеры много не умели, и интернет был хреновый на мобилах, да и мобилы были попроще.
Во вторых, если уж так надо сильно-сильно-невтерпеж,
1) определяете в пыхе если это мобиль - редирект на мобильную версию, можно дублировать код жсом, и проверять при загрузке ширину вьюпорта, и тоже редиректить на мобильную версию.
2) Владимир дает вам идеальное решение - подшаманить адаптив и выдавать там его.

UPD: по комментам вывод:
1) Для мобильной версии заводите свои шаблоны и вьюшки, если у вас мвц или хотя бы нормальное разделение контент/код.
2) В современных мвц движках вообще есть понятие внутренних апликаций, типа админка/фронт, добавьте еще мобайл.

Comments

[Kaisar Kuanysh]

Во первых - мобильная версия плохо, во всех смыслах

Хорошо, опять же, бизнес задачи мобильной версии сильно отличаются от десктопной: мобильная версия имеет чат, бронирования, корзину и взаимодействует с десятками микросервисов, которые совершенно не нужны в десктопной версии. Как, извините, медиа запросы решат эту задачу? То есть я просто должен, например, на окно чата делать display none в десктопе или как? Может быть, я далеко чего то не догоняю

[Kaisar Kuanysh]

Короче говоря, задача требует совершенно иной html структуры для мобильной версии. А вопрос заключается в том, как лучше это реализовать

[ThunderCat]

Kaisar Kuanysh,

не адаптив, а именно отдельную версию, как vk.com и m.vk.com

совершенно противоречит этому

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

вы конечно извините, но это как б*я, я на десктопе не могу сделать то же что на мобиле??? Штааа? В том же вк/фб совершенно наоборот, в мобиле меньше функций, или они сильно упрощены. Никак не наоборот, и к разнице в функционале это не относится совсем. Задача мобильных сайтов была обеспечить разное интерфейсное взаимодействие с одинаковым апи, а не урезать/добавить функционал.

Не мне вам диктовать что и как делать конечно. Но вы хотя бы обозначьте в вопросе какая разница у вас в десктопе и мобиле, а то из вопроса понятно что вам нужно просто по разному отображать сайт.

[ThunderCat]

Kaisar Kuanysh, обновил ответ

[Kaisar Kuanysh]

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

[ThunderCat]

Kaisar Kuanysh,

Вопрос был поставлен очень просто и является техническим.

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

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

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

[root365]

Kaisar Kuanysh, друщище. Я не шарю во vue и flask’е, но могу сказать что за техническими вопросами подобных стеков сегодня стоит обращаться точно не на тостер) Давно для себя понял что из веб- разработчиков в основном удаленщики и мамкины верстальщики с бюджетных учреждений, которые вместо развития и новых стеков выбирают стабильную зп и прыщи на жопе.
А в свободное время меряются у кого 10см длиннее. Один сказал про media запросы и думает что годнейший совет дал, второй подхватил и помчал. К сожалению так работает тостер. И ни один ни второй не понимают что вся IT сфера это в первую очередь сфера обслуживания бизнеса. И решают не рядовые разрабы а большие дяди с кошельками... а «тостер» в принципе остается по большей части такой же странной статья-помойкой как и сам хабр) хотя по сетевому администрированию тут есть толковые ребята.

Желаю удачи в поиске ответов и если найдете годное решение - отпишите UPD по возможности. может кому пригодится в будущем. :)

[ThunderCat]

root365,

Я не шарю во vue и flask’е,

"а так же нихера толкового посоветовать не могу, но повыеживаться буду". То что вы лично ничего не понимаете - больше ваша беда, нежели некомпетентность местных товарищей. И да, самым логичным ответом на поставленный вопрос было допилить адаптив. Вы нихера не читая вклиниваетесь в обсуждение своим компетентным мнением. По комметам человеку дали решение - отдельная апликация под мобильный контент, со своими шаблонами и вьюшками. Ничего нового не придумали еще, сильвер буллет не существует, все нужно пилить ручками.

И ни один ни второй не понимают что вся IT сфера это в первую очередь сфера обслуживания бизнеса.

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

[root365]

ThunderCat, друг мне похер на твое мнение) Живи как знаешь, не нужно меня упоминать. Я лишь говорю о том что весь "тостер" выглядит как помойка где каждый пытается выглядеть круче другого. И до сих пор я не переходил на личности, по скольку я не знаю какой у тебя опыт и с какими стеками ты работаешь) Зато ты видать мой кореш, раз так уверенно изъясняешь за то, что я понимаю, а что нет)
Просто расстраивает, что есть конкретный вопрос, ждешь конкретных мыслей касаемо вопроса, получаешь левые советы о том как лучше избежать того о чем спрашиваешь. И практически все что связано с вебом именно на тостере выглядит как вечный холивар. И хоть вопрос задан не совсем корректно, я просто посоветовал чуваку не гореть и задать его на другом форуме где люди более компетентны и спокойнее реагируют, а не дают оху***ительные ответы вроде "делай редирект через php, учитывая вьюпорт" .... (СЕРЬЁЁЁЁЁЗНО чувааааак?))) забери все ачивки тостера себе, и кстати тебе с кембриджа не звонили ещё?
зато вы**бонов и гонора больше чем помощи. В этом и проблема.

[ThunderCat]

root365,

делай редирект через php, учитывая вьюпорт

ты это серьезно? То есть, вот так ты видишь ответ? Ну ок, то есть то что это 2 отдельных метода, один на стороне сервера, а другой на стороне клиента ты вообще не различаешь... чувак, иди школу закончи, удели внимание чтению.

[Kaisar Kuanysh]

root365, да, я примерно понимаю, что тут, как правило, сидят люди со стэком (html, css, js, php, mysql) и дальше ходить даже и не думали
ThunderCat друг, я просил решение, которое и близко не должно касаться css. Мне нужен элегантный редирект с десктопа на мобилу. Я несколько раз повторил, что таковы бизнес задача и я нигде не просил влиять на нее. Я лишь просил решение правильно поставленного вопроса. Я не отношусь к вашей шайке фрилансеров, которые могут от и до решать задачи как им самим хочется, и костыли или полу-решения через какие-то "медиа запросы" (которые совершенно не нужны в мобильной версии) мне другие разработчики не простят. Я тебе открою секрет, бывают такие веб-приложения, где мобильная версия в корне отличается от десктопной, тот же ВК. Хочешь сказать, они в 2020 году делят мобильную версию от десктопной только потому что не умеют юзать твои media запросы?). Дружище, с твоими знаниями рано лезть отвечать на вопросы в таких форумах). С чего ты взял что тут вообще где то есть MVC? Или ты других паттернов не знаешь?

[ThunderCat]

Kaisar Kuanysh,

Я несколько раз повторил, что таковы бизнес задача и я нигде не просил влиять на нее.

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

я просил решение, которое и близко не должно касаться css.

читай по губам:определяете в пыхе если это мобиль - редирект на мобильную версию,, и да, я написал пых, но никто не запрещает вам получить юзерагент питоном/нодой или с++. Если не отловилось на бэке (а тоакое бывает, например прокся режет юзерагент или клиент намеренно сккрывает его, например через тор), определяем яваскриптом размер вьюпорта и если надо делаем редирект на моб. версию. Это не костыли, не рокет сайнс, что кстати делает и фейсбук, и вк, и что, если вы такой б*дь суперразработчик, вы могли посмотреть в заголовках того же фб/вк сами.

Я тебе открою секрет, бывают такие веб-приложения, где мобильная версия в корне отличается от десктопной, тот же ВК.

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

Хочешь сказать, они в 2020 году делят мобильную версию от десктопной только потому что не умеют юзать твои media запросы?).

Нет, не по этому, а только по тому что еще 5-7 лет назад (а мобильная версия у них появилась гораздо раньше) это была реальная необходимость, а сейчас переделывать - практически неподъемный труд.

С чего ты взял что тут вообще где то есть MVC?

а с чего ты вообще взял что я это взял? если у вас мвц или хотя бы нормальное разделение контент/код. Но читать, видимо, не ваше, чукча не читатель, чукча писатель...

[Kaisar Kuanysh]

ThunderCat,

Нет, не по этому, а только по тому что еще 5-7 лет назад (а мобильная версия у них появилась гораздо раньше) это была реальная необходимость, а сейчас переделывать - практически неподъемный труд.

Они недавно полностью переделали мобильную версию.

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

Банально, в чате ВК на десктопе нельзя напрямую снять видео в формате stories, в отличии от мобильной версии.

а с чего ты вообще взял что я это взял? если у вас мвц или хотя бы нормальное разделение контент/код. Но читать, видимо, не ваше, чукча не читатель, чукча писатель...

В вопросе я написал, что есть сервер-side на flaske и client-side на vuejs, который общается с сервером через api, НИ О КАКОЙ mvc тут даже речи быть не может.

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

В своем вопросе я написал: "Появилась необходимость написать мобильную версию сайта (не адаптив, а именно отдельную версию, как vk.com и m.vk.com), как должна выглядеть реализация?"

Но читать, видимо, не ваше, чукча не читатель, чукча писатель...

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

Ладно, желаю удачи с таким характером в мире айти, спасибо за уделенное время :)

[ThunderCat]

Они недавно полностью переделали мобильную версию.

угу, только это никак не сопоставимо с трудозатратами на объединение версий.

Банально, в чате ВК на десктопе нельзя напрямую снять видео в формате stories, в отличии от мобильной версии.

Вы путаете возможности десктопа / мобильного и возможности мобильной версии/десктопной версии. То есть в мобиле есть функция экспорта фото/видео в браузер с камеры, и это можно использовать на всех сайтах где есть загрузка видео/фото. Про функционал - заливку сторис - разницы нет, в итоге я могу сделать то же самое с десктопа. Результат будет тот же.

В вопросе я написал, что есть сервер-side на flaske и client-side на vuejs, который общается с сервером через api, НИ О КАКОЙ mvc тут даже речи быть не может.

то есть все еще игнорируете ответ... Ну что же, упрямство тоже иногда полезная черта. нормальное разделение контент/код во фласке все же есть, как и шаблоны.

Появилась необходимость написать мобильную версию сайта (не адаптив, а именно отдельную версию, как vk.com и m.vk.com), как должна выглядеть реализация?

То есть - повторить функционал, но для мобилы. Про то что функционал в корне отличается ни слова. Ну ок, в составлении тз вас ждет много сюрпризов, как и в целом во взаимодействии с заказчиками, да и разработчиками тоже.