svelte разбить js код
Svelte разбить js код
Добро пожаловать в учебник по Svelte. Здесь вы узнаете, что создавать лёгкие и быстрые web-приложения совершенно не сложно.
Вы также можете обращаться к документации API и к примерам, или — если вам не терпится начать прямо сейчас — Быстрый старт за 60 секунд.
Что такое Svelte?
Svelte — это инструмент для создания быстрых web-приложений.
Он похож на такие JavaScript фреймворки, как React и Vue, которые преследуют общую цель — облегчить создание удобных интерактивных пользовательских интерфейсов.
Но есть существенное отличие: Svelte преобразует ваше приложение в идеальный JavaScript во время сборки, а не интерпретирует код приложения в своей среде выполнения. Это означает, что вы не платите производительностью за абстракции фреймворка и меньше ждёте при первой загрузке приложения.
С помощью Svelte можно собрать приложение целиком или постепенно добавить его в существующий проект. Также можно создавать компоненты в виде автономных пакетов, которые могут работать где угодно, не требуя лишних зависимостей, в отличие от обычных фреймворков.
Как пользоваться учебником
Вам нужно иметь базовые знания HTML, CSS и JavaScript, чтобы понять Svelte.
По мере прохождения учебника вам будут показаны мини-упражнения, призванные проиллюстрировать новые функции. Более поздние главы основаны на знаниях, полученных ранее, поэтому рекомендуется изучать Svelte по порядку глав. При необходимости, можно перейти в любой раздел учебника, кликнув по заголовку (‘Введение / Основы’).
В каждой главе учебника будет кнопка ‘Покажи мне’, которую можно нажать, если при выполнении задания у вас возникли трудности. Постарайтесь использовать её как можно реже. Вы будете учиться быстрее, если поймёте, куда должен быть вставлен тот или иной блок кода и собственноручно напечатаете его в редакторе.
Понимание компонентов
Краткое введение в Svelte 3
Краткое введение в Svelte 3
IT Expert & Project Manager
Svelte — это не совсем фреймворк в том смысле, к которому мы привыкли, и, пожалуй, лучше рассматривать его как компилятор.
Когда вы создаете приложение Svelte 3, ваш код компилируется в чистый и оптимизированный JavaScript, без других зависимостей фреймворка, включенных в этот микс, что делает его очень крошечным. Таким образом, при разработке со всеми синтаксическими нюансами это выглядит как фреймворк, но затем фреймворк исчезает, когда компилируется код.
Инициализация проекта Svelte 3
И с помощью этой команды вы можете запустить сервер разработки:
А теперь вы можете зайти на http://localhost:5000, чтобы получить доступ к своему приложению.
Структура Svelte приложения
package.json
Точка входа JavaScript: main.js
Общая папка
Svelte файлы
Типичный файл Svelte будет выглядеть так:
Приятно думать, что вы можете использовать старый добрый JavaScript, CSS и HTML! Единственное отличие заключается в нескольких специфических для Svelte синтаксических вкраплениях в HTML и нескольких специальных правилах обработки некоторых JavaScript команд. О, и стили будут привязаны к компоненту, описанному в файле Svelte, так что нет необходимости использовать причудливые классы или беспокоиться о специфике за пределами компонента.
Создание компонента счетчика Counter
14–30 сентября, Онлайн, Беcплатно
Вот наша отправная точка:
Фигурные скобки в вашей разметке предназначены для интерполяции значений. Подойдет любой допустимый однострочный JavaScript-код, но чаще всего его просто интерполировать значения из нашего JavaScript-кода.
Привязка к событиям
Давайте добавим несколько кнопок, чтобы мы могли увеличивать или уменьшать счетчик:
Условные выражения
Двустороннее связывание значений
Иногда вы хотите, чтобы значение связывалось в обоих направлениях, например, когда вход формы должен брать свое значение из переменной в вашем компоненте, но изменение его значения также должно изменить значение этой переменной. Это легко сделать с Svelte! Давайте вместо этого отобразим наш счет в форме ввода и позволим пользователю установить текущий счет вручную:
Двухстороннее связывание осуществляется с помощью синтаксиса bind:value=
Запуск приложения
Когда будете готовы собрать приложение, просто выполните команду build :
И теперь общая папка будет содержать минимизированную и оптимизированную версию вашего скомпилированного пакета, готовую к отправке в CDN.
Возможно, вам не нужен Svelte, чтобы уменьшить ваш JavaScript
Сейчас популярно мнение, что текущие Javascript-фреймворки непомерно большие, а новый фреймворк Svelte очень компактный. Поэтому всем нужно переходить на него, и проблема размера JavaScript решится сама собой.
Недавно вышла статья «Хороший ли выбор Svelte для реализации виджета?» с опытом реализации проекта с критичным размером бандла. Это отличный повод проверить обещания пиарщиков Svelte на реальном проекте.
Давайте его проанализируем!
Исходные данные
Рассматриваемый проект – это встраиваемый виджет, распространяется как монолитный Javascript-бандл общим размером в 71 Кб (c учётом gzip). Много это или мало? В статье «Цена JavaScript в 2019 году» была рекомендация избегать бандлов больше 50-100 Кб. То есть текущий проект находится в жёлтой зоне, размер ещё приемлемый, но уже пора задуматься, о том как в него добавить новой функциональности, и при этом уместиться в верхний лимит в 100 Кб.
Теперь скачаем этот скрипт, отформатируем его и посмотрим, что там интересного.
Настройки бандлера
Первое, что бросается в глаза при просмотре кода – повторение вот такого паттерна:
Это очень похоже на CommonJS модуль. Однако в современных проектах рекомендуется использовать ES-модули, потому что этот формат обеспечивает возможность для оптимизаций – Scope hoisting и Tree-shaking. В случае CommonJS-модулей, бандлеры оптимизировать их не могут и выдают больше кода на выходе.
Неправильно настроенный бандлер может разрушить всю «магию исчезновения» Svelte, которая целиком основана на описанных выше оптимизациях, поэтому в случае ошибок в конфигурации к вам в бандл попадёт весь фреймворк целиком.
К сожалению, у меня нет доступа к исходному коду, поэтому посмотреть на их настройки не получится, но по моему опыту правильно настроенные оптимизации позволяют сократить бандл на 20%, сбросив 14 Кб из общего размера виджета.
Оптимизация ресурсов
Далее мы замечаем, что в бандл включены SVG и JPG изображения. Очень важно, чтобы для веба ресурсы были правильно оптимизированы и весили как можно меньше.
Начнем с SVG. Для его оптимизации есть инструмент SVGO, также доступна онлайн-версия.
Всего в бандле нашлось 7 svg-файлов общим весом в 10 Кб, и, по-видимому, разработчики не занимались их оптимизацией. Пропустив их через SVGO удалось уменьшить общий размер на 3 килобайта.
Теперь про JPG. Заметим, что картинки загружаются в блок размером 59х27 пикселей, а сами оригиналы 183×72. Избыточный размер, даже с учетом поддержки retina-экранов. Кроме того, есть шансы улучшить размер подбором более оптимальных форматов сжатия. Очень удобно это делать в веб-приложении https://squoosh.app/, которое позволяет пережать изображения прямо в браузере с использованием различных кодеков. Применив его к картинкам из виджета, сокращаем их размер на треть, получая еще 7 килобайт экономии.
Чтобы не тратить время на оптимизацию каждого изображения вручную, рекомендуется добавить процесс оптимизации в свою сборку, SVGO уже упоминался выше, а для растровых картинок есть imagemin.
Ненужный код
Теперь переходим к разбору собственно Javascript. Там встречается нетранспилированный ES6-код, а значит поддержка IE от разработчиков не требовалась. И это действительно хорошая стратегия уменьшить размер кода – по моим данным, использование ES6 сокращает размер кода на 7%. Если вам не нужно поддерживать Internet Explorer, это может оказаться очень хорошим подспорьем.
Далее обратим внимание на используемые библиотеки.
Спасибо eilemust за предоставленный скриншот результатов webpack, после которого эта секция была дополнена
Code coverage
Еще полезно прогнать код через Code Coverage из Chrome Devtools. Для этого виджета инструмент показывает, что 24% Javascript не используется. Это не обязательно означает, что весь неиспользуемый код можно удалить, возможно, он нужен для обработки ошибок и других пограничных случаев, но это хороший сигнал обратить на него внимание и подумать, а зачем этот код вообще нужен.
Итого, оптимизации позволили бы сократить размер этого виджета на 44 килобайта (более чем в 2 раза!)
Таким образом, мы видим, что на размер бандла влияет множество факторов, и эффект от использования Svelte примерно как от запивания гамбургера диетической колой – исключительно психологический. Реальная оптимизация требует внимания к деталям и контролю размера на выходе.
А если вы задумываетесь о переходе на Svelte ради уменьшения размера своего проекта – советую обратить внимание на пункты выше, возможно, если их исправить, то никуда переходить и не понадобится.
Руководство по SvelteKit для новичков
SvelteKit — это официально поддерживаемый фреймворк, построенный на основе Svelte. Он добавляет в приложение Svelte ключевые функции, такие как маршрутизация, макеты и рендеринг на стороне сервера, и делает разработку интерфейса чрезвычайно простой.
В этом руководстве мы для начинающих рассмотрим Svelte и SvelteKit и создадим простое веб-приложение, отображающее страницы профилей воображаемых пользователей. Попутно мы рассмотрим все основные функции, которые может предложить SvelteKit.
Давайте начнем с рассмотрения того, что предлагает Svelte.
Преимущества работы со Svelte
Популярность Svelte растет, и тому есть веская причина. Разработка приложений с помощью Svelte основана на написании многоразовых и автономных компонентов — аналогично другим популярным фреймворкам JavaScript, таким как React.
Большая разница поставляется с встроенным временем компиляции — в отличие от времени выполнения интерпретации коды. Другими словами, Svelte уже компилирует ваш код в процессе сборки, а окончательный пакет содержит только тот JavaScript, который действительно нужен вашему приложению. Это приводит к быстрым веб-приложениям с небольшими размерами пакетов.
Другие фреймворки только анализируют и объединяют написанный вами код, по сути принимая дерево компонентов как есть и отправляя его клиенту. Чтобы браузер мог интерпретировать его и обновлять пользовательский интерфейс, необходимо доставить гораздо больше кода и выполнить дополнительную работу на стороне клиента. (Вы можете прочитать здесь, как React обрабатывает этот процесс под капотом.)
В остальном Svelte — идеальный фреймворк для начинающих. Каждый, кто знает, как писать HTML и как включать
Макеты и маршрутизация на стороне клиента
Откроем существующий /src/routes/$layout.svelteфайл. Все, что он сейчас делает, это импортирует некоторый CSS-код для всего приложения. Элемент заворачивает остальную часть приложения. Заменим контент следующим:
Примечание: если вы хотите иметь подсветку синтаксиса для файлов Svelte, вы можете установить расширения. Это хорошо для VS Code.
В этом примере мы использовали элемент для определения метатегов, которые будут вставлены внаш документ. Поскольку мы сделали это в компоненте макета, он будет применен ко всему приложению. Робот тег просто пример.
Кроме того, мы создали панель навигации. Это типичный вариант использования компонента макета, поскольку он обычно предназначен для отображения на каждой странице вашего приложения.
Navbar имеет две ссылки: одна в корневой каталог приложения — который уже содержит служившую по /src/routes/index.svelteкомпоненте — и один к о странице. О странице также была создана с помощью демо — приложения. Откройте его и замените его содержимое следующим:
Эта страница довольно проста. Мы добавили немного HTML и применили стиль.
Вернемся в браузер и перейдем на новую страницу. Наши модификации уже должны быть видны, и вы должны увидеть что-то вроде этого:
Давай перемещаться между посадочной страницей и о странице. Вы можете понять, что изменение страницы не обновляет все приложение. Навигация кажется плавной и мгновенной. Это связано с тем, что SvelteKit «из коробки» применяет клиентскую маршрутизацию. Хотя мы использовали обычные теги в нашей навигационной панели, SvelteKit идентифицирует их как внутренние ссылки и перехватывает их с помощью своего встроенного клиентского маршрутизатора.
Статические страницы и предварительная отрисовка
Как я описал выше, SvelteKit использует концепцию адаптеров для создания приложений для различных сред. Адаптеры импортируются в svelte.config.cjsфайл.
Когда вы откроете этот файл конфигурации, вы увидите, что наше приложение в настоящее время использует адаптер узла. Это оптимизирует вывод сборки для среды Node, и по умолчанию каждая страница нашего приложения будет отображаться по запросу сервером Node. Однако это кажется слишком большим, учитывая текущее состояние нашего приложения. Кроме того, вы можете не захотеть запускать сервер для своего приложения.
Поскольку наше приложение в настоящее время не зависит от каких-либо динамических данных, оно может полностью состоять из статических файлов. И есть, adapter-staticчто вы можете установить, что превращает SvelteKit в генератор статического сайта. Он преобразует все ваше приложение в набор статических файлов в процессе сборки. Однако это помешало бы нам создавать дополнительные страницы, которые зависят от рендеринга на стороне сервера.
Поскольку мы не хотим превращать все наши страницы в статические файлы, мы воспользуемся другой функцией SvelteKit, которая позволяет нам предварительно визуализировать отдельные файлы нашего приложения. В нашем случае мы хотели бы, чтобы страница about была предварительно обработана, поскольку она состоит из статического содержимого и отображение страницы при каждом запросе не требуется. Мы можем добиться этого, добавив следующий фрагмент кода вверху нашей /src/routes/about.svelteстраницы:
Мы можем проверить это, запустив npm run build. Это создаст работающий сервер Node внутри /buildпапки. Как видите, есть HTML-файл, /build/prerendered/about/index.htmlсодержащий предварительно отрисованный HTML-код для страницы about. Для нашей целевой страницы нет HTML-файла, поскольку он будет отображаться сервером Node по запросу.
Вы можете запустить сгенерированный сервер Node с помощью node build/index.js.
Конечные точки
Пришло время наполнить нашу страницу динамическим контентом. Мы настроим целевую страницу так, чтобы на ней отображался список аватарок пользователей. Для этого нам нужно получить список пользовательской информации из конечной точки API. У большинства команд разработчиков есть отдельная серверная часть. Это было бы то место, куда можно было бы пойти. Однако SvelteKit позволяет легко превратить ваше приложение в полный стек с помощью страниц конечных точек. Поскольку у нас нет бэкенда, мы создадим такую страницу.
Теперь создайте файл /src/routes/api/index.jsв новой /apiпапке. Поскольку у файла нет.svelteрасширения, он будет рассматриваться как конечная точка. Синтаксис /api/index.jsтакой же, как у api.js. Конечная точка станет доступной под /api. Вставьте следующий код:
Этот файл экспортирует функцию get. Как вы уже догадались, это соответствует методу HTTP GET. Все, что он делает, это возвращает объект со свойством body, содержащим массив пользовательских данных, созданных с помощью generateUsers.
Функция generateUsersвозвращает массив из 50 объектов со свойствами lastNameи avatar. lastNameсоздается с использованием faker. avatarхранит URL-адрес, который указывает на бесплатный DiceBear Avatar API. Он генерирует случайные аватары с использованием начального значения, как в нашем случае lastName.
Если бы у нас была настоящая база данных, мы могли бы заменить ее generateUsersчем-то вроде findUsersи получить доступ к базе данных внутри этой функции.
Это все, что ему нужно. Вернитесь в браузер (убедитесь, что ваше приложение все еще работает в режиме разработки npm run dev) и перейдите по адресу http: // localhost: 3000 / api. Это загрузит необработанные данные. Обратите внимание, что создание конечной точки, как мы, необходимо только в том случае, если у вас нет отдельного внутреннего API для получения данных.
Получение данных с помощью load функции
Затем мы будем использовать новую конечную точку для отображения пользовательских данных на нашей целевой странице. Откройте существующую /src/routes/index.svelteстраницу и замените ее содержимое следующим:
Основная проблема при получении данных для динамического содержимого на странице заключается в том, что пользователь может перейти к нему двумя способами. Первый способ — из внешних источников или после обновления страницы. Это приведет к тому, что приложение будет загружено с нуля, а страница будет обслуживаться сервером. Второй способ — внутренняя навигация, и в этом случае страница будет обслуживаться пакетом JavaScript на стороне клиента. В первом случае данные выбираются сервером, а во втором — клиентом.
Полная жизнь на Svelte
У Радислава Гандапаса есть отличная книга Полная Ж. В ней говорится о том, как оценить направления своей жизни, и как разработать план развития.
Мне захотелось создать инструмент, который будет в моем смартфоне и поможет составить мой радар.
1. Подготовка
Исходный код туториала и демо можно посмотреть здесь.
Этот проект небольшой, поэтому писать мы будем сразу в REPL, онлайн редакторе svelte. Если вам по душе локальная разработка, то можете воспользоваться webpack или rollup шаблонами svelte.
Как альтернативу локальной разработке могу посоветовать онлайн инструмент codesandbox.
Если вы используете VScode, то рекомендую установить плагин svelte-vscode
Итак, открываем REPL и начинаем
2. Каркас
Сейчас у нас есть файл App.svelte, это точка входа в приложение. Компоненты Svelte стилизуются в теге style, как в обычном html. При этом вы получаете изоляцию стилей на уровне компонента. Если необходимо добавить глобальные стили, которые будут доступны «снаружи» объекта, то нужно воспользоваться директивой :global(). Добавим стили и создадим контейнер для нашего приложения.
Создадим компонент Radar.svelte. Это будет SVG элемент, в котором мы будем рисовать наше колесо.
Javascript код в компоненте Svelte помещается в тег script. Импортируем наш Radar.svelte в App.svelte и отрисуем его.
Сам радар будет состоять из секторов, соответствующих жизненным аспектам. Каждый сектор имеет свой индекс
Каждый сектор состоит из сетки, которая, в свою очередь, является сектором с меньшим размером.
Для отрисовки сектора нам нужно знать координаты трех вершин.
Вершина А всегда с координатами [0, 0], так как начало координат будет по центру нашего радара. Для нахождения вершин В и С воспользуемся функцией из отличного туториала по гексагональным сеткам. На вход функция получает размер сектора и направление, а возвращает строку с координатами ‘x,y’.
Создадим файл getHexCorner.js, куда поместим нашу функцию getHexCorner(size, direction)
Теперь создадим компонент сектора Sector.svelte, который рисует сетку. Нам нужен цикл из 10 шагов. В теле компонента svelte не умеет реализовывать цикл for, поэтому я просто сделал массив grid, по которому буду итерировать в директиве #each. Если у вас есть идеи, как это можно сделать элегантней, напишите об этом в комментариях.
Импортируем и отрисуем сектор в компоненте Radar.svelte.
Теперь наше приложение отображает 1 сектор.
3. Хранение данных
Чтобы отрисовать весь радар, необходимо знать перечень секторов. Поэтому займемся созданием хранилища состояния. Мы будем использовать кастомный стор, в котором реализуем логику обновления состояния. Вообще, это обычное хранилище Svelte, которое завернуто в функцию. Это позволяет защитить хранилище от изменений, предоставив набор доступных действий. Мне нравится этот подход тем, что структура данных и логика работы с ними находятся в одном месте.
Создадим файл store.js
Нам потребуются два хранилища:
Теперь импортируем созданный стор в компонент Radar.svelte и добавим логику отрисовки полного радара.
Сейчас наша сетка выглядит вот так
Осталось подготовить сектор к работе с событиями нажатия и перетаскивания.
Событие touchmove, в отличие от mousemove, срабатывает только на элементе, на котором началось. Поэтому мы не сможем отловить момент, когда указатель переместился на другой сектор. Для решения этой проблемы в разметке элемента мы будем хранить текущее имя (name) сектора и его значение (value). В момент события будем определять, какой сектор находится под курсором, и изменять его значение.
Если мы добавим в нашем сторе (store.js) значение, отличное от нуля, то должен получится такой результат:
4. События
Пришло время вдохнуть жизнь в наш радар, создадим обработчик, который на вход принимает ноду, а внутри производит обработку событий касания и мыши.
Теперь просто добавим наш обработчик в svg элемент радара через директиву use:
Радар теперь реагирует на клики и перетаскивания.
6. Финальные штрихи
Добавим подписи для секторов и описание
Радар должен выглядеть так.
5. Бонус
Я немного расширил функционал радара, добавил хранение данных в localStorage и составление плана действий. Вы можете попробовать приложение life-checkup, исходный код доступен в gitlab.