Метка: фронтэнд

Опубликовано

Встречайте: “Современные фронтенды на базе HTMX”

Современные фронтенды на базе HTMX

Рассмотрены практические подходы к созданию современных динамичных веб-интерфейсов и веб-приложений с использованием HTMX — технологии, позволяющей строить интерактивные приложения на основе HTML с минимальным объемом JavaScript- кода. Подробно описаны принципы работы с HTMX в связке с Java, Spring Boot и Thymeleaf. Показаны базовые приемы замены DOM-элементов с использованием различных триггеров, работа с запросами и заголовками, а также использование библиотеки htmx-spring-boot. Рассказано, как использовать замены Out Of Band. Описаны способы реализации современных UI-паттернов, таких как ленивая загрузка, активный поиск, бесконечная прокрутка и валидация форм в реальном времени. Рассматриваются возможности подключения веб-компонентов и усиления клиентской логики с помощью JavaScript и библиотеки Alpine.js. Описано, как обеспечить безопасность веб-приложений на HTMX, как обрабатывать события, отправляемые сервером, и использовать веб-сокеты.

Создание динамичных и интерактивных веб-интерфейсов больше не требует сложного программирования на JavaScript. Благодаря технологии HTMX — революционному подходу к фронтенд-разработке — вы можете строить мощные веб-приложения, используя минимум скриптов и привычный HTML. Эта книга поможет вам освоить HTMX в связке с Java, Spring Boot и Thymeleaf, изменив ваше представление о веб-разработке.
Автор последовательно вводит в основы работы с HTMX — от простых механизмов замены DOM-элементов с использованием различных триггеров до полноценной интеграции с контроллерами Spring Boot. Показаны современные UI-паттерны: ленивая загрузка, активный поиск, бесконечная прокрутка, валидация форм в реальном времени и другие. Рассматриваются возможности использования веб-фреймворков и компонентов JavaScript для усиления интерактивности на стороне клиента.

Вы узнаете:

• Как устроен синтаксис HTMX: триггеры, цели, замены
• Как работать с заголовками запросов и ответов
• Как использовать библиотеку htmx-spring-boot
• Что такое замены Out Of Band и зачем они нужны
• Как использовать JavaScript и библиотеку Alpine.js вместе с HTMX
• Как обеспечить безопасность приложений на HTMX
• Как реализовать ленивую загрузку, бесконечную прокрутку и активный поиск
• Как выполнять валидацию форм в реальном времени
• Как интегрировать HTMX с веб-компонентами и обмениваться данными в реальном времени
• Как обрабатывать события, отправляемые сервером, и использовать веб-сокеты

Книгу “Современные фронтенды на базе HTMX” можно купить в нашем интенет-магазине.

Напутственное слово……………………………………………………………………………….. 9

Предисловие…………………………………………………………………………………………… 11

Благодарности……………………………………………………………………………………….. 13

ГЛАВА 1. Используемые методы……………………………………………………………. 15

1.1. HTMX…………………………………………………………………………………………………………………………………… 15

1.2. Spring Boot……………………………………………………………………………………………………………………………. 16

1.3. Spring Framework…………………………………………………………………………………………………………………. 16

1.4. Thymeleaf…………………………………………………………………………………………………………………………….. 17

1.5. Alpine……………………………………………………………………………………………………………………………………. 17

1.6. Tailwind CSS…………………………………………………………………………………………………………………………. 18

ГЛАВА 2. Начало работы………………………………………………………………………. 19

2.1. Предварительные настройки……………………………………………………………………………………………… 19

2.1.1. macOS/Linux………………………………………………………………………………………………………………. 19

2.1.2. Windows……………………………………………………………………………………………………………………… 20

2.2. Инструмент ttcli…………………………………………………………………………………………………………………… 20

2.2.1. Суть вопроса……………………………………………………………………………………………………………… 20

2.2.2. Установка…………………………………………………………………………………………………………………… 21

2.2.3. Генерация проекта……………………………………………………………………………………………………. 21

2.2.4. Запуск приложения…………………………………………………………………………………………………… 25

2.3. Плагины IntelliJ IDEA………………………………………………………………………………………………………….. 26

2.4. Краткие выводы………………………………………………………………………………………………………………….. 27

ГЛАВА 3. Начало работы с HTMX…………………………………………………………. 29

3.1. Пример «Hello World»………………………………………………………………………………………………………….. 29

3.2. Триггеры………………………………………………………………………………………………………………………………. 34

3.2.1. Модификаторы триггеров………………………………………………………………………………………… 34

3.2.2. Фильтры триггеров……………………………………………………………………………………………………. 35

3.2.3. Особые события………………………………………………………………………………………………………… 35

3.2.4. Пример……………………………………………………………………………………………………………………….. 37

3.3. Цели……………………………………………………………………………………………………………………………………… 43

3.4. Замена………………………………………………………………………………………………………………………………….. 43

3.5. HTTP-глаголы……………………………………………………………………………………………………………………… 47

3.6. Краткие выводы………………………………………………………………………………………………………………….. 47

ГЛАВА 4. Заголовки запроса/ответа………………………………………………………. 49

4.1. Заголовки запроса………………………………………………………………………………………………………………. 49

4.2. Заголовки ответа…………………………………………………………………………………………………………………. 51

4.3. Библиотека htmx-spring-boot……………………………………………………………………………………………… 52

4.4. Краткие выводы………………………………………………………………………………………………………………….. 55

ГЛАВА 5. Проект 1: TodoMVC……………………………………………………………….. 57

5.1. Начальная реализация……………………………………………………………………………………………………….. 57

5.2. Усиление приложения………………………………………………………………………………………………………… 69

5.3. Тонкая реализация HTMX…………………………………………………………………………………………………. 70

5.3.1. Добавление нового элемента todo…………………………………………………………………………… 70

5.3.2. Обновление количества пунктов……………………………………………………………………………… 74

5.3.3. Пометка пункта как завершенного………………………………………………………………………….. 77

5.3.4. Удаление пункта……………………………………………………………………………………………………….. 79

5.4. Краткие выводы………………………………………………………………………………………………………………….. 81

ГЛАВА 6. Замена Out Of Band………………………………………………………………… 83

6.1. Общие принципы…………………………………………………………………………………………………………………. 83

6.2. Пример…………………………………………………………………………………………………………………………………. 84

6.2.1. Генерация проекта……………………………………………………………………………………………………. 84

6.2.2. Модель предметной области……………………………………………………………………………………. 85

6.2.3. Настройка пользовательского интерфейса…………………………………………………………….. 88

6.2.4. Ввод продолжительности регистрации времени……………………………………………………. 91

6.2.5. Итоги дня……………………………………………………………………………………………………………………. 95

6.3. Краткие выводы………………………………………………………………………………………………………………….. 97

ГЛАВА 7. Скрипт на стороне клиента……………………………………………………. 99

7.1. Vanilla JavaScript…………………………………………………………………………………………………………………. 99

7.1.1. Конфигурация проекта…………………………………………………………………………………………… 100

7.1.2. Программный интерфейс Numbers………………………………………………………………………… 100

7.1.3. Веб-интерфейс…………………………………………………………………………………………………………. 103

7.1.4. Индикатор выполнения…………………………………………………………………………………………… 105

7.1.5. Обработка ошибок………………………………………………………………………………………………….. 107

7.2. Alpine.js………………………………………………………………………………………………………………………………. 112

7.2.1. Настройка проекта…………………………………………………………………………………………………. 112

7.2.2. Модель предметной области…………………………………………………………………………………. 113

7.2.3. Встроенное редактирование краткого содержания проблемы…………………………… 121

7.2.3.1. Визуальная индикация………………………………………………………………………………. 121

7.2.3.2. Реализация технологии Happy Flow…………………………………………………………. 122

7.2.3.3. Реализация отмены потока (cancel flow)………………………………………………….. 127

7.2.3.4. Обработка ошибок……………………………………………………………………………………… 131

7.2.4. Использование технологии drag-and-drop…………………………………………………………….. 133

7.3. Краткие выводы………………………………………………………………………………………………………………… 140

ГЛАВА 8. Безопасность………………………………………………………………………… 141

8.1. HTMX и безопасность………………………………………………………………………………………………………. 141

8.2. Закладки…………………………………………………………………………………………………………………………….. 141

8.2.1. Инициализация проекта…………………………………………………………………………………………. 141

8.2.2. Добавление Spring Security……………………………………………………………………………………… 142

8.3. Классическая настройка Thymeleaf……………………………………………………………………………….. 143

8.4. Добавление закладки с помощью HTMX……………………………………………………………………….. 149

8.5. Удаление закладки……………………………………………………………………………………………………………. 151

8.5.1. Удаление с помощью скрытого ввода…………………………………………………………………… 153

8.5.2. Удаление с помощью метатегов…………………………………………………………………………….. 153

8.5.3. Удаление с помощью встроенного синтаксиса Thymeleaf для JavaScript…………. 154

8.6. Обработка выхода из системы………………………………………………………………………………………… 156

8.7. Краткие выводы………………………………………………………………………………………………………………… 157

ГЛАВА 9. Проект 2: приложение для работы с контактами…………………. 159

9.1. Настройка проекта…………………………………………………………………………………………………………… 159

9.2. Добавление контакта……………………………………………………………………………………………………….. 167

9.3. Поиск………………………………………………………………………………………………………………………………….. 174

9.4. Просмотр контакта…………………………………………………………………………………………………………… 176

9.5. Редактирование и удаление контакта…………………………………………………………………………….. 179

9.6. Удаление с помощью HTMX……………………………………………………………………………………………. 185

9.7. Встроенная проверка наличия дубликатов адресов электронной почты…………………… 188

9.7.1. Реализация пользовательского валидатора…………………………………………………………. 188

9.7.2. Триггер валидации в процессе ввода…………………………………………………………………….. 191

9.7.3. Улучшение пользовательского опыта…………………………………………………………………… 193

9.7.4. Использование hx-validate для предотвращения лишних запросов…………………… 196

9.8. Пагинация………………………………………………………………………………………………………………………….. 196

9.8.1. Генерация контактов с помощью Datafaker…………………………………………………………. 197

9.8.2. Ручная пагинация……………………………………………………………………………………………………. 197

9.8.3. Шаблон «Click to load»……………………………………………………………………………………………. 201

9.8.4. Бесконечная прокрутка………………………………………………………………………………………….. 202

9.9. Активный поиск…………………………………………………………………………………………………………………. 203

9.9.1. Пагинация поиска……………………………………………………………………………………………………. 203

9.9.2. Поиск по типу………………………………………………………………………………………………………….. 205

9.10. Удаление строки из списка…………………………………………………………………………………………….. 207

9.10.1. Настройка перенаправления кнопки Delete……………………………………………………….. 210

9.11. Архивация списка контактов…………………………………………………………………………………………. 211

9.11.1. Архиватор……………………………………………………………………………………………………………… 211

9.11.2. Создание архива…………………………………………………………………………………………………… 215

9.11.3. Ссылка на скачивание………………………………………………………………………………………….. 217

9.12. Краткие выводы………………………………………………………………………………………………………………. 220

ГЛАВА 10. Веб-компоненты…………………………………………………………………. 221

10.1. Что такое веб-компоненты?……………………………………………………………………………………………. 221

10.2. Интеграция Shoelace……………………………………………………………………………………………………….. 221

10.3. Дерево GitHub…………………………………………………………………………………………………………………. 222

10.3.1. API GitHub……………………………………………………………………………………………………………. 222

10.3.2. Реализация ленивой загрузки…………………………………………………………………………….. 226

10.3.3. Добавление релизов репозитория……………………………………………………………………… 229

10.3.4. Отображение примечаний к релизу…………………………………………………………………… 230

10.4. Краткие выводы………………………………………………………………………………………………………………. 233

ГЛАВА 11. События, отправляемые сервером, и веб-сокеты………………… 235

11.1. События, отправляемые сервером………………………………………………………………………………… 235

11.1.1. Что такое «события, отправляемые сервером»?………………………………………………. 235

11.1.2. Использование расширения HTMX SSE…………………………………………………………… 235

11.1.2.1. Настройка проекта………………………………………………………………………………. 235

11.1.2.2. Загрузка файла…………………………………………………………………………………….. 238

11.1.2.3. Отображение обрабатываемых строк……………………………………………….. 241

11.1.2.4. Отображение индикатора хода выполнения…………………………………….. 246

11.1.2.5. Проверка активности подключения……………………………………………………. 249

11.2. Веб-сокеты………………………………………………………………………………………………………………………. 252

11.2.1. Что такое веб-сокеты?………………………………………………………………………………………… 252

11.2.2. Использование расширения HTMX WS……………………………………………………………. 252

11.2.2.1. Настройка проекта………………………………………………………………………………. 252

11.2.2.2. Отправка HTML-кода обратно с помощью шаблонов Thymeleaf….. 258

11.3. Краткие выводы………………………………………………………………………………………………………………. 261

Заключение………………………………………………………………………………………….. 263

ПРИЛОЖЕНИЕ. Журнал изменений……………………………………………………. 265

Предметный указатель…………………………………………………………………………. 267

Опубликовано

Новинка: “Web API. Сборник рецептов”

Web API. Сборник рецептов

Книга посвящена разработке современных веб-приложений с использованием JavaScript и встроенных возможностей браузера на основе Web API. Приведены практические примеры реализации функций, которые ранее требовали сторонних плагинов: диалоговые окна, работа с геолокацией и другими возможностями, предоставляемыми браузером. Освещаются как устоявшиеся, так и находящиеся в стадии разработки API-интерфейсы, позволяющие создавать мощные и интерактивные веб-приложения, глубоко интегрированные с устройствами пользователей. Рассматривается, как браузеры реализуют модель разрешений для предоставления доступа к таким функциям, как геолокация и push-уведомления. Каждая задача в книге сопровождается готовыми рецептами, содержащими описание проблемы, решение с пояснениями и расширенное обсуждение. Книга ориентирована на программистов с опытом работы на JavaScript, знакомых с программным интерфейсом DOM (Document Object Model).

Для программистов

Повысьте уровень JavaScript-приложений

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

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

Это практическое руководство предлагает коллекцию прикладных примеров использования новейших возможностей браузерных API. Автор помогает разобраться, какие задачи можно решить с их помощью и как применять эти инструменты на практике. Поскольку речь идет о стандартизированных технологиях, вы всегда можете обратиться к надежной документации, например, на MDN Web Docs.

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

  • Добавьте веб-приложениям функции, схожие с возможностями современных браузеров
  • Познакомьтесь с широким набором инструментов, предлагаемых актуальными браузерными API
    • Изучите перспективные API-интерфейсы, находящиеся в стадии разработки
  • Используйте новые элементы интерфейса, такие как диалоговые окна, без подключения сторонних библиотек
    • Создавайте мощные и интерактивные приложения с глубокой интеграцией в возможности пользовательских устройств
  • Изучите реализуемую браузерами модель разрешений для предоставления доступа к таким функциям, как геолокация и push-уведомления

Книгу “Web API. Сборник рецептов: Повысьте уровень JavaScript-приложений” можно купить в нашем интенет-магазине.

Предисловие. 13

Возможности современных браузеров. 14

Недостатки сторонних библиотек. 14

Для кого предназначена эта книга. 14

Что содержится в этой книге. 15

Дополнительные ресурсы.. 15

Соглашения об используемых обозначениях. 16

Использование примеров кода. 17

Платформа онлайн-обучения O’Reilly. 18

Как с нами связаться. 18

Благодарности. 18

ГЛАВА 1. Асинхронные API. 21

1.0. Введение. 21

1.1. Работа с промисами. 22

1.2. Загрузка изображения с помощью использования резервного изображения (fallback) 24

1.3. Связывание промисов. 26

1.4. Использование ключевых слов  async и await 28

1.5. Параллельное использование промисов. 29

1.6. Анимация элемента с помощью  requestAnimationFrame. 30

1.7. Обертывание событий API в промис. 33

ГЛАВА 2. Простое сохранение данных с помощью Web Storage API. 36

2.0. Введение. 36

2.1. Проверка поддержки Web Storage. 38

2.2. Сохранение строковых данных. 39

2.3. Сохранение простых объектов. 40

2.4. Сохранение сложных объектов. 41

2.5. Отслеживание изменений в хранилище. 46

2.6. Поиск всех известных ключей. 47

2.7. Удаление данных. 49

ГЛАВА 3. URL-адреса и маршрутизация. 51

3.0. Введение. 51

3.1. Определение относительного URL-адреса. 52

3.2. Удаление параметров запроса из URL-адреса. 54

3.3. Добавление параметров запроса к URL-адресу. 56

3.4. Чтение параметров запроса. 58

3.5. Создание простого маршрутизатора  на стороне клиента. 60

3.6. Сопоставление URL-адресов с шаблонами. 62

ГЛАВА 4. Сетевые запросы.. 65

4.0. Введение. 65

4.1. Отправка запроса с помощью XMLHttpRequest 66

4.2. Отправка GET-запроса с помощью Fetch API 67

4.3. Отправка POST-запроса с помощью Fetch API 69

4.4. Загрузка файла с помощью Fetch API 70

4.5. Отправка Beacon. 71

4.6. Прослушивание удаленных событий  с помощью server-sent events. 72

4.7. Обмен данными с WebSockets  в режиме реального времени. 74

ГЛАВА 5. База данных IndexedDB.. 77

5.0. Введение. 77

5.1. Создание, чтение и удаление объектов  в базе данных. 79

5.2. Обновление существующей базы данных. 85

5.3. Выполнение запросов с использованием индексов. 87

5.4. Поиск строковых значений с помощью курсора. 90

5.5. Разбивка большого набора данных на страницы.. 92

5.6. Использование промисов  с IndexedDB API 94

ГЛАВА 6. Наблюдение за элементами DOM… 97

6.0. Введение. 97

6.1. Отложенная загрузка изображения при прокрутке. 99

6.2. Обертывание IntersectionObserver промисом.. 101

6.3. Автоматическая пауза при воспроизведении видео. 102

6.4. Анимация изменений высоты.. 103

6.5. Изменение содержимого элемента  в зависимости от размера. 105

6.6. Применение перехода  в момент появления элемента в поле зрения. 107

6.7. Использование режима бесконечной прокрутки. 108

ГЛАВА 7. Формы.. 110

7.0. Введение. 110

7.1. Заполнение поля формы из локального хранилища. 111

7.2. Отправка формы с помощью Fetch и FormData API 112

7.3. Отправка формы в формате JSON.. 114

7.4. Создание обязательного поля формы.. 116

7.5. Ограничения при вводе числа. 117

7.6. Определение шаблона валидации. 118

7.7. Валидация формы.. 119

7.8. Применение пользовательской логики валидации. 122

7.9. Проверка группы флажков. 124

7.10. Асинхронная проверка поля формы.. 127

ГЛАВА 8. API веб-анимации. 130

8.0. Введение. 130

8.1. Применение эффекта “пульсации”  при нажатии кнопки. 132

8.2. Запуск и остановка анимации. 135

8.3. Анимация вставки и удаления элементов DOM.. 136

8.4. Реверсирование анимации. 137

8.5. Отображение индикатора прокрутки. 141

8.6. Создание подпрыгивающего элемента. 143

8.7. Одновременный запуск нескольких анимаций. 144

8.8. Отображение анимации загрузки. 146

8.9. Соблюдение в анимации  предпочтений пользователя. 148

ГЛАВА 9. Web Speach API. 150

9.0. Введение. 150

9.1. Добавление продиктованного текста  в текстовое поле. 152

9.2. Создание Promise-помощника  для распознавания речи. 155

9.3. Получение доступных голосов. 156

9.4. Синтез речи. 157

9.5. Настройка параметров синтеза речи. 159

9.6. Автоматическая приостановка речи. 160

ГЛАВА 10. Работа с файлами. 161

10.0. Введение. 161

10.1. Загрузка текста из файла. 161

10.2. Загрузка изображения из URL-адреса данных. 164

10.3. Загрузка видео  в качестве URL-адреса объекта. 166

10.4. Загрузка изображения с помощью перетаскивания. 167

10.5. Проверка и запрос разрешений. 170

10.6. Экспорт данных API в файл. 171

10.7. Экспорт данных API со ссылкой  для скачивания. 173

10.8. Загрузка файла с помощью перетаскивания. 175

ГЛАВА 11. Интернационализация. 177

11.0. Введение. 177

11.1. Форматирование даты.. 178

11.2. Получение частей отформатированной даты.. 178

11.3. Форматирование относительной даты.. 179

11.4. Форматирование чисел. 181

11.5. Округление знаков после точки. 182

11.6. Форматирование ценового диапазона. 183

11.7. Форматирование единиц измерения. 184

11.8. Применение правил плюрализации. 184

11.9. Подсчет символов, слов и предложений. 186

11.10. Форматирование списков. 187

11.11. Сортировка массива имен. 188

ГЛАВА 12. Веб-компоненты.. 190

12.0. Введение. 190

12.1. Создание компонента  для отображения сегодняшней даты.. 193

12.2. Создание компонента  для форматирования пользовательской даты.. 194

12.3. Создание компонента обратной связи. 196

12.4. Создание компонента профильной карточки. 200

12.5. Создание компонента изображения  с отложенной загрузкой. 202

12.6. Создание компонента раскрытия информации. 204

12.7. Создание стилизованного компонента кнопки. 207

ГЛАВА 13. Элементы интерфейса пользователя. 211

13.0. Введение. 211

13.1. Создание диалогового окна  предупреждения. 212

13.2. Создание диалогового окна подтверждения. 215

13.3. Создание веб-компонента  диалогового окна подтверждения. 218

13.4. Использование элемента раскрытия информации. 220

13.5. Отображение всплывающего окна. 222

13.6. Ручное управление всплывающим окном.. 223

13.7. Позиционирование всплывающего окна  относительно элемента. 224

13.8. Отображение всплывающей подсказки. 227

13.9. Отображение уведомления. 229

ГЛАВА 14. Интеграция устройств. 231

14.0. Введение. 231

14.1. Считывание состояния батареи. 231

14.2. Считывание состояния сети. 234

14.3. Определение местоположения устройства. 235

14.4. Отображение местоположения устройства  на карте. 237

14.5. Копирование и вставка текста. 238

14.6. Совместное использование контента  с помощью Web Share API 241

14.7. Создание вибрации устройства. 242

14.8. Настройка ориентации устройства. 243

ГЛАВА 15. Измерение производительности. 245

15.0. Введение. 245

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

15.2. Измерение эффективности  использования ресурсов. 247

15.3. Поиск самых медленных ресурсов. 247

15.4. Определение тайминга для конкретного ресурса. 248

15.5. Профилирование производительности  рендеринга. 249

15.6. Профилирование многоэтапных задач. 251

15.7. Прослушивание показателей производительности. 253

ГЛАВА 16. Работа с консолью… 255

16.0. Введение. 255

16.1. Стилизации вывода консоли. 255

16.2. Использование уровней в журналах сообщений. 256

16.3. Создание именованных регистраторов. 257

16.4. Отображение массива объектов  в таблице. 258

16.5. Использование консольных таймеров. 260

16.6. Использование консольных групп. 261

16.7. Использование счетчиков. 263

16.8. Регистрация переменной и ее значения. 264

16.9. Протоколирование трассировки стека. 265

16.10. Проверка ожидаемых значений. 266

16.11. Изучение свойств объекта. 267

ГЛАВА 17. CSS. 269

17.0. Введение. 269

17.1. Выделение текстовых областей. 269

17.2. Предотвращение появления текста  без стилизации. 272

17.3. Анимация переходов DOM.. 274

17.4. Изменение таблиц стилей во время выполнения. 276

17.5. Условная установка CSS-класса. 277

17.6. Соответствие медиазапросам.. 277

17.7. Получение вычисленного стиля элемента. 278

ГЛАВА 18. Медиа. 281

18.0. Введение. 281

18.1. Запись экрана. 281

18.2. Захват изображения с камеры пользователя. 284

18.3. Захват видео с камеры пользователя. 286

18.4. Определение возможностей  системной поддержки медиа. 288

18.5. Применение видеофильтров. 290

ГЛАВА 19. Заключительные замечания. 292

19.0. Введение. 292

19.1. В защиту сторонних библиотек. 292

19.2. Определяйте функции, а не версии браузера. 292

19.3. Полифилы.. 293

19.4. Заглядывая в будущее. 293

Предметный указатель. 296

Об авторе. 302

Об изображении на обложке. 303

Опубликовано

Внимание, бестселлер: “Создание микрофронтендов”

Создание микрофронтендов

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

Для системных архитекторов, разработчиков и руководителей ИТ-проектов

Создание микрофронтендов» — один из тех редких примеров, когда все самые важные аспекты для успешного применения технической идеи на практике собраны в одной книге.
Алессандро Чинелли, руководитель департамента разработки

Если вы — технический руководитель или программист, ищущий исчерпывающее руководство по разработке и внедрению микрофронтендов в организации, то Лука Меццалира написал эту книгу специально для вас.
Йенс Оливер Мейерт, руководитель проектов и автор сайта meiert.com

МАСШТАБИРОВАНИЕ КОМАНД И ПРОЕКТОВ, РАСШИРЕНИЕ ВОЗМОЖНОСТЕЙ РАЗРАБОТЧИКОВ

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

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

  • Изучите доступные архитектуры разработки фронтендов
  • Узнайте, как принципы микросервисов применяются к разработке фронтендов
  • Освойте четыре столпа для создания успешной программной архитектуры
  • Изучите преимущества и подводные камни существующих архитектур микрофронтендов
  • Освойте принципы и лучшие практики для создания успешных стратегий автоматизации
  • Откройте для себя шаблоны для интеграции архитектур микрофронтендов с использованием микросервисов или монолитного API

Книгу “Создание микрофронтендов” можно купить со скидкой в интернет-магазине издательства “БХВ“.

Об авторе. 11

Предисловие. 13

Введение. 15

Почему я написал эту книгу. 15

Для кого эта книга. 16

Как устроена книга. 16

Условные обозначения и соглашения. 18

Благодарности. 18

ГЛАВА 1. Виды фронтендов. 21

Микрофронтенд-приложения. 21

Одностраничные приложения. 23

Изоморфные приложения. 25

Статические сайты.. 27

Jamstack. 27

Резюме. 28

ГЛАВА 2. Принципы микрофронтендов. 29

От монолита к микросервисам.. 30

Переход на микросервисы.. 32

Введение в микрофронтенды.. 33

Принципы работы микросервисов. 35

Разделение на домены.. 36

Культура автоматизации. 36

Скрытые детали реализации. 36

Децентрализованное управление. 36

Независимое развертывание. 36

Изоляция сбоев. 37

Хорошая наблюдаемость. 37

Применение принципов к микрофронтендам.. 37

Разделение на домены.. 37

Культура автоматизации. 38

Сокрытие деталей реализации. 38

Децентрализованное управление. 38

Независимое развертывание. 38

Изоляция сбоев. 39

Хорошая наблюдаемость. 39

Микрофронтенды не универсальное решение. 39

Резюме. 40

ГЛАВА 3. Микрофронтенд-архитектуры и связанные с ними трудности. 41

Структура принятия решений. 41

Определение микрофронтендов. 42

Предметно-ориентированный подход к микрофронтендам.. 43

Как определить ограниченный контекст. 45

Композиция микрофронтендов. 46

Маршрутизация для микрофронтендов. 48

Взаимодействие между микрофронтендами. 50

Микрофронтенды на практике. 53

Zalando. 53

HelloFresh. 53

Allegro Tech. 53

Spotify. 54

SAP. 55

OpenTable. 55

DAZN.. 55

Резюме. 56

ГЛАВА 4. Типы микрофронтенд-архитектуры.. 57

Структура принятия решений в действии. 57

Вертикальное разделение. 58

Горизонтальное разделение. 59

Анализ архитектуры.. 61

Архитектура и компромиссы.. 62

Архитектуры с вертикальным разделением.. 63

Оболочка приложения. 63

Сложности. 65

Реализация системы проектирования. 72

Простота и скорость разработки. 75

SEO-оптимизация. 75

Производительность и микрофронтенды.. 76

Доступные фреймворки. 79

Примеры применения. 80

Характеристики архитектуры.. 81

Архитектуры с горизонтальным разделением.. 83

На стороне клиента. 84

Сложности. 87

SEO-оптимизация. 94

Простота и скорость разработки. 95

Примеры применения. 96

Module Federation. 97

Iframe. 103

Веб-компоненты.. 110

На стороне сервера. 114

На границе сети. 124

Резюме. 128

ГЛАВА 5. Техническая реализация микрофронтендов. 129

Проект. 129

Введение в Module Federation. 132

Техническая реализация. 134

Структура проекта. 134

Оболочка приложения. 136

Микрофронтенд аутентификации. 142

Микрофронтенд каталога. 144

Микрофронтенд управления аккаунтами. 146

Развитие проекта. 150

Внедрение традиционного приложения. 150

Разработка интерфейса оформления заказа. 152

Реализация динамических удаленных контейнеров. 154

Зависимость от webpack. 154

Резюме. 155

ГЛАВА 6. Создание и развертывание микрофронтендов. 157

Принципы автоматизации. 158

Быстрая обратная связь. 159

Частые итерации. 160

Поддержка команд. 161

Установка ограничений. 161

Разработка стратегии тестирования. 162

Простота и скорость разработки. 162

Горизонтальное и вертикальное разделение. 163

Шаблоны микрофронтендов. 164

Стратегия деления на среды.. 165

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

Монорепозиторий. 165

Несколько репозиториев. 169

Возможное будущее для системы контроля версий. 172

Стратегии непрерывной интеграции. 173

Тестирование микрофронтендов. 174

Функции проверки соответствия. 178

Операции, специфические для микрофронтендов. 180

Стратегии развертывания. 181

Сине-зеленое развертывание и канареечные релизы.. 181

Паттерн “душитель”. 184

Наблюдаемость. 186

Резюме. 187

ГЛАВА 7. Конвейер автоматизации для микрофронтендов:
практический пример. 189

Подготовка. 189

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

Инициализация конвейера. 192

Проверка качества кода. 193

Сборка. 194

Проверка после сборки. 195

Развертывание. 197

Итоги по стратегии автоматизации. 197

Резюме. 198

ГЛАВА 8. Бэкенд-архитектуры, совместимые с микрофронтендами. 199

Интеграция API и микрофронтенды.. 199

Работа со словарем сервисов. 201

Работа со шлюзом API 208

Работа с паттерном BFF. 213

Использование GraphQL с микрофронтендами. 218

Рекомендации. 222

Резюме. 226

ГЛАВА 9. Миграция с монолита на микрофронтенды: практический пример  227

Контекст. 228

Стек технологий. 228

Взаимодействие пользователя с платформой. 229

Технические цели. 232

Стратегия миграции. 233

Структура принятия решений в действии. 233

Разделение одностраничного приложения на несколько поддоменов. 237

Выбор технологий. 240

Детали реализации. 244

Задачи оболочки приложения. 244

Инициализация приложения. 244

Связь для обмена данными. 245

Интеграция бэкенда. 247

Интеграция аутентификации в микрофронтенды.. 247

Управление зависимостями. 250

Интеграция дизайна. 251

Общие компоненты.. 252

Реализация канареечных релизов. 253

Локализация. 255

Резюме. 256

ГЛАВА 10. Внедрение микрофронтендов в организации. 259

Зачем нам микрофронтенды?. 259

Связь между организациями и программной архитектурой. 260

Как комитеты изобретают новое?. 261

Команды по функциям и команды по компонентам.. 264

Реализация системы управления для потоков коммуникации. 267

Запрос комментариев. 267

Реестр архитектурных решений. 268

Совершенствование потоков коммуникации. 270

Работай, начиная с конца. 270

Сообщество практиков и общие собрания. 271

Управление внешними зависимостями. 272

Децентрализованная организация. 274

Децентрализация и микрофронтенды.. 276

Резюме. 278

ПРИЛОЖЕНИЕ. Что сами разработчики и архитекторы думают
о микрофронтендах. 279

Предметный указатель. 317

Лука Меццалира

Лука Меццалира — вице-президент по архитектуре в облачном стриминговом сервисе DAZN с более чем 15-летним опытом работы, архитектор решений на платформе AWS, всемирно известный спикер и автор. На протяжении последних 18 лет занимается созданием фронтендов для облачных приложений и сервисов, работал над передовыми проектами для мобильных, настольных и веб-приложений, телевизоров, приставок и встраиваемых устройств. В свободное время пишет для национальных и международных технических журналов, также является рецензентом в издательствах APress, Packt Publishing, Pragmatic Bookshelf и O’Reilly.

Опубликовано

Новинка: “WebAssembly. Практическое руководство”

WebAssembly. Практическое руководств

Базовая книга о технологии WebAssembly, позволяющей писать браузерный код на многих распространённых языках программирования и интегрировать этот код с JavaScript. В книге избран проектный подход и рассказано, как при помощи библиотек и функций WebAssembly переносить и переиспользовать в веб-приложениях код на C++, Rust и языках для платформы .NET. Рассмотрено, как создавать децентрализованные приложения и средства для периферийных вычислений с повышенными требованиями к безопасности, производительности и интероперабельности при работе в браузере.  Особое внимание уделено библиотеке Tensorflow.js, поддерживающей глубокое обучение в браузере на основе пользовательских запросов.

Для веб-разработчиков и исследователей языков программирования

Животное на обложке — это норвич-терьер. Эти бесстрашные, активные и ласковые собачки были популярны среди студентов Кембриджского университета в 1870-х годах, которые держали их в общежитиях в качестве домашних животных. В США норвичи добились успеха в охоте как на грызунов, так и на лис, поскольку их небольшой размер позволял забираться в узкие норы, в которые гончие залезть не могли.

The Definitive Guide

Эффективный кроссплатформенный код

Перед вами подробное и доступное введение в одну из наиболее революционных технологий современной IT-индустрии.
Исходно язык WebAssembly возник как средство, позволяющее внедрять в браузер иные языки кроме JavaScript, а сегодня превратился в многофункциональный набор инструментов, обеспечивающих переносимость, высокую производительность, безопасность и многоразовость браузерного кода. Сегодня на WebAssembly можно писать для разнообразных платформ, и их круг постоянно расширяется.

Предлагается поступательное введение в технологию: в рамках книги разобрано несколько постепенно усложняющихся примеров, в которых вы научитесь при помощи WebAssembly внедрять в браузер код C++, Rust, .NET, интегрировать в веб-приложение библиотеку машинного обучения Tensorflow.js. Изложенный материал будет полезен при разработке встраиваемых систем, в научных вычислениях, при создании стартапов и повышении производительности и интероперабельности имеющихся продуктов.

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

Книгу “WebAssembly. Практическое руководство” можно купить со скидкой в интернет-магазине издательства “БХВ“.

Предисловие…………………………………………………………………………………………….. 9

Условные обозначения, используемые в этой книге………………………………………………………………. 10

Использование примеров программного кода………………………………………………………………………… 11

Онлайн-обучение O’Reilly…………………………………………………………………………………………………………. 11

Как с нами связаться………………………………………………………………………………………………………………….. 11

Благодарности…………………………………………………………………………………………………………………………… 12

Глава 1. Знакомство с WebAssembly……………………………………………………….. 15

Что WebAssembly может вам предложить……………………………………………………………………………….. 15

История развития веба………………………………………………………………………………………………………………. 18

Истоки JavaScript……………………………………………………………………………………………………………………….. 19

Эволюция веб-платформ…………………………………………………………………………………………………………… 21

Native Client (NaCl)…………………………………………………………………………………………………………………….. 24

asm.js…………………………………………………………………………………………………………………………………………… 26

Появление WebAssembly…………………………………………………………………………………………………………… 28

Глава 2. Нечто вроде “Hello, World”………………………………………………………. 31

Текстовый формат WebAssembly — Wat (WebAssembly Text Format)………………………………….. 32

Преобразование Wat в Wasm……………………………………………………………………………………………………. 36

Выполнение Wasm в Repl………………………………………………………………………………………………………….. 38

Выполнение WebAssembly в браузере…………………………………………………………………………………….. 39

Глава 3. Модули в WebAssembly…………………………………………………………….. 43

Структура модуля……………………………………………………………………………………………………………………… 44

Изучение секций модуля……………………………………………………………………………………………………………. 46

Работа с модулями…………………………………………………………………………………………………………………….. 49

Будущая интеграция с модулями ES6……………………………………………………………………………………… 55

Глава 4. Память в WebAssembly……………………………………………………………… 57

Типизированные массивы…………………………………………………………………………………………………………. 58

Объекты Memory в WebAssembly……………………………………………………………………………………………… 62

Использование Memory API в WebAssembly……………………………………………………………………………. 65

И напоследок строки…………………………………………………………………………………………………………………. 70

Глава 5. Совместное использование C++ и WebAssembly……………………….. 77

Функции в C………………………………………………………………………………………………………………………………… 78

Всё усложняется………………………………………………………………………………………………………………………… 87

C/C++ и Webassembly………………………………………………………………………………………………………………… 95

Наконец-то “Hello, World!” на WebAssembly…………………………………………………………………………. 101

Глава 6. Применение WebAssembly: традиционный код под браузером.. 105

Программа “Hello, World!” — теперь настоящая…………………………………………………………………… 106

Перенос стороннего кода………………………………………………………………………………………………………… 111

Проект libsodium………………………………………………………………………………………………………………………. 125

Глава 7. Таблицы в WebAssembly…………………………………………………………. 127

Статическое и динамическое связывание……………………………………………………………………………… 127

Создание объектов Table в модулях………………………………………………………………………………………. 132

Динамическое связывание в WebAssembly……………………………………………………………………………. 135

Глава 8. WebAssembly в серверных приложениях…………………………………. 139

Нативные расширения для Node.js………………………………………………………………………………………… 140

WebAssembly и Node.js……………………………………………………………………………………………………………. 144

“Атака на цепочку поставок”………………………………………………………………………………………………….. 147

WebAssembly и Deno……………………………………………………………………………………………………………….. 148

Взгляд в будущее……………………………………………………………………………………………………………………… 152

Глава 9. WebAssembly за работой: TensorFlow.js…………………………………… 155

Аппаратная платформа…………………………………………………………………………………………………………… 156

Playground…………………………………………………………………………………………………………………………………. 157

TensorFlow.js…………………………………………………………………………………………………………………………….. 158

Серверный модуль на WebAssembly……………………………………………………………………………………… 161

Глава 10. Rust………………………………………………………………………………………. 165

Введение в Rust………………………………………………………………………………………………………………………… 166

Rust и WebAssembly…………………………………………………………………………………………………………………. 171

wasm-bindgen……………………………………………………………………………………………………………………………. 175

Разработка кода для входа и выхода из браузера……………………………………………………………….. 182

Глава 11. Системный интерфейс WebAssembly (WASI)…………………………. 189

Системный интерфейс WebAssembly (WASI)………………………………………………………………………… 189

Безопасность на основе возможностей………………………………………………………………………………….. 198

Полная картина WebAssembly……………………………………………………………………………………………….. 202

Глава 12. Расширение платформы WebAssembly………………………………….. 207

Время выполнения WASI………………………………………………………………………………………………………… 208

Множественные возвращаемые значения……………………………………………………………………………… 212

Ссылочные типы……………………………………………………………………………………………………………………… 214

Связывание модулей……………………………………………………………………………………………………………….. 218

Тестирование функций……………………………………………………………………………………………………………. 223

Другие предложения……………………………………………………………………………………………………………….. 226

Глава 13. WebAssembly и .NET……………………………………………………………… 229

.NET и Wasmtime……………………………………………………………………………………………………………………… 230

Blazor………………………………………………………………………………………………………………………………………… 234

Платформа Uno………………………………………………………………………………………………………………………… 245

Глава 14. Использование AssemblyScript и WebAssembly………………………. 251

“Вовсе не компилятор TypeScript для WebAssembly”…………………………………………………………… 253

Простой пример……………………………………………………………………………………………………………………….. 255

Сборка “мусора” и среда выполнения AssemblyScript…………………………………………………………. 260

Стандартная библиотека ассемблера…………………………………………………………………………………… 261

Загрузчик AssemblyScript………………………………………………………………………………………………………… 262

Глава 15. Прикладной WebAssembly: в облаке и на границах………………. 267

Кратко о моем опыте работы…………………………………………………………………………………………………. 267

Наша отрасль развивается……………………………………………………………………………………………………… 269

Fastly Compute@Edge……………………………………………………………………………………………………………… 274

Krustlet………………………………………………………………………………………………………………………………………. 276

Suborbital…………………………………………………………………………………………………………………………………… 277

WasmEdge…………………………………………………………………………………………………………………………………. 279

wasmCloud………………………………………………………………………………………………………………………………… 282

Глава 16. Прикладной WebAssembly: децентрализованные приложения 287

Централизация против децентрализации……………………………………………………………………………… 287

От Bitcoin к Ethereum……………………………………………………………………………………………………………….. 289

Как вы решаете проблему, подобную проблеме остановки?………………………………………………. 291

ewasm………………………………………………………………………………………………………………………………………… 293

Polkadot…………………………………………………………………………………………………………………………………….. 295

InterPlanetary File System (IPFS)……………………………………………………………………………………………… 296

Глава 17. WebAssembly и другие языки программирования…………………. 305

TinyGo……………………………………………………………………………………………………………………………………….. 305

Artichoke……………………………………………………………………………………………………………………………………. 311

Swift…………………………………………………………………………………………………………………………………………… 312

Java……………………………………………………………………………………………………………………………………………. 315

Kotlin…………………………………………………………………………………………………………………………………………. 318

Zig………………………………………………………………………………………………………………………………………………. 318

Grain………………………………………………………………………………………………………………………………………….. 322

И что теперь?……………………………………………………………………………………………………………………………. 323

Приложение. Установка инструментов WebAssembly…………………………… 325

Установка WebAssembly Binary Toolkit (WABT)………………………………………………………………….. 325

Установка LLVM……………………………………………………………………………………………………………………… 325

Установка Emscripten………………………………………………………………………………………………………………. 326

Установка Wasm3……………………………………………………………………………………………………………………. 326

Установка Wasmtime………………………………………………………………………………………………………………. 327

Установка Wasmer…………………………………………………………………………………………………………………… 327

Установка инструментов Rust………………………………………………………………………………………………… 327

Установка инструментов .NET……………………………………………………………………………………………….. 328

Установка AssemblyScript……………………………………………………………………………………………………….. 329

Установка IPFS………………………………………………………………………………………………………………………… 329

Установка TinyGo……………………………………………………………………………………………………………………. 329

Установка Artichoke………………………………………………………………………………………………………………… 329

Установка SwiftWasm……………………………………………………………………………………………………………… 329

Установка Zig и Grain………………………………………………………………………………………………………………. 330

Предметный указатель…………………………………………………………………………. 331

Об авторе……………………………………………………………………………………………… 335

Об изображении на обложке………………………………………………………………… 336

Brian Sletten

Брайан Слеттен (Brian Sletten) – широко эрудированный программист. Разрабатывал приложения для розничной торговли, банковской сферы, издательского дела, онлайн-игр, оборонной сферы, финансов, гостиничного бизнеса и здравоохранения. За годы работы научился сочетать надёжные решения нетривиальных задач с внедрением самых передовых технологий. Именно поэтому он высоко оценивает потенциал WebAssembly.

Опубликовано

Супер бестселлер: “Python для гиков”

Python для гиков

Книга подробно рассказывает о разработке, развертывании и поддержке крупномасштабных проектов на Python. Представлены такие концепции, как итераторы, генераторы, обработка ошибок и исключений, обработка файлов и ведение журналов. Приведены способы автоматизации тестирования приложений и разработки через тестирование (TDD). Рассказано о написании приложений с использованием кластера Apache Spark для обработки больших данных, о разработке и развертывании бессерверных программ в облаке на примере Google Cloud Platform (GCP), о создании веб-приложений и REST API, использовании среды Flask. Показаны способы применения языка для создания, обучения и оценки моделей машинного обучения, а также их развертывания в облаке, описаны приемы использования Python для извлечения данных с сетевых устройств и систем управления сетью (NMS).

Для программистов

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

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

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

Вы изучите:

  • Принципы разработки и управления сложными проектами
  • Способы автоматизации тестирования приложений и разработки через тестирование (TDD)
  • Многопоточность и многопроцессорность в Python
  • Написание приложений с использованием кластера Apache Spark для обработки больших данных
  • Разработку и развертывание бессерверных программ в облаке на примере Google Cloud Platform (GCP)
  • Создание на Python веб-приложений и REST API, использование среды Flask
  • Использование Python для извлечения данных с сетевых устройств и систем управления сетью (NMS)
  • Применение Python для анализа данных и машинного обучения

Книгу “Python для гиков” можно купить со скидкой в интернет-магазине издательства “БХВ“.

Об авторе. 14

О рецензентах. 15

Предисловие. 16

Для кого предназначена эта книга. 16

О чем эта книга. 17

Как получить максимальную отдачу от книги. 18

Загрузка файлов с примерами кода. 18

Условные обозначения. 19

Раздел 1. Python помимо основ. 21

Глава 1. Оптимальный жизненный цикл разработки на Python. 23

Культура и сообщество Python. 23

Этапы проекта Python. 26

Стратегия процесса разработки. 27

Итерация по этапам. 28

Стремление к MVP в первую очередь. 28

Стратегия разработки для специализированных предметных областей. 29

Эффективное документирование кода Python. 32

Комментарии Python. 32

Docstring. 32

Документация на уровне функций или классов. 34

Разработка эффективной схемы именования. 35

Методы. 36

Переменные. 36

Константы. 37

Классы. 37

Пакеты. 38

Модули. 38

Соглашения об импорте. 38

Аргументы. 38

Полезные инструменты. 38

Системы контроля версий. 39

Что не стоит хранить в репозитории системы контроля версий. 39

Понимание стратегий развертывания кода. 40

Пакетная разработка. 40

Среды разработки Python. 42

IDLE. 42

Sublime Text 42

Atom.. 42

PyCharm.. 42

Visual Studio Code. 43

PyDev. 43

Spyder 43

Заключение. 43

Вопросы. 44

Дополнительные ресурсы. 44

Ответы. 44

Глава 2. Использование модулей для сложных проектов. 45

Технические требования. 46

Знакомство с модулями и пакетами. 46

Импорт модулей. 46

Оператор import 48

Оператор __import__. 52

Инструмент importlib.import_module. 52

Абсолютный и относительный импорт. 53

Загрузка и инициализация модуля. 55

Загрузка модуля. 55

Установка параметров для специальных переменных. 55

Выполнение кода. 56

Стандартные модули. 57

Написание многоразовых модулей. 58

Независимая функциональность. 58

Генерализация функционала. 59

Традиционный стиль программирования. 60

Четко определенная документация. 61

Сборка пакетов. 62

Именование. 63

Файл инициализации пакета. 63

Сборка пакета. 63

Доступ к пакетам из любого расположения. 66

Общий доступ к пакету. 70

Создание пакета в соответствии с рекомендациями PyPA.. 70

Установка из локального исходного кода с помощью pip. 73

Публикация пакета в Test PyPI 75

Установка пакета из PyPI 76

Заключение. 77

Вопросы. 77

Дополнительные ресурсы. 77

Ответы. 78

Глава 3. Расширенное объектно-ориентированное программирование
на Python. 79

Технические требования. 80

Знакомство с классами и объектами. 80

Различия между атрибутами класса и атрибутами экземпляра. 80

Конструкторы и деструкторы классов. 83

Различия между методами класса и методами экземпляра. 84

Специальные методы. 85

Принципы ООП.. 86

Инкапсуляция данных. 87

Объединение данных и действий. 87

Сокрытие информации. 89

Защита данных. 91

Традиционный подход к использованию геттеров и сеттеров. 91

Использование декоратора property. 92

Расширение классов с помощью наследования. 94

Простое наследование. 94

Множественное наследование. 96

Полиморфизм. 97

Перегрузка метода. 97

Переопределение метода. 98

Абстракция. 100

Композиция как альтернативный подход к проектированию.. 102

Утиная типизация в Python. 104

Когда не стоит использовать ООП в Python. 105

Заключение. 106

Вопросы. 106

Дополнительные ресурсы. 107

Ответы. 107

Раздел 2. Расширенные концепции программирования. 109

Глава 4. Библиотеки Python для продвинутого программирования. 111

Технические требования. 111

Введение в контейнеры данных Python. 112

Строки. 112

Списки. 113

Кортежи. 114

Словари. 114

Множества. 115

Итераторы и генераторы для обработки данных. 116

Итераторы. 116

Генераторы. 120

Обработка файлов в Python. 122

Операции с файлами. 123

Обработка ошибок и исключений. 126

Работа с исключениями в Python. 127

Вызов исключений. 129

Определение пользовательских исключений. 130

Модуль logging в Python. 131

Основные компоненты системы логирования. 132

Работа с модулем logging. 134

Что стоит и не стоит записывать в журнал. 140

Заключение. 141

Вопросы. 141

Дополнительные ресурсы. 141

Ответы. 141

Глава 5. Тестирование и автоматизация с помощью Python. 143

Технические требования. 144

Понимание различных уровней тестирования. 144

Модульное тестирование. 145

Интеграционное тестирование. 145

Системное тестирование. 145

Приемочное тестирование. 146

Работа с тестовыми фреймворками Python. 146

Работа с фреймворком unittest 148

Фреймворк тестирования pytest 157

Разработка через тестирование. 165

Красный. 165

Зеленый. 166

Рефакторинг. 166

Автоматизированная непрерывная интеграция. 167

Заключение. 168

Вопросы. 168

Дополнительные ресурсы. 168

Ответы. 169

Глава 6. Дополнительные советы и приемы Python. 170

Технические требования. 170

Расширенные приемы использования функций в Python. 171

Функции counter, itertools и zip для итерационных задач. 171

Использование методов filter, map и reduce для преобразования данных. 175

Создание лямбда-функций. 178

Внедрение одной функции в другую.. 179

Изменение поведения функции с помощью декораторов. 181

Расширенные концепции структур данных. 187

Внедрение словаря в словарь. 187

Использование включений. 190

Введение в Pandas DataFrame. 192

Операции с объектом DataFrame. 193

Сложные случаи использования DataFrame. 198

Заключение. 203

Вопросы. 204

Дополнительные ресурсы. 204

Ответы. 204

Раздел 3. Масштабирование за пределы одного потока. 205

Глава 7. Многопроцессорная обработка, многопоточность
и асинхронное программирование. 207

Технические требования. 208

Многопоточность в Python и ее ограничения. 208

Слепое пятно Python. 209

Ключевые компоненты многопоточного программирования на Python. 210

Практический пример: многопоточное приложение для загрузки файлов
с Google Диска. 218

Многопроцессорная обработка. 221

Создание нескольких процессов. 221

Обмен данными между процессами. 224

Обмен объектами между процессами. 228

Синхронизация процессов. 230

Практический пример: многопроцессорное приложение
для загрузки файлов с Google Диска. 231

Асинхронное программирование для адаптивных систем. 233

Модуль asyncio. 234

Распределение задач с помощью очередей. 236

Практический пример: асинхронное приложение для загрузки файлов
с Google Диска. 238

Заключение. 240

Вопросы. 240

Дополнительные ресурсы. 241

Ответы. 241

Глава 8. Масштабирование Python с помощью кластеров. 242

Технические требования. 243

Возможности кластеров для параллельной обработки. 243

Hadoop MapReduce. 244

Apache Spark. 246

Устойчивые распределенные наборы данных (RDD) 249

Операции с RDD.. 249

Создание RDD.. 250

PySpark для параллельной обработки данных. 251

Создание программ SparkSession и SparkContext 253

PySpark для операций с RDD.. 254

PySpark DataFrames 257

PySpark SQL. 261

Практические примеры использования Apache Spark и PySpark. 262

Пример 1: калькулятор числа π в Apache Spark. 262

Заключение. 268

Вопросы. 269

Дополнительные ресурсы. 269

Ответы. 270

Глава 9. Программирование на Python для облака. 271

Технические требования. 271

Знакомство с облачными возможностями для приложений Python. 272

Среды разработки Python для облака. 272

Облачные среды выполнения для Python. 274

Создание веб-сервисов Python для облачного развертывания. 276

Использование Google Cloud SDK.. 277

Использование веб-консоли GCP. 284

Использование Google Cloud Platform для обработки данных. 287

Введение в основы Apache Beam.. 287

Конвейеры Apache Beam.. 289

Создание конвейеров для Cloud Dataflow.. 294

Заключение. 298

Вопросы. 299

Дополнительные ресурсы. 299

Ответы. 300

Раздел 4. Python для веб-разработки, облака и сети. 301

Глава 10. Использование Python для разработки веб-приложений
и REST API 303

Технические требования. 304

Требования к веб-разработке. 304

Веб-фреймворки. 304

Пользовательский интерфейс. 305

Веб-сервер/сервер приложений. 306

База данных. 307

Безопасность. 307

API 307

Документация. 307

Знакомство с фреймворком Flask. 308

Создание базового веб-приложения с маршрутизацией. 308

Обработка запросов с разными типами HTTP-методов. 310

Отображение статического и динамического контента. 312

Извлечение параметров из HTTP-запроса. 313

Взаимодействие с системами управления базами данных. 315

Обработка ошибок и исключений в веб-приложениях. 318

Создание REST API 321

Использование Flask для REST API 322

Разработка REST API для доступа к базе данных. 324

Пример: создание веб-приложения с помощью REST API 326

Заключение. 331

Вопросы. 332

Дополнительные ресурсы. 332

Ответы. 332

Глава 11. Разработка микросервисов на Python. 334

Технические требования. 334

Введение в микросервисы. 335

Практические рекомендации по созданию микросервисов. 337

Создание приложений на базе микросервисов. 338

Варианты разработки микросервисов на Python. 339

Варианты развертывания микросервисов. 340

Разработка приложения на основе микросервисов. 341

Заключение. 352

Вопросы. 352

Дополнительные ресурсы. 352

Ответы. 353

Глава 12. Создание бессерверных функций на Python. 354

Технические требования. 355

Знакомство с бессерверными функциями. 355

Преимущества бессерверных функций. 356

Варианты использования. 356

Варианты развертывания бессерверных функций. 357

Написание бессерверных функций. 358

Создание облачной функции на основе HTTP с помощью консоли GCP. 359

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

Заключение. 367

Вопросы. 367

Дополнительные ресурсы. 367

Ответы. 367

Глава 13. Python и машинное обучение. 369

Технические требования. 370

Введение в машинное обучение. 370

Использование Python для машинного обучения. 372

Библиотеки машинного обучения в Python. 372

Рекомендации по обучающим данным. 374

Создание и оценка модели машинного обучения. 375

Процесс построения модели машинного обучения. 375

Создание примера машинного обучения. 376

Оценка модели с помощью кросс-валидации и тонкой настройки гиперпараметров. 381

Сохранение ML-модели в файл. 384

Развертывание и прогнозирование ML-модели в GCP Cloud. 385

Заключение. 388

Вопросы. 388

Дополнительные ресурсы. 388

Ответы. 389

Глава 14. Python для автоматизации сети. 390

Технические требования. 391

Введение в автоматизацию сети. 391

Плюсы и минусы автоматизации сети. 392

Варианты использования. 393

Взаимодействие с сетевыми устройствами. 394

Протоколы для взаимодействия с сетевыми устройствами. 394

Взаимодействие с сетевыми устройствами с помощью библиотек Python
на основе SSH.. 397

Взаимодействие с сетевыми устройствами с помощью NETCONF. 404

Интеграция с системами управления сетью.. 408

Использование конечных точек сервиса определения местоположения. 409

Получение токена аутентификации. 410

Получение сетевых устройств и инвентаризация интерфейсов. 411

Обновление порта на сетевом устройстве. 412

Интеграция с событийно-ориентированными системами. 414

Создание подписок для Apache Kafka. 416

Обработка событий от Apache Kafka. 417

Продление и удаление подписки. 418

Заключение. 418

Вопросы. 419

Дополнительные ресурсы. 419

Ответы. 420

 

Предметный указатель. 421

Азиф Мухаммад

Мухаммад Азиф — программный архитектор, обладающий обширным опытом в области веб-разработки, автоматизации сетей и облаков, виртуализации и машинного обучения. ,Возглавлял многие крупномасштабные проекты в различных коммерческих компаниях. В 2012 году, получил степень доктора философии в области компьютерных систем в Карлтонском университете (Оттава, Канада) и в настоящее время работает в компании Nokia в качестве ведущего специалиста.

Опубликовано

Новинка: “Создание сайтов и лендингов на WordPress и Elementor с нуля”

Создание сайтов и лендингов на WordPress и Elementor с нуля

Рассказано о выборе хостинга и регистрации домена для сайта. Подробно рассмотрена установка и настройка WordPress. Рассказано об установке и настройке тем (шаблонов). Дана инструкция по созданию «шапки» сайта, многоуровневого меню, адаптации дизайна для компьютеров, ноутбуков и различных типов мобильных устройств. Рассматриваются наиболее популярные плагины, способы публикации на сайте видеороликов, аудиофайлов, опросов. Описаны способы обработки графики. Приведена подробная инструкция по созданию   лендинга с использованием конструктора Elementor. От читателя не требуется наличия профессиональных знаний в сфере программирования и дизайна.

Для начинающих разработчиков

Создай свой сайт с WordPress и Elementor!

WordPress — бесплатная система управления содержимым сайта с открытым исходным кодом. С помощью WordPress можно создавать как простые сайты «визитки», так и сложные проекты — блоги, корпоративные порталы, интернет-магазины.

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

Эта книга поможет вам с нуля построить свой первый веб-сайт на WordPress и Elementor без знаний программирования и навыков дизайна, даже если до этого вы никогда не занимались веб-разработкой.

Вы узнаете, как:

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

Книгу “Создание сайтов и лендингов на WordPress и Elementor с нуля” можно купить со скидкой в интернет-магазине издательства “БХВ“.

Предисловие. 9

Об этой книге. 9

История WordPress. 11

Почему стоит делать сайты на WordPress?. 12

Используемые в книге обозначения. 13

Глава 1. Домен и хостинг. 15

Основные понятия. 15

Сайт. 15

Хостинг. 15

Домен. 16

Покупка домена и хостинга для сайта. 17

Пример настройки службы DNS. 22

Резюме. 24

Глава 2. Создаем сайт на WordPress. 25

О бесплатном хостинге. 25

Пример 1. Бесплатный хостинг на Sprinthost.ru. 26

Шаг 1: регистрация. 26

Шаг 2: изучаем панель управления хостингом.. 27

Шаг 3: установка WordPress. 28

Пример 2. Бесплатное создание сайта на хостинге Beget 31

Шаг 1: получаем доступ на хостинг. 31

Шаг 2: устанавливаем на хостинг WordPress. 32

Запуск сайта. 33

Пример 3. Платное создание сайта на хостинге Timeweb. 35

Шаг 1: регистрация и покупка хостинга на Timeweb. 35

Шаг 2: покупаем домен на Timeweb. 39

Шаг 3: чистим хостинг. 40

Шаг 4: установка WP на хостинг Timeweb. 40

В чем разница двух панелей управления?. 42

Кодекс веб-мастера. 43

Глава 3. Первичные настройки WP-сайта после установки на хостинг. 45

Делаем все востребованные обновления. 45

Обновление версии PHP. 46

Настройка консоли сайта. 47

Раздел Общие настройки. 48

Раздел Чтение (главной страницы) 49

Раздел Постоянные ссылки. 50

Раздел Обсуждения. 51

Первые плагины.. 51

Латинизация ссылок: плагин Rus-To-Lat 51

Делаем ссылки короткими: плагин Bring Back the Get Shortlink Button. 54

Создаем заглушку: плагин WP Maintenance Mode. 55

Исключаем спам на своем сайте: плагин Akismet Spam Protection. 56

Глава 4. Выбор и установка темы.. 61

Пример установки темы через поиск. 61

Пример установки темы из ZIP-архива. 62

Замена темы.. 62

Структура темы WordPress. 63

Удаление лишних записей и страниц, присутствующих в теме по умолчанию.. 64

Проверка темы на паразитные ссылки: плагин Theme Authenticity Checker. 66

Граватар — аватар для сайта. 67

Фавикон — значок сайта. 70

Установка фавикона на WP-сайт с помощью плагина
Favicon by RealFaviconGenerator. 74

Логотип. 75

Установка фона сайта. 78

Глава 5. Шапка и подвал сайта. 79

Шапка сайта. 79

Пример создания шапки в программе XHeader. 80

Добавление шапки на сайт. 84

Пример оформления шапки сайта в теме Astra. 84

Добавим на шапку свои соцсети. 85

Добавим на шапку свою почту. 87

Остальные настройки шапки. 88

Корректировка вида шапки для показа сайта на смартфоне. 89

Подвал сайта. 90

Содержание подвала сайта. 91

Советы.. 92

Пример оформления подвала сайта в теме Astra. 92

Редактируем нижний колонтитул: плагин Remove Footer Credit 94

Использование пространства подвала: плагин Podamibe
Simple Footer Widget Area. 96

Глава 6. Создание страниц сайта. Виджеты.. 97

Создаем обязательные страницы.. 97

Колонки на странице. 98

Виджеты.. 98

Настройка меню: плагин Simple page ordering. 101

HTML-карта сайта: плагин WP DS Blog Map. 102

Защита страниц сайта паролем.. 104

Рубрики (категории) и метки. 106

Создание рубрик. 106

Создание меток. 107

Создание записей. 108

Кнопка Наверх. 109

Плагин jQuery Smooth Scroll 109

Плагин WPFront Scroll Top. 110

Советы по структуре сайта. 111

Глава 7. Форма обратной связи. Создание кнопок. 113

Создание формы Контакты.. 113

Пример 1: плагин Contact Form by BestWebSoft 113

Настройки формы.. 115

Пример 2: плагин Contact Form 7. 117

Создание кнопки. 117

Ссылка на сайте на номер телефона, Skype и отправку СМС.. 119

Глава 8. Меню сайта. Политика конфиденциальности. 121

Создание меню.. 121

Оформление в меню главной страницы сайта. 123

Пример настройки вида меню для темы Astra на ПК.. 124

Пример настройки вида меню для темы Astra на смартфоне. 125

Политика конфиденциальности. 127

Создание политики конфиденциальности. 127

Исключаем из меню соглашение об обработке персональных данных. 130

Глава 9. Полезные плагины. Приемы работы с сайтом.. 135

Защита текста от копирования: плагин WP-CopyProtect 135

Оглавление: плагин Table of Contents Plus (TOC+) 136

Защита сайта от взлома: плагин Limit Login Attempts. 137

Как опубликовать на сайте видео?. 139

Берем видео с YouTube. 139

Способ 1: использование блока HTML. 139

Способ 2: использование блока YouTube. 141

Добавляем на сайт свое видео. 142

Публикуем на сайте звуковые (аудио) файлы.. 143

Публикация неуникального контента: плагин Yoast SEO.. 143

Опрос: плагин WP-Polls. 144

Выводим опрос на странице. 144

Размещаем опрос в сайдбаре. 146

Организация скачивания файла с сайта. 147

Установка цепочки «Хлебные крошки»:
плагины Head, Footer and Post Injections и Flexy Breadcrumb. 149

Глава 10. Наполнение сайта контентом.. 155

Блочный редактор контента Gutenberg. 155

Изменение размера шрифта в редакторе Gutenberg. 160

Классический редактор WordPress. 162

Плагин Classic Editor. 162

Текстовый редактор Advanced Editor Tools. 162

Изменение страниц WordPress на записи и обратно. 164

Создание гиперссылок. 165

Создание ссылки на файл. 166

Вставка баннера на сайт. 167

Загрузка в WordPress PDF-файлов. 168

Скриншот страниц сайта. 170

Глава 11. Работаем с изображениями. 173

Размер изображения. 173

Количество изображений на странице. 173

Правильно называем картинку для сайта. 173

Уменьшение веса картинок. 174

Сервис уменьшения веса изображений https://tinypng.com/ 174

Сжатие изображений: плагин EWWW Image Optimiser. 174

Графический редактор vistacreate. 177

Сервис работы с графикой Сanva. 178

Создание электронной подписи: сервис Signature Generator. 179

Настройка изображений в статьях WordPress. 180

Миниатюра статьи. 181

Грамотная загрузка изображений на сайт. 182

Защита изображений на сайте: плагин водяного знака Image Watermark. 185

Поиск изображений без авторских прав. 188

Ищем анимацию для сайта. 191

Создание слайдера: плагин Smart Slider 3. 194

Публикация слайдера. 199

Глава 12. Сайт на поддомене. 201

Создание поддомена 3-го уровня. 201

Глава 13. Elementor — конструктор лендингов. 207

Чем лендинг отличается от сайта?. 207

Установка Elementor. 209

Практический пример: первый экран лендинга. 210

Создание разделителя между экранами. 215

Добавление анимации. 217

Второй экран лендинга. 218

Третий экран лендинга. 221

Четвертый экран лендинга. 222

Пятый экран лендинга. 224

Шестой экран с формой сообщения от посетителя. 225

Настройка отступов. 226

О работе с графикой. 228

Глава 14. Elementor: инструменты и приемы работы.. 231

Адаптивность лендинга. 231

Включение лендинга в меню сайта. 234

Что дальше?. 234

Кнопка. 235

Блок Прогресс. 235

Динамичный фон. 236

Работа с шаблонами (темами) 238

Если вы случайно что-то нужное удалили… 240

Если лендинг «глючит» (о плохих особенностях Elementor) 241

Инструмент Навигатор. 241

Поиск виджетов (строка поиска Finder) 241

О шрифтах. 242

Стоит ли использовать Elementor PRO?. 243

Генерируем «рыбу» из текста. 244

Бесплатные изображения для лендинга. 245

Ленивая загрузка изображений. 246

Плагин a3 Lazy Load. 246

Плагин Smush — Lazy Load Images, Optimize & Compress Images. 248

Глава 15. Пример создания на Elementor сайта-визитки. 249

Начинаем работу: первый экран сайта-визитки. 249

Тиражирование экранов. 251

Высота макета. Настройка размеров изображения в секции. 252

Разделитель. 254

Положение объекта в секции. 254

Цвет кнопки. 255

Второй экран сайта-визитки. 256

Третий экран сайта-визитки. 257

Четвертый экран сайта-визитки. 258

Пятый экран сайта-визитки: спойлеры и аккордеоны.. 261

Шестой экран сайта-визитки. 262

Подключение меню сайта к Elementor 264

Ставим якорные ссылки. 265

Экран Наши услуги. 266

Шапка лендинга. 267

Якоря для меню шапки. 267

Соцсети. 269

Проверяем адаптивность. 271

Elementor: резюме. 271

Глава 16. Taplink — сервис мгновенного создания лендинга. 273

Предварительная информация. 273

Регистрация. 273

Создание сайта. 277

Создание ссылок. 279

Приложение. Глоссарий. 283

Предметный указатель. 287

Молочков Владимир Петрович

Владимир Петрович Молочков — кандидат педагогических наук, преподаватель высшей квалификационной категории Политехнического колледжа Новгородского госуниверситета им. Ярослава Мудрого. Автор 18 книг по компьютерной тематике и более 200 статей в СМИ.