Erhalten Sie Zugang zu diesem und mehr als 300000 Büchern ab EUR 5,99 monatlich.
- Herausgeber: Питер
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Russisch
Многие веб-фреймворки замедляют работу приложений, загружая сотни строк кода «на всякий случай». Svelte позволяет компилировать приложения в эффективные крошечные пакеты с минимальным временем загрузки. Объединение Svelte с фреймворком Sapper облегчает маршрутизацию страниц, генерирование на стороне сервера, разработку статических сайтов и решение многих других задач. Хотите научиться создавать быстрые и элегантные веб-приложения? Вам помогут компоненты Svelte и качественный опыт взаимодействия. Вы научитесь использовать уникальную модель управления состояниями, освоите упрощенную маршрутизацию страниц, разбиение кода, поддержку автономного режима и работу с представлениями, генерируемыми на сервере.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 391
Veröffentlichungsjahr: 2024
Das E-Book (TTS) können Sie hören im Abo „Legimi Premium” in Legimi-Apps auf:
Ähnliche
Переводчики Е. Матвеев, Е. Матвеев
Марк Волкманн
Svelte и Sapper в действии. — СПб.: Питер, 2024.
ISBN 978-5-4461-1464-1
© ООО Издательство "Питер", 2024
Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.
Оглавление
Предисловие
Я профессионально занимаюсь программированием уже 37 лет, а веб-разработкой — около десяти. В своих проектах я использовал разные технологии и фреймворки, включая низкоуровневые манипуляции с DOM, jQuery, Ruby, Angular 1, React, Polymer, Angular 2+, Vue, Svelte… и, вероятно, с какими-то еще, о которых я уже позабыл.
Большое внимание я уделяю производительности труда разработчика. Избыточная сложность кода противоречит этой цели. Хотя в Svelte и Sapper мне нравится очень многое, самой привлекательной стороной я считаю простоту этих технологий по сравнению с другими методологиями веб-разработки. Svelte и Sapper помогают сделать работу намного более продуктивной.
О Svelte я узнал, посмотрев выступление Rethinking Reactivity Рича Харриса (Rich Harris) — создателя Svelte. Это была исключительно увлекательная речь, которая определенно отвечала моему стремлению к сокращению сложности веб-разработки. В итоге я занялся дальнейшим изучением темы, написал длинную статью о Svelte, участвовал в пользовательских группах и наконец стал выступать с докладами на конференциях. Следующий логичный шаг — написать книгу!
На страницах издания изложены практически все темы, связанные с Svelte и Sapper, а также некоторые вопросы, имеющие косвенное отношение к этим темам. После прочтения книги вы будете хорошо подготовлены к использованию этих средств в вашем следующем веб-проекте.
Благодарности
Многие авторы благодарят своих супруг за терпение, которое они проявляли, пока их мужья работали над книгами. Этот опыт наглядно показал мне, на какие жертвы им приходится идти. Моя жена Тэми великодушно подбадривала меня и помогала найти время для завершения проекта. Огромное спасибо, Тэми, за то, что помогла мне достичь цели и все-таки дописать книгу!
Спасибо Дженнифер Стаут (Jennifer Stout), руководителю проекта из издательства Manning, — ее правки, советы, стимулы и комплименты позволяли мне не сбиться с правильного пути. Благодаря ее комментариям «Я тебя обожаю!» вкупе с «Лучше объяснить, почему кто-нибудь станет это делать» процесс написания книги стал намного более сносным.
Спасибо Алену Кунио (Alain Couniot), научному редактору издательства Manning, который раз за разом указывал, где я изъяснялся недостаточно ясно или не приводил убедительных примеров. Он также следил за тем, чтобы я упоминал TypeScript везде, где это возможно. Его критика сильно улучшила эту книгу!
Спасибо научному редактору Manning Эрику Вуллингсу (Erik Vullings). Он опробовал ряд неочевидных подходов в коде, которые мне даже не приходили в голову, и предложил много улучшений текста. Его педантичность была невероятно уместной!
Спасибо Пиру Рейндерсу (Peer Reynders), добровольному рецензенту из программы MEAP, который рассмотрел код примеров под увеличительным стеклом и указал на многие возможности его усовершенствования.
Я благодарен всем рецензентам, которые поделились своим мнением о способах улучшить книгу. Это Адейл Ретамал (Adail Retamal), Эмит Ламба (Amit Lamba), Клайв Харбер (Clive Harber), Дэмьен Эстебан (Damian Esteban), Дэвид Кабреро Сото (David Cabrero Souto), Дэвид Пакку (David Paccoud), Деннис Рейл (Dennis Reil), Герд Кливесаат (Gerd Klevesaat), Густаво Филипе Рамос Гомес (Gustavo Filipe Ramos Gomes), Джонатан Кук (Jonathan Cook), Келум Сенанаякэ (Kelum Senanayake), Константинос Леймонис (Konstantinos Leimonis), Маттео Гилдоне (Matteo Gildone), Потито Колучелли (Potito Coluccelli), Роберт Уолш (Robert Walsh), Родни Вайс (Rodney Weis), Сандер Зегвельд (Sander Zegveld), Сергио Арбео (Sergio Arbeo) и Таня Вилке (Tanya Wilke). Широта взглядов и мнений определенно пошла на пользу!
Спасибо Чарльзу Шарпу (Charles Sharp) из Object Computing, Inc. Он чаще всего занимался редактированием моих предыдущих текстов. За последние десять лет Чарльз потратил немало времени на то, чтобы повысить мою литературную квалификацию… Серийные запятые и все такое!
Спасибо Элдону Аролду (Eldon Ahrold) из Object Computing, Inc. за рецензирование главы о Svelte Native. Элдон — чрезвычайно опытный разработчик мобильных и веб-приложений, и я рад возможности воспользоваться его опытом.
Наконец, спасибо доктору Эбрахиму Мошири (Ebrahim Moshiri), который 24 года назад принял меня на работу в Object Computing, Inc. Он привел меня в среду, где учиться приходилось постоянно, чем я и занимался. Если бы не карьера, открывшаяся передо мной, то, скорее всего, я бы никогда не написал эту книгу.
О книге
Для кого написана эта книга
Книга «Svelte и Sapper в действии» предназначена для веб-разработчиков, которые хотят сделать свою работу более продуктивной. Вероятно, вас терзает мысль о том, что должен существовать более простой способ разработки веб-приложений. Могу вас обрадовать — он действительно существует и вы о нем узнаете в этой книге!
На многочисленных примерах кода вы научитесь использовать Svelte и Sapper для реализации многих стандартных аспектов функциональности веб-приложений.
Книга предполагает, что читатель хотя бы на базовом уровне владеет HTML, CSS и JavaScript.
• HTML — читатель должен знать основные элементы: html, head, link, style, script, body, div, span, p, ol, ul, li, input, textarea и select.
• CSS — читатель должен понимать синтаксис правил CSS и смысл определения «каскадный», знать часто используемые свойства CSS (включая color, font-family, font-size, font-style и font-weight) и блочную модель CSS (content, padding, border и margin).
• JavaScript — читатель должен разбираться в переменных, строках, массивах, объектах, функциях, классах, промисах, деструктуризации, экспортировании и импортировании.
Если у вас возникнут вопросы по материалу книги, со мной можно легко связаться в интернете. Надеюсь, после чтения книги вы убедитесь, что Svelte и Sapper заслуживают вашего внимания, и этим технологиям найдется место в вашем следующем проекте.
Структура
Книга делится на четыре части и состоит из 21 главы.
Часть 1 знакомит читателя с Svelte и Sapper.
• Глава 1 объясняет, почему новые технологии веб-разработки заслуживают вашего внимания. Глава завершается кратким введением в Svelte Native, сравнением Svelte с другими популярными веб-фреймворками и описанием инструментов, которые понадобятся вам для начала работы.
• В главе 2 описывается процесс создания вашего первого приложения Svelte в сетевой среде (REPL). Приложения, построенные в этой среде, можно сохранять, передавать другим разработчикам и экспортировать для локального продолжения разработки. Далее описываются основные этапы локальной разработки приложений Svelte.
В части 2 Svelte рассматривается более подробно, а материал поясняется множеством примеров кода.
• Глава 3 научит вас строить компоненты Svelte. Здесь описываются основные части этих компонентов: логика, разметка и стилевое оформление. Далее рассматривается управление состоянием компонентов, использование реактивных команд и контекста модуля. Глава завершается примером разработки и использования нестандартного компонента.
• В главе 4 рассматриваются блочные структуры Svelte. В этих структурах условная логика, итерации и обработка промисов заключаются вместе с разметкой (чаще всего HTML). Условная логика реализуется структурой {#if}, итерации — структурой {#each}, а обработка промисов — структурой {#await}.
• В главе 5 исследуются некоторые способы взаимодействия между компонентами. В их числе — prop-свойства, двустороннее связывание, слоты, события и контекст.
• В главе 6 описано использование хранилищ для совместного доступа к состоянию между компонентами. Существует четыре разновидности хранилищ: для записи, для чтения, производные и специальные. Затем описываются методы использования хранилищ с классами JavaScript и долгосрочное хранение информации.
• В главе 7 продемонстрированы различные подходы к взаимодействию с DOM в компонентах Svelte. В частности, рассматриваются такие методы, как вставка HTML, использование «действий» для получения доступа к элементам DOM и применение функции tick для ручного изменения модели DOM после ее обновления Svelte. Глава завершается описанием способов реализации диалоговых окон и перетаскивания.
• В главе 8 дается обзор функций жизненного цикла. Они позволяют регистрировать функции, которые должны вызываться в ключевых точках жизненного цикла компонентов. К ним относятся функции onMount, beforeUpdate, afterUpdate и onDestroy. Наконец, описан способ реализации нестандартных функций жизненного цикла на основе имеющихся.
• Глава 9 демонстрирует три разных подхода к маршрутизации страниц в приложениях Svelte: ручная маршрутизация, #-маршрутизация и использование библиотеки page.js. Мы разработаем приложение интернет-магазина, чтобы рассмотреть каждый из этих вариантов. Еще один популярный подход основан на использовании Sapper. Маршрутизация Sapper описана в главе 16.
• В главе 10 рассматривается всесторонняя поддержка анимации, встроенная в Svelte. Подробно разбираются пакеты svelte/animate, svelte/motion и svelte/transition. Описаны два подхода к анимации перемещений элементов между двумя списками: сочетание переходов и flip-анимации1 и плавный переход. Глава завершается разбором создания нестандартных анимаций и использования событий переходов.
• В главе 11 представлены основные методы устранения багов в приложениях Svelte. К ним относятся тег @debug, реактивные команды с методами console и расширение для браузера svelte-devtools.
• Глава 12 описывает различные подходы к тестированию приложений Svelte. Для реализации модульных тестов используется Jest и svelte-testing-library. Сквозные тесты реализуются на базе Cypress. Компилятор Svelte обеспечивает некоторую степень проверки доступности. Расширенное тестирование доступности осуществляется в Lighthouse, axe и WAVE. Наконец, Storybook используется для демонстрации и ручного тестирования компонентов.
• В главе 13 исследуется несколько вариантов развертывания приложений Svelte: ручное развертывание на сервере HTTP, использование Netlify, Vercel и Docker.
• В главе 14 рассматриваются дополнительные темы, относящиеся к Svelte. Здесь описаны проверка форм, использование библиотек CSS, «специальные элементы», библиотеки компонентов Svelte и генерирование веб-компонентов из компонентов Svelte.
В части 3 в подробностях рассматривается Sapper. Построенный на базе Svelte, он добавляет еще больше возможностей.
• В главе 15 рассматривается создание вашего первого приложения Sapper. Приложение интернет-магазина, разработанное в главе 9, создается заново с использованием Sapper.
• В главе 16 исследуются многие аспекты Sapper. Сначала объясняется стандартная структура файлов в приложениях. Далее описываются некоторые возможности Sapper, включая маршруты страниц, макеты страниц, предварительную загрузку, предварительную выборку и разделение кода.
• В главе 17 рассматриваются серверные маршруты Sapper. Они позволяют реализовать службы API в одном проекте с клиентской стороной веб-приложения. Далее представлен пример реализации службы CRUD.
• Глава 18 показывает, как «экспортировать» приложения Sapper и генерировать на их основе статические сайты. Например, эта возможность может пригодиться приложениям, у которых разметка HTML каждой страницы генерируется во время построения. В конце главы есть пример такого приложения со страницами для вывода информации об игре «камень-ножницы-бумага» и о разных собаках, живущих в моей семье.
• В главе 19 описано, как приложения Sapper поддерживают автономную работу с помощью сервисных работников. Представлены различные стратегии кэширования и стандартные сервисные работники Sapper, а также события сервисных работников install, activate и fetch. Далее я рассказываю, как активизировать использование HTTPS на серверах Sapper. Глава завершается приемами проверки автономного поведения приложений Sapper.
Часть 4 не ограничивается Svelte и Sapper.
• В главе 20 рассматривается предварительная обработка исходных файлов с целью поддержки альтернативных вариантов синтаксиса (таких как Sass, TypeScript и Markdown). Приводятся примеры использования этих альтернатив.
• В главе 21 читатель знакомится с Svelte Native. Эта технология объединяет Svelte и NativeScript для построения мобильных приложений для Android и iOS. Две сетевые среды REPL помогут вам взяться за создание приложений Svelte Native без установки каких-либо дополнительных инструментов. Описываются предоставляемые компоненты для вывода данных, форм, действий, диалоговых окон, макетов и навигации, а также подробно описывается стилевое оформление компонентов Svelte Native. В главе приводится пример приложения, демонстрирующий большинство этих возможностей. В конце описывается библиотека NativeScript UI и пример приложения, использующего один из ее компонентов — RadSideDrawer.
Последняя глава — это еще не все! За ней идут семь приложений с полезной информацией.
• В приложении А собраны ссылки на ресурсы по темам Svelte, Sapper, Svelte Native и т.д.
• Приложение Б объясняет, как использовать Fetch API для работы со службами REST.
• В приложении В изложены основы работы с базой данных MongoDB, которая используется в главе 17.
• В приложении Г рассматривается настройка и применение ESLint для выявления проблем в приложениях Svelte и Sapper.
• Приложение Д посвящено настройке и использованию Prettier для форматирования кода в приложениях Svelte и Sapper.
• В приложении Е рассказано об использовании некоторых расширений VS Code при редактировании приложений Svelte и Sapper.
• В приложении Ж описано применение Snowpack для построения приложений Svelte. Snowpack реализует более эффективный способ построения веб-приложений по сравнению с подходом, который обычно используется такими упаковщиками модулей, как Webpack, Rollup и Parcel.
В книге мы будем постепенно разрабатывать приложение Travel Packing. Большинство глав дополняет приложение новыми функциями в соответствии с рассматриваемой темой.
Читателям без опыта использования Svelte стоит прочитать главы 1–8, прежде чем переходить к другим частям книги. В них рассматриваются основные принципы Svelte. Опытные читатели могут сразу переходить к главам, которые представляют для них интерес.
О коде
Большая часть кода книги доступна в GitHub-репозитории автора по ссылке https://github.com/mvolkmann. В частности, см. https://github.com/mvolkmann/svelte-and-sapper-in-action и https://github.com/mvolkmann/svelte-native-components.
Для запуска кода необходимо установить новейшую версию Node.js. Если она еще не установлена в вашей системе, перейдите на сайт https://nodejs.org/ и нажмите кнопку LTS или Current для загрузки.
В книге приводится множество примеров исходного кода — как в нумерованных листингах, так и в тексте. В обоих случаях исходный код оформляется моноширинным шрифтом, чтобы он отличался от обычного текста. Иногда код также выделяется жирным шрифтом для обозначения частей, изменившихся по сравнению с предыдущими разделами главы — например, при добавлении новой возможности к существующему фрагменту кода.
Во многих случаях исходный код переформатируется; я добавляю разрывы строк и изменяю отступы, чтобы эффективно использовать площадь страниц. В редких случаях этого оказывается недостаточно и в листинги включаются маркеры продолжения строк (). Кроме того, комментарии исходного кода часто удаляются из листингов, если сам код разбирается в тексте. Многие листинги снабжаются аннотациями, подчеркивающими важные концепции.
Форум liveBook
Приобретая книгу, вы получаете бесплатный доступ к закрытому веб-форуму Manning, на котором можно публиковать комментарии по поводу книги, задавать технические вопросы и получать помощь от автора и других пользователей. Чтобы получить доступ к форуму, откройте страницу https://livebook.manning.com/#!/book/svelte-and-sapper-in-action/discussion. За информацией о форумах Manning и правилах поведения обращайтесь по ссылке https://livebook.manning.com/#!/discussion.
В рамках своих обязательств перед читателями издательство Manning предоставляет ресурс для проведения диалога между читателями и автором. Эти обязательства не подразумевают конкретную степень участия со стороны автора, участие которого в работе форума остается добровольным (и неоплачиваемым). Задавайте автору интересные вопросы, чтобы он не терял интереса к происходящему! Форум и архивы предшествующих обсуждений доступны на веб-сайте издателя, пока книга находится в печати.
Прочие онлайн-ресурсы
В приложении А приводится список онлайн-ресурсов. Большинство из них имеет прямое отношение к Svelte и Sapper, но некоторые темы применимы ко всем разновидностям веб-разработки.
От издательства
Ваши замечания, предложения, вопросы отправляйте по адресу [email protected] (издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
На веб-сайте издательства www.piter.com вы найдете подробную информацию о наших книгах.
1Здесь flip — сокращение от First, Last, Invert, Play. — Примеч. пер.
Об авторе
Марк Волкманн (Mark Volkmann) — партнер компании Object Computing, Inc. (OCI) в Сент-Луисе. Там он занимался консультациями и обучением с 1996 года. Помогал многим компаниям в решении проблем с JavaScript, Node.js, Svelte, React, Vue, Angular и т.д. Марк создал и проводил учебные курсы по многим темам, включая React, Vue, AngularJS, Node.js, jQuery, JavaScript, HTML5, CSS3, Ruby, Java и XML. Он часто выступает с докладами на встречах пользовательских групп в Сент-Луисе. Также он выступал на многих конференциях, включая Nordic.js, Jfokus, NDC Oslo, Strange Loop, MidwestJS, No Fluff Just Stuff и XML DevCon. Марк часто пишет статьи по различным вопросам, связанным с разработкой. Эти статьи доступны по ссылке https://objectcomputing.com/resources/publications/mark-volkmann.
В свободное время Марк любит бегать. На момент написания этой книги он участвовал в 49 марафонах в 39 штатах.
Иллюстрация на обложке
Иллюстрация на обложке Femme Corfiote («Женщина с Корфу») позаимствована из коллекции костюмов различных стран, созданной Жаком Грассе де Сен-Совер (Jacques Grasset de Saint-Sauveur) (1757–1810) под названием Costumes civils actuels de tuos les peoples connus, опубликованной во Франции в 1788 году. Каждая иллюстрация этой коллекции была нарисована и раскрашена от руки. Богатое разнообразие коллекции Грассе де Сен-Совер наглядно напоминает нам, насколько культурно разрозненны были города и регионы всего мира еще 200 лет назад. Будучи изолированными друг от друга, люди говорили на различных диалектах и языках. На сельских же улицах было достаточно взглянуть на одеяние жителя, чтобы распознать, откуда он родом, кем работает и в каком жизненном положении находится.
Манера одеваться с тех пор сильно изменилась, и некогда богатое региональное разнообразие практически угасло. Сегодня стало сложно различить жителей разных континентов, не говоря уже о разных странах, регионах или городах. Можно предположить, что мы променяли культурное разнообразие на более разностороннюю личную жизнь, но при этом точно на более богатую и быстро меняющуюся жизнь мира технологий.
Во времена, когда стало тяжело отличить одну компьютерную книгу от другой, Manning выделяется изобретательностью и инициативой в компьютерном бизнесе, создавая обложки на основе богатого разнообразия жизни регионов двухвековой давности, которое было повторно явлено миру благодаря работе Грассе де Сен-Совер.
Часть 1. Первые шаги
Добро пожаловать! Из первой части книги вы узнаете, почему технологии веб-разработки Svelte и Sapper заслуживают вашего внимания. Затем вы познакомитесь со Svelte Native, мы сравним Svelte с другими популярными веб-фреймворками и подробно рассмотрим инструменты, которые понадобятся вам для начала работы. Также мы построим первое приложение Svelte в среде REPL. Приложения, построенные подобным образом, можно сохранять, передавать другим разработчикам и экспортировать для локального продолжения разработки.
