Майкл С. Миковски, Джош К. Пауэлл - Разработка одностраничных веб-приложений [2014, PDF, RUS]

Содержание

Предисловие ........................................................................................ 13
Вступление............................................................................................ 15
Благодарности .................................................................................... 16
Об этой книге .................................................................................................19
Об иллюстрации на обложке ............................................................25
Часть I. Введение в SPA ........................................................................26
Глава 1. Наше первое одностраничное
приложение ....................................................................................................28
1.1. Определение, немного истории и несколько слов
о предмете книги ..........................................................................................29
1.1.1. Немного истории ..............................................................................29
1.1.2. Почему SPA на JavaScript появились так поздно? ................30
1.1.3. Предмет книги ...................................................................................34
1.2. Создаем наше первое SPA .........................................................................36
1.2.1. Постановка задачи ............................................................................36
1.2.2. Общая структура файла .................................................................37
1.2.3. Настройка инструментов разработчика в Chrome ................38
1.2.4. Разработка HTML и CSS ...............................................................39
1.2.5. Добавление JavaScript-кода ..........................................................40
1.2.6. Изучение приложения с помощью инструментов
разработчика в Chrome ..............................................................................46
1.3. Чем хорошо написанное SPA удобно пользователям .....................49
1.4. Резюме .............................................................................................................51
Глава 2. Новое знакомство с JavaScript .................................53
2.1. Область видимости переменной ............................................................55
2.2. Поднятие переменных ...............................................................................58
2.3. Еще о поднятии переменных и объекте контекста
выполнения ....................................................................................................60
2.3.1. Поднятие ..............................................................................................60
2.3.2. Контекст выполнения и объект контекста выполнения .....62
2.4. Цепочка областей видимости ..................................................................66
2.5. Объекты в JavaScript и цепочка прототипов .....................................69
2.5.1. Цепочка прототипов ........................................................................73
2.6. Функции – более пристальный взгляд ................................................78
2.6.1. Функции и анонимные функции ................................................78
2.6.2. Самовыполняющиеся анонимные функции ...........................79
2.6.3. Паттерн модуля – привнесение в JavaScript закрытых
переменных ....................................................................................................82
2.6.4. Замыкания ..........................................................................................88
2.7. Резюме .............................................................................................................92
Часть II. Клиентская часть одностраничного
приложения.....................................................................................................94
Глава 3. Разработка оболочки ........................................................96
3.1. Знакомимся с Shell .....................................................................................96
3.2. Организация файлов и пространств имен ..........................................98
3.2.1. Создание дерева файлов ................................................................98
3.2.2. HTML-файл приложения ........................................................... 100
3.2.3. Создание корневого пространства имен CSS ...................... 101
3.2.4. Создание корневого пространства имен JavaScript ........... 103
3.3. Создание функциональных контейнеров ........................................ 104
3.3.1. Стратегия .......................................................................................... 105
3.3.2. HTML-код модуля Shell .............................................................. 105
3.3.3. CSS-стили модуля Shell .............................................................. 106
3.4. Отрисовка функциональных контейнеров ..................................... 109
3.4.1. Преобразование HTML в JavaScript-код .............................. 110
3.4.2. Добавление HTML-шаблона в JavaScript-код .................... 111
3.4.3. Создание таблицы стилей для Shell ........................................ 113
3.4.4. Настройка приложения для использования Shell ............. 115
3.5. Управление функциональными контейнерами ............................. 116
3.5.1. Метод сворачивания и раскрытия окна чата ....................... 117
3.5.2. Добавление обработчика события щелчка мышью
по окну чата ................................................................................................ 119
3.6. Управление состоянием приложения ............................................... 124
3.6.1. Какого поведения ожидает пользователь браузера? ......... 124
3.6.2. Стратегия работы с элементами управления
историей ....................................................................................................... 125
3.6.3. Изменение якоря при возникновении события
истории ......................................................................................................... 126
3.6.4. Использование якоря для управления состоянием
приложения ................................................................................................ 128
3.7. Резюме .......................................................................................................... 135
Глава 4. Добавление функциональных модулей ......... 137
4.1. Стратегия функциональных модулей ............................................... 138
4.1.1. Сравнение со сторонними модулями ..................................... 139
4.1.2. Функциональные модули и паттерн «фрактальный
MVC» ............................................................................................................ 141
4.2. Подготовка файлов функционального модуля .............................. 144
4.2.1. Планируем структуру каталогов и файлов .......................... 145
4.2.2. Создание файлов ........................................................................... 146
4.2.3. Что мы соорудили ......................................................................... 152
4.3. Проектирование API модуля ............................................................... 153
4.3.1. Паттерн якорного интерфейса .................................................. 153
4.3.2. API конфигурирования модуля Chat ..................................... 155
4.3.3. API инициализации модуля Chat ............................................ 156
4.3.4. Метод setSliderPosition из API модуля Chat ....................... 157
4.3.5. Каскадное конфигурирование и инициализация ............... 158
4.4. Реализация API функционального модуля .................................... 160
4.4.1. Таблицы стилей .............................................................................. 160
4.4.2. Модификация модуля Chat ....................................................... 166
4.4.3. Модификация модуля Shell ....................................................... 172
4.4.4. Прослеживание выполнения ..................................................... 179
4.5. Добавление часто используемых методов ....................................... 181
4.5.1. Метод removeSlider ....................................................................... 181
4.5.2. Метод handleResize ....................................................................... 183
4.6. Резюме .......................................................................................................... 188
Глава 5. Построение модели ......................................................... 189
5.1. Что такое модель ...................................................................................... 189
5.1.1. Что мы собираемся сделать ........................................................ 190
5.1.2. Что делает модель .......................................................................... 192
5.1.3. Чего модель не делает .................................................................. 193
5.2. Подготовка файлов модели, и не только .......................................... 194
5.2.1. Планируем структуру каталогов и файлов .......................... 194
5.2.2. Создание файлов ........................................................................... 196
5.2.3. Использование унифицированной библиотеки ввода ..... 202
5.3. Проектирование объекта people .......................................................... 202
5.3.1. Проектирование объекта person ............................................... 203
5.3.2. Проектирование API объекта people ...................................... 205
5.3.3. Документирование API объекта people ................................. 209
5.4. Реализация объекта people .................................................................... 210
5.4.1. Создание подставного списка людей ...................................... 212
5.4.2. Начало реализации объекта people.......................................... 213
5.4.3. Завершение работы над объектом people .............................. 218
5.4.4. Тестирование API объекта people ............................................ 225
5.5. Реализация аутентификации и завершения сеанса в Shell........ 228
5.5.1. Проектирование пользовательского интерфейса
аутентификации ........................................................................................ 229
5.5.2. Модификация JavaScript-кода модуля Shell ....................... 229
5.5.4. Тестирование аутентификации и завершения сеанса
в пользовательском интерфейсе .......................................................... 233
5.6. Резюме .......................................................................................................... 234
Глава 6. Завершение модулей Model и Data ................... 235
6.1. Проектирование объекта chat .............................................................. 235
6.1.1. Проектирование методов и событий ...................................... 236
6.1.2. Документирование API объекта chat ..................................... 239
6.2. Реализация объекта chat ........................................................................ 240
6.2.1. Начинаем с метода join ................................................................ 240
6.2.2. Модификация модуля Fake для поддержки метода
chat.join ......................................................................................................... 243
6.2.3. Тестирование метода chat.join ................................................... 246
6.2.4. Добавление средств работы с сообщениями в объект
chat ................................................................................................................. 247
6.2.5. Модификация модуля Fake для имитации работы
с сообщениями ........................................................................................... 252
6.2.6. Тестирование работы с сообщениями в чате ........................ 254
6.3. Добавление поддержки аватаров в модель ...................................... 256
6.3.1. Добавление поддержки аватаров в объект chat .................. 256
6.3.2. Модификация модуля Fake для имитации аватаров ........ 258
6.3.3. Тестирование поддержки аватаров .......................................... 259
6.3.4. Разработка через тестирование ................................................ 260
6.4. Завершение функционального модуля Chat .................................. 262
6.4.1. Модификация JavaScript-кода модуля Chat ........................ 263
6.4.2. Модификация таблиц стилей .................................................... 271
6.4.3. Тестирование пользовательского интерфейса чата ........... 276
6.5. Разработка функционального модуля Avatar ................................. 277
6.5.1. JavaScript-код модуля Avatar .................................................... 278
6.5.2. Создание таблицы стилей для модуля Avatar ..................... 284
6.5.3. Модификация модуля Shell и головного
HTML-документа ..................................................................................... 285
6.5.4. Тестирование функционального модуля Avatar ................. 286
6.6. Привязка к данным и jQuery ................................................................ 287
6.7. Разработка модуля Data ......................................................................... 288
6.8. Резюме .......................................................................................................... 291
Часть III. Сервер SPA ............................................................................ 292
Глава 7. Веб-сервер .............................................................................. 294
7.1. Роль сервера ............................................................................................... 294
7.1.1. Аутентификация и авторизация ............................................... 294
7.1.2. Валидация ........................................................................................ 295
7.1.3. Сохранение и синхронизация данных ................................... 296
7.2. Node.js ........................................................................................................... 297
7.2.1. Почему именно Node.js? .............................................................. 297
7.2.2. Приложение «Hello World» для Node.js ................................ 298
7.2.3. Установка и использование Connect ....................................... 302
7.2.4. Добавление промежуточного уровня Connect .................... 304
7.2.5. Установка и использование Express ........................................ 305
7.2.6. Добавление промежуточного уровня
в Express-приложение ............................................................................. 308
7.2.7. Окружения в Express .................................................................... 309
7.2.8. Обслуживание статических файлов с помощью
Express .......................................................................................................... 310
7.3. Более сложная маршрутизация ........................................................... 312
7.3.1. CRUD-маршруты для управления пользователями ......... 312
7.3.2. Обобщенная маршрутизация для операций CRUD ......... 319
7.3.3. Перенос маршрутизации в отдельный модуль Node.js ..... 322
7.4. Добавление аутентификации и авторизации ................................. 327
7.4.1. Базовая аутентификация ............................................................ 327
7.5. Веб-сокеты и Socket.IO .......................................................................... 329
7.5.1. Простой пример применения Socket.IO ................................ 329
7.5.2. Socket.IO и сервер обмена сообщениями .............................. 333
7.5.3. Обновление JavaScript-кода с помощью Socket.IO ........... 334
7.6. Резюме .......................................................................................................... 338
Глава 8. Серверная база данных................................................ 339
8.1. Роль базы данных ..................................................................................... 339
8.1.1. Выбор хранилища данных .......................................................... 340
8.1.2. Исключение преобразования данных .................................... 340
8.1.3. Помещайте логику туда, где она нужнее ............................... 341
8.2. Введение в MongoDB .............................................................................. 342
8.2.1. Документоориентированное хранилище ............................. 343
8.2.2. Динамическая структура документа ....................................... 343
8.2.3. Начало работы с MongoDB ........................................................ 345
8.3. Драйвер MongoDB ................................................................................... 347
8.3.1. Подготовка файлов проекта ....................................................... 347
8.3.2. Установка и подключение MongoDB ..................................... 348
8.3.3. Использование методов CRUD в MongoDB ....................... 350
8.3.4. Добавление операций CRUD в серверное приложение...... 353
8.4. Валидация данных, поступивших от клиента ................................ 357
8.4.1. Проверка типа объекта ................................................................ 357
8.4.2. Проверка объекта........................................................................... 360
8.5. Создание отдельного модуля CRUD ................................................. 368
8.5.1. Подготовка структуры файлов ................................................. 369
8.5.2. Перенос операций CRUD в отдельный модуль .................. 372
8.6. Реализация модуля chat ......................................................................... 378
8.6.1. Начало модуля Chat ..................................................................... 379
8.6.2. Создание обработчика сообщения adduser ........................... 382
8.6.3. Создание обработчика сообщения updatechat .................... 386
8.6.4. Создание обработчиков отключения ...................................... 388
8.6.5. Создание обработчика сообщения updateavatar ................. 390
8.7. Резюме .......................................................................................................... 393
Глава 9. Подготовка SPA к промышленной
эксплуатации .............................................................................................. 395
9.1. Поисковая оптимизация SPA ............................................................... 396
9.1.1. Как Google индексирует SPA ..................................................... 396
9.2. Облачные и сторонние службы ........................................................... 400
9.2.1. Анализ работы сайта ..................................................................... 400
9.2.2. Протоколирование ошибок на стороне клиента ................. 403
9.2.3. Сети доставки содержимого ...................................................... 406
9.3. Кэширование и отключение кэширования ..................................... 406
9.3.1. Варианты кэширования .............................................................. 407
9.3.2. Веб-хранилище ............................................................................... 408
9.3.3. HTTP-кэширование ..................................................................... 410
9.3.4. Кэширование на сервере ............................................................. 414
9.3.5. Кэширование запросов к базе данных .................................... 420
9.4. Резюме .......................................................................................................... 421
Приложение А. Стандарт кодирования
на JavaScript ................................................................................................ 424
А.1. Зачем нам стандарт кодирования? .................................................... 424
A.2. Форматирование кода и комментарии ............................................ 425
A.2.1. Форматирование кода с учетом удобства чтения .............. 426
A.2.2. Комментарии как средство пояснения
и документирования ................................................................................ 434
A.3. Именование переменных ...................................................................... 437
A.3.1. Сокращение и повышение качества комментариев
за счет соглашений об именовании .................................................... 437
A.3.2. Рекомендации по именованию................................................. 439
A.3.3. Практическое применение рекомендаций ........................... 447
A.4. Объявление и присваивание переменным...................................... 448
A.5. Функции ..................................................................................................... 450
A.6. Пространства имен.................................................................................. 453
A.7. Имена и структура дерева файлов ..................................................... 454
A.8. Синтаксис ................................................................................................... 455
A.8.1. Метки ................................................................................................ 456
A.8.2. Предложения .................................................................................. 456
A.8.3. Прочие замечания о синтаксисе .............................................. 459
A.9. Валидация кода ........................................................................................ 460
A.9.1. Установка JSLint ........................................................................... 460
A.9.2. Настройка JSLint .......................................................................... 461
A.9.3. Использование JSLint ................................................................. 462
A.10. Шаблон модуля ...................................................................................... 463
A.11. Резюме ....................................................................................................... 465
Приложение Б. Тестирование SPA ........................................... 467
Б.1. Режимы тестирования ........................................................................... 468
Б.2. Выбор каркаса тестирования ............................................................... 472
Б.3. Настройка nodeunit ................................................................................. 473
Б.4. Создание комплекта тестов .................................................................. 474
Б.4.1. Инструктируем Node.js загрузить наши модули ............... 475
Б.4.2. Подготовка одного теста в nodeunit ....................................... 478
Б.4.3. Создание первого настоящего теста ....................................... 479
Б.4.4. План событий и тестов ................................................................ 480
Б.4.5. Создание комплекта тестов ....................................................... 483
Б.5. Адаптация модулей SPA для тестирования .................................... 496
Б.6. Резюме ......................................................................................................... 499
Предметный указатель ...................................................................... 501