Svelte и Sapper в действии

This document was uploaded by one of our users. The uploader already confirmed that they had the permission to publish it. If you are author/publisher or own the copyright of this documents, please report to us by using this DMCA report form.

Simply click on the Download Book button.

Yes, Book downloads on Ebookily are 100% Free.

Sometimes the book is free on Amazon As well, so go ahead and hit "Search on Amazon"

Многие веб-фреймворки замедляют работу приложений, загружая сотни строк кода «на всякий случай». Svelte позволяет компилировать приложения в эффективные крошечные пакеты с минимальным временем загрузки. Объединение Svelte с фреймворком Sapper облегчает маршрутизацию страниц, генерирование на стороне сервера, разработку статических сайтов и решение многих других задач. Хотите научиться создавать быстрые и элегантные веб-приложения? Вам помогут компоненты Svelte и качественный опыт взаимодействия. Вы научитесь использовать уникальную модель управления состояниями, освоите упрощенную маршрутизацию страниц, разбиение кода, поддержку автономного режима и работу с представлениями, генерируемыми на сервере.

Author(s): Марк Волкманн
Series: Для профессионалов
Edition: 1
Publisher: Питер
Year: 2022

Language: Russian
Commentary: Vector PDF
Pages: 496
City: СПб.
Tags: Debugging; JavaScript; iOS; Web Applications; Deployment; DOM; Animation; Android; Testing; Routing; Jest; Mobile Applications; Svelte; Sapper; Cypress

Предисловие
Благодарности
О книге
Для кого написана эта книга
Структура
О коде
Форум liveBook
Прочие онлайн-ресурсы
От издательства
Об авторе
Иллюстрация на обложке
Часть 1Первые шаги
1. Знакомство с игроками
1.1. Знакомство со Svelte
1.1.1. Почему Svelte
1.1.2. Новый подход к реактивности
1.1.3. Текущие проблемы в Svelte
1.1.4. Как работает Svelte
1.1.5. Svelte исчезает?
1.2. Знакомство с Sapper
1.2.1. Зачем использовать Sapper
1.2.2. Как работает Sapper
1.2.3. Когда стоит использовать Sapper
1.2.4. Когда не стоит использовать Sapper
1.3. Знакомство с Svelte Native
1.4. Сравнение Svelte с другими веб-фреймворками
1.4.1. Angular
1.4.2. React
1.4.3. Vue
1.5. Какие инструменты понадобятся для начала работы
Резюме
2. Ваше первое
приложение Svelte
2.1. Svelte REPL
2.1.1. Использование Svelte REPL
2.1.2. Ваше первое приложение REPL
2.1.3. Сохранение приложений REPL
2.1.4. Распространение приложений REPL
2.1.5. URL-адреса REPL
2.1.6. Экспортирование приложений REPL
2.1.7. Пакеты npm
2.1.8. Ограничения REPL
2.1.9. CodeSandbox
2.2. Работа за пределами REPL
2.2.1. Использование npx degit
2.2.2. Файл package.json
2.2.3. Важные файлы
2.2.4. Ваше первое приложение без использования REPL
2.3. Еще одно приложение
Резюме
Часть 2Подробнее о Svelte
3. Создание компонентов
3.1. Содержимое файлов .svelte
3.2. Разметка компонентов
3.3. Имена компонентов
3.4. Стили компонентов
3.5. Специфичность CSS
3.6. Глобальные стили и стили с ограниченной видимостью
3.7. Препроцессоры CSS
3.8. Логика компонентов
3.9. Состояние компонента
3.10. Реактивные команды
3.11. Контекст модуля
3.12. Построение нестандартных компонентов
3.13. Построение приложения Travel Packing
Резюме
4. Блочные структуры
4.1. Условная логика с {#if}
4.2. Итерации с {#each}
4.3. Промисы с {#await}
4.4. Построение приложения Travel Packing
4.4.1. Компонент Item
4.4.2. Вспомогательные функции
4.4.3. Компонент Category
4.4.4. Компонент Checklist
4.4.5. Компонент App
4.4.6. Попробуйте сами
резюме
5. Взаимодействие между компонентами
5.1. Варианты взаимодействий между компонентами
5.2. Prop-свойства
5.2.1. Объявление prop-свойств ключевым словом export
5.2.2. Реакция на изменения prop-свойств
5.2.3. Типы prop-свойств
5.2.4. Директивы
5.2.5. Директива bind с элементами форм
5.2.6. bind:this
5.2.7. Внешнее связывание prop-свойств
5.3. Слоты
5.4. События
5.4.1. Отправка событий
5.4.2. Перенаправление событий
5.4.3. Модификаторы событий
5.5. Контекст
5.6. Построение приложения Travel Packing
Резюме
6. Хранилища
6.1. Хранилища для записи
6.2. Хранилища для чтения
6.3. Где определять хранилища
6.4. Использование хранилищ
6.5. Производные хранилища
6.6. Специальные хранилища
6.7. Использование хранилищ с классами
6.8. Долговременное хранение данных
6.9. Построение приложения Travel Packing
Резюме
7. Взаимодействия с DOM
7.1. Вставка разметки HTML
7.2. Действия
7.3. Функция tick
7.4. Реализация компонента диалогового окна
7.5. Перетаскивание
7.6. Создание приложения Travel Packing
Резюме
8. Функции жизненного
цикла
8.1. Подготовка
8.2. Функция жизненного цикла onMount
8.2.1. Передача фокуса
8.2.2. Получение данных от служб API
8.3. Функция жизненного цикла onDestroy
8.4. Функция жизненного цикла beforeUpdate
8.5. Функция жизненного цикла afterUpdate
8.6. Вспомогательные функции
8.7. Создание приложения Travel Packing
Резюме
9. Маршрутизация
на стороне клиента
9.1. Ручная маршрутизация
9.2. #-маршрутизация
9.3. Использование библиотеки page.js
9.4. Использование параметров пути и запроса с page.js
9.5. Построение приложения Travel Packing
Резюме
10. Анимация
10.1. Функции плавности
10.2. Пакет svelte/animate
10.3. Пакет svelte/motion
10.4. Пакет svelte/transition
10.5. Переход fade и анимация flip
10.6. Переход crossfade
10.7. Переход draw
10.8. Нестандартные переходы
10.9. Prop-свойства transition и in/out
10.10. События перехода
10.11. Построение приложения Travel Packing
Резюме
11. Отладка
11.1. Тег @debug
11.2. Реактивные команды
11.3. Svelte DevTools
Резюме
12. Тестирование
12.1. Модульное тестирование с Jest
12.1.1. Модульные тесты для приложения Todo
12.1.2. Модульные тесты для приложения Travel Packing
12.2. Сквозные тесты с использованием Cypress
12.2.1. Сквозные тесты для приложения Todo
12.2.2. Сквозные тесты для приложения Travel Packing
12.3. Тесты доступности
12.3.1. Компилятор Svelte
12.3.2. Lighthouse
12.3.3. axe
12.3.4. WAVE
12.4. Демонстрация и отладка компонентов с использованием Storybook
12.4.1. Storybook для приложения Travel Packing
Резюме
13. Развертывание
13.1. Развертывание на любом сервере HTTP
13.2. Использование Netlify
13.2.1. Netlify с веб-сайта
13.2.2. Netlify из командной строки
13.2.3. Планы Netlify
13.3. Использование Vercel
13.3.1. Vercel с веб-сайта
13.3.2. Vercel из командной строки
13.3.3. Уровни Vercel
13.4. Использование Docker
Резюме
14. Расширенные возможности Svelte
14.1. Проверка данных форм
14.2. Использование библиотек CSS
14.3. Специальные элементы
14.4. Импортирование файлов JSON
14.5. Создание библиотек компонентов
14.6. Веб-компоненты
Резюме
Часть 3Подробнее о Sapper
15. Первое приложение
Sapper
15.1. Создание приложения Sapper
15.2. Воссоздание приложения интернет-магазина на базе Sapper
Резюме
16. Приложения Sapper
16.1. Структура файлов Sapper
16.2. Маршруты страниц
16.3. Макеты страниц
16.4. Обработка ошибок
16.5. Запуск на стороне сервера и на стороне клиента
16.6. Обертка для Fetch API
16.7. Предварительная загрузка
16.8. Предварительная выборка
16.9. Разделение кода
16.10. Построение приложения Travel Packing
Резюме
17. Серверные маршруты
Sapper
17.1. Исходные файлы серверных маршрутов
17.2. Функции серверных маршрутов
17.3. Пример использования операций CRUD
17.4. Переход на Express
17.5. Построение приложения Travel Packing
Резюме
18. Экспортирование статических сайтов в Sapper
18.1. Подробности Sapper
18.2. Когда экспортируются приложения
18.3. Пример приложения
Резюме
19. Поддержка автономного режима в Sapper
19.1. Знакомство с сервисными работниками
19.2. Стратегии кэширования
19.3. Конфигурация сервисных работников Sapper
19.4. События сервисных работников
19.5. Управление сервисными работниками в Chrome
19.6. Включение поддержки HTTPS на сервере Sapper
19.7. Подтверждение автономного поведения
19.8. Построение приложения Travel Packing
Резюме
Часть 4За пределами Svelte и Sapper
20. Препроцессоры
20.1. Нестандартная препроцессорная обработка
20.1.1. Webpack
20.2. Пакет svelte-preprocess
20.2.1. Режим автоматической препроцессорной обработки
20.2.2. Внешние файлы
20.2.3. Глобальные стили
20.2.4. Sass
20.2.5. TypeScript
20.2.6. Совет по поводу VS Code
20.3. Markdown
20.4. Использование нескольких препроцессоров
20.5. Сжатие графики
Резюме
21. Svelte Native
21.1. Компоненты NativeScript
21.1.1. Компоненты вывода данных
21.1.2. Компоненты форм
21.1.3. Компоненты действий
21.1.4. Компоненты диалоговых окон
21.1.5. Компоненты макета
21.1.6. Навигационные компоненты
21.2. Знакомство с Svelte Native
21.3. Локальная разработка приложений Svelte Native
21.4. Стилевое оформление NativeScript
21.5. Предопределенные классы CSS в NativeScript
21.6. Темы NativeScript
21.7. Расширенный пример
21.8. Библиотека компонентов NativeScript UI
21.9. Проблемы Svelte Native
Резюме
Приложение АРесурсы
А.1. Презентации Svelte
А.2. Ресурсы Svelte
А.3. Сравнения фреймворков
А.4. Ресурсы Sapper
А.5. Ресурсы Svelte Native
А.6. Ресурсы Svelte GL
А.7. Инструменты Svelte
A.8. Библиотеки Svelte
А.9. Ресурсы VS Code
А.10. Учебные ресурсы, не относящиеся к Svelte
А.11. Инструменты, не относящиеся к Svelte
А.12. Библиотеки, не относящиеся к Svelte
А.13. Ресурсы, не относящиеся к Svelte
Приложение БОбращения к службам REST
Б.1. Заголовки
Приложение ВMongoDB
В.1. Установка MongoDB
В.1.1. Установка MongoDB в системе Windows
В.1.2. Установка MongoDB в системе Linux
В.1.3. Установка MongoDB в macOS
В.2. Запуск сервера базы данных
В.3. Использование оболочки MongoDB
В.4. Использование MongoDB из JavaScript
Приложение ГESLint для Svelte
Приложение ДPrettier для Svelte
Приложение ЕVS Code
Е.1. Настройка VS Code
E.2. Расширение Svelte for VS Code
Е.3. Расширение Svelte 3 Snippets
Е.4. Расширение Svelte Intellisense
Приложение ЖSnowpack
Ж.1. Использование Snowpack со Svelte