Svelte и Sapper в действии – Марк Волкманн

Краткое содержание……………………….5
Предисловие…………………………. 17
Благодарности………………………… 18
О книге……………………………. 20
Для кого написана эта книга…………………. 20
Структура…………………………. 21
О коде…………………………… 24
Форум liveBook………………………. 25
Прочие онлайн-ресурсы …………………… 25
От издательства………………………. 25
Об авторе…………………………… 26
Иллюстрация на обложке……………………. 27
Часть 1
Первые шаги
Глава 1. Знакомство с игроками…………………. 30
1.1. Знакомство со Svelte…………………… 31
1.1.1. Почему Svelte…………………… 32
1.1.2. Новый подход к реактивности……………. 37
1.1.3. Текущие проблемы в Svelte……………… 39
1.1.4. Как работает Svelte…………………. 40
1.1.5. Svelte исчезает?…………………… 42
1.2. Знакомство с Sapper…………………… 42
1.2.1. Зачем использовать Sapper……………… 43
1.2.2. Как работает Sapper…………………. 45
1.2.3. Когда стоит использовать Sapper…………… 45
1.2.4. Когда не стоит использовать Sapper………….. 46
1.3. Знакомство с Svelte Native………………… 46
1.4. Сравнение Svelte с другими веб-фреймворками……….. 46
1.4.1. Angular………………………. 46
1.4.2. React……………………….. 47
1.4.3. Vue………………………… 47
1.5. Какие инструменты понадобятся для начала работы……… 48
Резюме…………………………… 48
Глава 2. Ваше первое приложение Svelte…………….. 50
2.1. Svelte REPL………………………. 51
2.1.1. Использование Svelte REPL…………….. 51
2.1.2. Ваше первое приложение REPL……………. 53
2.1.3. Сохранение приложений REPL……………. 58
2.1.4. Распространение приложений REPL…………. 60
2.1.5. URL-адреса REPL…………………. 61
2.1.6. Экспортирование приложений REPL…………. 61
2.1.7. Пакеты npm……………………. 62
2.1.8. Ограничения REPL…………………. 62
2.1.9. CodeSandbox……………………. 63
2.2. Работа за пределами REPL………………… 63
2.2.1. Использование npx degit………………. 64
2.2.2. Файл package.json………………….. 66
2.2.3. Важные файлы…………………… 67
2.2.4. Ваше первое приложение без использования REPL…… 69
2.3. Еще одно приложение………………….. 70
Резюме…………………………… 74
Часть 2
Подробнее о Svelte
Глава 3. Создание компонентов…………………. 76
3.1. Содержимое файлов .svelte………………… 77
3.2. Разметка компонентов………………….. 78
3.3. Имена компонентов…………………… 81
3.4. Стили компонентов……………………. 82
3.5. Специфичность CSS…………………… 83
3.6. Глобальные стили и стили с ограниченной видимостью……. 84
3.7. Препроцессоры CSS…………………… 87
3.8. Логика компонентов…………………… 88
3.9. Состояние компонента………………….. 89
3.10. Реактивные команды………………….. 90
3.11. Контекст модуля……………………. 93
3.12. Построение нестандартных компонентов………….. 94
3.13. Построение приложения Travel Packing………….. 96
Резюме…………………………… 99
Глава 4. Блочные структуры…………………..101
4.1. Условная логика с {#if}…………………..102
4.2. Итерации с {#each}……………………103
4.3. Промисы с {#await}……………………105
4.4. Построение приложения Travel Packing…………..108
4.4.1. Компонент Item…………………..109
4.4.2. Вспомогательные функции……………..111
4.4.3. Компонент Category…………………112
4.4.4. Компонент Checklist…………………115
4.4.5. Компонент App…………………..118
4.4.6. Попробуйте сами………………….119
Резюме…………………………..120
Глава 5. Взаимодействие между компонентами…………..121
5.1. Варианты взаимодействий между компонентами……….122
5.2. Prop-свойства………………………123
5.2.1. Объявление prop-свойств ключевым словом export……123
5.2.2. Реакция на изменения prop-свойств………….126
5.2.3. Типы prop-свойств………………….127
5.2.4. Директивы…………………….128
5.2.5. Директива bind с элементами форм………….128
5.2.6. bind:this………………………131
5.2.7. Внешнее связывание prop-свойств…………..133
5.3. Слоты………………………….137
5.4. События…………………………138
5.4.1. Отправка событий………………….139
5.4.2. Перенаправление событий………………140
5.4.3. Модификаторы событий……………….141
5.5. Контекст………………………..141
5.6. Построение приложения Travel Packing…………..143
Резюме…………………………..147
Глава 6. Хранилища………………………148
6.1. Хранилища для записи…………………..149
6.2. Хранилища для чтения………………….150
6.3. Где определять хранилища…………………151
6.4. Использование хранилищ…………………152
6.5. Производные хранилища…………………159
6.6. Специальные хранилища…………………160
6.7. Использование хранилищ с классами……………162
6.8. Долговременное хранение данных……………..166
6.9. Построение приложения Travel Packing…………..167
Резюме…………………………..167
Глава 7. Взаимодействия с DOM…………………168
7.1. Вставка разметки HTML………………….169
7.2. Действия………………………..173
7.3. Функция tick………………………173
7.4. Реализация компонента диалогового окна………….177
7.5. Перетаскивание……………………..180
7.6. Создание приложения Travel Packing…………….183
Резюме…………………………..186
Глава 8. Функции жизненного цикла……………….187
8.1. Подготовка……………………….188
8.2. Функция жизненного цикла onMount……………189
8.2.1. Передача фокуса…………………..189
8.2.2. Получение данных от служб API……………190
8.3. Функция жизненного цикла onDestroy……………191
8.4. Функция жизненного цикла beforeUpdate………….193
8.5. Функция жизненного цикла afterUpdate…………..194
8.6. Вспомогательные функции………………..196
8.7. Создание приложения Travel Packing…………….198
Резюме…………………………..198
Глава 9. Маршрутизация на стороне клиента……………199
9.1. Ручная маршрутизация………………….200
9.2. #-маршрутизация…………………….208
9.3. Использование библиотеки page.js……………..210
9.4. Использование параметров пути и запроса с page.js………212
9.5. Построение приложения Travel Packing…………..216
Резюме…………………………..218
Глава 10. Анимация………………………219
10.1. Функции плавности…………………..220
10.2. Пакет svelte/animate…………………..221
10.3. Пакет svelte/motion……………………223
10.4. Пакет svelte/transition………………….227
10.5. Переход fade и анимация flip……………….229
10.6. Переход crossfade…………………….231
10.7. Переход draw………………………233
10.8. Нестандартные переходы…………………235
10.9. Prop-свойства transition и in/out……………..237
10.10. События перехода……………………237
10.11. Построение приложения Travel Packing………….238
Резюме…………………………..240
Глава 11. Отладка……………………….241
11.1. Тег @debug……………………….242
11.2. Реактивные команды…………………..245
11.3. Svelte DevTools……………………..245
Резюме…………………………..249
Глава 12. Тестирование……………………..250
12.1. Модульное тестирование с Jest………………251
12.1.1. Модульные тесты для приложения Todo……….254
12.1.2. Модульные тесты для приложения Travel Packing……256
12.2. Сквозные тесты с использованием Cypress…………261
12.2.1. Сквозные тесты для приложения Todo………..263
12.2.2. Сквозные тесты для приложения Travel Packing…….265
12.3. Тесты доступности……………………269
12.3.1. Компилятор Svelte…………………270
12.3.2. Lighthouse…………………….271
12.3.3. axe………………………..274
12.3.4. WAVE………………………277
12.4. Демонстрация и отладка компонентов
с использованием Storybook………………….279
12.4.1. Storybook для приложения Travel Packing……….282
Резюме…………………………..289
Глава 13. Развертывание…………………….290
13.1. Развертывание на любом сервере HTTP…………..291
13.2. Использование Netlify………………….291
13.2.1. Netlify с веб-сайта…………………292
13.2.2. Netlify из командной строки…………….293
13.2.3. Планы Netlify……………………295
13.3. Использование Vercel…………………..295
13.3.1. Vercel с веб-сайта………………….296
13.3.2. Vercel из командной строки……………..297
13.3.3. Уровни Vercel……………………297
13.4. Использование Docker………………….298
Резюме…………………………..298
Глава 14. Расширенные возможности Svelte……………299
14.1. Проверка данных форм………………….300
14.2. Использование библиотек CSS………………305
14.3. Специальные элементы………………….309
14.4. Импортирование файлов JSON………………313
14.5. Создание библиотек компонентов……………..313
14.6. Веб-компоненты…………………….315
Резюме…………………………..320
Часть 3
Подробнее о Sapper
Глава 15. Первое приложение Sapper……………….322
15.1. Создание приложения Sapper……………….324
15.2. Воссоздание приложения интернет-магазина на базе Sapper….326
Резюме…………………………..330
Глава 16. Приложения Sapper………………….331
16.1. Структура файлов Sapper…………………332
16.2. Маршруты страниц……………………336
16.3. Макеты страниц…………………….338
16.4. Обработка ошибок……………………340
16.5. Запуск на стороне сервера и на стороне клиента……….341
16.6. Обертка для Fetch API………………….341
16.7. Предварительная загрузка………………..342
16.8. Предварительная выборка………………..344
16.9. Разделение кода…………………….346
16.10. Построение приложения Travel Packing………….348
Резюме…………………………..351
Глава 17. Серверные маршруты Sapper………………352
17.1. Исходные файлы серверных маршрутов…………..353
17.2. Функции серверных маршрутов……………..354
17.3. Пример использования операций CRUD………….355
17.4. Переход на Express……………………364
17.5. Построение приложения Travel Packing…………..364
Резюме…………………………..371
Глава 18. Экспортирование статических сайтов в Sapper………372
18.1. Подробности Sapper…………………..373
18.2. Когда экспортируются приложения…………….374
18.3. Пример приложения…………………..374
Резюме…………………………..386
Глава 19. Поддержка автономного режима в Sapper………..387
19.1. Знакомство с сервисными работниками…………..388
19.2. Стратегии кэширования…………………390
19.3. Конфигурация сервисных работников Sapper………..393
19.4. События сервисных работников……………..395
19.5. Управление сервисными работниками в Chrome……….396
19.6. Включение поддержки HTTPS на сервере Sapper………400
19.7. Подтверждение автономного поведения…………..403
19.8. Построение приложения Travel Packing…………..404
Резюме…………………………..408
Часть 4
За пределами Svelte и Sapper
Глава 20. Препроцессоры……………………410
20.1. Нестандартная препроцессорная обработка…………411
20.1.1. Webpack……………………..413
20.2. Пакет svelte-preprocess………………….414
20.2.1. Режим автоматической препроцессорной обработки…..414
20.2.2. Внешние файлы………………….415
20.2.3. Глобальные стили…………………417
20.2.4. Sass……………………….417
20.2.5. TypeScript…………………….418
20.2.6. Совет по поводу VS Code………………420
20.3. Markdown……………………….421
20.4. Использование нескольких препроцессоров…………423
20.5. Сжатие графики…………………….424
Резюме…………………………..424
Глава 21. Svelte Native……………………..425
21.1. Компоненты NativeScript…………………426
21.1.1. Компоненты вывода данных…………….427
21.1.2. Компоненты форм…………………428
21.1.3. Компоненты действий……………….428
21.1.4. Компоненты диалоговых окон……………428
21.1.5. Компоненты макета………………..429
21.1.6. Навигационные компоненты…………….432
21.2. Знакомство с Svelte Native………………..433
21.3. Локальная разработка приложений Svelte Native………434
21.4. Стилевое оформление NativeScript…………….436
21.5. Предопределенные классы CSS в NativeScript………..437
21.6. Темы NativeScript…………………….439
21.7. Расширенный пример………………….439
21.8. Библиотека компонентов NativeScript UI………….457
21.9. Проблемы Svelte Native………………….462
Резюме…………………………..463
Приложение А. Ресурсы…………………….464
А.1. Презентации Svelte……………………464
А.2. Ресурсы Svelte……………………..465
А.3. Сравнение фреймворков………………….465
А.4. Ресурсы Sapper……………………..465
А.5. Ресурсы Svelte Native…………………..466
А.6. Ресурсы Svelte GL…………………….466
А.7. Инструменты Svelte……………………466
A.8. Библиотеки Svelte…………………….467
А.9. Ресурсы VS Code…………………….467
А.10. Учебные ресурсы, не относящиеся к Svelte…………468
А.11. Инструменты, не относящиеся к Svelte…………..469
А.12. Библиотеки, не относящиеся к Svelte……………470
А.13. Ресурсы, не относящиеся к Svelte……………..470
Приложение Б. Обращения к службам REST……………471
Б.1. Заголовки………………………..473
Приложение В. MongoDB……………………474
В.1. Установка MongoDB…………………..475
В.1.1. Установка MongoDB в системе Windows………..475
В.1.2. Установка MongoDB в системе Linux…………476
В.1.3. Установка MongoDB в macOS…………….476
В.2. Запуск сервера базы данных………………..477
В.3. Использование оболочки MongoDB…………….477
В.4. Использование MongoDB из JavaScript…………..479
Приложение Г. ESLint для Svelte…………………482
Приложение Д. Prettier для Svelte………………..484
Приложение Е. VS Code…………………….486
Е.1. Настройка VS Code……………………487
E.2. Расширение Svelte for VS Code………………488
Е.3. Расширение Svelte 3 Snippets……………….488
Е.4. Расширение Svelte Intellisense……………….489
Приложение Ж. Snowpack……………………491
Ж.1. Использование Snowpack со Svelte…………….491