Легкий семейный фронтенд
За столом мы всегда стараемся порадовать наших близких и друзей, познакомить с неизвестными блюдами, приоткрыть для них необычные грани вкуса. После долгой зимы, уже не хочется ничего жирного, наваристого и тяжёлого. Наша редакция подготовила для вас рецепт необычного, но в то же время легкого и весеннего фронтенда.
Сегодня мы приготовим Svelte. Это на первый взгляд странная, но вполне себе не самая обычная библиотека. Любители VueJS отметят, что Svelte позволяет создавать однофайловые компоненты. А еще, если верить официальной документации, он не использует виртуальный DOM и “привносит реактивность в сам JavaScript”. Проверять мы это конечно же не будем.
- Одна пачка NodeJS. Я рекомендую взять LTS версию, ведь именно от этого зависит качество вашего блюда и настроение гостей
- Любая IDE. Я для особых случаев держу в закромах WebStorm, но вы можете воспользоваться любым редактором. Благо на рынке много вариантов на любой вкус и кошелёк.
- ParcelJS. Вы можете возразить, поскольку на рынке доминирует webpack и будете правы. Но наша задача на сегодня - быстрый семейный ужин.
- Sass/TypeScript по вкусу. Хотя выбор приправы играет большую роль, сегодня мы добавим лишь css препроцессор. Уверен, что обычная морская соль найдётся у каждого. Всё остальное - в меру вашей испорченности.
Готовить будем на среднем огне. Важно приготовить блюдо быстро, но не стоит торопиться, ведь фронтенд легко испортить. Если бульон начнёт убегать, важно незамедлительно принять решительные меры.
Инициализируем проект. Есть разные пакетные менеджеры. Когда-то у меня был yarn, но с ним мясо частенько пригорало и я решил вернуться на npm. К тому же он поставляется вместе с NodeJS:
Сразу кладём в холодную воду dev зависимости:
Да, я для бульона использую parcel-plugin-svelte. Конечно можно пойти в гипермаркет, купить все свежее чтобы сделать бульон с нуля, но не у всех есть такая возможность. Мы же хотим дать простой рецепт, доступный каждому.
Подождите 10 минут, когда в кастрюле начнут появляться пузырьки, добавьте продукты:
Помешивая, варите на среднем огне минут 15, потом снимите пену. Можно добавить приправы:
Хоть это и простое блюдо для всей семьи, я бы хотел, чтобы на тарелке оно выглядело отлично, поэтому вместе с препроцессором, я еще добавляю prettier. Рекомендую всем вам запастись этим инструментом. Лишним не будет.
Ждём еще 5 минут, ставим минимальный огонь и начинаем нарезать гарнир.
Создайте папку src. В самом простом сценарии нам пригодится всего 4 файла:
Добавьте в вашу IDE необходимые плагины по вкусу. Здесь каждый решает сам, я же предпочитаю работать с подсветкой синтаксиса.
Начнём с index.html. Его содержимое не вызовет ни у кого восхищение - это типичная точка входа для браузера:
Обратите внимание, мы напрямую обращаемся к scss файлу. Не волнуйтесь. Дайте сборщику сделать всю грязную работу за вас.
Задайте какие-нибудь стили в app.scss. Дайте волю фантазии. Кстати, доску можете не мыть. При такой термической обработке беспокоиться не о чем.
Блюдо действительно напоминает Vue, но не дайте себя обмануть - у нашего будет совершенно другой вкус!
Кидаем в бульон, едем дальше. index.js:
Если вы так же как и я не можете избавиться от мысли что работаете с Vue, я вас понимаю. Разве то в данном случае, всё как-будто чуточку проще. Создали инстанс, отдали пропсы, привязали к элементу. Потрясающе.
Блюдо почти готово. Можно звать домочадцев за стол, а нам осталось лишь разложить ужин по тарелкам. Приступаем. Добавьте в package.json две команды:
Ни один уважающий себя повар не отдаёт блюдо гостю, не попробовав соль. Запустим проект в dev режиме:
Посмотрите как, словно играючи, parcel отдал нам фронтенд на порт 1234. По-моему соли достаточно:
В тарелку с нарезанным яйцом налейте суп, добавьте зелень и подавайте к столу. Приятного аппетита!