Пишем ToDo на Svelte.js: практический урок / Исчезающие фреймворки / Зачем нужен Svelte

🔥 Курсы для фронтенд-разработчиков с нуля: https://bit.ly/3l5oKqZ
⚡ Timeweb Cloud предоставляет IT-решения в облаке: виртуальные и выделенные серверы, облачные базы данных, VDI и т.д. Мы собираем и настраиваем сложные инфраструктурные IT-системы для разработчиков и бизнеса. Больше технологических решений: https://clck.ru/Ym52a

🎁 БОНУС: 30 дней теста на виртуальный хостинг от Timeweb. Как получить:
– Зайти на сайт https://clck.ru/Ykz9Z
– Написать в поддержку любым удобным способом кодовое слово “svelte.js”
Бонус можно активировать до 31.12.21

Что такое исчезающие фреймворки? Как применяется Svelte.js и чем отличается от React.js и Vue.js? Михаил Шпаков, тимлид разработки в Timeweb Cloud, поможет ответить на эти вопросы и проведёт практический урок, где мы реализуем todo-лист с помощью npx и компонентов Svelte.

– Демо: http://ck66484.tmweb.ru/
– Репозиторий: https://github.com/timeweb/svelte-hexlet
– State of JS 2020: Фронтенд-фреймворки: https://2020.stateofjs.com/ru-RU/technologies/front-end-frameworks/

Таймкоды:
- 00:00:00 - интро и о спикере
- 00:01:18 - план вебинара
- 00:02:09 - что такое исчезающие фреймворки
- 00:04:39 - почему мы вообще говорим о SvelteJS и почему он актуален в 2021 и 2022
- 00:07:34 - отличия Svelte.js от React и Vue.js
- 00:09:13 - для каких приложений подходит Svelte
- 00:11:39 - что будем писать в рамках урока
- 00:12:15 - с чего начинается разработка на Svelte: установка npx и утилиты degit
- 00:13:29 - структура, директории, файлы и TypeScript по умолчанию
- 00:17:34 - запускаем приложение (npm run dev) и начинаем кастомизацию (script, main, style)
- 00:19:16 - интерполяция
- 00:21:53 - создаём новый компонент для создания todo листа
- 00:24:00 - html-каркас (базовая вёрстка)
- 00:28:12 - биндим переменные
- 00:31:50 - добавляем кнопку и заводим массив для хранения
- 00:35:20 - рендерим массив, each, вёрстка строк
- 00:45:19 - обработчик кнопок, on:keydown
- 00:49:19 - вёрстка item и кнопки Удалить
- 00:53:13 - программируем кнопку Удалить: обработка эвентов и очищение массива
- 01:00:35 - вычисляемые свойства
- 01:02:11 - обсуждаем результаты: что умеет наш todo-лист
- 01:02:46 - какие есть варианты вынесения слоя логики из Svelte
- 01:04:50 - как Svelte менеджерит реактивность
- 01:05:59 - можно ли применить подход React или Redux, нюансы Svelte и сравнение с Vue.js
- 01:12:25 - размещение приложения на хостинге + БОНУС от Timeweb

#hexlet #js #фронтенд

Видео Пишем ToDo на Svelte.js: практический урок / Исчезающие фреймворки / Зачем нужен Svelte канала Хекслет