Преимущества и недостатки создания одностраничного веб-приложения [закрыто]


52

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

В настоящее время мой прототип представляет собой традиционную многостраничную настройку, однако я искал backbone.js, чтобы очистить и применить некоторую структуру к моему коду Javascript (jQuery). Кажется, что хотя backbone.js можно использовать в многостраничных приложениях, он больше подходит для одностраничных приложений. Я пытаюсь составить список преимуществ и недостатков использования одностраничного подхода к разработке приложений. Пока что у меня есть:

преимущества

  • Все данные должны быть доступны через какой-то API - это большое преимущество для моего варианта использования, так как я все равно хочу иметь API для своего приложения. В настоящее время около 60-70% моих вызовов для получения / обновления данных осуществляется через REST API. Создание одностраничного приложения позволит мне лучше протестировать мой REST API, поскольку само приложение будет его использовать. Это также означает, что по мере роста приложения сам API будет расти, поскольку именно это приложение использует; нет необходимости поддерживать API в качестве дополнения к приложению.

  • Более отзывчивое приложение - поскольку все данные, загружаемые после начальной страницы, сводятся к минимуму и передаются в компактном формате (например, JSON), запросы данных должны, как правило, выполняться быстрее, и сервер будет выполнять немного меньше обработки.

Недостатки

  • Дублирование кода - например, код модели. Я собираюсь создавать модели как на стороне сервера (в данном случае на PHP), так и на стороне клиента в Javascript.
  • Бизнес-логика в Javascript - я не могу привести конкретные примеры того, почему это было бы плохо, но мне просто не по вкусу иметь бизнес-логику в Javascript, которую может прочитать каждый.
  • Утечки памяти Javascript - поскольку страница никогда не перезагружается, возможны утечки памяти Javascript, и я даже не знаю, с чего начать их отладку.

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

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


Basecamp , новая версия basecamphq, довольно хорошо справляется с одностраничной настройкой IMO.
Хакан Дериал

Утечки памяти можно обнаружить с помощью инспектора кучи Chrome
Джоери Себрехтс,

обязательно xkcd.com/1309
Питер Б

Ответы:


17

Самым большим недостатком является то, что на клиенте должен быть включен JavaScript и он должен быть достаточно мощным, чтобы запустить его в достаточном количестве. Также сложнее удовлетворить проблемы доступности или что-то еще, что основано на анализе статического HTML (хотя что-то, зная ваш конкретный API, вероятно, может быть лучше, чем анализ HTML). Наконец, легче иметь значительные утечки памяти.

Что касается дублирования кода или размещения бизнес-логики на клиенте - я не уверен, сколько из этого вам нужно сделать. Если модель на клиенте - это View-Model (модель, которая соответствует миру с точки зрения пользовательского интерфейса, а не бизнес-модель), то логика, которая соответствует ViewModel вплоть до бизнес-модели, может находиться на клиенте, сервер, или немного того и другого. Это зависит от того, как вы относитесь к тому, чтобы ваш API содержал специфический для клиента фасад, а не к тому, чтобы клиент преобразовывал входные данные пользовательского интерфейса в вызовы API.

Вы также можете посмотреть на knockout.js. Я не могу сказать, лучше ли это, чем магистраль, но это может лучше соответствовать вашему проекту.


Да, я думаю, что большая часть дублирования кода будет проверять данные, что хорошо. Я согласен с требованием включения javascript, так как меня не интересует доступность этого проекта (например, программа чтения с экрана и что нет). Что касается проблемы утечек памяти в javascript, которая была моей проблемой, со ссылкой, приведенной в комментариях к моему вопросу, это действительно сводит на нет (в любом случае, Chrome - мой основной браузер для разработки).
ryanzec

7

Недостатки, которые я часто вижу в одностраничных веб-приложениях:

  • Невозможность ссылки на определенную часть сайта, часто есть только 1 точка входа.
  • Неисправные кнопки назад и вперед.
  • Использование вкладок ограничено или не существует.

(особенно мобильный :)

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

Все это можно обойти, но из того, что я видел, большинство создателей сайтов нет.


9
1, 2 и 6 - просто симфомы одной и той же проблемы. То, что создатель не использует историю API / хеширование.
Мартин Хансен

11
Этот ответ устарел. Большинство одностраничных прикладных сред имеют способ решения вышеуказанных проблем
Луис,

@ Луис, пока есть технология, слишком часто она не используется.
Питер Б

5

Есть один очень важный клиент, который никогда не запускает Javascript: Google Crawler (по состоянию на 2012 год) . (Бинг тоже не запускает JS).

Вам нужно будет предоставить разумную не AJAX-версию каждой страницы, которая должна быть проиндексирована, или ссылки на страницу, которая должна быть проиндексирована.

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

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

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


4
Робот Google теперь читает и даже выполняет Javascript. См. Googlewebmastercentral.blogspot.com/2011/11/…
jfrankcarr

2
Для этого конкретного вопроса, это приложение для управления проектами. Вероятно, не SEO-достойный сайт.
Иордания,

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

1

3

-Дублирование кода - Например, код модели. Я собираюсь создавать модели как на стороне сервера (PHP в данном случае), так и на стороне сервера в javascript.

Вы находитесь в мире PHP, но в мире .NET существуют стратегии генерации кода для автоматического создания прокси JavaScript WCF. Смотри здесь

Я не знаю, какие опции могут быть доступны, чтобы вам не приходилось создавать удаленные объекты самостоятельно в JavaScript в приложении PHP, но это вариант для тех, кто пишет одностраничные приложения в .NET.


0

Выбор не должен быть одним или другим. JWt - это, например, веб-инструментарий, который реализует идеальную иллюзию многостраничной веб-страницы, но это одна страница. Кроме того, он распознает ботов и браузеры Google, у которых нет javascript (попробуйте его), и переключится на традиционную многостраничную модель, когда обнаружит их.

Короче говоря:

  • не нужно писать API (но вы все равно можете, если хотите)
  • адаптивное приложение: для каждого клика пользователя требуется не более одного обхода сервера (плюс выборка изображений)
  • нет дублирования кода
  • нет бизнес-логики на стороне клиента
  • минимальная сложность на стороне клиента
  • поисковые роботы могут индексировать его

1
JWt - это Java-инструментарий. Вопрос о PHP.
Джори Себрехтс
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.