Главная » Хабрахабр » [Перевод] Почему SvelteJS возможно лучший фреймворк для новых веб-разработчиков

[Перевод] Почему SvelteJS возможно лучший фреймворк для новых веб-разработчиков

Любой веб-разработчик, который занимается этим хотя бы несколько лет, наверняка день за днем слышит подобный вопрос:

Есть какие-то предложения?
Я действительно хочу стать веб-разработчиком, но я не знаю с чего начать.

Лет 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 !</strong></p> <style> /* здесь изолированный CSS */ .pretty { color: red; }
</style> <script> /* ...и переменные к которым есть доступ из разметки */ let name = "Ben";
</script>

Итак, во-первых, стоит отметить, что все это можно писать хоть в обычном .html файле, хоть в .svelte файле, если вашей душе угодно. Давайте разберемся в этом. Стили и JS код пишутся в этих тегах для правильного построения компонентов. Также мы видим некоторые знакомые теги, напоминающие разработку без фреймворка: style и script. Кроме того, компилятор Svelte достаточно умен, чтобы по-умолчанию изолировать любые специфичные для компонента стили. Кроме того, это позволяет подсветке синтаксиса работать без дополнительных плагинов для редактора, таких как решения для CSS-in-JS. Поэтому у вас не будет стилей протекающих между компонентами.

Это блестящая новая концепция для Svelte 3, где любая переменная в скрипте вашего компонента доступна из разметки. Вы также видите как что-то магическое происходит с JavaScript переменной name. Нет ни Angular $scope, ни React this.state, ни data из Vue. У нас нет специального синтаксиса, который нужно изучать для управления состоянием. Вместо этого, мы можем просто использовать обычные переменные для описания состояния, вызывая повторный рендеринг всякий раз, когда их значения изменяются.

Эта свобода от этого синтаксического «жаргона» означает, что создание компонента начинает походить на создание CodePen, только без необходимости задумываться о том, как подключить декларативную функцию JS к какому-то DOM селектору.

Вы можете просто импортировать .html, так как Svelte знает как его развернуть: Еще одна приятная вещь заключается в том, что компоненты 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 упрощает начало работы.

На самом деле, файл конфигурации длиной менее 30 строк! На самом деле Svelte предлагает скачиваемый стартер, но я создал свой собственный стартовый шаблон, который просто использует Rollup для прямой загрузки. Для базового проекта Svelte это все каталоги и файлы, которые вам нужны:

/public
index.html
/src
index.html
app.js
rollup.config.js
package.json

Можно, конечно, сказать, что все дополнительные модули и файлы, которые нужны другим фреймворкам, не являются проблемой, если новичок их не трогает, но, на мой взгляд, чем меньше дополнительных вещей, тем лучше для новичков. Просто добавьте команду для запуска шага сборки в package.json, и все готово!

Ок, хорошо, это круто и удобно для начинающих. Но насколько это стабильный фреймворк?

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

Итак, давайте рассмотрим некоторые основные преимущества для изучения веб-разработки со Svelte:

  1. Это компонентный фреймворк с 0 дополнительными плагинами
  2. Он управляет состоянием без всякого обычного хлама
  3. Использует изоляцию стилей без использования CSS-in-JS (поэтому не нужны плагины для редактора или дурацкий синтаксис)
  4. Чтобы начать работу нужен лишь очень простой скрипт сборки
  5. В базовом проекте практически нет никаких дополнительных файлов

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

Спасибо что прочли это!

Я — фронтенд веб-разработчик-в-процессе-обучения, всегда возящийся с чем-то новым. Я постараюсь регулярно публиковаться здесь, так что напишите, если вам понравилось!

***

От переводчика:

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

Кто хочет просто следить за развитием Svelte — welcome в русскоязычный телеграм канал SvelteJS. Приходите на мой 2-х часовой воркшоп по Svelte 3 на HolyJS Piter 24-25 мая. Будем рады вам!

Просто интересно ваше мнение. И небольшой опрос, без привязки к фреймворку и технологии.


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

Слушаем SID-музыку через OPL3 на современных ПК

Кто-то может подумает, что это будет что-то ужасное, а оказывается если сделать простой маппер, то можно получить весьма хорошее звучание, как это сделали несколько разработчиков в программе LLSID ещё в далеком 2007 году. Наверное не все любители чиптюн музыки знают, ...

Пользователь в Docker

В новой статье он рассказывает, как создать пользователей в Docker. Андрей Копылов, наш технический директор, любит, активно использует и пропагандирует Docker. Правильная работа с ними, почему пользователей нельзя оставлять с root правами и, как решить задачу несовпадения идентификаторов в Dockerfile. Это кажется очень удобно, ведь ...