ПРОГРАММИРОВАНИЕ | ВЕБ-РАЗРАБОТКА

React, Vue.js и Angular требуют слишком много работы — вместо этого используйте Svelte

Использование Svelte повышает вашу продуктивность, потому что это так просто

Я использовал React в течение многих лет, и я знаю, как он работает, и я знаю, что он работает очень хорошо, но что, если я скажу вам, что Svelte работает так же хорошо или даже лучше с меньшим количеством кода?

Давайте взглянем на этот относительно новый фреймворк для веб-разработки.

Требования

Прежде всего, что вам нужно, чтобы начать работу со Svelte?

Это в основном все, и вы готовы идти.

Начиная

Вы можете использовать команду npx для создания проекта Svelte, давайте сделаем это. Откройте папку, которую вы хотите использовать, и запустите терминал или командную строку.

$ npx degit sveltejs/template tutorial

Введите любое имя для проекта, который вам нравится. Я буду придерживаться «учебника». Эта команда создаст папку со всеми видами папок и файлов.

Структура каталогов

Как вы можете заметить, существует множество различных файлов, которые вы, вероятно, еще не знаете, например, rollup.config.js . По сути, это файл конфигурации для вашего проекта Svelte. Вы можете найти основной файл и все импорты, что позволяет создавать приложения на основе компонентов и импортировать в стиле ES6.

package.json В нем нет ничего особенного, как в других проектах Node.js, и он содержит все скрипты и модули.

В папке src вы найдете main.js это контейнер для вашего приложения. Как видите, он импортирует App.Svelte, где и происходит вся магия. Этот файл main.js также показывает нам, что можно передавать реквизиты.

Когда мы открываем App.Svelte, мы видим простой и четко структурированный файл.

Чтобы достичь этого с помощью React, мы бы проделали гораздо больше работы. Теперь он печатает фиолетовым цветом имя, которое передается вместе с реквизитом в main.js.

Мы также можем изменить имя, удалив реквизит из файла main.js и сделав его статическим.

Чтобы иметь возможность запускать это приложение, нам сначала нужно установить все недостающие зависимости. Мы используем команду $ npm i.

Запуск нашего приложения

Чтобы запустить приложение, вы можете ввести команду $ npm run dev, и она настроит сервер на localhost:5000, посмотрите в своем браузере.

Вот как это будет выглядеть. Поскольку мы сделали имя статическим, оно отображается в браузере именно так.

Условные операторы в Svelte

В Svelte легко использовать условные операторы, такие как if, else for, foreach, непосредственно в вашем HTML. Давайте покажем вам, что я имею в виду. Мы добавим новую переменную с именем points, и если у пользователя более 500 баллов, появится имя пользователя.

Здание для производства

Svelte действительно легко построить для производства. Для этого запустите $ npm run build и, когда все будет скомпилировано и построено, вы можете использовать плагин VS Code: Live Server для запуска файла index.html в папке public.

Как видите, весь ваш проект компилируется в ванильный javascript и запускается вместе с вашим HTML-файлом.

Подведение итогов

Конечно, это было краткое введение в Svelte. Он был предназначен для того, чтобы вы увидели, как легко настроить проект Svelte и использовать его. Это быстро, и это работает, и по сравнению с React и другими фреймворками кодировать намного проще и быстрее.

Я думаю, что Svelte — это будущее, которое вытеснит с трона React, Vue и Angular.

Если вам нравится читать подобные истории и вы хотите поддержать меня, подумайте о том, чтобы подписаться на членство в Medium. Это будет стоить вам всего 5 долларов в месяц — это даст вам доступ ко всем историям на Medium! Если вы собираетесь использовать эту ссылку, я заработаю небольшую часть этого, кроме того, если вы хотите оставаться в курсе, когда я публикую новую историю, вы можете подписаться на мою бесплатную информационный бюллетень здесь!

Дополнительные материалы на plainenglish.io