Благодаря этой книге вы усвоите основы создания веб-приложений, построив простое приложение с нуля с помощью HTML, JavaScript и других свободно предоставляемых инструментов. Это практическое руководство на реальных примерах обучает неопытных веб-разработчиков тому, как создавать пользовательский интерфейс, строить серверную часть, организовывать связь клиента и сервера, а также применять облачные сервисы для развертывания приложения. Каждая глава содержит практические задачи, полноценные примеры, а также ментальные модели процесса разработки. Эта книга поможет вам сделать первые шаги в создании веб-приложений, обеспечив глубокие знания по теме. - Создайте основу рабочего процесса с помощью текстового редактора, системы контроля версий и браузера. - Постройте пользовательский интерфейс на HTML, а затем оформите его с помощью CSS. - Используйте jQuery и JavaScript, чтобы добавить в приложение интерактивности. - Создайте связь между клиентом и сервером с помощью AJAX, объектов JavaScript и JSON. - Изучите основы программирования серверной стороны с помощью Node.js. - Храните данные вне своего приложения с Redis и MongoDB. - Разместите ваше приложение в сети, загрузив его на облако с CloudFoundry. Изучите основные рекомендации по написанию обслуживаемого кода как в клиентской, так и в серверной части приложения.

Создание веб-приложений — сложный процесс, включающий использование множества подвижных частей и интерактивных компонентов. Чтобы изучить, как это делается, мы должны разобрать эти части на отдельные элементы и постараться понять, как все они взаимодействуют друг с другом. А самое удивительное, что компонент, с которым мы будем сталкиваться чаще всего, не содержит ни строчки кода! В этой главе мы исследуем рабочий процесс разработки веб-приложений — последовательность действий, которые выполняем для того, чтобы создать приложение. При этом мы изучим основы работы с некоторыми инструментами, которые делают этот процесс легко контролируемым и (в основном) безболезненным. Эти инструменты — текстовый редактор, система контроля версий и браузер. Мы не будем изучать все это глубоко, но исследуем достаточно для того, чтобы оказаться готовыми начать веб-программирование на клиентской стороне. В главе 2 мы увидим рабочий процесс в действии, изучая HTML. Если вы уже знакомы с этими инструментами, возможно, вам будет лучше просмотреть краткое изложение и примеры в конце этой главы, а затем двигаться дальше.
Инструмент, с которым вы будете сталкиваться чаще всего, — текстовый редактор. Об этом необходимом элементе технологии порой незаслуженно забывают, но на самом деле это самый важный инструмент в вашем рабочем чемоданчике, поскольку это программа, с помощью которой вы взаимодействуете со своим кодом. Поскольку код формирует конкретные элементы конструкции приложения, очень важно, чтобы было как можно проще его создавать и редактировать. К тому же вы, как правило, будете редактировать несколько файлов одновременно, так что очень важно, чтобы текстовый редактор предоставлял возможность быстро и просто перемещаться по файловой системе. В прошлом вы, вероятно, тратили много времени на написание документов и редактирование текста в программах наподобие Microsoft Word или Google Docs. Это не лучшие примеры редакторов, о которых мы говорим. Эти редакторы концентрируются скорее на возможностях форматирования текста, чем на максимальной простоте его редактирования. Редактор, который будем использовать мы, обладает очень скромными возможностями форматирования, но зато имеет множество функций, позволяющих эффективно манипулировать текстом. На другом конце спектра находятся интегрированные среды разработки (Integrated Development Environments, IDE), такие как Eclipse, Visual Studio и XCode. Эти продукты, как правило, включают в себя функции простого управления кодом, но у них есть также очень много инструментов, важных при промышленной разработке ПО. Мы не будем рассматривать такие инструменты в этой книге, так как стремимся к простоте. Так какие же текстовые редакторы будем рассматривать? В современной разработке веб-приложений обычно используются две основные категории. Первая — редакторы с графическим пользовательским интерфейсом (Graphical User Interface, GUI). Поскольку я предполагаю, что вы знакомы с основами программирования и информатики, то, скорее всего, у вас есть опыт работы с настольными приложениями с графическим пользовательским интерфейсом. Следовательно, эти редакторы будут для вас относительно удобными. Они отлично подходят для работы с мышью в качестве устройства ввода и имеют понятные меню, которые позволяют взаимодействовать с файловой системой как с любой другой программой. Примерами текстовых редакторов с графическим пользовательским интерфейсом могут послужить TextMate, Sublime Text и Coda. Другая категория текстовых редакторов — терминальные редакторы (текстовые редакторы, работающие из командной строки). Эти редакторы разработаны еще до того, как были изобретены графический пользовательский интерфейс или мыши, поэтому их изучение — весьма нетривиальная задача для людей, привыкших к взаимодействию с компьютером посредством интерфейса и мыши. Однако эти редакторы могут быть весьма эффективными, если вы уделите их изучению достаточно времени. Наиболее популярные редакторы из этой категории — Emacs (рис. 1.1) и Vim (рис. 1.2).

От издательства
Об авторе
Предисловие
Выбор технологии
Поможет ли вам эта книга
Занятия с книгой
Преподавание с этой книгой
Куда обратиться в случае затруднений
Общие комментарии к коду
Условные обозначения
Использование примеров кода
Safari® Books Online
Как с нами связаться
Выражения признательности
Глава 1. Рабочий процесс
Текстовые редакторы
Установка Sublime Text
Основы Sublime Text
Контроль версий
Установка Git
Основы работы с командной строкой в UNIX
Основы Git
Браузеры
Подведем итоги
Больше теории и практики
Заучивание
Sublime Text
Emacs и Vim
Командная строка UNIX
Узнайте больше о Git
GitHub
Глава 2. Структура
Привет, HTML!
Теги и содержание
Тег <p>: aбзацы
Комментарии
Заголовки, ссылки и списки... ох!
Подведем итоги
Объектная модель документа и древовидная
модель
Использование валидации HTML для выявления
проблем
Amazeriffc
Определение структуры
Визуализация структуры с помощью древовидной
диаграммы
Реализация структуры в ходе рабочего процесса
Структурирование основной части
Структурирование подвала
Подведем итоги
Больше теории и практики
Заучивание
Древовидные диаграммы
Составление страницы ВиО (FAQ) для Amazeriffc
Больше об HTML
Глава 3. Стиль
Привет, CSS!
Наборы правил
Комментарии
Отступы, границы и поля
Селекторы
Классы
Псевдокласс
Более сложные селекторы
Каскадные правила
Наследование
Плавающая компоновка
Свойство clear
Работа со шрифтами
Устранение браузерной несовместимости
Использование CSS Lint для выявления возможных
проблем
Взаимодействие и решение проблем с Chrome
Developer Tools
Стилизуем Amazeriffc!
Сетка
Создание колонок
Добавление шрифтов и управление ими
Еще несколько изменений
Подведем итоги
Больше теории и практики
Заучивание
Упражнения в CSS-селекторах
Задайте стили для страницы ВиО для Amazeriffc
Каскадные правила
Адаптивность и библиотеки адаптивности
Глава 4. Интерактивность
Привет, JavaScript!
Первое интерактивное приложение
Структура
Стиль
Интерактивность
Общие сведения о jQuery
Создание проекта
Комментарии
Селекторы
Управление элементами DOM
Общие характеристики JavaScript
Работа с JavaScript в Chrome JavaScript Console
Переменные и типы
Функции
Условия
Повторение
Массивы
Использование JSLint для выявления возможных
проблем
Добавление интерактивности Amazeriffc
Приступим
Структура и стиль
Интерактивность
Подведем итоги
Больше теории и практики
Заучивание
Плагины jQuery
Селекторы jQuery
Задача FizzBuzz
Упражнения в работе с массивами
Проект Эйлера (Project Euler)
Другие материалы по JavaScript
Глава 5. Мост
Привет, объекты JavaScript!
Представление карточной игры
Подведем итоги
Обмен информацией между компьютерами
JSON
AJAX
Доступ к внешнему файлу JSON
Ограничения браузера по безопасности
Функция getJSON
Массив JSON
Что же дальше?
Получение изображений с Flickr
Добавление теговой функциональности в Amazeriffc
Функция map
Добавление вкладки Теги
Создание пользовательского интерфейса
Создание промежуточной структуры данных о
тегах
Теги как часть входных данных
Подведем итоги
Больше теории и практики
Слайд-шоу Flickr
Упражняемся в работе с объектами
Другие API
Глава 6. Сервер
Настройка рабочего окружения
Установка Virtual Box и Vagrant
Создание виртуальной машины
Подключение к виртуальной машине с помощью
SSH
Привет, Node.js!
Ментальные модели
Клиенты и серверы
Хосты и гости
Практические вопросы
Привет, HTTP!
Модули и Express
Установка Express с помощью NPM
Первый сервер Express
Отправка клиентского приложения
Общие принципы
Считаем твиты
Получение данных для входа в Twitter
Подключение к Twitter API
Как это получилось?
Хранение счетчиков
Разделение счетчиков Twitter на модули
Импорт модуля в Express
Настройка клиента
Создание сервера для Amazeriffc
Настройка папок
Создание хранилища Git
Создание сервера
Запуск сервера
Размещение информации на сервере
Подведем итоги
Больше теории и практики
Локальная установка Node.js
JSHint и CSS Lint через NPM
Обсудим код счетчика твитов
API покерного приложения
Глава 7. Хранение данных
SQL и не-SQL
Redis
Взаимодействие с Redis через клиентскую
командную строку
Установка модуля Redis через файл package.json
Взаимодействие с Redis в коде
Установление начального значения счетчиков из
хранилища Redis
Использование mget для получения нескольких
величин
MongoDB
Взаимодействие с MongoDB из клиента с
интерфейсом командной строки
Моделирование данных с Mongoose
Хранение списка задач для Amazeriffc
Подведем итоги
Больше теории и практики
Покерное API
Другие источники информации о базах данных
Глава 8. Платформа
Cloud Foundry
Регистрация
Подготовка приложений к развертыванию в Сети
Развертывание приложения
Получение информации о приложениях
Обновление приложения
Удаление приложений из Cloud Foundry
Взаимозависимости и package.json
Привязка Redis к приложению
Привязка MongoDB к приложению
Подведем итоги
Больше теории и практики
Покерное API
Другие платформы
Глава 9. Приложение
Переработка клиента
Обобщение основных принципов действия
Введение AJAX для работы с вкладками
Избавление от костылей совместимости
Обработка ошибок AJAX
Переработка серверного кода
Организация кода
Выражения HTTP, CRUD и REST
Настройка маршрутов через ID
Использование jQuery для прокладки и удаления
маршрутов
Коды ответов HTTP
Шаблон "модель - представление - контроллер"
Добавление пользователей в Amazeriffc
Построение модели пользователей
Построение контроллера пользователей
Настройка маршрутов
Совершенствуем действия контроллера ToDo
Подведем итоги
Больше теории и практики
Удаление элементов списка задач
Добавление пользовательской панели
администратора
Представления с использованием EJS и Jade
Создание нового приложения
Ruby on Rails