Важные соображения при создании одностраничных веб-приложений

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

Технически, большинство веб-страниц уже являются SPA; это сложность страницы, которая отличает веб-страницу от веб-приложения . По моему мнению, страница становится приложением, когда вы включаете рабочие процессы, операции CRUD и управление состоянием вокруг определенных задач. Вы работаете со SPA, когда каждая из этих задач выполняется на одной и той же странице (конечно, с использованием AJAX для связи клиент / сервер).

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

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

Большинство приложений состоят как из клиентской, так и из серверной части; Хотя эта статья в основном посвящена клиентской части приложения, в конце этой статьи я приведу несколько указателей на стороне сервера.

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

Я подробно остановлюсь на каждом из пунктов выше в следующих разделах.

Выбор платформы приложения

Существует множество рамок на выбор. Вот лишь несколько самых популярных:

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

Несмотря на различие в их реализации и уровне сложности, все вышеупомянутые платформы предоставляют некоторые общие абстракции, такие как:

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

Модель : оболочка вокруг структуры данных JSON с поддержкой методов получения / установки свойств и уведомления об изменении свойств.
Коллекция : коллекция моделей. Предоставляет уведомления при добавлении, удалении или изменении модели в коллекции.
События : стандартный шаблон для подписки и публикации уведомлений.
Представление : вспомогательный объект для фрагмента DOM с поддержкой прослушивания событий DOM относительно фрагмента DOM. Представление имеет доступ к соответствующему экземпляру модели. В некоторых средах также имеется контроллер, который управляет изменениями между представлением и моделью.
Маршрутизация : навигация в приложении по URL. Полагается на API истории браузера.
Синхронизация : сохранение изменений модели с помощью вызовов Ajax.

Более продвинутые фреймворки, такие как CanJS, BatmanJS, EmberJS и AngularJS, расширяют эти базовые функции, обеспечивая поддержку автоматического связывания данных и шаблонов на стороне клиента. Шаблоны привязаны к данным и поддерживают представление в синхронизации с любыми изменениями в модели. Если вы решите выбрать продвинутый фреймворк, вы, безусловно, получите множество готовых функций, но он также ожидает, что вы создадите свое приложение определенным образом.

Из всех ранее перечисленных фреймворков Meteor — единственная фреймворк с полным стеком Он предоставляет инструменты не только для разработки на стороне клиента, но также предоставляет серверную часть через NodeJS и сквозную синхронизацию моделей через MongoDB. Это означает, что при сохранении модели на клиенте она автоматически сохраняется в MongoDB. Это фантастический вариант, если вы запускаете серверную часть Node и используете MongoDB для сохранения.

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

Примечание : если вы хотите узнать больше об этих платформах от их создателей, послушайте эти видео от ThroneJS .

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

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

Некоторые из продвинутых платформ из предыдущего раздела предлагают встроенные системы шаблонов.

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

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

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

Модульная разработка

Использование препроцессора требует дополнительного шага в процессе сборки.

Код JavaScript традиционно добавляется на страницу через элемент <script /> . Обычно вы сначала перечисляете библиотеки и другие зависимости, а затем перечисляете код, который ссылается на эти зависимости. Этот стиль хорошо работает, когда вам нужно всего лишь включить несколько файлов; однако, это быстро станет кошмаром для обслуживания, так как вы включаете дополнительные сценарии.

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

Таким образом, модуль становится способом определения функциональности в приложении. Вы можете организовать эти модули, используя определенную структуру папок, которая группирует их на основе определенной функции или функциональности. Модули помогают в управлении сценариями вашего приложения, а также устраняют глобальные зависимости, которые должны быть включены в элементы <script /> перед сценариями приложения. Для библиотек, которые не совместимы с AMD, RequireJS предлагает функцию shim, которая представляет скрипты не AMD в качестве модулей.

В настоящее время существует два типа систем на основе модулей: AMD (определение асинхронного модуля) и CommonJS .

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

define([
    // listing out the dependencies (relative paths)
    ‘features/module/BaseView’,
    ‘utils/formatters’
], function(BaseView, formatters) { // Export function that takes in the dependencies and returns some object
 
    // do something here
 
    // An explicit require
    var myModule = require(‘common/myModule’);
 
    // Object exposing some functionality
    return { … };
});

Имена модулей CommonJS основаны либо на относительном пути к файлу, либо на процессе поиска встроенного модуля. В любом модуле нет функции define() , а зависимости явно указываются вызовами require() . Модуль предоставляет свои функциональные возможности через объект module.exports , который автоматически создается каждым модулем. Вот пример CommonJS:

var fs = require(‘fs’), // standard or built-in modules
    path = require(‘path’),
    formatters = require(‘./utils/formatters’);
 
// Export my code
module.exports = { … };

Стиль модуля CommonJS более распространен в приложениях NodeJS, где имеет смысл пропустить вызов метода define() — вы работаете с поиском модулей на основе файловой системы. Интересно, что вы можете сделать то же самое в браузере, используя Browserify.

Управление пакетами

При создании и добавлении функций в ваше приложение следует думать о производительности.

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

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

Linux: Aptitude
.NET: Nuget
PERL: CPAN
Рубин: Драгоценные камни
PHP: композитор
Узел: NPM
Java: Maven и Gradle

Хотя управление пакетами в большей степени относится к серверной части, оно набирает популярность в кругах разработчиков на стороне клиента. Twitter представил Bower , менеджер пакетов браузера, похожий на NPM для Node. Bower перечисляет зависимости на стороне клиента в component.json , и они загружаются с помощью инструмента CLI bower. Например, чтобы установить jQuery из терминала, вы должны выполнить:

bower install jquery

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

Модульное и интеграционное тестирование

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

На стороне клиента Jasmine , Mocha и Qunit являются самыми популярными средами тестирования. Jasmine и Mocha поддерживают стиль разработки, основанный на поведении (BDD), где тесты читаются как английские утверждения. QUnit, с другой стороны, является более традиционной структурой модульного тестирования, предлагающей API в стиле утверждений.

Жасмин, Мокка или Qunit запускают тесты в одном браузере.

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

Чтобы пройти тестирование целых девяти ярдов, вы, вероятно, захотите провести интеграционные тесты в своем приложении, используя Selenium и Cucumber / Capybara. Cucumber позволяет вам писать тесты (так называемые функции ) в английском подобном синтаксисе, называемом Gherkin , который может даже использоваться бизнес-людьми. Каждый тестовый оператор в вашем файле Cucumber поддерживается исполняемым кодом, который вы можете написать на Ruby, JavaScript или любом другом поддерживаемом языке.

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

UI Соображения

Наличие хороших рабочих знаний CSS поможет вам достичь инновационного дизайна в HTML.

Пользовательский интерфейс — моя любимая часть приложения; это одна из вещей, которая сразу отличает ваш продукт от конкурентов. Хотя приложения различаются по своему назначению, внешнему виду и ощущениям, у большинства приложений есть несколько общих обязанностей. Дизайн и архитектура пользовательского интерфейса — довольно интенсивная тема, но стоит упомянуть несколько моментов проектирования:

Обработка форм : используйте различные элементы управления вводом (числовые входы, электронная почта, средство выбора даты, средство выбора цвета, автозаполнение), проверки при отправке формы, выделение ошибок при вводе формы и распространение ошибок на стороне сервера на клиенте.
Форматирование : применять пользовательские форматы для чисел и других значений.
Обработка ошибок : распространять различные виды клиентских и серверных ошибок. Составьте текст для различных нюансов ошибок, ведите словарь ошибок и заполняйте заполнители значениями времени выполнения.
Оповещения и уведомления : расскажите пользователю о важных событиях и действиях и покажите системные сообщения, поступающие с сервера.
Пользовательские элементы управления : фиксируйте уникальные шаблоны взаимодействия в приложении как элементы управления, которые можно использовать повторно. Определите входы и выходы от управления без связи с определенной частью приложения.
Grid System : создавайте макеты, используя сеточную систему, такую как Compass Susy, 960gs, CSS Grid. Система сетки также поможет в создании адаптивного макета для различных форм-факторов.
Библиотека шаблонов пользовательского интерфейса : освоитесь с обычными шаблонами пользовательского интерфейса. Используйте айву для справки.
Многоуровневая графика : понимание тонкостей CSS, блочных моделей, поплавков, позиционирования и т. Д. Наличие хороших рабочих знаний CSS поможет вам достичь инновационных разработок в HTML.
Интернационализация : адаптировать сайт под разные локали. Определите локаль, используя HTTP-заголовок Accept-Language или в оба конца, чтобы получить больше информации от клиента.

CSS препроцессоры

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

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

Использование препроцессора требует дополнительного шага в процессе сборки: вам нужно сгенерировать окончательный CSS.

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

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

Масштабируемая и модульная архитектура для CSS включена как часть членства в Tuts + Premium.

Контроль версий

Если вы знакомы с хип-разработчиком, то, вероятно, знаете, что Git — действующий чемпион всех систем контроля версий (VCS). Я не буду вдаваться во все подробности того, почему Git лучше, но достаточно сказать, что ветвление и слияние (два очень распространенных действия во время разработки) в основном беспроблемны.

С точки зрения философии, близкой параллелью Git является Mercurial (hg) — хотя он не так популярен, как Git. Следующая лучшая альтернатива — давняя Subversion . Выбор VCS во многом зависит от стандартов вашей компании и, в некоторой степени, вашей команды. Однако, если вы являетесь частью небольшой рабочей группы, Git легко является предпочтительным вариантом.

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

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

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

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

Управление различиями в браузере может включать в себя метод проб и ошибок; Google и StackOverflow могут стать вашими лучшими друзьями, когда вы окажетесь в браузерном джеме.

Библиотеки

Есть несколько библиотек, которые вы можете рассмотреть:

Визуализации : линии Spark , Highcharts , D3 , xCharts и Raphaël .
Форматирование : цифры , бухгалтерия и момент .
Управление : Bootstrap , jQuery UI и select2 .
Если вы решили использовать BackboneJS , вы можете взглянуть на Backbone.Marionette , который предоставляет несколько вспомогательных утилит для ускорения разработки.
Помощники : Underscore , Sugar , es5shim , Modernizr и Html5 Boilerplate .

минификация

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

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

Примечание редактора: я рекомендую вам использовать Grunt или Yeoman (который использует Grunt), чтобы легко создавать и развертывать ваши приложения.

Инструменты торговли

Twitter представил Bower , менеджер пакетов браузера, похожий на NPM для Node.

Я был бы упущен, если бы не упомянул инструменты для создания СПА. Следующие списки несколько:

JsHint, чтобы поймать проблемы с ворсом в ваших файлах JavaScript. Этот инструмент может обнаруживать синтаксические проблемы, такие как отсутствие точки с запятой и применение определенного стиля кода в проекте.
Вместо того, чтобы начинать проект с нуля, рассмотрите инструмент, такой как Yeoman, чтобы быстро создать начальные леса для проекта. Он обеспечивает встроенную поддержку препроцессоров CSS (таких как SASS, Less и Stylus), компилирует файлы CoffeeScript в JavaScript и отслеживает изменения файлов. Он также готовит ваше приложение к развертыванию путем минимизации и оптимизации ваших ресурсов. Как и у Yeoman, есть и другие инструменты, такие как MimosaJS и Middleman .
Если вы ищете подобный инструмент для JavaScript, не смотрите дальше, чем Grunt . Это расширяемый инструмент сборки, который может выполнять самые разные задачи. Йомен использует Grunt для решения всех своих задач.
Nodemon для автоматического запуска Node-программы при каждом изменении файла. Симлиарный инструмент навсегда .
Редакторы кода , такие как Sublime Text , Vim и JetBrains WebStorm .
Инструменты командной строки ZSH или BASH. Освойте оболочку, потому что она может быть очень эффективной, особенно при работе с такими инструментами, как Yeoman, Grunt, Bower и NPM.
Homebrew — простой менеджер пакетов для установки утилит.

Вопросы производительности

Препроцессоры CSS позволяют легко создавать CSS с общими правилами.

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

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

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

Выше приведен только краткий список. Посетите Html5Rocks для более полного охвата производительности.

Аудит и Google Analytics

Если вы планируете отслеживать использование своего приложения или собирать контрольные журналы по определенным рабочим процессам, Google Analytics (GA), вероятно, будет вашим лучшим решением. Включив простой скрипт GA на каждой странице со своим кодом отслеживания, вы можете собирать различные показатели вашего приложения. Вы также можете установить цели на веб-сайте Google Analytics. Эта довольно обширная тема заслуживает изучения, если отслеживание и аудит являются важной проблемой.

Идти в ногу с Джонсом

Мир веб-разработки быстро меняется. Если посмотреть на последние пять лет, то здесь наблюдается взрывной рост библиотек, инструментов и практик. Лучший способ следить за развитием Интернета — это подписываться на блоги (как этот), информационные бюллетени и просто быть любопытными:

Прочитайте, как работают браузеры .
Изучите платформу — Web Platform , проект, спонсируемый крупными поставщиками.
Подпишитесь на Nettuts + !
Подпишитесь на Html5 Weekly , JavaScript Weekly и Web Design Weekly .
Посещайте конференции, такие как JSConf , Html5DevConf , FluentConf , локальные группы пользователей и конференции.
Посетите HTML5 Скалы .
Изучите GitHub .

Управление операциями

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

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

Резюме

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

Имея так много всего, чему можно научиться, вы не будете одиноки, если будете чувствовать себя подавленным. Просто придерживайтесь этого, и не останавливайтесь! Вы получите там достаточно скоро.