Предисловие

Я профессионально занимаюсь программированием уже 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, но некоторые темы применимы ко всем разновидностям веб-разработки.

От издательства

Ваши замечания, предложения, вопросы отправляйте по адресу comp@piter.com (издательство «Питер», компьютерная редакция).

Мы будем рады узнать ваше мнение!

На веб-сайте издательства www.piter.com вы найдете подробную информа­цию о наших книгах.

Об авторе

Марк Волкманн (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. Приложения, построенные подобным образом, можно сохранять, передавать другим разработчикам и экспортировать для локального продолжения разработки.

Глава 1. Знакомство с игроками

В этой главе

• Svelte.

• Sapper.

• Svelte Native.

 

Svelte (https://svelte.dev/) — инструмент для построения веб-приложений на базе JavaScript. Это альтернатива таких веб-фреймворков, как React, Vue и Angular. Как и они, Svelte специализируется на определении компонентов пользовательского интерфейса (UI) и взаимодействий между ними. Каждый UI-компонент представляет собой независимую, пригодную для повторного использования часть более крупного пользовательского интерфейса, которая может проектироваться и реализовываться независимо от других.

У Svelte есть ряд преимуществ перед другими веб-фреймворками.

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

• Svelte уменьшает размер распространяемого пакета, из-за чего снижается время загрузки в браузере.

• Svelte значительно упрощает управление состоянием как внутри компонентов, так и между ними. (К управлению состоянием относится организация данных, управляющих работой приложения, и реакция на их изменения.)

Sapper (https://sapper.svelte.dev/) — фреймворк, построенный на базе Svelte и предназначенный для создания более сложных веб-приложений. Sapper расширяет Svelte многими функциональными возможностями, включая маршрутизацию страниц, визуализацию на стороне сервера, разделение кода и генерирование статических сайтов. При этом создатели веб-приложений, которым такие возможности не нужны (или которые предпочитают реализовать их другим способом), могут ограничиться использованием только Svelte.

Svelte Native (https://svelte-native.technology/) также строится на базе Svelte. Эта технология интегрирует использование NativeScript для построения мобильных приложений для Android и iOS.

Примечание Упоминая в книге различные технологические решения для создания веб-приложений, я буду называть их фреймворками, хотя некоторые авторы предпочитают термин «библиотека».

1.1. Знакомство со Svelte

Зачем нужен еще один инструмент для построения веб-приложений?

Тратить время и усилия на изучение очередного решения стоит только в том случае, если он приносит значительные преимущества. Возможно, вам придется писать меньше кода для достижения того же результата. А может быть, значительно сократится объем работы. Или для нового решения браузеру придется загружать меньше байтов.

Svelte помогает достичь всех этих целей, и не только.

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

Рич Харрис, который ранее работал в The Guardian, а теперь перешел в The New York Times, занялся разработкой Svelte в 2016 году. Ранее он создал веб-фреймворк Ractive (https://ractive.js.org/), который используется в The Guardian и послужил источником вдохновения для некоторых частей Vue. Он также создал упаковщик модулей Rollup как альтернативу для Webpack и Parcel.

Svelte можно перевести как «стройный»; это точно характеризует как синтаксис Svelte, так и размер создаваемых пакетов.

1.1.1. Почему Svelte

У Svelte много преимуществ перед другими веб-фреймворками. Самые важные из этих преимуществ кратко описаны ниже.

Svelte — компилятор

Другие популярные веб-фреймворки включают большие библиотеки, которые используются во время работы программы и обеспечивают поддержку ее особенностей. Но Svelte не библиотека, а компилятор веб-приложений, реализованный на TypeScript.

Примечание Компилятор — программа, переводящая код, написанный на одном языке программирования, на другой язык. Обычно компиляторы переводят высокоуровневый язык (такой как Go или Java) на язык низкого уровня (например, машинный код или байт-код).

Примечание TypeScript — язык программирования с открытым исходным кодом, который представляет собой надмножество JavaScript; программы, написанные на TypeScript, компилируются на JavaScript. TypeScript добавляет к JavaScript много новых возможностей, самая важная из которых — возможность определения типов переменных и функций. Разработкой и сопровождением TypeScript занимается компания Microsoft.

UI-компоненты Svelte определяются в файлах .svelte. Такие файлы порой содержат смесь JavaScript, CSS и HTML. Например, у компонента могут быть элементы HTML для формы авторизации, CSS для ее стилевого оформления и JavaScript для передачи введенных данных службе аутентификации при нажатии кнопки Login.

Компилятор Svelte преобразует файлы .svelte в JavaScript и CSS. Плюс такого подхода в том, что новые возможности могут добавляться в Svelte без увеличения размера пакета развертываемого приложения. Компилятор включает код только тех возможностей Svelte, которые действительно используются в приложении.

Компактные пакеты

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

Примечание В контексте веб-приложений пакеты (bundles) представляют собой файлы JavaScript, которые появляются благодаря объединению, оптимизации и минимизации всего необходимого приложению JS-кода.

В целом в Svelte размер пакета минимальный за счет включения только необходимого кода вместо всей библиотеки фреймворка. Например, у приложения Todo, представленного в главе 2, размер пакета на 13 % меньше, чем у эквивалентного приложения React. Ссылки на версии этого приложения на базе Svelte, React и Vue даны в главе 2.

Примечание Все веб-фреймворки включают «встряску дерева», чтобы убрать неиспользуемый код. И все же Svelte оставляет намного меньше кода фреймворка. Например, приложения React должны включать код, который строит представления виртуальных моделей DOM и определяет различия между ними. Использование виртуальных DOM описано ниже.

В опубликованном FreeCodeCamp сравнительном анализе фреймворков A RealWorld Comparison of Front-End Frameworks with Benchmarks (2019 update) приводится статистика построения реальных веб-приложений на базе разных веб-фреймворков (http://mng.bz/8pxz). В данном случае для сравнения используется приложение сайта социальных блогов Conduit, сходного с Medium.com.

Размеры приложения со сжатием gzip для некоторых популярных фреймворков:

• Angular + ngrx — 134 Кбайт;

• React + Redux — 193 Кбайт;

• Vue — 41,8 Кбайт;

• Svelte — 9,7 Кбайт.

Очевидно, Svelte показывает блестящие результаты по этому показателю.

Меньший объем кода

Svelte нужно меньше кода для реализации той же функциональности. В тех же сравнительных тестах приводятся следующие данные о количестве строк кода:

• Angular + ngrx — 4210;

• React + Redux — 2050;

• Vue — 2076;

• Svelte — 1116.

Этот показатель важен по многим причинам. Чем меньше объем кода, тем меньше вам придется прикладывать усилий, чтобы в нем разобраться. Также в таком варианте меньше мест, в которых могут скрываться ошибки.

Svelte обеспечивает реактивность без использования виртуальной DOM

Некоторые веб-фреймворки, включая React и Vue, используют виртуальную модель DOM для оптимизации обновления реальной модели DOM в ответ на изменения данных. При изменении состояния компонентов фреймворк строит новую версию DOM в памяти, а затем сравнивает ее с предыдущей версией. К реальной модели DOM применяются только отличия. Хотя такое решение работает быстрее, чем обновление всех данных в реальной модели DOM, на построение виртуальной модели и сравнение ее с предыдущей требуется время.

Реактивность — это способность обновлять DOM в ответ на изменения состояния приложения и компонентов. Для обеспечения реактивности Svelte отслеживает изменения в переменных компонентов верхнего уровня (область видимости которых не ограничивается функциями), влияющих на визуализацию компонентов. Таким образом, вместо перерисовки всего компонента обновляются только те части DOM, которые затрагивают изменения. Это позволяет Svelte выполнять меньший объем работы, по сравнению с другими фреймворками, для синхронизации DOM с состоянием приложения.

Svelte быстро работает

Ознакомьтесь с эталонными тестами Штефана Краузе (Stefan Krause) по ссылке https://krausest.github.io/js-framework-benchmark/current.html. Приложение, используемое в этих тестах, строит таблицу из четырех столбцов и 1000 строк. На этой странице приводятся сравнительные данные по разным фреймворкам и параллельная статистика. Например, выберите варианты angular-v8.0.1-keyed, react-v16.8.6-keyed, svelte-v3.5.1-keyed и vue-v2.6.2-keyed. Вы получите информацию о времени запуска приложения, показанную в табл. 1.1. Результаты доказывают, что Svelte работает достаточно быстро по сравнению с другими вариантами.

Примечание Термин keyed (ассоциативный) в этом случае означает, что код создает ассоциативную связь между данными и элементами DOM. При изменении данных изменяется связанный с ними элемент DOM. То же касается добавления или удаления элементов массива. Результаты тестов, приведенные в табл. 1.1, относятся к «ассоциативным» реализациям, потому что они лучше показывают, как приложения пытаются повысить эффективность обновления существующих элементов DOM.

Svelte расходует меньше памяти

Снижение затрат памяти — важный аспект при запуске веб-приложений на старых компьютерах или мобильных устройствах, у которых объем памяти для выполнения приложений обычно меньше.

Сайт сравнительного тестирования, упомянутый в предыдущем разделе, опуб­ликовал данные по затратам памяти, изображенные в табл. 1.2. По ним видно, что приложения Svelte обычно используют меньше памяти по сравнению с другими вариантами.

Таблица 1.1. Время инициализации и загрузки в сравнительных тестах

Метрика	svelte-v3.5.1-keyed	vue-v2.6.2-keyed	react-v16.8.6-keyed	angular-v8.0.1-keyed
Время инициализации сценария (время в миллисекундах, необходимое для разбора/компиляции/построения всех сценариев страницы	19,5 ± 2,4 (1.00)	59,6 ± 28,6 (3.06)	55,6 ± 45,2 (2.85)	159,8 ± 8,8 (8.21)
Общий размер в килобайтах — затраты на пересылку по сети (после сжатия) всех ресурсов, загружаемых на странице	145 ± 0 (1.00)	211,2 ± 0 (1,45)	260,8 ± 0 (1,79)	295,5 ± 0 (2.03)

Компоненты Svelte не используют контейнер JavaScript

Файлы .svelte не определяют контейнер JavaScript для компонента. Вместо этого компонент определяется сочетанием элемента script, разметки HTML для визуализации и элемента style.

Такой подход проще того, который применяется в большинстве других веб-фреймворков. Для определения компонента требуется меньше строк кода, а разработчику приходится учитывать меньше нюансов, относящихся к JavaScript. Например, компоненты Angular определяются классом, компоненты React — функцией или классом, компоненты Vue 2 — объектным литералом, а компоненты Vue 3 — функциями.

Стилизация Svelte имеет ограниченную область видимости

По умолчанию код CSS, определяемый в каждом компоненте Svelte, применяется только к этому компоненту. Тем самым предотвращается случайная утечка правил CSS, определяемых в файле .svelte, и их непреднамеренное применение к другим компонентам.

В прочих фреймворках используется другой подход к стилизации. В Angular у стилей, заданных в свойстве styles компонента, по умолчанию область ­видимости также ограничивается компонентом. В Vue область видимости стилей ограничивается компонентами только в том случае, если они задаются внутри элемента style с атрибутом scoped. React не разрешает ограничивать область видимости стилей компонентами, и это одна из причин, по которым решения «CSS-в-JS» так популярны в приложениях React. В Svelte практически нет смысла использовать решения «CSS-в-JS».

Таблица 1.2. Затраты памяти в сравнительных тестах (в мегабайтах)

Метрика	svelte-v3.5.1-keyed	vue-v2.6.2-keyed	react-v16.8.6-keyed	angular-v8.0.1-keyed
Готовая память (затраты памяти после загрузки страницы)	1,9 ± 0 (1.00)	2,1 ± 0 (1.13)	2,3 ± 0 (1.23)	4,8 ± 0 (2.54)
Память в ходе выполнения (затраты памяти после добавления 1000 строк)	3,9 ± 0 (1.00)	7,1 ± 0 (1,81)	6,9 ± 0 (1,76)	9,1 ± 0 (2.34)
Обновление каждой десятой записи для 1k записей (пять циклов) (затраты памяти после нажатия кнопки обновления каждой десятой строки пять раз)	4,3 ± 0 (1.00)	7,5 ± 0 (1,76)	8,0 ± 0 (1,89)	9,5 ± 0 (2.23)
Замена 1k строк (пять циклов) (затраты памяти после нажатия кнопки создания 1000 строк пять раз)	4,5 ± 0 (1.00)	7,7 ± 0 (1,71)	8,9 ± 0 (1,98)	9,9 ± 0,1 (2.20)
Создание/очистка 1k строк (пять циклов) (затраты памяти после нажатия кнопки создания и очистки 1000 строк пять раз)	3,2 ± 0 (1.00)	3,8 ± 0 (1,20)	4,7 ± 0,1 (1,48)	6,6 ± 0 (2.07)

Svelte предоставляет место для глобальных стилей

Svelte предоставляет конкретное место для определения глобальных стилей, которые могут повлиять на любой компонент. Эти стили определяются в файле public/global.css.

Svelte упрощает управление состоянием

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

Svelte поддерживает двустороннее связывание данных

Svelte также упрощает связывание значений элементов форм с переменными компонентов. К элементам форм относятся элементы input, textarea и select. Переменные высокого уровня в файлах .svelte представляют состояние компонента.

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

Svelte упрощает анимацию

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

Среди примеров анимаций в приложении Todo — проявление новых и растворение удаленных элементов задач. Если элементы задач организуются в иерархические списки, анимация может использоваться для плавного вывода элемента из текущей категории и перемещения его в новую.

Svelte повышает доступность

Svelte выдает предупреждения о возможных проблемах доступности. Например, помечаются элементы img без атрибута alt. Благодаря этому приложения Svelte, скорее всего, будут доступны для пользователей, взаимодействующих с браузером с применением вспомогательных средств.

1.1.2. Новый подход к реактивности

В контексте веб-приложений реактивностью называется способность DOM обновляться автоматически в ответ на изменения данных (то есть состояния). Сравните с электронными таблицами: изменение значения одной ячейки может привести к изменению других. Это происходит в случае, если значение ячейки вычисляется по формуле, в которой задействованы значения других ячеек.

В Svelte реактивность реализуется проще, чем в других фреймворках. Svelte поддерживает уникальный способ управления состоянием компонента, который основывается на отслеживании переменных верхнего уровня (см. раздел 3.9). Также Svelte упрощает совместное использование данных состояния разными компонентами.

HTML DOM

Модель HTML DOM обеспечивает представление веб-страницы в памяти. Модель выглядит как дерево объектов JavaScript, представляющих узлы. Один объект JavaScript представляет весь документ; он содержит ссылки на другие объекты DOM, представляющие элементы страницы. Объекты DOM содержат методы, которые можно вызывать для получения информации об узле, добавления дочерних узлов, регистрации слушателей событий и т.д. Изменение модели DOM приводит к изменению изображения в браузере.

Пример документа HTML:

<!DOCTYPE html>

<html>

  <head>

    <title>My Page</title>

  </head>

  <script>

    // Для исследования DOM с консоли DevTools ...

    window.onload = () => console.dir(document);

    </script>

  <body>

    <h1>My Page</h1>

    <p>I like these colors:</p>

    <ul>

      <li>yellow</li>

      <li>orange</li>

    </ul>

  </body>

</html>

 

На этой схеме изображены узлы DOM, созданные браузером для представления документа HTML в памяти.

В выступлении Рича Харриса Rethinking Reactivity на нескольких конференциях были описаны основные причины для создания Svelte (www.youtube.com/watch?v=gJ2P6hGwcgo). Все десять основных пунктов доклада относятся к функциональности, реализованной в Svelte.

1. Реализация полноценного «реактивного программирования» как в электронных таблицах. Изменение одного значения может привести к каскадному обновлению других.

2. Предотвращение использования виртуальной модели DOM. «Для нас, инженеров, такая неэффективность выглядит оскорбительно».

3. Сокращение объема кода выгодна как разработчикам, так и приложению в плане его скорости. Рич говорит: «Есть только один надежный способ ускорить ваш код: избавиться от него».

4. Выдача предупреждений о возможных проблемах с доступностью.

5. Ограничение области видимости стилей в пределах компонента ради предотвращения утечки стилей и нежелательных взаимодействий между ними.

6. Выявление неиспользуемых правил CSS для их удаления.

7. Упрощение создания переходов и анимаций с использованием CSS для обеспечения быстродействия.

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

9. Применение Sapper (обертка для Svelte) для добавления маршрутизации страниц, разделения кода, визуализации на стороне сервера и т.д.

10. Svelte Native для мобильных приложений (альтернатива для React Native).

1.1.3. Текущие проблемы в Svelte

Svelte подходит практически для любых веб-приложений. И все же у него есть проблемы, из-за которых некоторые разработчики могут предпочесть другие фреймворки. Фреймворк Svelte реализован на TypeScript, но он не поддерживает использование TypeScript в исходном состоянии. Хотя при небольшой настройке и добавлении нужных инструментов TypeScript теперь все же можно использовать в Svelte. Сейчас ведется работа над совершенствованием поддержки TypeScript.

Svelte — не лучший вариант для веб-приложений, которые предназначены для Internet Explorer. Для работы приложений Svelte в Internet Explorer 11 необходимы полизаполнения (см. https://github.com/sveltejs/svelte/issues/2621 и https://mvolkmann.github.io/blog/topics/#/blog/svelte/supporting-ie11/). В более старых версиях Internet Explorer приложения Svelte вряд ли будут работать. К счастью, для большинства веб-приложений выполнение в Internet Explorer — уже не обязательный пункт.

Примечание В главе 20 рассматривается использование svelte-препроцессора для поддержки TypeScript в файлах .svelte. Также затрагивается тема использования программы командной строки svelte-check для проверки ошибок в файлах .svelte, включая ошибки TypeScript. В приложении Е рассматривается расширение Svelte для VS Code, использующее Svelte Language Server для выдачи сообщений об ошибках в открытых файлах .svelte, включая ошибки TypeScript.

Некоторые веб-фреймворки вроде React и Vue упрощают создание содержимого для разных частей компонента в отдельных функциях внутри определения компонента. Сравните с подходом Svelte, где вся разметка HTML для компонента задается вне кода JavaScript. Недостаток подхода Svelte в том, что при разделении HTML для визуализации по блокам, которыми можно управлять по отдельности, приходится определять дополнительные компоненты в отдельных файлах .svelte. И все же, поскольку в этих файлах почти нет шаблонного кода, создать новые компоненты довольно просто.

Для веб-фреймворков, предшествовавших Svelte, в течение многих лет создавались библиотеки поддержки. Коллекции готовых компонентов — один из примеров. У Svelte таких библиотек пока меньше, но их число растет.

Подумайте, оправдывают ли преимущества Svelte перечисленные недостатки. Я уверен, что после первых экспериментов со Svelte вы придете к тому же выводу, что и я: да, оправдывают!

1.1.4. Как работает Svelte

На рис. 1.1 показана роль компилятора Svelte. Компоненты пользовательского интерфейса реализуются в файлах .svelte. Они могут содержать код JavaScript (в элементе script), CSS (в элементе style) и HTML для визуализации.

Файлы .svelte могут импортировать другие файлы .svelte в качестве дочерних компонентов. Например, компонент TodoList, представляющий все приложение Todo, может импортировать и использовать компонент Todo, представляющий один элемент задачи, который может содержать флажок, текст элемента и кнопку Delete.

Файлы .svelte также могут импортировать функции из файлов .js и из сторонних библиотек (как правило, из npm). Например, в приложении Svelte можно импортировать и использовать функции популярной библиотеки Lodash.

 

Рис. 1.1. Схема передачи файлов компилятору Svelte

Компилятор Svelte преобразует все это в один файл bundle.js и один файл bundle.css. Эти файлы содержат только код JavaScript и правила CSS, используемые в приложениях. В bundle.js включаются только реально используемые части библиотеки Svelte.

Стилевое оформление, которое может влиять на любой компонент, помещается в файл global.css. Главный файл HTML — index.html — включает файл global.css и файлы пакетов, генерируемые компилятором Svelte. Файл HTML загружается в браузере для запуска приложения.

Компилятор Svelte также генерирует файлы bundle.css.map и bundle.js.map, которые устанавливают соответствие между сгенерированным кодом и строками исходного кода. Эта информация используется отладчиками, включая встроенные в браузеры.

1.1.5. Svelte исчезает?

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

Некоторые разработчики говорят, что Svelte исчезает после построения приложения. Они имеют в виду, что библиотека Svelte не включается в пакет, созданный компилятором Svelte. Но это не так: часть кода библиотеки Svelte все же включается.

Библиотека Svelte в основном определяется в файлах JavaScript из каталога node_modules/svelte. Главные функции определяются в файле internal.js, который сейчас содержит около 1400 строк кода. Другие библиотечные файлы вроде easing.js, motion.js, register.js, store.js и transition.js используются для реализации конкретных функций.

Приложения Svelte компилируются командами npmrundev или npmrunbuild (мы рассмотрим эту особенность позднее). Эти команды создают файлы в каталоге public, включая bundle.js и bundle.css. Библиотечные функции Svelte, используемые приложением, копируются в начало bundle.js. Для малых и средних приложений (таких как Todo) они насчитывают около 500 строк кода.

Код библиотеки Svelte не исчезает, но имеет очень небольшой объем по сравнению с другими веб-фреймворками.

1.2. Знакомство с Sapper

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

Название Sapper имеет двойной смысл. Во-первых, оно является сокращением от Svelte app maker («создатель приложений Svelte»). Во-вторых, английское слово sapper («сапер») определяется как «солдат, занимающийся строительством и ремонтом дорог и мостов, минированием и разминированием и т.д.». В каком-то смысле Sapper решает для Svelte именно эти задачи.

Разработкой и сопровождением Sapper занимался Рич Харрис (создатель Svelte) при участии многих других девелоперов.

1.2.1. Зачем использовать Sapper

Sapper добавляет к Svelte ряд возможностей. Они будут подробно рассмотрены в следующих главах.

• Sapper обеспечивает маршрутизацию страниц. Механизм маршрутизации страниц связывает URL-адреса со «страницами» приложения и определяет, как навигация между страницами будет описываться в разметке. Маршрутизация страниц Sapper полностью определяется соглашениями об именах каталогов и файлов. Такой подход более понятен и прост в реализации, чем другие решения, требующие вызова библиотечных функций для настройки маршрутизации.

• Sapper поддерживает макеты страниц. Макет страницы (page layout) определяет общий макет для наборов страниц в приложении. Например, у многих страниц могут быть общие заголовки, завершители и разделы навигации. Макеты страниц избавляют от необходимости повторять эти общие разделы везде, где они нужны.

• Sapper поддерживает визуализацию на стороне сервера (Server-Side Rendering, SSR) — механизм генерирования HTML посещаемых страниц на сервере, а не в браузере. Это улучшает взаимодействие пользователя с сайтом, потому что JavaScript-страницу не приходится загружать перед ее отображением. Также SSR может улучшить результаты поисковой оптимизации (SEO). Sapper SSR автоматически активируется для первой страницы, посещенной в сеансе.

• Sapper поддерживает серверные маршруты. Серверные маршруты предоставляют простые средства реализации сервисов API на базе Node в одном проекте с веб-приложением на стороне клиента. Это удобно для разработчиков, которые хотят работать с полным стеком приложения, а не только с его интерфейсной частью. Использовать эту функциональность не обязательно. Службы API/REST, используемые приложениями Svelte и Sapper, могут быть реализованы в любом технологическом стеке.

• Sapper поддерживает разделение кода. Разделение позволяет загружать код JavaScript, необходимый для каждой страницы приложения, только при первом посещении страницы. Такой подход намного эффективнее загрузки всего кода приложения при посещении первой страницы.

• Sapper поддерживает упреждающую выборку. Упреждающая выборка ускоряет загрузку страниц за счет прогнозирования следующей посещаемой страницы на основании того, на какой объект наведен указатель мыши. Упреждающая выборка может настраиваться для каждой ссылки. Когда пользователь впервые задерживает указатель над такой ссылкой, Sapper начинает загружать код JavaScript, необходимый для этой страницы. Также Sapper может инициировать обращения к службам API, которые собирают данные, необходимые для этой страницы.

• Sapper поддерживает генерирование статических сайтов. Механизм генерирования статических сайтов (или экспортирование) обходит веб-приложение Svelte в момент построения и генерирует разметку HTML, которая строится каждой страницей. Это позволяет строить чрезвычайно эффективные сайты, потому что каждая страница в каком-то смысле строится заранее.

Сайты, созданные таким образом, не обязаны быть полностью статическими. Они могут включать код JavaScript и использовать реактивность Svelte для обновления DOM.

• Sapper поддерживает автономное использование. Веб-приложения Sapper используют службу-работника для того, чтобы сохранять работоспособность (возможно, в ограниченном смысле) при потере подключения к Сети. Это происходит благодаря кэшированию некоторых файлов и ответов, которые можно использовать в автономном режиме.

REST

Концепция REST (REpresentational State Transfer — «передача состояния представления») была описана в докторской диссертации Роя Филдинга (Roy Fielding) в 2000 году. Это архитектурный стиль, а не стандарт или API. Основные идеи, лежащие в основе REST, таковы.

1. Программный компонент запрашивает «ресурс» у службы, передавая идентификатор ресурса и желательный тип данных. Идентификатор ресурса может представлять собой URL, а запрос может выдаваться средствами Ajax (https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX).

2. Возвращается «представление» ресурса — последовательность байтов и метаданных, которые их описывают. Например, это может быть JSON, пары «имя — значение» в заголовках HTTP, изображение и т.д. Представление может содержать идентификаторы других ресурсов.

3. Для получения этого представления программный компонент должен ­перейти в новое «состояние».

В распространенном варианте REST использует запросы и ответы HTTP. ­Команды HTTP POST, GET, PUT и DELETE ставятся в соответствие операциям CRUD (­создание, чтение, обновление и удаление).

• Sapper поддерживает сквозное тестирование. Приложения Sapper дополняются поддержкой Cypress для реализации тестов, которые обходят приложение так, как это делает пользователь, и выполняют операции вроде ввода регистрационных данных, перехода на различные страницы, ввода текста и нажатия кнопок.

1.2.2. Как работает Sapper

«Страницы» приложения Sapper определяются в файлах .svelte, расположенных в каталоге src/routes. Компоненты, которые используют эти страницы, определяются в файлах .svelte, расположенных в каталоге src/components. Навигация между страницами реализуется простыми якорными элементами HTML (<a>), которые задают имя страницы в атрибуте href.

По умолчанию приложения Sapper предоставляются серверной библиотекой Polka. Это библиотека на базе Node, у которой практически такой же API, как у Express, но при этом Polka более эффективна в плане быстродействия и размера. При желании приложения Sapper можно легко настраивать под использование Express.

Как было показано ранее, компилятор Svelte генерирует файлы bundle.js и bundle.css, содержащие код JavaScript и CSS для всего приложения. Sapper действует иначе: для каждой страницы приложения генерируются отдельные файлы .js и .css, которые размещаются в каталоге __sapper__/build/client. При каждой загрузке страницы загружается только код JavaScript и CSS, необходимый для этой страницы.

1.2.3. Когда стоит использовать Sapper

Чтобы использовать Sapper вместо базового фреймворка Svelte, достаточно создать проект с другим исходным набором каталогов и файлов. Как ­будет показано далее, такие наборы файлов можно создать ­командой npx.

Все возможности, описанные в предыдущем разделе, в приложениях Sapper доступны по умолчанию. Никакие дополнительные библиотеки не нужны.

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

1.2.4. Когда не стоит использовать Sapper

На момент написания книги фреймворк Sapper еще не достиг версии 1.0.0. Это означает, что его функциональность все еще может радикально измениться. Разработчики, которых это беспокоит, могут дождаться перехода Sapper в более зрелую фазу, прежде чем использовать его в приложениях, предназначенных для реальной эксплуатации.

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

1.3. Знакомство с Svelte Native

NativeScript (https://nativescript.org/) — фреймворк для создания мобильных приложений, работающих на устройствах Android и iOS. За его создание и сопровождение отвечает компания Telerik, которую купила Progress Software в 2014 году.

Приложения NativeScript строятся с использованием синтаксиса XML (с нестандартными элементами), CSS и JavaScript. Их можно писать без применения каких-либо веб-фреймворков, а можно воспользоваться Angular, React, Svelte и Vue. Плагины предоставляют доступ ко всем платформенным API устройств.

Svelte Native (https://svelte-native.technology/) строится на базе NativeScript, чтобы разработчики могли строить мобильные приложения на основе Svelte. Этот фреймворк предоставляет тонкую прослойку над NativeScript API, что упрощает обеспечение совместимости с будущими версиями NativeScript.

Основы написания приложений Svelte Native рассматриваются в главе 21.

1.4. Сравнение Svelte с другими веб-фреймворками

Svelte кое в чем отличается от современных популярных веб-фреймворков. Рассмотрим некоторые из этих отличий.

1.4.1. Angular

При создании приложений Angular разработчику приходится писать больше кода для достижения тех же целей. Код Svelte получается более «стройным».

Концепции Angular выглядят привлекательно для разработчиков Java и C#, привыкших к множеству классов и внедрению зависимостей.

Приложения Angular обычно используют «эффекты» и такие библиотеки, как RxJS и nrgx/store. Обычно из-за этого Angular приходится долго изучать.

1.4.2. React

Компоненты React используют JSX (сокращение от JavaScript XML) для описания визуализации. JSX — расширение синтаксиса JavaScript, внешне похожее на HTML. React преобразует его в вызовы функций, создающие узлы DOM. Хотя у JSX много общего с HTML, есть и различия. Некоторые разработчики не любят JSX, потому что им не нравится смешивать эту разметку с кодом JavaScript. Хотя компоненты Svelte держат код JavaScript, CSS и HTML в одном файле, они определяются в разных секциях этого файла.

React использует виртуальную модель DOM, недостатки которой были описаны ранее.

Число концепций, которые необходимо усвоить для хорошего владения React, продолжает расти. Например, перехватчики (hooks) — очень обширная тема; помимо нее, еще предстоит изучить много нюансов. Предусмотрено несколько вариантов работы с состоянием, включая this.setState, перехватчик useState, Redux и т.д. На горизонте виднеются компоненты Suspense и параллельный режим. В общем, освоить Svelte намного проще.

1.4.3. Vue

Компоненты Vue 2 описываются объектными литералами. Описание включает разнообразную информацию о компоненте, в том числе получаемые им prop-свойства, его вычисляемые свойства (то есть свойства, основанные на других значениях), используемые данные (состояние компонента), функции наблюдения (для реакции на изменения состояния) и методы (например, обработка событий). Код компонентов Vue 2 часто использует ключевое слово this, а по мнению некоторых разработчиков, такой код труднее понять; к тому же код получается более длинным. Компоненты Vue 3 описываются функциями. Кроме того, Vue использует виртуальную модель DOM, недостатки которой были описаны ранее.

Но с компонентами Svelte все эти аспекты определяются простыми переменными и функциями JavaScript с помощью реактивных команд (описанных в следующей главе).

1.5. Какие инструменты понадобятся для начала работы

Книга предполагает, что вы разбираетесь в основах HTML, CSS и JavaScript для создания веб-приложений. Вы должны знать HTML на базовом уровне (включая элементы форм), синтаксис CSS (включая модель блоков) и син­таксис JavaScript (включая некоторые возможности, добавленные в ECMA­Script 2015 и позднее).

Для начала работы со Svelte и Sapper требуется только установка новейшей версии Node.js. Программу установки можно загрузить по ссылке https://nodejs.org/.

Примечание Как сказано на главном веб-сайте Node.js (https://nodejs.org/), «Node.js — среда времени выполнения JavaScript, построенная на базе JavaScript-ядра V8 от Chrome». Node.js позволяет строить многие виды приложений с использованием JavaScript. К этой категории относятся сетевые приложения, такие как серверы HTTP и инструментальные средства: статические анализаторы кода, форматировщики кода и даже компилятор Svelte.

Установка Node.js предоставляет в ваше распоряжение команды node, npm и npx:

• команда node запускает локальные серверы, необходимые для тестирования приложения, а также для запуска других задач разработки (статический анализ, форматирование кода, запуск тестов);

• команда npm используется для установки библиотек, которые нужны в проекте;

• команда npx используется для создания новых проектов Svelte и Sapper.

Примечание Стоит обратить внимание еще на один инструмент, связанный с Svelte (хотя он еще и не готов для реальной эксплуатации): svelte-gl (https://github.com/sveltejs/gl). Эта библиотека похожа на three.js (https://threejs.org/), но адаптирована для использования в Svelte. Она получает описание трехмерного графа сцены и выдает код WebGL для его визуализации. Демонстрационная версия доступна по адресу http://mng.bz/lG02.

Вы не поверите, насколько простой может быть веб-разработка по сравнению с теми решениями, которыми вы пользуетесь сейчас!

Резюме

• Svelte — инструмент для создания веб-приложений, который стал альтернативой популярным веб-фреймворкам вроде React, Vue и Angular.

• Svelte — компилятор веб-приложений, а не библиотека.

• У Svelte много особенностей, которые делают его привлекательным: меньше кода, небольшой размер пакета (что улучшает время запуска) и упрощенное управление состоянием.

• Sapper строится на базе Svelte и добавляет такие возможности, как маршрутизация страниц, визуализация на стороне сервера, разделение кода и генерирование статических сайтов.

• Svelte Native использует возможности Svelte, чтобы предоставить альтер­нативу для React Native при создании мобильных приложений под Android и iOS.