Любой веб-разработчик, который занимается этим хотя бы несколько лет, наверняка день за днем слышит подобный вопрос:
Я действительно хочу стать веб-разработчиком, но я не знаю с чего начать. Есть какие-то предложения?
Лет 10 назад ответ был очень прост. Просто создайте index.html, добавьте туда несколько тегов, сделайте заголовок красным с помощью CSS и подключите JQuery для обработки кликов!
Ох, как же все изменилось. Теперь мы работаем с инструментами сборки, маршрутизацией на стороне клиента, специальными фреймворками с причудливым рантаймом, привязывая везде «this», шаблонными литералами, CSS-in-JS… как же выбрать то, что важнее всего?
Все это привело к бесчисленным вариациям того, с чего можно начать с различной степенью «просто введите это сейчас, а я объясню позже». Некоторые побуждают новичков сразу изучать React или Vue, чтобы начать работу с современными практиками. В то время как другие кричат с вершин гор, что новичкам всегда следует начинать с основ. По правде говоря, у обоих подходов есть свои достоинства. Первый может вызвать у новичков восторг от таких штук как hot-reloading и компоненты, рискуя оставить слишком многое в стороне. В то время как второй заставляет новичков понять, как DOM работает под капотом, в то же время, возможно, отвлекая людей сложностью ванильного JS, от которой мы давно абстрагировались.
Вот почему нам нужна золотая середина. Способ начать работу с основами, в то же время впитывая в себя современные концепции, такие как разработка на основе компонентов, изолированный vs каскадный CSS, шаблоны, декларативные функции и т.д. и т.п.
Svelte, к вашим услугам
SvelteJS — довольно новый патрон в обойме js фреймворков, который только начинает привлекать к себе внимание. Кто-то может знать его после публикации State of JavaScript 2018. Если кратко, Svelte призван быть фреймворком, который на самом деле не является фреймворком. В его основе лежит инструмент для компиляции компонентов на этапе сборки, позволяющий загрузить на страницу лишь необходимое для отображения вашего приложения. Это означает, что нет виртуального DOM, нет фреймворков поверх фреймворков и нет фреймворка в рантайме.
Все это довольно серьезные аргументы для более опытных разработчиков, но большинство новичков, вероятно, не смогли прочитать последний абзац без отрыва башки. К счастью, не волшебство компиляции делает Svelte настолько дружелюбным к новичкам, а его синтаксис.
Если вы никогда не видели компонент Svelte, вот простой пример:
<p class="pretty">Here's some markup <strong>written by {name}!</strong></p>
<style>
/* здесь изолированный CSS */
.pretty {
color: red;
}
</style>
<script>
/* ...и переменные к которым есть доступ из разметки */
let name = "Ben";
</script>
Давайте разберемся в этом. Итак, во-первых, стоит отметить, что все это можно писать хоть в обычном .html файле, хоть в .svelte файле, если вашей душе угодно. Также мы видим некоторые знакомые теги, напоминающие разработку без фреймворка: style и script. Стили и JS код пишутся в этих тегах для правильного построения компонентов. Кроме того, это позволяет подсветке синтаксиса работать без дополнительных плагинов для редактора, таких как решения для CSS-in-JS. Кроме того, компилятор Svelte достаточно умен, чтобы по-умолчанию изолировать любые специфичные для компонента стили. Поэтому у вас не будет стилей протекающих между компонентами.
Вы также видите как что-то магическое происходит с JavaScript переменной name. Это блестящая новая концепция для Svelte 3, где любая переменная в скрипте вашего компонента доступна из разметки. У нас нет специального синтаксиса, который нужно изучать для управления состоянием. Нет ни Angular $scope, ни React this.state, ни data из Vue. Вместо этого, мы можем просто использовать обычные переменные для описания состояния, вызывая повторный рендеринг всякий раз, когда их значения изменяются.
Эта свобода от этого синтаксического «жаргона» означает, что создание компонента начинает походить на создание CodePen, только без необходимости задумываться о том, как подключить декларативную функцию JS к какому-то DOM селектору.
Еще одна приятная вещь заключается в том, что компоненты Svelte импортируются также легко, как и традиционные компоненты. Вы можете просто импортировать .html, так как Svelte знает как его развернуть:
<div>
<Wizardry />
</div>
<script>
import Wizardry from './wizardry.html';
</script>
Круто, но погодите минутку...
Некоторые читатели могут посчитать эту концепцию настолько же умопомрачительной, как и я. В то же время, другие, вероятно, имеют свои доводы против использования подобного подхода для обучения начинающих. Разве им не интересно как на самом деле работают манипуляции с DOM?
Ответ… возможно. Но когда кто-то только начинает (по крайней мере, из личного опыта), можно принять небольшую абстракцию ради более быстрого создания классных вещей.
Кроме того, так же как некоторые языки, например, Java и JS, абстрагировали управление указателями с помощью сборки мусора, большинство современных инструментов веб-разработки абстрагировались от манипуляций с DOM. За исключением более сложных крайних случаев, которые новичкам, вероятно, не понадобятся. Кстати, если вы ломаете голову над тем, что такое управление указателями, я думаю, что это лишь доказывает мою точку зрения. Таким образом, вместо того, чтобы заставлять новичков манипулировать DOM или осваивать специфичные для фреймворка способы управления состоянием, почему бы просто не позволить им обращаться к переменным напрямую из разметки? Теперь они могут изучать основные принципы управления состоянием компонентов не впадая в траур.
Хорошо, я вижу базовый пример, но у Svelte должны быть какие-то специфические особенности, чтобы все это работало
Без сомнения, это правда, но этого намного меньше, чем вы думаете. Одина часть синтаксиса Svelte предназначена для итеративного и условного отображения элементов DOM. Это работает очень похоже на map из JSX, но без всех этих вложенных скобок, в которых новички (и я) могут легко потеряться. Вот базовый способ, который генерирует список элементов из массива:
<ul>
{#each profiles as profile}
<li>{profile.name}: {profile.role}</li>
{/each}
</ul>
<script>
const profiles = [
{name: 'Wes Bos', role: 'React extraordinaire'},
{name: 'Chris Coyier', role: 'Father of CodePen'},
{name: 'Cassidy Williams', role: 'Letting you know it's pi time'}
];
</script>
Опять же, я понимаю любую критику в отношении синтаксиса, но мне нравится то, насколько легко понять это. Вместо того, чтобы вкладывать JavaScript в наш HTML-код, мы просто говорим: эй, давайте сделаем цикл по этому массиву и создадим элемент для каждого из них.
Стоит упомянуть еще одну особенность Svelte, от которой я нахожусь не в таком восторге: синтаксис передачи пропсов компонентам. Да, он полностью функционален и прост в освоении, но, в тоже время, может показаться слишком магическим на вкус некоторых людей. Для обработки пропсов мы просто передаем их компоненту, куда бы он ни импортировался…
<!-- somewhere.html -->
<Profile coolGuy="Scott Tolinski" />
… и получаем эту переменную как экспортированный «let»:
<!-- profile.html -->
<p>{coolGuy}</p>
<script>
export let coolGuy = '';
</script>
Я полностью понимаю, что некоторым это покажется злоупотреблением «экспортом». Но по крайней мере, это соответствует тому, как начинающие должны концептуализировать модули: мы экспортируем то, к чему должны получить доступ за пределами компонента, и импортируем то, что хотим использовать в нашем компоненте.
Я мог бы преодолеть эту странность… но как насчет обязательного шага сборки?
Итак, еще одна критика по поводу начала работы с фреймворками — это необходимость использовать менеджер пакетов. Что означает… черт, использовать терминал!
Послушайте, я понимаю, что открывать эту штуку может быть крайне пугающим, с ее моно-шрифтом и жутким «cd» для перехода по каталогам. Но, честно говоря, это действительно не большое препятствие, когда вам нужна только одна команда для запуска. Кроме того, встроенный терминал в VS Code упрощает начало работы. Он даже открывается в нижней части окна прямо в вашем каталоге проекта!
На самом деле Svelte предлагает скачиваемый стартер, но я создал свой собственный стартовый шаблон, который просто использует Rollup для прямой загрузки. На самом деле, файл конфигурации длиной менее 30 строк! Для базового проекта Svelte это все каталоги и файлы, которые вам нужны:
/public
index.html
/src
index.html
app.js
rollup.config.js
package.json
Просто добавьте команду для запуска шага сборки в package.json, и все готово! Можно, конечно, сказать, что все дополнительные модули и файлы, которые нужны другим фреймворкам, не являются проблемой, если новичок их не трогает, но, на мой взгляд, чем меньше дополнительных вещей, тем лучше для новичков.
Ок, хорошо, это круто и удобно для начинающих. Но насколько это стабильный фреймворк?
Это очень актуальный вопрос для такого молодого фреймворка, как Svelte. Все примеры, которые я показал, используют синтаксис Svelte версии 3, которая на момент написания этой статьи все еще находится в бете. Как бы это ни было захватывающе, я бы подождал еще несколько месяцев, прежде чем спешить с ним на семинары по программированию. Тем не менее, Svelte предлагает действительно лаконичную страницу документации для версии 3, которая может облегчить начинающим работу.
Итак, давайте рассмотрим некоторые основные преимущества для изучения веб-разработки со Svelte:
- Это компонентный фреймворк с 0 дополнительными плагинами
- Он управляет состоянием без всякого обычного хлама
- Использует изоляцию стилей без использования CSS-in-JS (поэтому не нужны плагины для редактора или дурацкий синтаксис)
- Чтобы начать работу нужен лишь очень простой скрипт сборки
- В базовом проекте практически нет никаких дополнительных файлов
Конечно, это совершенно нормально, если мне не удалось убедить вас в этой статье. Все хорошие статьи разжигали небольшую полемику! Но я надеюсь, что эта статья, по крайней мере, показала вам, насколько чертовски крутым и простым Svelte может быть для изучения.
Спасибо что прочли это!
Я — фронтенд веб-разработчик-в-процессе-обучения, всегда возящийся с чем-то новым. Я постараюсь регулярно публиковаться здесь, так что напишите, если вам понравилось!
***
От переводчика:
Спасибо что почитали данный перевод! Надеюсь эта статья сподвигнет вас посмотреть в сторону Svelte в качестве инструмента для обучения или даже нового проекта.
Приходите на мой 2-х часовой воркшоп по Svelte 3 на HolyJS Piter 24-25 мая. Кто хочет просто следить за развитием Svelte — welcome в русскоязычный телеграм канал SvelteJS. Будем рады вам!
И небольшой опрос, без привязки к фреймворку и технологии. Просто интересно ваше мнение.
Автор: Павел Малышев
