В чем разница между веб-страницы и веб-приложения?Хотя мы, как правило, определить документы с чтением и приложений с взаимодействия, наиболее веб-приложения имеют смешанный variety: Люди могут потреблять информацию и выполнять задачи в том же месте.
Несмотря на это, как мы подходим к buildingвеб-приложения, как правило, обходится без некоторых простых добродетелей читаемый веб .
Приложения одной страницы, как правило, принимают форму автономной работы, исполняемые JavaScript развернуты как всплывающие магазинов в пустые <body>элементы.Они временно, времянки и не Curl-able1: Их содержание не очень thereбез сценария выполняется.Они хрупки и неэффективные, потому что, в службу архитектурного единообразия и удобства, они делают все их навигации, обработки данных и даже Основной дисплей contentответственность в одном: на стороне клиента JavaScript .
Недавно там был шаг в сторону “изоморфными” (или “ universal 2 | __12″) приложений —приложения, которые могут работать и тот же код на клиенте и на сервере, посылая prerendered HTML от сервера до передачи в клиентский код.Этот подход (возможно использованием экспресс в качестве сервера и реагировать как визуализация engine __27 | | 3__8 , например) это огромный шаг в сторону более производительной и надежной архитектуры веб-приложений .
Но изоморфизм, конечно, не единственный способ идти о прогрессивной enhancementдля применения одной страницы.Я ищу что-то в более гибкой и с меньшим конфигурации, новой философии, что капитализирует на стандартную поведения браузера, и это может вписаться индексируемая, статический прозу JavaScript-украшен интерактивности, а не просто “передачи Выкл” для JavaScript .
Эта маленькая экспозиция составляет не более, чем понятие делать вещи веб-Way ™ с несколькими слабо конфедерации концепций и методов, но я думаю, вы могли бы взять его и сделать это что-то особенное .
Написание Просмотров Link
В вашем типичном одной страницы приложения, оказание views(т.е. отдельные экраны) и маршрутизации между ними производится озабоченность JavaScript.То есть, места определяются, оцениваются и принес в существование полностью то, что было, до последних лет, технической рассматриваться как дополнение к такого рода поведению.Позвоните мнеLuddite4, Но я не собираюсь использовать JavaScript для этого вообще.Еретически, я иду, чтобы HTML и браузер заботиться о нем, а не .
Я начну с создания HTML страницы и сделать <main>часть этой странице мои взгляды контейнера:
<main role="main">
/* Views go here. */
</main>Тогда, я начну строить индивидуальные взгляды, размещения друг, как дочерний элемент <main>,Каждый вид должен иметь ап id,Это будет использоваться как часть нашего Следует также иметь заголовок первого уровня “решения маршрутизации.”: Просмотров появится по одному, как только воспринимаемой содержанию страницы, что является предпочтительным для чтения с экрана доступности.
<div id="some-view">
<h1>Some view</h1>
<!-- the static view content, enhanceable with JavaScript -->
</div>Для краткости и чтобы подчеркнуть важность работы непосредственно в HTML, я ручного кодирования мои взгляды.Вы можете предпочесть собрать свои взгляды из данных, используя, скажем, Handlebars5и сценарий Node.js, в этом случае каждый вид в ваш {{#each}}Блок может выглядеть следующим образом.Обратите внимание, что я использую помощника руле динамически создать idпо slugifying6вид в titleнедвижимость .
<div id="{{slugify title}}">
<h1>{{title}}</h1>
{{{content}}}
</div>Может быть, с помощью PHP для генерации содержание из базы данных MySQL является более ваша вещь?Это действительно не важно howкомпиляции свои взгляды так долго, как содержимое подается прекомпилирована клиенту.Некоторое содержимое и функциональность должны быть доступны при отсутствии на стороне клиента scripting,Затем, мы можем постепенно повысить его, только в тех случаях, когда мы на самом деле wantпостепенно повысить его.Как я должен объяснить, мой метод будет сохранять статическое содержимое в приложение, как только что: статический контент .
Навигация Link
Не будучи заинтересована в разрыве с конвенцией, я думаю, что мой одной страницы приложение будет извлечь выгоду из навигационной блока, что позволяет пользователям перемещаться между видами.Над <main>зона обзора, я мог бы обеспечить то вроде этого:
<nav role="navigation">
<ul>
<li><a href="#the-default-view">the default view</a></li>
<li><a href="#some-view">some view</a></li>
<li><a href="#another-view">another view</a></li>
</ul>
</nav>Мои взгляды фрагменты документа, которые были определены их idс, и может быть навигация к использованию links7подшипник этот идентификатор, или так, когда пользователи нажимают на первую ссылку, указывая на #the-default-view, Они будут доставлены в этом представлении.Если это не видно в окне просмотра, браузер будет прокручивать его в видимости.Одновременно URL будет обновить, чтобы отразить новое местоположение.Чтобы определить, где вы находитесь в приложении, нужно только запросить URL:
http://my-app-thing.com#the-default-viewКак вы можете себе представить, используя стандартное поведение браузера, чтобы пройти статический контент является reallyа мощные.Это может быть как ожидается, работать не обремененная JavaScript и даже преуспеть там, где JavaScript ошибается.Хотя мой “приложение” больше похожа на странице Википедии, чем рода вещи вы знакомы видя построен с AngularJS, навигационная часть моей маршрутизации завершена .
Примечание: Потому что в соответствии браузеры отправить фокус на страницу fragments8, Клавиатура доступность уже позаботились здесь.Я могу повысить доступность клавиатуры, когда JavaScript является, в конечном счете, работу.Подробнее об этом позже .
Одна из точек зрения, в то время Link
Будучи консультантом доступности, много моих работ вращается вокруг согласования состояние и поведение с appearanceиз этих вещей.В этот момент, поведение меняется маршруты в нашем приложении уже поддерживается, но приложение не смотреть или чувствовать себя, как приложение одной страницы, потому что каждый вид присутствует всегда, а не взаимоисключающими.Мы должны только когда-либо показать вид, к которому пользователь навигацию .
Это поворотный момент, на котором я начинаю постепенно повысить с JavaScript?Нет, не сейчас.В этом случае, я буду обуздывать CSS ‘:targetпсевдо-класс.Прогрессивное улучшение означает не только “, добавив, JavaScript”: Наша веб-страница должна нормально работать без JavaScript orCSS .
main > * {
display: none;
}
main > *:target {
display: block;
}Оператор :targetПсевдо-класс относится к элементу сопоставления идентификатор фрагмента в URL.Другими словами, если URL-адрес является http://my-app-thing.com#some-view, То только элемент с idиз some-viewбудет display: blockприменяться.Для “нагрузки”, что вид (и скрыть другие взгляды), все, что нужно сделать, это нажать на ссылку с соответствующей href,Верьте или нет, я использую ссылки, ссылки, не угон их и подавляя их функциональность по умолчанию, так как большинство приложений не более одной страницы (в том числе клиентов оказанные изоморфными приложений) будет делать .
<a href="#some-view">some view</a>Теперь это больше похоже на одну страницу приложения (которое, в свою очередь, предназначен для чувствуете, как вы навигации между отдельными веб-страниц).Должен ли я такое желание, я мог взять это шаг далее, добавляя некоторые анимации .
main > * {
display: none;
}
@keyframes pulse {
0% { transform: scale(1) }
50% { transform: scale(1.05) }
100% { transform: scale(1) }
}
main > *:target {
display: block;
animation: pulse 0.5s linear 1;
}Необычные!И, надо признать, несколько бессмысленно, но есть что-то, чтобы быть сказанным для визуальной индикации, что контекст изменился —особенно при переключении Просмотры мгновенно.У меня настроить Codepen9для вас, чтобы увидеть эффект.Обратите внимание, что кнопку “Назад” работает браузер, как и ожидалось, потому что JavaScript не угнали или инымпомыкать его.Привлекательно, анимация вызывает либо через ссылку в-страницы или с “назад” и “вперед” кнопки .
Все прекрасно работает до сих пор, за исключением того, что ни вид не отображается на http://my-app-thing.comпопадания в первый раз.Мы можем это исправить!Нет, не с Javascript, но с усилением CSS снова.Если бы мы использовали JavaScript здесь, было бы вся наша система маршрутизации зависит от него и все будет потеряно .
По умолчанию Просмотр Link
Потому что я не могу полагаться на пользователей, плавающих в http://my-app-thing.com#the-default-viewПо моим так говорю, и потому, что :targetнуждается в идентификатор фрагмента #the-default-viewна работу, мне нужно, чтобы попробовать что-то еще, чтобы отобразить эту точку зрения по умолчанию .
Как выясняется, это достижимо путем регулирования порядка исходный и, будучи немного монстр с CSS selectors10,Во-первых, я сделаю мой умолчанию просмотреть последние из просмотра брат элементов в разметке.Это вполне приемлемо доступность мудрый, потому что взгляды “загружен” по одному, с остальных скрытые от вспомогательных технологий, используя display: none,Заказать не уместен .
<main role="main">
<div id="some-view">
<h1>some view</h1>
<!-- … -->
</div>
<div id="another-view">
<h1>another view</h1>
<!-- … -->
</div>
<div id="the-default-view">
<h1>the default view</h1>
<!-- … -->
</div>
</main>Ввод вид по умолчанию в прошлом чувствует себя хорошо для меня.Это как запасной вариант.Теперь мы можем адаптировать CSS:
main > * {
display: none;
}
main > *:last-child {
display: block;
}
@keyframes pulse {
0% { transform: scale(1) }
50% { transform: scale(1.05) }
100% { transform: scale(1) }
}
main > *:target {
display: block;
animation: pulse 0.5s linear 1;
}
main > *:target ~ * {
display: none;
}Есть два новых блоки объявлений: вторая и последняя.Второй приоритет над первым, чтобы показать нашу умолчанию > *:last-childПосмотреть.Теперь это будет видно, когда пользователь нажимает http://my-app-thing.com,Последний блок, используя общий родственный комбинатор, применяется display: noneк любому элементу following:targetэлемент.Потому что на наш взгляд умолчанию поставляется последняя, это правило всегда будет применять к нему, но onlyесли :targetэлемент существует.(Потому что CSS не работает в обратном направлении, а :first-child элемент по умолчанию не будет атаковать, от брата :target. Элемент, который появляется после него)
Попробуйте перезагрузить Codepen11только с корневой URL (не хэш в адресной строке), чтобы убедиться в этом на практике .
Пора Link
Мы проделали долгий путь, не используя JavaScript.Хитрость в настоящее время является добавить JavaScript поведения judiciously, Повышение, что было достигнуто до сих пор, не заменяя его.Мы должны быть в состоянии реагировать на изменения с просмотра JavaScript, не вызывая эти изменения просмотра упасть в области JavaScript.Любой другой, это будет overengineering, тем самым уменьшая производительность и надежность .
Я собираюсь использовать капельку обычного, хорошо поддерживается JavaScript, JQuery не или любой другой вспомогательный библиотеки: скелет приложение должноостаются небольшими, но расширяемый .
Оператор hashchangeСобытие Link
Как уже говорилось, популярных фреймворков веб-приложений, как правило, чтобы сделать вид с JavaScript.Затем они позволяют обратного вызова крючки, как метеора Template.my-template.rendered, Для увеличения мнение в точке он доступен.Даже изоморфные приложения, как использовать сценарий управляемой маршрутизации и оказание если они получают шанс.Моя маленькая приложение не оказывают Просмотры так много, как revealих.Тем не менее, это вполне вероятно, что в некоторых случаях, я хочу, чтобы действовать в соответствии с недавно выявленной зрения с JavaScript, по ее прибытии .
Случайно, веб-API, дает нам очень хорошо supported
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров