Front-end. Клиентская разработка для профессионалов. Node.js, ES6, REST

[html]В книге "Front-end. Клиентская разработка для профессионалов. Node.js, ES6, REST" рассмотрены все важнейшие навыки работы с JavaScript, HTML5 и CSS3, требуемые серьезному разработчику, чтобы преуспеть в создании современного клиентского кода. Читатель быстро освоится с новыми инструментами и технологиями, с проверенными практиками, которые актуальны уже сегодня. В каждой главе рассматриваются важнейшие концепции и API, неотделимые от качественной веб-разработки, тщательно проверенные и отточенные в процессе решения реальных практических задач.Оглавление книги Крис Аквино, Тодд Ганди "Front-end. Клиентская разработка для профессионалов. Node.js, ES6, REST"Благодарности .................................................................................................... 15Введение ................................................................................................................... 16Разработка веб-приложений клиентской части.......................................................16Необходимые знания..............................................................................................17Структура книги.....................................................................................................17Как пользоваться книгой........................................................................................18Упражнения............................................................................................................19Для самых любознательных...................................................................................19Условные обозначения...........................................................................................20Часть I. Основы программированияприложений для браузеровГлава 1. Настройка среды разработки ........................................................ 22Установка Google Chrome.......................................................................................22Установка и настройка Atom...................................................................................23Где найти документацию и справочную информацию.............................................27Ускоренный курс по использованию командной строки..........................................29Установка Node.js и browser-sync............................................................................36Для самых любознательных: альтернативы редактору Atom...................................37Глава 2. Настраиваем наш первый проект ................................................. 39Настройка Ottergram..............................................................................................40Просмотр веб-страницы в браузере........................................................................49Инструменты разработчика Chrome........................................................................52Для самых любознательных: версии CSS................................................................53Для самых любознательных: favicon.ico..................................................................54Серебряное упражнение: добавить favicon.ico........................................................55Глава 3. Стили ..................................................................................................... 56Создание фундамента для стилей...........................................................................56Подготовка HTML для стилизации..........................................................................60Внутреннее устройство стиля.................................................................................61Наше первое правило оформления.........................................................................62Наследование стилей.............................................................................................66Подгоняем изображения под размер окна..............................................................74Цвет.......................................................................................................................76Выравнивание расстояний между элементами........................................................78Добавление шрифта...............................................................................................84Бронзовое упражнение: изменение цвета...............................................................87Для самых любознательных: приоритетность! Конфликты селекторов...................87Глава 4. Создание адаптивных макетовс помощью флекс-блоков ............................................................................... 91Расширяем интерфейс............................................................................................92Флекс-блок ............................................................................................................98Абсолютное и относительное позиционирование..................................................113Глава 5. Создание адаптивных макетовс помощью медиазапросов ........................................................................... 119Переопределяем размер экрана...........................................................................120Добавление медиазапроса....................................................................................124Бронзовое упражнение: книжная ориентация.......................................................127Для самых любознательных: известные решения (и ошибки)при создании макетов с помощью флекс-блоков..................................................128Золотое упражнение: макет Holy Grail..................................................................128Глава 6. Обработка событий с помощью JavaScript .............................. 129Готовим теги-якоря к работе................................................................................131Наш первый сценарий..........................................................................................135Обзор JavaScript для Ottergram.............................................................................136Объявляем строковые переменные.......................................................................136Работаем в консоли..............................................................................................139Обращение к элементам DOM...............................................................................141Написание функции setDetails..............................................................................146Возврат значений из функций..............................................................................151Добавляем прослушиватель событий....................................................................154Доступ ко всем миниатюрам.................................................................................160Организация цикла по массиву миниатюр............................................................162Серебряное упражнение: взлом ссылок................................................................164Золотое упражнение: случайные выдры...............................................................164Для самых любознательных: строгий режим.........................................................164Для самых любознательных: замыкания...............................................................165Для самых любознательных: NodeList and HTMLCollection.....................................166Для самых любознательных: типы данных JavaScript............................................166Глава 7. CSS и визуальные эффекты ......................................................... 169Скрытие и отображение увеличенного изображения............................................170Изменение состояния с помощью CSS-переходов..................................................180Пользовательские временные функции................................................................191Для наиболее любознательных: правила приведения типов.................................193Часть II. Модули, объекты и формыГлава 8. Модули, объекты и методы .......................................................... 196Модули.................................................................................................................197Настройка приложения CoffeeRun.........................................................................202Создание модуля DataStore..................................................................................203Добавляем модули в пространство имен..............................................................204Конструкторы.......................................................................................................206Создание модуля Truck.........................................................................................211Отладка................................................................................................................217Инициализация CoffeeRun при загрузке страницы................................................224Бронзовое упражнение: идентификатор автокафедля не фанатов сериала "Звездный путь"............................................................228Для самых любознательных: закрытые данные модулей.......................................228Серебряное упражнение: делаем данные закрытыми...........................................229Для самых любознательных: делаем то же самоев обратном вызове метода forEach.......................................................................229Глава 9. Введение в фреймворк Bootstrap ............................................... 230Добавляем фреймворк Bootstrap в приложение....................................................230Создание формы заказа........................................................................................233Глава 10. Обработка форм с помощью JavaScript ................................. 245Создаем модуль FormHandler................................................................................247Добавляем обработчик события submit................................................................252Использование экземпляра FormHandler...............................................................256Расширения UI.....................................................................................................259Бронзовое упражнение: порции огромного размера.............................................260Серебряное упражнение: отображение значения при изменении слайдера..........260Золотое упражнение: добавляем достижения.......................................................260Глава 11. От данных к DOM ........................................................................... 262Настраиваем перечень заказов.............................................................................262Создание модуля CheckList...................................................................................264Создание конструктора Row.................................................................................266Создание строк CheckList при подтверждении отправки формы............................272Выдача заказа с помощью щелчка на строке........................................................275Бронзовое упражнение: добавление крепости кофе в описание...........................281Серебряное упражнение: цветовая маркировка в зависимостиот ароматизатора.................................................................................................281Золотое упражнение: предоставление возможностиредактирования заказов.......................................................................................282Глава 12. Проверка данных форм .............................................................. 283Атрибут required...................................................................................................283Проверка с помощью регулярных выражений.......................................................286API проверки ограничений...................................................................................286Стилизация элементов с допустимым и недопустимым значением........................292Серебряное упражнение: пользовательская проверка допустимостидля Decaf..............................................................................................................294Для наиболее любознательных: библиотека Webshims.........................................295Глава 13. Ajax .................................................................................................... 297Объекты XMLHttpRequest......................................................................................298Воплощающие REST веб-сервисы.........................................................................299Модуль RemoteDataStore......................................................................................300Отправка данных на сервер..................................................................................301Извлечение данных с сервера..............................................................................306Удаление данных с сервера..................................................................................309Заменяем DataStore на RemoteDataStore...............................................................312Серебряное упражнение: сверка с удаленным сервером......................................314Для самых любознательных: Postman...................................................................314Глава 14. Объекты Deferred и Promise ....................................................... 315Объекты Promise и Deferred..................................................................................316Возвращаем Deferred............................................................................................317Регистрация обратных вызовов с помощью then...................................................319Обработка сбоев с помощью then.........................................................................320Использование объектов Deferred с API, основанными на использовании обратных вызовов................................................................................................322Объекты Promise в DataStore................................................................................326Серебряное упражнение: автоматическое переключение на DataStore.................332Часть III. Данные, поступающиев режиме реального времениГлава 15. Введение в Node.js ........................................................................ 334Утилиты node и npm.............................................................................................336Hello, World...........................................................................................................338Добавление сценария npm...................................................................................340Выдача контента из файлов.................................................................................342Обработка ошибок................................................................................................348Для самых любознательных: реестр модулей npm................................................349Бронзовое упражнение: создание пользовательской страницы ошибки................350Для самых любознательных: типы MIME...............................................................350Серебряное упражнение: динамическое задание типа MIME................................352Золотое упражнение: перенесите обработку ошибок в отдельный модуль............352Глава 16. Обмен данными в режиме реального временис помощью протокола WebSockets ............................................................. 353Настройка WebSockets..........................................................................................355Тестирование нашего сервера WebSockets...........................................................357Создаем функциональность сервера чата.............................................................358Наш первый чат!..................................................................................................360Для самых любознательных: библиотека socket.io для WebSockets.......................360Для самых любознательных: WebSockets как сервис ...........................................361Бронзовое упражнение: не повторяюсь ли я?.......................................................362Серебряное упражнение: "тихий" бар..................................................................362Золотое упражнение: чат-бот...............................................................................362Глава 17. Используем ES6 с помощью компилятора Babel ................. 364Инструменты для компиляции JavaScript...............................................................366Клиентское приложение Chattrbox........................................................................368Начинаем работу с Babel......................................................................................369Используем Browserify для компоновки модулей...................................................371Добавление класса ChatMessage...........................................................................375Создание модуля ws-client....................................................................................379Для самых любознательных: компиляция в JavaScript из других языков программирования....................................................................385Бронзовое упражнение: имя по умолчанию для импорта......................................386Серебряное упражнение: предупреждение о закрытии соединения......................386Для самых любознательных: поднятие переменных.............................................386Для самых любознательных: стрелочные функции...............................................388Глава 18. ES6. Приключения продолжаются .......................................... 390Установка библиотеки jQuery в качестве модуля Node.........................................390Создание класса ChatForm....................................................................................391Создание класса ChatList......................................................................................395Использование граватаров...................................................................................397Приглашение ввести имя пользователя................................................................400Сеансовое хранилище пользователя.....................................................................402Форматирование и изменение меток даты/времени в сообщениях........................405Бронзовое упражнение: добавление в сообщения визуальных эффектов.............407Серебряное упражнение: кэширование сообщений..............................................408Золотое упражнение: отдельные комнаты чата....................................................408Часть IV. Архитектура приложенияГлава 19. Введение в MVC и Ember ............................................................. 410Tracker..................................................................................................................411Ember: MVC-фреймворк........................................................................................413Внешние библиотеки и дополнения......................................................................418Конфигурация......................................................................................................420Для самых любознательных:установка систем управления пакетами npm и Bower...........................................422Бронзовое упражнение: ограничьте количество импортов....................................424Серебряное упражнение: добавьте шрифт Awesome............................................424Золотое упражнение: пользовательская настройка NavBar...................................424Глава 20. Маршрутизация, маршруты и модели .................................... 425Утилита generate фреймворка Ember....................................................................426Вложенные маршруты..........................................................................................431Утилита Ember Inspector.......................................................................................433Назначение моделей............................................................................................434Точка подключения beforeModel...........................................................................436Для самых любознательных: setupController и afterModel......................................437Глава 21. Модели и привязка данных ....................................................... 438Описания моделей................................................................................................439Метод createRecord...............................................................................................441Методы get и set...................................................................................................443Вычисляемые свойства.........................................................................................445Для самых любознательных: извлечение данных.................................................447Для самых любознательных: сохранение и удаление данных...............................449Бронзовое упражнение: изменение вычисляемого свойства.................................450Серебряное упражнение: пометьте флагом новые наблюдения............................450Золотое упражнение: добавление форм обращения.............................................450Глава 22. Данные: адаптеры, сериализаторыи преобразования ............................................................................................ 451Адаптеры.............................................................................................................453Политика обеспечения безопасности контента.....................................................457Сериализаторы.....................................................................................................458Преобразования...................................................................................................460Для самых любознательных: дополнение Ember CLI Mirage..................................461Серебряное упражнение: безопасность контента.................................................462Золотое упражнение: Mirage.................................................................................462Глава 23. Представления и шаблоны ........................................................ 463Handlebars............................................................................................................464Модели.................................................................................................................464Вспомогательные методы.....................................................................................464Пользовательские вспомогательные методы.........................................................474Бронзовое упражнение: добавление эффектов перекатываниядля ссылок...........................................................................................................477Серебряное упражнение: изменение формата даты.............................................477Золотое упражнение: создание пользовательскоговспомогательного метода для миниатюр..............................................................477Глава 24. Контроллеры .................................................................................. 478Новые наблюдения...............................................................................................479Редактирование наблюдения................................................................................487Удаление наблюдения..........................................................................................490Действия маршрутов............................................................................................491Бронзовое упражнение: страница детальной информации о наблюдении.............494Серебряное упражнение: дата наблюдения..........................................................494Золотое упражнение: добавление и удаление очевидцев.....................................494Глава 25. Компоненты .................................................................................... 495Элементы итераторов как компоненты.................................................................496Компоненты для кода DRY....................................................................................500Данные вниз, действия вверх...............................................................................501Привязки имени класса........................................................................................503Данные вниз.........................................................................................................505Действия вверх....................................................................................................507Бронзовое упражнение: настройка предупреждающего сообщения......................510Серебряное упражнение: сделайте из NavBar компонент......................................510Золотое упражнение: массив предупреждающих сообщений................................510Послесловие ...................................................................................................... 511Последнее упражнение........................................................................................511Нескромная реклама............................................................................................512Спасибо................................................................................................................512[/html]