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

Description

Многие веб-фреймворки замедляют работу приложений, загружая сотни строк кода «на всякий случай». Svelte позволяет компилировать приложения в эффективные крошечные пакеты с минимальным временем загрузки. Объединение Svelte с фреймворком Sapper облегчает маршрутизацию страниц, генерирование на стороне сервера, разработку статических сайтов и решение многих других задач. Хотите научиться создавать быстрые и элегантные веб-приложения? Вам помогут компоненты Svelte и качественный опыт взаимодействия. Вы научитесь использовать уникальную модель управления состояниями, освоите упрощенную маршрутизацию страниц, разбиение кода, поддержку автономного режима и работу с представлениями, генерируемыми на сервере. Предисловие Благодарности О книге Для кого написана эта книга Структура О коде Форум 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