Одностраничные приложения

Что такое одностраничное приложение (SPA)? SPA - это подход к разработке веб-приложений, использующий...
Поведенческое отличие от традиционных веб-приложений
Безопасность
История браузера
Другие соображения
Особенности браузера
Технические подходы
лязг
Контроллеры
маршрутизация
Локальное хранилище

Что такое одностраничное приложение (SPA)?
SPA - это подход к разработке веб-приложений, использующий современные браузеры и HTML 5 для переноса пользовательского интерфейса и логики приложения с веб-серверов на конечные браузеры. Приложение веб-страницы (HTML, JavaScript и CSS) извлекается с одной загрузкой страницы, или соответствующие ресурсы динамически загружаются и добавляются на страницу по мере необходимости, обычно в ответ на действия пользователя. Страница не перезагружается в любой точке процесса и не передает управление на другую страницу.

Как это достигается?

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

Двусторонняя связь клиентского приложения и веб-сервера заменяет односторонние запросы от браузера (веб-сокеты HTML 5, Socket.io, SignalR).

Локальные возможности хранения данных в браузере для повышения производительности и автономного доступа заменяют файлы cookie и интенсивную загрузку данных с веб-сервера (локальное хранилище HTML 5).

Поведенческое отличие от традиционных веб-приложений

Клиент должен включить JavaScript.
Существует только одна точка входа на сайт. Ссылка на определенную часть сайта невозможна.
Неисправные кнопки «назад» и «вперед», так как приложение не меняет страницы, оно меняет состояние. Браузеры не были предназначены для записи изменений в состояниях, они записывают страницы. Но это можно сделать с дополнительными усилиями.
Не удается перезагрузить страницу, внезапная потеря сети возвращает вас к началу сайта.
Мобильный опыт - займет очень много времени, чтобы загрузить. Не работает вообще.
Может быть загружен и запущен из локального файла с хранилищем на основе браузера (хранилище HTML5).
В режиме реального времени двусторонняя связь между клиентским приложением и веб-сервером заменяет односторонние запросы из браузера (HTML 5 Web Sockets, Socket.io, SignalR)
Локальные возможности хранения данных в браузере для повышения производительности и автономного доступа заменяют файлы cookie и интенсивную загрузку данных с веб-сервера (локальное хранилище HTML 5).

Когда нужно подавать заявку на одну страницу?

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

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

Поисковая оптимизация (SEO)

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

Одним из способов может быть помещение хеш-фрагментов в URL-адреса, встроенные в SPA. Такие URL сканируются некоторыми поисковыми системами (не всеми), такими как Google. Другой подход, используемый серверно-ориентированными веб-фреймворками, такими как ItsNat на основе Java, состоит в том, чтобы визуализировать любой гипертекст на сервере. Разработчики могут решить, какие состояния страниц должны сканироваться веб-пауками для SEO, и иметь возможность генерировать требуемое состояние во время загрузки, генерируя простой HTML вместо JavaScript.

Безопасность

Одностраничные приложения немного более уязвимы как к атакам с использованием межсайтовых сценариев (XSS), так и к мошенничеству с использованием межсайтовых запросов (CSRF). Мы должны быть немного осторожнее при создании SPA, чтобы обезопасить такие атаки, хотя серверные приложения также уязвимы.

http://stephenwalther.com/archive/2013/03/05/security-issues-with-single-page-apps

История браузера

При использовании SPA по определению «одна страница» модель нарушает дизайн браузера для навигации по истории страниц с помощью кнопок «Вперед» / «Назад». Это создает препятствие для удобства использования, когда пользователь нажимает кнопку «назад», ожидая предыдущего состояния экрана в SPA, но вместо этого выгружается одна страница приложения и отображается предыдущая страница в истории браузера.

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

Для дальнейшего решения этой проблемы в спецификации HTML5 были введены pushState и replaceState, обеспечивающие программный доступ к фактическому URL и истории браузера.

Другие соображения

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

Некоторые общие улучшения производительности включают в себя:

Упростите CSS-селекторы, чтобы минимизировать затраты на перерасчет и компоновку.
Минимизируйте манипуляции с DOM и удалите ненужные элементы.
Избегайте привязок данных, когда количество элементов DOM исчисляется сотнями.
Очистите обработчики событий в экземплярах представления, которые больше не нужны.
Попробуйте сгенерировать большую часть HTML на стороне сервера. Оказавшись на клиенте, создайте вспомогательное представление с существующим элементом DOM.
Есть региональные серверы для быстрого поворота.
Используйте CDN для обслуживания библиотек и статических ресурсов.
Проанализируйте свою веб-страницу с помощью таких инструментов, как YSlow, и выполните действия, описанные в отчете.

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

Вы можете минимизировать JavaScript и CSS с помощью: оптимизатора RequireJS, UglifyJS и Jammit. Они также объединяют ваши изображения и значки в один спрайт-лист для еще большей оптимизации.

Особенности браузера

Существует множество браузеров, которые мы должны поддерживать. Библиотеки, такие как jQuery и Zepto, уже абстрагируют API манипулирования DOM, но есть и другие различия в JavaScript и CSS, которые требуют дополнительных усилий с нашей стороны. Следующие рекомендации помогут вам справиться с этими различиями:

Используйте инструмент, такой как Sauce Labs или BrowserStack, чтобы протестировать веб-сайт в нескольких браузерах и операционных системах.
Используйте polyfills и shims, такие как es5shim и Modernizr, чтобы определить, поддерживает ли браузер данную функцию, прежде чем вызывать API.
Используйте перезагрузки CSS, такие как Normalize, Blueprint и Reset Эрика Майера, чтобы начать с чистого листа во всех браузерах.
Используйте префиксы поставщиков (-webkit-, -moz-, -ms-) в свойствах CSS для поддержки различных механизмов рендеринга.
Используйте диаграммы совместимости браузера, такие как findmebyIP и canIuse.

Управление различиями в браузере может потребовать проб и ошибок.

Технические подходы

Клиентские шаблоны

Самыми популярными шаблонными системами на основе JavaScript являются шаблоны Underscore и Handlebars.

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

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

Пользователи ExpressJS могут даже использовать тот же шаблонизатор на клиенте, что и на сервере, что дает вам преимущество обмена шаблонами между клиентом и сервером.

лязг

Веб-страница создается путем загрузки фрагментов HTML-фрагментов и данных JSON вместо получения полного HTML-кода с веб-сервера при каждом запросе. (Backbone.js, pjax, jQuery, Upshot.js)

Контроллеры

Беспорядок в коде JavaScript, который обрабатывает запутанные DOM и манипуляции с данными, логику приложения и вызовы AJAX, заменяются контроллерами, которые разделяют представления и модели с использованием шаблонов MVC или MVVM. (Backbone.js, Knockout.js, JavascriptMVC)

маршрутизация

Выбор представлений и навигации (без перезагрузки страницы), сохраняющих состояние страницы, элементы и данные (History.js, Crossroads.js, Backbone.js, pjax, HTML5 History API). Двусторонняя связь клиентского приложения и веб-сервера заменяет одну. запросы от браузера (веб-сокеты HTML 5, Socket.io, SignalR)

Локальное хранилище

Возможность хранения данных в браузере для обеспечения производительности и автономного доступа заменяет файлы cookie и интенсивную загрузку данных с веб-сервера (HTML 5 Local storage). Может быть загружен и запущен из локального файла с хранилищем на основе браузера (хранилище HTML5)

Другие подходы к дизайну для рассмотрения

AJAX
Плагины для браузера
Транспорт данных (XML, JSON и AJAX)
Архитектура тонкого сервера
Толстая серверная архитектура с состоянием
Толстая серверная архитектура без сохранения состояния

Похожие

Что такое маскировка?
Cloaking - один из самых старых инструментов, когда речь заходит о Black Hat SEO. Давайте посмотрим, как это работает, каковы его последствия и какие аспекты следует учитывать с точки зрения компьютерной безопасности. Чтобы понять, что такое маскировка, сначала необходимо знать, как происходит процесс распознавания и индексации сайтов движков Клоакинг является одним из старейших инструментов в отношении

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

Что такое SEM, SEO, SEA и SMO?
Прежде всего, важно отметить, что SEM, SEO, SEA и SMO имеют общую цель: получение видимости и, следовательно, трафика для веб-сайта. Мы находим эту общую точку

BruceClay - Siloing для SEO - Как структурировать свой сайт
Этот шаг в руководстве по SEO охватывает важную стратегию, поэтому не пропустите эту! Вы собираетесь научиться организовывать контент своего веб-сайта таким образом, чтобы он четко отражал актуальность темы для поисковых систем. Правильное внутреннее связывание (так называемое «виртуальное хранилище») и хорошая архитектура сайта закладывают основу для того, чтобы ваш сайт получил рейтинг по вашим ключевым словам и фразам. На этом уроке вы узнаете, что такое бункеры, в том числе, что это

В чем разница между SEO и SEA?
SEO и МОРЕ? Профессиональный жаргон в мире онлайн-маркетинга часто сбивает с толку. Yellowshape объясняет основные различия между SEO и SEA ниже. И да, они выходят за рамки одной буквы. Набрать высокие баллы в поисковых системах Люди ищут в поисковой системе Google не название вашей компании, а продукты и услуги, которые вы также предлагаете. Более того, никто не заглядывает за пределы первой

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

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

SEO Audit, эксперт SEO Site Audit Service (быстрая диагностика проблем)
Получите лучший SEO аудит в отрасли Ваш сайт нуждается в SEO-аудите? Нет ничего лучше, чтобы предоставить вам SEO-аудит сайта и план действий, чем Ignite Visibility. SEO Audit, эксперт SEO Site Audit Service (быстрая диагностика проблем) Вы могли заметить значительное снижение трафика в последнее время. Или, что еще хуже, возможно,

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

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

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

Но это не означает, что тег H1 не имеет SEO , Хотите ли вы понять, что это такое, а затем, как это сделать, чтобы оптимизировать заголовок H1?
Работая в сфере интернет-маркетинга в течение восьми лет (семь из которых были посвящены SEO и поисковому маркетингу), я работал в нескольких компаниях, которые использовали программы «черная шляпа SEO » и «белая шляпа SEO ». Теперь, когда я размышляю о своем опыте, я укрепляю свою веру в то, что реализация этических стратегий в стиле «белая шляпа» является исключительно результатом творческого и красивого контент-маркетинга. Black Hat

Это означает, что если ключевое слово, которое будет оптимизировано в первом H2, - это «Что это?
Это означает, что если ключевое слово, которое будет оптимизировано в первом H2, - это «Что это?», Потому что указание будет просто «Что такое + продукт», так что редактор или составитель может применять его без необходимости импровизировать. Мы делаем этот шаблон для всех заголовков и переходим к следующему вопросу. Расширение информации о содержании Это самая сложная часть автоматизации. Определив блоки и заголовки, мы должны уделить больше внимания

Совет, сделайте это, потому что вы уверены, что в противном случае клиенты спросят вас: «Но что, в чем смысл?
Совет, сделайте это, потому что вы уверены, что в противном случае клиенты спросят вас: «Но что, в чем смысл? " Немного SEO с Excel Ну, это все красивые данные, но что я делаю, чтобы сделать их более удобочитаемыми для себя или для клиента, если он должен внести изменения? Вот несколько примеров улучшения. 200, 301, 302 или 404? Мы знаем, что Google не любит ошибок, и мы должны ограничить количество рефералов до минимума.

Но что такое Фред и, что более важно, какое влияние это может оказать на ваш местный бизнес?
Но что такое Фред и, что более важно, какое влияние это может оказать на ваш местный бизнес? Что такое обновление алгоритма Google Fred? Если бы вы были одним из пострадавших маркетологов, вы могли бы оправданно

SEO PowerSuite - что это такое?
SEO PowerSuite - что это такое? Строго говоря, SEO PowerSuite , выпущенный Link-Assistant.com, является автономным программным обеспечением, которое вы можете использовать для оптимизации вашего сайта для поисковых систем. Если официальное утверждение будет чем-то оправдано, SEO PowerSuite помогла более 900 000 веб-сайтов получить топ-10 рейтинга в нескольких поисковых системах. Вот как программное обеспечение описывает себя:

Что это такое и как работает эта оптимизация контента?
Что это такое и как работает эта оптимизация контента? Что происходит с любимой плотностью ключевых слов и где я могу выполнить такой анализ WDF * IDF? OnpageDoc уточняет! Для чего этот анализ хорош? Скрабблеры знают проблему. Они могут либо создавать свои тексты в соответствии с пожеланиями читателей (разговорные), сосредоточиться на

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

Что такое PageRank и почему это важно?
Что такое PageRank и почему это важно? Для тех, кто плохо знаком с PageRank , это алгоритм, используемый поиском Google для ранжирования веб-сайтов. Google назвал PageRank в честь Ларри Пейджа, одного из основателей Google. PageRank является одним из способов измерения важности страниц сайта. Google подсчитывает количество и качество ссылок и ссылок на страницу, чтобы определить значимость веб-сайта. Предполагается, что высококачественные

Я родом из интернет-маркетинга / SEO, так что вы знаете, что было первым, что я заметил?
Я родом из интернет-маркетинга / SEO, так что вы знаете, что было первым, что я заметил? Есть много страниц с продуктами Amazon, которые занимают 3-е место в Google по некоторым действительно хорошим объемным ключевым словам, они, должно быть, набирают кучу тонны трафика для этого списка товаров. Если бы я мог только оценить это так; Я бы убил это. Плюс это не может быть так сложно, верно? Я имею в виду, что Amazon - это один из крупнейших в мире доменов Google Trust

Так что, если Google не считает слова в статье и использует это как фактор ранжирования, почему исследования предполагают, что более длинные статьи будут иметь более высокий рейтинг?
Так что, если Google не считает слова в статье и использует это как фактор ранжирования, почему исследования предполагают, что более длинные статьи будут иметь более высокий рейтинг? Это из-за других факторов, связанных с более длинными статьями. Более длинные статьи, как правило, содержат более ценную информацию, что делает их более полезными для читателя. И что Google хочет получить наивысший рейтинг на странице? Удобный, популярный контент. Дело не в количестве слов; это то,

Почему это так и что это означает для SEO-текстов?
Почему это так и что это означает для SEO-текстов? Что такое SEO-тексты и как они работают? SEO - это означает поисковую оптимизацию , поэтому поисковая оптимизация. Целью этого метода является позиционирование страницы как можно лучше в результатах поисковых систем . Центральную роль играет содержание страниц. Задача поисковых систем состоит в том, чтобы по существу захватывать тексты и другой контент в Интернете и назначать

Что такое одностраничное приложение (SPA)?
Как это достигается?
Когда нужно подавать заявку на одну страницу?
Что такое мобильное SEO… и знаете ли вы, как его использовать?
SEO и МОРЕ?
Ты знаешь почему?
Это означает, что если ключевое слово, которое будет оптимизировано в первом H2, - это «Что это?
Совет, сделайте это, потому что вы уверены, что в противном случае клиенты спросят вас: «Но что, в чем смысл?
Немного SEO с Excel Ну, это все красивые данные, но что я делаю, чтобы сделать их более удобочитаемыми для себя или для клиента, если он должен внести изменения?
Или 404?