1. Одностраничное приложение против многостраничного приложения
2. Создание одностраничного приложения - преимущества, мифы и подводные камни
3. Пользовательский опыт
4. Решение
5. Решение
6. 3. Разработка
7. Примеры одностраничных приложений
8. Netflix
9. Instagram
10. LinkedIn
11. СПА каркасы
12. AngularJS
13. React.JS
14. Aurelia
15. Vue.JS
16. Заключение

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

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

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

Одностраничное приложение против многостраничного приложения

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

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

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

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

Почему это важно? Потому что еще в 2009 году универсальный стандарт для времени загрузки страницы считался равным 2 секундам. Должен ли я упомянуть, что с тех пор ожидания пользователей выросли еще выше?

А вот как выглядит восприятие времени загрузки:

Другими словами, вот как пользователи видят производительность веб-приложения:

• 0,1-0,2 секунды - такой немедленный ответ позволяет пользователю считать приложение продолжением себя.
• 1 секунда - пользователь начинает замечать задержанный ответ и отделяется от опыта
• 10 секунд - они отвлекутся и будут уже думать о чем-то другом и, скорее всего, уйдут и забудут о вашем приложении

Но что это за 11,8 секунд на нашей временной шкале? Это среднее время загрузки страницы для веб-сайтов в Интернете. Излишне говорить, что у нас есть возможности для совершенствования.

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

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

Это момент, когда в игру вступает одностраничная архитектура приложения. Основная идея SPA заключается в том, чтобы избежать перезагрузки всей страницы, а вместо этого переписать определенное место на текущей странице, используя запросы AJAX.

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

Создание одностраничного приложения - преимущества, мифы и подводные камни

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

1. Пользовательский опыт

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

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

В первые дни приложений SPA была одна большая проблема с точки зрения пользовательского интерфейса, который, по сути, берет свое начало от многостраничных веб-приложений: кнопка «Назад».

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

Решение

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

Вот пример события hashchange, используемого в Gmail, которое вы можете даже проверить самостоятельно:

Будучи одностраничным приложением, Gmail не отправляет вас на новую страницу каждый раз, когда вы выполняете действие. Вместо этого они реализуют маршрут хеширования, который включает всю навигацию, к которой вы привыкли в своем приложении.

SEO осложнения

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

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

Проблема заключалась в том, что веб-сканеры не были искривлены для SPA. Они не могли выполнить javascript, и поэтому при попытке посетить ваши URL-адреса с хэш-тегами сканер никуда не денется, а страницы не обновятся, ваш сайт не будет проиндексирован. Так как же сделать одностраничное приложение SEO-дружественным?

Решение

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

От

www.singlepageapp.com #! key1 = value1

к

www.singlepageapp.com ? _escaped_fragment_ = key1 = value1

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

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

3. Разработка

Большинство обученных разработчиков на вашем пути получат больше знаний и опыта работы с традиционными шаблонами MPA. По понятным причинам. С другой стороны, если вы решите создать одностраничное веб-приложение, оно может оказаться более простым, быстрым и менее сложным способом достижения ваших конечных целей из-за подходов к проектированию, которые используются в качестве передового опыта при разработке приложений SPA ,

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

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

Примеры одностраничных приложений

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

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

Netflix

Netflix это всемирный потоковый сервис с рыночной капитализацией в 169,7 млрд долларов. Они заново изобрели способ, которым мы смотрим фильмы и шоу, давая нам то, что мы все хотели, прежде чем мы даже знали, что хотим этого:

1. Разгул-смотреть
2. Смелость, чтобы пригласить влюблен, не будучи слишком очевидным

Instagram

Instagram «Где дикие бывшие», социальная сеть для обмена фотографиями и видео, которая стала лучшей сделкой Facebook на миллиард долларов. Instagram работает на собственной платформе Facebook, предназначенной для разработки собственных мобильных приложений, React Native.

LinkedIn

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

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

• щебет
• Pinterest
• Twitch
• Uber
• Apple.com
• PayPal
• Autodesk
• тесла
• Skype

И это только некоторые из них.

СПА каркасы

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

Наличие фреймворков на выбор, когда вы решите, что хотите разработать одностраничное веб-приложение, крайне важно, поскольку оно может напрямую влиять на то, насколько быстро и доступно это будет для вас. Конечно, если бы мы сравнили подходы SPA и MPA в этой плоскости, одностраничные приложения имели бы нулевые шансы. Но в действительности вам не нужно иметь как можно больше фреймворков. На самом деле, вам нужен один. Тот, который соответствует вашим конкретным требованиям.

Вот некоторые из самых популярных фреймворков для создания одностраничного приложения:

AngularJS

Решили сделать одностраничное приложение используя AngularJS ? Вы будете в отличной компании! Созданный в Google, Angular Framework активно использовался его отцами-основателями, а также тысячами других проектов по всему миру.

Есть несколько существенных преимуществ Angular по сравнению с любой другой платформой, используемой для создания SPA. Во-первых, эта структура использует лучшие практики чистого кодирования: TypeScript помогает инженерам избежать распространенных ошибок. Это огромное преимущество для крупных проектов или проектов, требующих долгосрочного технического обслуживания. Для дальнейшего чтения на Angular JS, проверьте Эта статья ,

React.JS

реагировать это, пожалуй, самая модная SPA-инфраструктура на рынке. Разработанный инженерами Facebook для внутренних целей, за последние несколько лет React только развивался. В нашем недавнем сравнении ReactJS с AngularJS мы довольно подробно указали на различия и сходства фреймворков. Но единственное, что вы должны сделать сейчас, когда у React есть, а у Angular нет, - это Virtual DOM - технология, которая может сделать ваше уже быстрое приложение еще быстрее.

Aurelia

Aurelia является одной из основ хипстеров . Это гораздо реже, чем React или Angular, но поклонники отмечают, что, будучи современной платформой, Aurelia соответствует всем последним стандартам Javascript и предлагает довольно дальновидные решения.

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

Vue.JS

Vue.JS это еще один фреймворк с открытым исходным кодом, который берет свои корни в Google. Его создатель Эван Ю работал над несколькими проектами в Google, используя Angular. Он обнаружил, что есть задачи, для которых ему нужно что-то более легкое и менее сложное, чем Angular. В то время React, который мог бы стать для него решением, не был широко известен, поэтому он решил создать свою собственную платформу. И так родился VueJS, ребята.

Vue часто называют ребенком двух прекрасных родителей: React и Angular. И это понятно, так как Эван Вы старался изо всех сил унаследовать все лучшие функции от обеих платформ. VueJS предлагает виртуальный DOM, интеграция с другими библиотеками и фреймворками проста, модульная и быстрая в разработке. И хотя некоторые говорят, что Vue потенциально может занять лидирующую позицию из-за своего потенциала, мы сомневаемся, что это произойдет в ближайшее время. Это заставляет нас сделать вывод, что, как и в случае с Aurelia, нанять разработчиков VueJS может быть сложнее, чем это было бы с Angular или ReactJS.

Заключение

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

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

• Будет ли ваше приложение мульти -платформой? Как мы уже говорили выше, архитектура SPA оставляет вам многократно используемый внутренний код, и это очень помогает ускорить разработку и сделать ее более доступной. В то же время, если вы создаете только веб-приложение, создание MPA, скорее всего, будет более экономичным вариантом.

• Насколько вы полагаетесь на SEO? Вы не можете игнорировать тот факт, что с одностраничными приложениями будет немного сложнее проиндексировать ваш сайт. Не забывайте, однако, что существует множество бизнес-моделей, которые не подразумевают, что ваш проект сильно зависит от SEO.

• У вас есть долгосрочное видение продукта? Похоже, плохо не знать, что вы хотите сделать со своим проектом? Возможно, но это не так. Четное Поначалу Instagram не был Instagram , Не поймите меня неправильно, СПА являются гибкими и позволят вам пойти в другом направлении. Но все же, если вы не уверены, что сможете противостоять желанию добавить еще одну страницу, подумайте о выборе шаблона MPA.

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

Кодирование ниндзя Это сеть проверенных профессиональных разработчиков, и вы можете рассмотреть вариант, если вам когда-нибудь понадобится профессионал, который не только имеет практический опыт работы со SPA и MPAs, но и поможет вам найти лучшее решение для ваш конкретный случай. Мы работаем только с квалифицированными разработчиками, которые прошли наш трехэтапный процесс тестирования и готовы приступить к работе над вашим проектом. Нужен разработчик прямо сейчас? Получите бесплатную квоту.