ПРОГРАММИРОВАНИЕ | ВЕБ-РАЗРАБОТКА
React, Vue.js и Angular требуют слишком много работы — вместо этого используйте Svelte
Использование Svelte повышает вашу продуктивность, потому что это так просто
Я использовал React в течение многих лет, и я знаю, как он работает, и я знаю, что он работает очень хорошо, но что, если я скажу вам, что Svelte работает так же хорошо или даже лучше с меньшим количеством кода?
Давайте взглянем на этот относительно новый фреймворк для веб-разработки.
Требования
Прежде всего, что вам нужно, чтобы начать работу со Svelte?
- Редактор кода (I.E., VS Code)
- Node.js установлен (с NPM)
Это в основном все, и вы готовы идти.
Начиная
Вы можете использовать команду 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