Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

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

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

Одностраничные веб-приложения – или SPA (* Single Page Application. Здесь и далее примеч. пер.), как их часто называют – быстро становятся стандартом де-факто при разработке веб-приложений. Из-за того обстоятельства, что большая часть приложения выполняется внутри одной веб-страницы, эта концепция кажется очень интересной и привлекательной, и ускоренные темпы развития возможностей браузеров приближают нас к моменту, когда все приложения будут выполняться полностью в браузере.

Формально большинство веб-страниц уже является SPA; именно сложностью страницы веб-страницы отличаются от веб-приложений. На мой взгляд страница становится приложением, когда вы начинаете использовать потоки операций, операции CRUD (* create, read, update, delete – создать, прочесть, обновить, удалить) и управление состоянием для решения определенных задач. Приложение, которое вы создаете, тогда считается одностраничным, когда каждая из этих задач выполняется на одной и той же странице ( используя, конечно же, AJAX (* Asynchronous JavaScript And XML – асинхронный JavaScript и XML) для коммуникации между клиентом и сервером).

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


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

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

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

Important Considerations - checklist

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


Выбираем фреймворк для разработки приложения

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

Выбор фреймворка – это несомненно один из наиболее важных выборов, которые вы сделаете при создании своего приложения. Естественно, что захотите выбрать лучший фреймворк для вашей команды и приложения.  В каждом из вышеперечисленных фреймворков используется паттерн разработки MVC (* Model-View-Controller – Модель-Представление-Контроллер) (в той или иной степени). Поэтому довольно часто их называют фреймворками MVC. Если бы нам необходимо было расположить эти фреймворки в зависимости от сложности, кривой обучения (* зависимость объёма полученных знаний или навыков от затраченного времени) и набора функциональных возможностей слева направо, то их положение можно было бы отобразить следующим образом:

App Frameworks

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

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

  • Модель: обертка вокруг структуры данных на основе JSON (* JavaScript Object Notation – текстовый формат обмена данными, основанный на JavaScript) с возможностью использования геттеров/сеттеров для свойств и оповещений об их изменениях.
  • Коллекция: коллекция моделей. Предоставляет возможность использовать оповещения при добавлении, удалении или изменении модели в коллекции.
  • События: стандартный паттерн для подписки на оповещения и их опубликования.
  • Представление: соответствующий фрагменту DOM (* Document Object Model –  Объектная модель документа) объект, который предоставляет возможность отслеживания событий DOM, относящихся к этому фрагменту. Представление имеет доступ к соответствующему образцу модели. В некоторых фреймворках также имеется Контроллер, который синхронизирует изменения между Представлением и Моделью.
  • Маршрутизация: навигация в приложении при помощи URL. Реализуется при помощи API histoy браузера.
  • Синхронизация: реагировании на изменения в модели при помощи запросов AJAX.

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

Из всех вышеперечисленных фреймворков Meteor – это единственный фреймворк для full stack разработки (* как серверной части, так и клиентской). Он предоставляет не только интрументы для разработки клиентской части, но и для работы на серверной (через NodeJS), а также сквозную (* о маршруте передачи данных) синхронизацию с моделью (через MongoDB). Это означает, что при изменении модели на стороне сервера она автоматически изменятся в MongoDB. Очень классно, если вы используете на стороне сервера Node.js и MongoDB для хранения данных.

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

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


Шаблоны для клиентской стороны

Наиболее популярные шаблонизаторы на основе JavaScript – Underscore templates и Handlebars.

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

Например, в EmberJS имеется встроенная поддержка Handlebars. Однако если вы решите использовать простой фреймворк, например, Backbone, то вам действительно придется задуматься о выборе шаблонизатора. Underscore – отличный выбор для начала, если вы предъявляете ограниченные требования к шаблонизаторам. В ином случае Handlebars замечательно подойдет, если требования к шаблонизатору более высокие. У него также имеется множество встроенных возможностей для создания более выразительных шаблонов.

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

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


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

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

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

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

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

На данный момент имеется два типа систем на основе модулей: AMD и CommonJS.

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

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

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


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

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

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

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

  • Linux: Aptitude
  • .NET: Nuget
  • PERL: CPAN
  • Ruby: Gems
  • PHP: Composer
  • Node: NPM
  • Java: Maven and Gradle

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

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


Блочное и интеграционное тестирование

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

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

Jasmine, Mocha или Qunit выполняют тесты в одном браузере.

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

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

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


Соображения по поводу UI (* user interface – пользовательский интерфейс)

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

UI – моя любимая часть приложения; это – одна из частей, благодаря которым ваш продукт сразу выделяется на фоне остальных. Хотя приложения отличаются по своей цели и вызывают различные впечатления и ощущения у пользователей, имеется несколько обязанностей (* определённое поведение, которое программа должна обеспечивать), которые должно выполнять большинство приложений. Архитектура и планирование UI – это довольно объемная тема для обсуждения, однако стоит упомянуть несколько советов:

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

Препроцессор CSS

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

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

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

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

Несмотря на то, что препроцессоры CSS облегчают написание правил CSS, используемых для нескольких элементов, на вас по-прежнему лежит ответственность за удачное структурирование кода и помещение взаимосвязанных правил в отдельные файлы. В этом вам могут помочь некоторые принципы из SMACSS (* Scalable and Modular Architecture for CSS – Масштабируемая и модульная архитектура для CSS) и OOCSS (* Object-Oriented CSS).

«Scalable and Modular Architecture for CSS» доступна для привилегированных членов Tuts+.


Управление версиями

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

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


Соображения по поводу браузера

Совершенно очевидно, что блочное тестирование – это важный этап разработки приложения.

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

  • Используйте инструмент, например, Sauce Labs или  BrowserStack для тестирования веб-сайтов во многих веб-браузерах и операционных системах.
  • Используйте полифиллы (* polyfill – тип прокладки,  которая добавляет в старые браузеры поддержку возможностей, которые в современных браузерах являются встроенными) и прокладки (shims – фрагмент кода, который перехватывает вызовы API и предоставляет уровень абстракции), например, ES5 shim и Modernizr, чтобы определить, поддерживает ли конкретный браузер данную возможность перед вызовом API.
  • Используйте инструменты для сбрасывания в исходное состояние, например, Normalize, Blueprint, и Reset, разработанный Eric Myer, чтобы начать с чистого листа во всех браузерах.
  • Используйте вендорные префиксы (-webkit-, -moz-, -ms-) для свойств CSS, чтобы обеспечить поддержку различных движков рендеринга (визуализации).
  • Используйте таблицы, где указана поддержка браузерами современных веб-технологий, например,  findmebyIP и canIuse.

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


Библиотеки

Имеется несколько библиотек, которые могут вас заинтересовать:


Минификация

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

Вы можете минифицировать ваши файлы JavaScript и CSS при помощи: RequireJS optimizer, UglifyJS и Jammit. Также объединяют ваши изображения и иконки в единую sprite sheet (* серию изображений (обычно кадров анимации), скомбинированных в единое изображение).

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

Инструменты разработчика

Twitter представила Bower – менеджер пакетов для браузера, подобный npm, что используется для Node.

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

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

Соображения по поводу производительности

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

О производительности необходимо помнить по мере создания и добавления возможностей в ваше приложение, а не после. При наличии какой-либо проблемы с производительностью вам необходимо для начала построить профиль приложения. Webkit inspector (* инспектор Webkit) имеет встроенный профилировщик (* программа сбора информации, например по использованию ресурсов, работе модулей, частоте вызова процедур и функций и т. д. Анализ собранных данных позволяет выделить и оптимизировать критичные по времени участки кода; это основной инструмент для программ, оптимизирующих код), благодаря которому можно получить исчерпывающий доклад об узких местах (* подсистема компьютера, ПО или сети, параметры которой ограничивают скорость вычислений (производительность, пропускную способность). В компьютере это может быть процессор, жёсткий диск, плата ввода-вывода; в ПО - та или иная системная или прикладная программа; в сети - какое-либо сетевое устройство (коммутатор, маршрутизатор или сервер)) при работе ЦП (* центральный процессор), памяти или при исполнении программы. Профилировщик помогает вам определить проблему, которую вы затем можете разрешить и оптимизировать. Детальную информацию о Chrome web inspector вы можете получить на Chrome Developer Tools.

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

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

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


Аудитирование (* отслеживание действий пользователей и запись ОС в контрольном журнале (security log) специальных типов событий: регистрация в системе, доступ к файлу и т. п. с целью определения проникновения в систему или неправильного использования её ресурсов) и Google  Analytics

Если вы планируете отслеживать посещаемость вашего приложения или регистрировать определенные действия в контрольном журнале (* журнал, в котором регистрируются (документируются) события, имеющие отношение к безопасности компьютерной системы. Показывает, кто имел доступ к системе и какие операции в указанный период времени выполнял. Содержит, например, записи о транзакциях, выполняемых в системе. Позволяет установить хронологию событий при анализе инцидента), то Google Analytics (GA), вероятно, будет вашим лучшим выбором. Разместив простой скрипт GA с вашим кодом для отслеживания на каждой странице, вы можете собрать разнообразные метрики (* количественная оценка  программного проекта путем измерения его различных аспектов, таких, как общие размеры и сложность, понятность исходного кода, тестируемость) вашего приложения. Также вы можете задать цели (* показ отдельных страниц, загрузка определенных файлов и т.д.) на веб-сайте Google Analytics. Эта довольно объемная тема стоит того, чтобы ее изучить, если для вас важны вышеописанные вопросы.


Не отставайте от толпы (* будьте в курсе событий)

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


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

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

  • использование непрерывной интеграции (* практика разработки программного обеспечения, которая заключается в слиянии рабочих копий в общую основную ветвь разработки несколько раз в день и выполнении частых автоматизированных сборок проекта для скорейшего выявления потенциальных дефектов и решения интеграционных проблем) при помощи серверов для сборки проектов, например: TeamCity, Jenkins и Hudson.
  • персистентность (* свойство объектов сохранять свою идентичность, состояние и описание независимо от сеансов работы, во время которых эти объекты были созданы), избыточность данных, обработка [ситуации] отказа (* в кластерных конфигурациях - способность системы автоматически эластично реагировать на отказ какого-либо устройства, разрыв связи и т. п., переключаясь на другое (обычно резервное или находящееся в состоянии ожидания)), восстановление в аварийных ситуациях.
  • кеширование данных и регулярное обновление кеша.
  • реализация авторизации и аутентификации.
  • масштабирование при больших нагрузках
  • безопасность, сертификаты SSL (* Secure Sockets Layer (Level) - протокол безопасных соединений, протокол SSL) и тестирование на наличие вредоносного кода.
  • управление паролями (парольной защитой)
  • использование инструментов для поддержки, мониторинга (* непрерывный во времени или периодический процесс сканирования состояния каких либо ресурсов (например, информационных) с целью сбора данных, контроля, управления и/или содержательного анализа) и отчетности.
  • развертывание и управление версиями приложения

Резюме

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.