Svelte — это новая библиотека JavaScript UI, которая во многом похожа на современные библиотеки UI, такие как React. Одним из важных отличий является то, что он не использует концепцию виртуального DOM.
В этом уроке мы представим Svelte, создав информационное приложение, вдохновленное Daily Planet , вымышленной газетой из мира Супермена.
О Славте
Svelte использует новый подход к созданию пользовательских интерфейсов. Вместо того, чтобы выполнять необходимую работу в браузере, Svelte переводит эту работу в фазу компиляции, которая происходит на компьютере разработчика при создании приложения.
В двух словах, так работает Svelte (как указано в официальном блоге ):
Svelte работает во время сборки , превращая ваши компоненты в высокоэффективный императивный код, который хирургически обновляет DOM. В результате вы можете писать амбициозные приложения с отличными характеристиками производительности.
Svelte работает быстрее, чем самые мощные фреймворки (React, Vue и Angular), потому что он не использует виртуальный DOM и хирургически обновляет только те части, которые меняются.
Мы узнаем об основных понятиях, таких как компоненты Svelte, и о том, как извлекать и перебирать массивы данных. Мы также узнаем, как инициализировать проект Svelte, запустить локальный сервер разработки и собрать окончательный комплект.
Предпосылки
У вас должно быть несколько предварительных условий, чтобы вы могли комфортно следовать этому руководству, например:
- Знакомство с HTML, CSS и JavaScript (ES6 +),
- Node.js и npm установлены на вашем компьютере разработчика.
Node.js может быть легко установлен с официального сайта или вы также можете использовать NVM для простой установки и управления несколькими версиями Node в вашей системе.
Мы будем использовать JSON API в качестве источника новостей для нашего приложения, поэтому вам нужно получить ключ API, просто создав бесплатную учетную запись и отметив ключ API.
Начиная
Теперь давайте начнем создавать наше новостное приложение Daily Planet, используя инструмент degit для генерации проектов Svelte.
Вы можете либо установить degit глобально в своей системе, либо использовать инструмент npx для запуска его из npm. Откройте новый терминал и выполните следующую команду:
npx degit sveltejs/template dailyplanetnews
Затем перейдите в папку вашего проекта и запустите сервер разработки, используя следующие команды:
cd dailyplanetnews npm run dev
Ваш dev-сервер будет прослушивать с адреса http://localhost:5000 . Если вы внесете какие-либо изменения, они будут перестроены и обновлены в вашем запущенном приложении.
Откройте файл main.js вашего проекта, и вы должны найти следующий код:
import App from './App.svelte'; const app = new App({ target: document.body, props: { name: 'world' } }); export default app;
Именно здесь приложение Svelte загружается путем создания и экспорта экземпляра корневого компонента, условно называемого App . Компонент берет объект с target и props атрибутами.
target содержит элемент DOM, в который будет смонтирован компонент, а props содержат свойства, которые мы хотим передать компоненту App . В данном случае это просто имя с мировым значением.
Откройте файл App.svelte , и вы должны найти следующий код:
<script> export let name; </script> <style> h1 { color: purple; } </style> <h1>Hello {name}!</h1>
Это корневой компонент нашего приложения. Все остальные компоненты будут дочерними для App .
Компоненты в Svelte используют расширение .svelte для исходных файлов, которые содержат все JavaScript, стили и разметку для компонента.
Имя export let name; Синтаксис создает компонент проп с именем name . Мы используем переменную интерполяцию — {...} — для отображения значения, переданного через имя prop.
Вы можете просто использовать старый добрый JavaScript, CSS и HTML, с которым вы знакомы, для создания компонентов Svelte. Svelte также добавляет в HTML некоторый синтаксис шаблона для интерполяции переменных и циклического перемещения по спискам данных и т. Д.
Поскольку это небольшое приложение, мы можем просто реализовать необходимые функции в компоненте App .
В <script> импортируйте метод onMount() из «svelte» и определите API_KEY , API_KEY и URL которые будут содержать ключ API новостей, API_KEY articles новостей и конечную точку, которая предоставляет данные:
<script> export let name; import { onMount } from "svelte"; const API_KEY = "<YOUR_API_KEY_HERE>"; const URL = `https://newsapi.org/v2/everything?q=comics&sortBy=publishedAt&apiKey=${API_KEY}`; let articles = []; </script>
onMount — это метод жизненного цикла. Вот что говорит официальный учебник об этом:
Каждый компонент имеет жизненный цикл, который начинается при его создании и заканчивается при его уничтожении. Существует несколько функций, которые позволяют запускать код в ключевые моменты этого жизненного цикла. Наиболее часто используемым является
onMount, который запускается после первой визуализации компонента в DOM.
Далее, давайте использовать API извлечения для извлечения данных из конечной точки новостей и сохранения статей в переменной article, когда компонент монтируется в DOM:
<script> // [...] onMount(async function() { const response = await fetch(URL); const json = await response.json(); articles = json["articles"]; }); </script>
Поскольку метод fetch() возвращает обещание JavaScript, мы можем использовать синтаксис async / await, чтобы код выглядел синхронно и исключал обратные вызовы.
Далее, давайте добавим следующую HTML-разметку для создания пользовательского интерфейса нашего приложения и отображения данных новостей:
<h1> <img src="https://dailyplanetdc.files.wordpress.com/2018/12/cropped-daily-planet-logo.jpg?w=656&h=146" /> <p class="about"> The Daily Planet is where heroes are born and the story continues. We are proud to report on the planet, daily. </p> </h1> <div class="container"> {#each articles as article} <div class="card"> <img src="{article.urlToImage}"> <div class="card-body"> <h3>{article.title}</h3> <p> {article.description} </p> <a href="{article.url}">Read story</a> </div> </div> {/each} </div>
Мы используем each блок для зацикливания новостных статей и отображаем title , description , url и urlToImage каждой статьи.
Логотип ежедневной планеты и заголовок взяты из этой некоммерческой новостной организации , вдохновленной DC Comics.
Мы будем использовать Kalam, рукописный шрифт, доступный в Google fonts , поэтому откройте файл public/index.html и добавьте следующий тег:
<link href="https://fonts.googleapis.com/css?family=Kalam" rel="stylesheet">
Затем вернитесь в файл App.svelte и добавьте следующие стили:
<style> h1 { color: purple; font-family: 'kalam'; } .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(305px, 1fr)); grid-gap: 15px; } .container > .card img { max-width: 100%; } </style>
Это скриншот нашего ежедневного новостного приложения:
Здание для производства
После разработки приложения вы можете создать производственные пакеты, выполнив команду build в своем терминале:
npm run build
Команда создаст минимизированный и готовый к работе пакет, который вы можете разместить на предпочитаемом хостинг-сервере.
Теперь давайте разместим приложение, используя ZEIT Now .
ZEIT Now — это облачная платформа для веб-сайтов и бессерверных функций, которую вы можете использовать для развертывания своих проектов в .now.sh или в личном домене.
Вернитесь к своему терминалу и выполните следующую команду для установки CLI Now:
npm install -g now
Затем перейдите в public папку и выполните команду now :
cd public now
Это оно! Ваше приложение будет развернуто в облаке. В нашем случае это доступно из public-kyqab3g5j.now.sh .
Вы можете найти исходный код этого приложения в этом репозитории GitHub .
Вывод
В этом уроке мы создали простое новостное приложение с использованием Svelte. Мы также увидели, что такое Svelte и как создать проект Svelte с помощью инструмента degit из npm.
Вы можете обратиться к официальным документам за подробным руководством, чтобы узнать о каждой функции Svelte.