Прошло некоторое время с тех пор, как я действительно развернул что-то новое. Svelte привлек мое внимание, когда я проверял GitHub Explore, и подумал, что это будет классный фреймворк для изучения. Моей мотивации в последнее время не хватало, поэтому я решил, что лучше всего будет сделать небольшое погодное приложение. Ничего фантастического. Ничего сумасшедшего. Простое приложение, чтобы узнать несколько новых вещей. Вот где мы оказались с Sonny Weather — простым прогнозом на 7 дней.
svelte-kit было очень легко настроить. Существует простая команда npx, которая поможет вам начать работу за считанные секунды. Встроенные в SvelteKit инструменты маршрутизации делают пейджинг очень простым и интуитивно понятным — никаких дополнительных пакетов не требуется. Создание простых компонентов так же просто, как ванильный HTML, который, как ни странно, обновляется из-за накладных расходов React.js. И Svelte БЫСТРО. Я имею в виду чрезвычайно быстро. SvelteKit имеет массу встроенных оптимизаций, позволяет выполнять предварительную выборку и обрабатывает настраиваемый рендеринг. Разработчикам это еще интереснее, потому что они используют Vite, чтобы любые изменения, которые вы вносите, мгновенно отображались в вашем браузере.
Магазины в Svelte тоже было интересно узнать. Как и ожидалось, у вас есть хранилище для любых данных, которые вы хотите сделать доступными для ваших компонентов. В данном случае я использовал хранилище для хранения данных о местоположении, а также данных о погоде. Данные было легко получить из API, которые я использовал, легко хранить и легко получить к ним доступ. Одна особенность, которая мне очень нравится в магазинах в Svelte, — это префикс $. Префикс $ подписывается на переменную, которая есть у вас в магазине. Каждый раз, когда ваш магазин изменяет переменную, ваша переменная с префиксом $ также будет обновляться. Я обнаружил, что это действительно простой способ управлять своими данными и доставлять их туда, куда нужно, без особых усилий.
TailwindCSS был для меня еще одной новой технологией. Мои друзья хвастались этим, и это было в тренде, поэтому я решил попробовать. TailwindCSS великолепен. Это позволяет вам быстро стилизовать компоненты интуитивно понятным способом без необходимости загружать огромные пакеты или выполнять какую-либо первоначальную настройку. Все, что вы видите на Sonny Weather, — это ванильный TailwindCSS — для этого проекта не было написано никакого дополнительного CSS. Поскольку TailwindCSS — это инфраструктура, ориентированная прежде всего на полезность, создается впечатление, что вы используете надежный API, а не рутинный спагетти-код. Хотя Tailwind не поставляет встроенные компоненты, его легко можно быстро стилизовать и создать собственные великолепно выглядящие компоненты. Например, создать красиво выглядящую карточку так же просто, как добавить этот max-w-md py-4 px-8 bg-white shadow-lg rounded-lg в класс тега div. Кроме того, добавление нескольких настроек здесь и там может адаптировать ваш компонент именно так, как вы хотите.
Это был отличный опыт, чтобы выйти из моей коробки React.js/Bootstrap и попробовать что-то новое. Я рад, что в итоге попробовал именно Svelte, потому что с ним было действительно приятно работать. Его скорость, опыт разработчиков с Vite и простота сделали это небольшое приложение очень увлекательным и избавили от многих разочарований и отвлекающих факторов, связанных с другими фреймворками. Мне не терпится создать свое следующее приложение Svelte!
Проверьте Sonny Weather здесь — Sonny Weather
Примечание: я развернул это приложение с помощью Vercel, что было очень просто. Я не писал об этом здесь, но это еще один классный инструмент, который стоит проверить!
