Я создал приложение на 10 разных JavaScript фреймворках. Какой лучше?

Подпишись на мой телеграм. Там же и исходники на GitHub: t.me/js_by_vladilen/594
Узнай как стать Middle Frontend в бесплатном марафоне: bit.ly/404UYEV
10 разных JavaScript фреймворков
Ходит мнение, что каждый день во фронте появляется новый JS фреймворк и от части это правда. Я же собрал 9 самых актуальных инструментов в 2023 и сделал обзор на каждый, объяснив их основы.
В видео я написал одно и тоже приложение 10 разными способами и в меню этого ролика:
- React
- Vue
- Angular
- Svelte
- Solid
- Alpine
- Stencil
- Qwik (очень необычный фрейм)
- Lit
Кайфанул от изучения инструментов и практики кодинга. Вам - обзор на актуальные технологии во фронте
Inspired by:
• I built the same app 1...
Таймкоды:
00:00 - О чем видео?
01:06 - 1. JavaScript
03:51 - 2. React
07:14 - 3. Vue JS
10:08 - 4. Angular
15:20 - 5. Svelte
17:50 - 6. SolidJS
21:04 - 7. AlpineJS
23:36 - 8. Stencil JS
27:22 - 9. Qwik JS
32:28 - 10. LitJS

[@VladilenMinin]

Ходит мнение, что каждый день во фронте появляется новый JS фреймворк и от части это правда. Я же собрал 9 самых актуальных инструментов в 2023 и сделал этот обзор, объяснив их основы. Заодно кайфанул от изучение новых и от актуализации кодерских умений. Лайк если зашло видео 🤟 Еще подпишитесь на мой ТГ, а то вдруг с KZbin снесут канал 😅. Там же найдете исходники на GitHub t.me/js_by_vladilen/594 P.S. Если хочешь узнать как стать крутым мидлом, то я записал марафон, где за 2 дня можно получить овердофига полезного контента абсолютно бесплатно, которого так структурированно нет в открытом доступе: bit.ly/404UYEV

[@nikitaermolenko7813]

@Владилен Минин, привет, ты писал CRM на вью 2. Даа, вспомнил я старые вещи, что поделать) Сложно это написать на вью 3? То есть, часто придется отклоняться от твоих действий в уроках, много отличий?

[@VladilenMinin]

@@nikitaermolenko7813 Процентов на 30 отличается

[@sashaanohin90]

Привет а можно добавить спидтест для наглядности работы фреймворков! Было бы очень интересно смотреть батл между ними, возможно это больше раскрыло особенности каждого из них.

[@jameskim4274]

Как приятно было смотреть на твой чистый js код. Обычно когда сравнивают фреймворки, в подобных видео как обычный js пишут полную лапшу, чтобы сказать: смотрите какой он страшный. А у тебя все по полочкам, прям кайфанул

[@skryonline5825]

Отличное сравнение. Можно было еще input и список в отдельные компоненты вывести и в этих фрэймворков покозать как у них обстоят дела с стэйтом между компонентами. И потом сравнить сколько всего строк кода, вес и перформанс. Вот тогда можно будет увидеть существенную разницу. А для себя уже давно сделал выбор - в пользу Svelte

[@pavelhamanovich4951]

Ещё туда добавить роутинг с параметрами, разной лейзи фигни, работу с формами и валидацией, ну и до кучи какой-нибудь темплейтной магии, вроде темплейт аутлетов и т.д

[@zloyded1337]

Сделал выбор в пользу статического типизированого языка с минимальным количеством фреймворков )

[@MrRiseful]

Владилен очень хорошо знает Angular, и то как он написал столько простое приложение, задействовав все возможные сущности меня лично порадовало. Плюс хочется также подчеркнуть, что если такой подход кажется сложным и вычурным - стоит ещё раз напомнить, что Angular предоставляет архитектуру и как сказал автор, такое делегирование решает самую главную проблему - масштабируемость приложения. Помимо этого сама абстаркция Angular позволяет писать, по моему мнению, очень чистый, читабельный код, чего мне не хватает ни в каком другом фреймворке. P.S. Влад, поставь пожалуйста расширение для подсветски синтаксиса Angular (vscode - Angular Language Service), если в будущем будут видео по Angular. Спасибо за видео!

[@ojgenn]

на этот счет, конечно, есть разные мнения

[@AndrejsKrilovs]

Тоже понравилась реализация на Angular. 👍 Самый понятный фреймворк для тех, кто пришёл с backend разработки.

[@user-bc9tu6om8b]

Не решает)

[@test-user-123]

А что было сложного показано?

[@AndrejsKrilovs]

Не было ничего сложного. Даже зашла идея с написанием собственного pipe. Взял себе на вооружение эту фишку

[@koreikin]

Вот это я понимаю, крутой подход демонстрации, серия бы подобных видео по разным направлениям. Для всех новичков наглядно, что и как. Полезность этого видео на долгие годы. Спасибо за задумку и работу.

[@dimusss]

Спасибо большое за отличный ролик! Отдельное спасибо, что начали с ванильного js, чтобы было очевидно, какое количество кода добавляют абстракции фреймворков поверх основной логики. Из нового для себя обратил внимание на qwik - интересная концепция подгружать даже всякие мелочи в процессе работы. И еще хотел поблагодарить за то, что в качестве примера взяли более приближенный к реальности кейс (загрузка данных с сервера, фильтрация, работа с текстовым импутом), а не надоевший, мне кажется, уже всем TODO лист :)

[@denis_minimal]

Кайфанул. Было очень интересно. Самому взять и потыкать эти фреймворки/библиотеки не хватает времени. Спасибо Владилен. Видео пушка)

[@ruslanundefined2242]

Пару дней назад видел в твоем github новый репозиторий и ждал выхода видео) спасибо за полезную информацию)

[@braind_bible4845]

Владилен, подскажи пожалуйста, в примере Vue ты используешь вычисляемое свойство, а вот в React ты используешь useRef с дополнительным useEffect. Получается у тебя: 2 списка данных Дополнительный useEffect Можно ведь было бы использовать useMemo как вычисляемое свойство, завязанное на одном списке и input и рендерить уже его. Почему был выбран вариант именно с useRef и useEffect? Так лучше по производительности или просто чтоб показать как это делается по-другому? 🙂

[@levdau]

Наконец-то появилось что-то про AlpineJS! Спасибо

[@vanmihaylovich]

Владлен, однозначно тема очень важная. Благодарю за множественное сравнение решений. С вниманием изучу каждое.

[@max_mgtow]

Привет Владилен 🤝 Буквально позавчера лазил по твоему гитхабу и увидел недавний код)) Ждал этого видео) Спасибо 🔥👍

[@NikolayErmolenko]

Очень интересно. Хотелось бы узнать про динамический роутинг. В случае, когда структура приложения на момент загрузки ещё не известна. Как это можно сделать на разных фреймворках?

[@denroot7785]

Крутое сравнение, хотелось бы увидеть ещё сравнение скорости работы в каждом из фреймворков)

[@user-yg8hn4it3c]

Очень крутой и наглядный споосб показать разные фреймворки. Вот бы ещё такой же по бэку:)

[@zatochiSiberian]

Спасибо. Жаль только нет анализа проектов, по размеру и скорости. Было бы интересно.

[@VladilenMinin]

Потенциальная тема на новый ролик)

[@tribesman82]

Судя по всему свелт будет одним из самых быстрых,на выходе чистый js

[@max_mgtow]

​@@tribesman82 но его пока мало где применяют

[@tribesman82]

@@max_mgtow согласен, изучаю его на будущее. Сразу в составе svelte kit

[@-rsrg]

@@tribesman82 скорее всего solid. Есть сравнение оверхеда (по отношению к Vanilla) выходного бандла после компиляции для различных фреймворков на главной странице solidjs.

[@arsenyhlebuschkin3681]

Отличное сравнение! Хорошо бы найти тоже самое по фреймовркам по perl!

[@magicckiller9643]

Прикольный такой челлендж !! 😄 Побольше подобных видео, порадовало Владилен, Вы прекрасно постарались 👍

[@backender-workdays]

Спасибо, отличное видео В своих видео начал с самых азов, а дальше буду давать более глубокие знания, только по бэк-энду. Безумно приятно и интересно смотреть, черпаю опыт и в фронт-энд, и в подаче материла :)

[@NoCommentRUS]

Лайк. Хотел бы увидеть сравнения и тесты

[@orloffdev]

Приятно смотреть на чистый js, во всех смыслах )

[@bingobijo3698]

Спасибо большое вам Владилен если бы обновили курс Vue JS на Udemy то было бы вообще здорово

[@mrnikcet3419]

Владилен, покажи где-нибудь (постом в телеге, например) какие расширения для VS Code'а ты используешь, пожалуйста. Интересно посмотреть. Спасибо)

[@VladilenMinin]

Есть шорт на канале с этим списком

[@anzay911]

Хотелось бы посмотреть на кое-что за пределами JS/TS - использование WebAssembly. Может, даже с бенчмарками.

[@user-rm2im6wx2b]

Спасибо за обзор, хотелось бы поподробнее о Svelte.

[@tyrexsiv8157]

Спасибо за интересный обзор. По данному примеру приложения- чистый JS рулит :), все проще и понятнее. Я понимаю, что 100500 фреймворков придумали не просто так. Мне, как новичку, хотелось бы увидеть какие проблемы решает каждый конкретный фреймворк, какие у него киллер-фичи. Может быть на более сложном примере и поменьше фреймворков за раз...

[@Mehabeha]

Привет, предлагаю снять продолжение и реализовать доп фишки поиска, которые помогут раскрыть различия, когда задача доводится до реального продакшена и как код приложений плсле этого усложнится. 1. Функция возврата поиска отрабатывает секунду. 2. Во время поиска отображать loader. 3. Добавить debounce в пол секунды, т.к нет смысла грузить сервер пока юзер вводит текст. 4. Если получается так, что дебонс не поможет и сервер будет выполнять 2 запроса параллельно, то выполнить самый последний, а более старые игнорировать (как switchMap в rxjs).

[@witseid]

Что за шрифт вы используете?

[@romashka7519]

Интересное видео, спасибо Владилен!

[@makkapoya]

37 минутное видео: выходит каждый второй коммент под ним через 2 минуты: отличное видео, спасибо ))

[@VladilenMinin]

@@makkapoya Во-первых это единственный такой коммент. Во-вторых, предположу, что человек оценил по названию ролика - что тема ему интересна. Он ничего не сказал, что посмотрел и все круто

[@edmondhamilton995]

Самого главного в видео нет - а именно выводов автора относительно фреймворков, их плюсов и минусов в сравнении друг с другом. Желательно было бы добавить ещё краткую информацию о распространенности фреймворков и их доли на софтверном рынке. В общем, есть куда стремиться )))

[@-dubok-]

Вывод прост: реакт - говно 🤣

[@alexlightweight]

Владилен говорил в других видео что ему нравится Svelte, но он правильно делает что не навязывает свою точку зрения, каждый сам решает какой ему больше подходит под свои требования.

[@edmondhamilton995]

@@alexlightweight Да я не про навязывание, а про сравнительный анализ. Чтобы понятно было, какой фреймворк в чём силен, а в чём слаб.

[@alexlightweight]

@@edmondhamilton995 а, ну это да, тут согласен ! Тоже было бы интересно посмотреть на такое сравнение. 👍

[@jetsker6388]

@@edmondhamilton995это надо глубже копать, но аудитории и так зайдет

[@vladimirlevin6799]

Спасибо. интересно!

[@aleksey6340]

Для Angular в pipe в условии прописано users.length === 0. Там скорее всего должно быть value.length

[@VladilenMinin]

На самом деле лишняя проверка вообще. Я потом уже заметил

[@user-ni9tf5yr6m]

как раз недавно смотрел огромную таблицу сравнения разн. фреймворков (по скорости) и в ней огромное значение имели ключи. хз, что это, но, например, в angular на некоторых тестах они сильно замедляют его работу

[@viktordev1218]

Познавательный ролик👍 У новичков, по-любому, возникнет вопрос: "нафига все эти фреймворки, если на vanila js сделать проще всего")

[@5cent]

+

[@Alexgru18]

+

[@ojgenn]

тудуху да. а потом придется изобретать велосипед

[@27cobalt60]

интересно было бы замерить скорость работы каждого решения

[@user-cb6qu4qo1p]

Смысл на таких мелких приложениях замерять скорость? Разница будет в долях миллисекунд, которая глазу даже видна

[@27cobalt60]

@@user-cb6qu4qo1p Понятное дело, что не совсем корректно так сравнивать скорость, но просто интереса ради посмотреть на эти милисекунды

[@daniilrozyev]

Владилен планируешь когда-нибудь сделать видео о парсинге на чистом JS?

[@user-vj7ec1ms4d]

Привет! Круто делаешь, много черпал из твоих видосов) теперь пришел с критикой) По поводу реализации на реакте. А что если не нужно следить в useEffect'e то, что ты ввел в инпуте. Зачем менять users? напиши лучше const filteredUsers = useMemo(()=>{},[input]). И рендери отфильтрованные. Нет?

[@user-wm2pf4fo3f]

Не понял из твоего объяснения, в чём именно проблема. На всякий случай: ты точно понял, что users - это как раз уже отфильтрованные юзеры? Кстати, соглашусь, что именование тут не самое идеальное)

[@user-vj7ec1ms4d]

@@user-wm2pf4fo3f в подходе проблема , я считаю ) в users не должны быть отфильтрованные юзеры Дальше должен лежать стейт с условиями фильтрации И на основе юзеров и данных для фильтрации должно высчитывается новое значение

[@PavelKotliarov]

Блин очень интересно. И очень плохо понятно. Требую ролики, в которых можно будет все эти фреймворки поделить на пару тройку категорий и с примерами(если возможно) рассказать о их отличиях, в плане разработки, сложности, доступности инфраструктуры вокруг них. И условно. В свелт нет такого количества юай библиотек как на реакте, но на нем она тебе и не так нужны, потому что все очень легко пишется и наоборот. В общем тема интересная. Контент годный, дайте еще!)))

[@user-yf3ec9ml1j]

В SolidJS для запросов на сервер лучше использовать Resource

[@nth-prog8562]

Мне как человека, который не может работать без хорошей архитектуры - angular просто must have. Спасибо владилен за обзор

[@user-pe4wq2dv7q]

Интересный контент. Спасибо

[@EnergoIT]

Мне понравился AlpineJS, можно больше видео на него Владилен?

[@-dubok-]

Да, специально для вас сейчас начнёт фигачить!

[@tackesi]

vue, svelte прикольные, а вообще чистый js то крут!

[@AndreyAdadurov]

Qwik впервые узнал о существовании такого фреймворка 😮 Идея в нем заложена крутая, особенно актуально если пользователь с древним смартфоном. И само видео крутое, приложение пусть хоть и простенькое, но на 10 разных стеках, такого в русскоязычном Ютубе мне пока не попадалось.

[@GregKurman]

Чистый дж прекрасен.. сам использую вью.. но рад был бы работать на чистом дж )

[@lexus884]

так какой лучше? будет ли сравнительное видео?

[@__kawaii]

Лучше всего солид, но не пали фишку быдлу

[@Vebust]

Всегда использую next для своих проектов. Но как я понял, ты даёшь понять что next максимально не популярен в проде?

[@moscowtv5767]

А зачем во вьюшном примере onMounted?

[@elliemeyer9164]

Сказать честно, Я ожидал ещё какой-то ытог (Conclusion) к таковым сравнениям, что где лучше, или более приглянулось .. А так, да, весьма объёмно и познавательно, gracias ))

[@larisaplatova1644]

Спасибо за это видео

[@MrShevrin]

мне как ангулярщику, конечно понятнее всего ангуляр)), мне кажется автор слишком усложнил объяснение, что там и как устроено - возможно, сложится впечатление что куча всего там нужно прописать руками, но большинство из этого генерируется фреймворком автоматически при создании нового приложения (структура, корневые модули и компоненты, методы жизненного цикла, импорты, метод рендера в корне index.html)...остальное при создании сущностей за кодера делает cli, например. Но за трикс с пайпом однозначно лайк!

[@AndriiChykulai]

А будет еще отдельный курс по React?

[@VladilenMinin]

Есть актуальный с TS в подсказках

[@kotik2400]

сделай след. видео - Обзор нововведений в TypeScript 5.0

[@VladilenMinin]

Непохое видео снял Антон из PurpleSchool

[@andrew.kovalenko]

Соглашусь, Alpine действительно выглядит идеальный для подобного рода простых приложений Stencil стал интересным открытием между React и Angular ну и понравился Qwik своей идеологией и реализацией

[@olegkat4841]

С точки зрения бизнеса какие качественно новые возможности мы можем получить от новых фреймворков или они все делают одно и тоже только разными способами?

[@VladilenMinin]

Плюс минус одно и тоже делают. Есть небольшие различия под разные специфики проектов

[@vuu3art]

опаздал на год, но тоже неплохо

[@pavelhamanovich4951]

Ангуляр таким тяжеловесным выглядит просто по тем причинам, потому что автор решил использовать весь его функционал. Если использовать стенделон компонент, темплейт описать вместе с компонентом в одном файле, не использовать пайпы и сервис, то там кода с гулькин нос останется) Кстати, в Ангуляре нет сигналов еще, которые есть во всех других фреймворках

[@VladilenMinin]

Я думал зафигачать нативный фетч в компонент, но потом подумал, что есть клиент, его по-хорошему в сервис надо засунуть и... получил что получил. Зато по феншую ;D

[@pavelhamanovich4951]

@@VladilenMinin Что большинство новичков и пугает, мол mental model слишком сложная. Зато придя в кровавый энтерпрайз на ангуляре не надо тратить много времени на понимание архитектуры - он везде одинаковый)

[@mtvspec]

Сразу начал с Angular 2. React почему-то не зашел, но сейчас думаю освоить и его тоже. Выглядит с одной стороны проще, но с другой стороны будто надо все самому придумывать. В Angular есть много готовых решений, которые можно использовать сразу из коробки, это конечно означает, что надо будет все это сидеть и изучать, но после изучения это здорово облегчает жизнь. С React я так понимаю надо будет придумывать самому как это должно будет работать. Если сравнивать с Angular, то как будет например выглядеть работа с формами в React? Валидация, отображение разных сообщений, связь между разными контролами, и в целом с формой, ее состояние, состояние каждого отдельного контрола, вложенные формы и массивы форм, возможности в части переиспользования синхронных и асинхронных валидаторов. Я понимаю, что в принципе, всë можно сделать и на чистом JS, и на любом из этих фреймворков.

[@rodionme]

В Реакте для работы с формами обычно используют какой-то из множества сторонних плагинов. Как, впрочем, для любого другого относительно сложного обособленного функционала - хранения состояния, асинхронных запросов, работы с формами и т.п.

[@helplrewerse2925]

Ничего придумывать не надо у реакт куча либ выбирай любую и юзай. Хочешь строгости и какой-то архитектуры смотри на next это фреймворк для реакт.

[@Valentin_I]

Мне в Реакте не понравилось то, что html код должен быть где-то в скрипте, который не всегда может быть компонентом. Верстальщикам старой закалки приходится очень тяжело.

[@alexlightweight]

Супер видос ! 👍 Составил свой рейтинг из изложенного: 1. Svelte. 2. Alpine. 3. Qwik. Но писать проекты буду естественно на, мать его, React, потому что промышленный стандарт, мать его ... ))))))))) Надеюсь перечисленные мною фреймворки со временем вытеснят большую тройку игроков.

[@user-uk5tj3qn5q]

Litjs это набор хелперов для создания "web components"?

[@dimondurak]

нет. Lit это либа для создания стандартных веб-компонент, которая добавляет декларативную шаблонизацию, стилизацию с учётом специфики ShadowDOM и реактивные свойства. Признаться честно, объяснение про Lit разочаровало. Получилось крайне поверхностно, к тому же всё свалено в кучу, да ещё и перепутано. Например, connectedCalback() - это не функция, а метод жизненного цикла элемента (из стандарта), а вот метод render() - как раз то, что добавляет базовый класc LitElement (т.е. либа). Кроме того, html это не функция, а тегированная шаблонная строка (и да, я знаю, что фактически это функция, однако для понимания проще воспринимать html`как строку из ES5` )

[@lessons3141]

Vue конечно же топчик! Angular как будто китайский язык, что-то понять там ну очень сложно было, и расхотелось в принципе лезть туда. Приятно удивил Alpine, не знал про него ничего , но этот подход показался простым и логичным! P.S. Возможно будет туториал по Vue StoreFront и Vue script setup + nuxt 3

[@johnnybanana946]

Когда открыл для себя канал Fireship 😁 Без обид надеюсь. Содержание и подача сильно отличаются, но заметно, что идеи подглядел (прошлые видео про технологии за 1 минуту и это). P.S. Закрыл форточку и не душню больше, увидел в описании "inspired by" и ссылку на оригинальный ролик

[@JesseJames-mh5kb]

Властилен на высоте!

[@Dimonina]

интересно было бы посмотреть как фильтрацию на сервере сделать, чтобы при вводе текста уходил запрос и результат перерисовывался. тут интересно посмотреть как каждый фреймворк с рейс-коднишенами работает. Но даже в текущем примере. Если запрос будет очень долгий, а пользак начнет вводить текст до загрузки, то фильтрация по загрузке во многих фреймворках не отработает, а вот в примере с ангулар и solid все будет ок.

[@ZaurmagRu]

Если фильтровать данные на сервере то событие input нужно пропустить через debounce. Небольшое дополнение...

[@Dimonina]

@@ZaurmagRu denounce не отменит запрос при вводе след символа, а интересно как раз посмотреть как в разных фоеймворках этот race condition отруливается

[@ZaurmagRu]

@@Dimonina Вообще пока набираете текст быстро запрос не идет, как только останавливаетесь дольше времени задержки - улетает запрос всего текста. Так работает debounce...

[@Dimonina]

@@ZaurmagRu все верно. Но возможна ситуация, когда предыдущий запрос ещё выполняется, и приходит новый символ даже после дебаунса. В любом случае нужно отменить предыдущий запрос. Дебаунс тут не поможет.

[@Shadzen]

По поводу Qwik - а ничего что такое количество запросов на сервер это по сути как DDOS атака?

[@VladilenMinin]

Ну если это какой то NGINX то в целом и общем все равно. Но да, мне тоже интересно на сколько живая концепция в проде

[@Valentin_I]

@@VladilenMinin дохрена промисов жрут память

[@assalamualeykum1028]

Выбор пал на React, Vue и Svelte. Теперь нужно выбрать один из них

[@arealxd]

Vue советую

[@-dubok-]

По скорости и простоте Svelte лучше всего. Vue и React уже устарели со своим Virtual Dom и тяжёлыми рантаймами.

[@user-xk6zl4vo7x]

Почему vs code а не webstorm как обычно?

[@strela3]

Классное видео, жалко что на неделю раньше не вышло ) как раз на экзамене нужно было писать фильтр строк

[@user-xg3er7dw8y]

10 слишком красивая цифра... 3 фреймворка пришлось самому придумать 😆😆😆

[@DarkzarichV2]

Вдохновился видео от Fireship? :D Чуть-чуть разный набор фреймворков, но всё остальное очень похоже)

[@VladilenMinin]

Да, я даже добавил это в описании)

[@DarkzarichV2]

@@VladilenMinin А, и правда, ну, это мы уважаем 💪

[@user-wv5wj7sz2e]

Самый понятный вариант это на чистом js. Да и отлажиаться удобнее... По крайней мере это мой выбор.

[@madarasan0]

Ребят, почему так сложно то, только закончил с основами JS и почти ничего не понятно, даже в файле про фактический JS и от этого большое уныние наступает, вроде человек все детально объясняет и толково, но используются какие то слишком продвинутые технологии

[@abboss.b9935]

Angular 🔥

[@vovergg]

Больше всего понравился SolidJS.)

[@I248]

когда хотябы 2к картинка будет ?

[@reinmaan]

Мне кажется или на чистом получился самый лаконичный код?

[@marcitrixie]

не понятно, что вы думаете по этим фреймворкам? какой вам больше понравился? выделили хотябы топ 3

[@VladilenMinin]

Мой личный топ: Angular, Svelte, Vue

[@Xron-TV]

А звук где

[@nikitos2442]

Владилен, очень важный вопрос, сколько ты уже находишься в фронтенд разработке и как быстро ты выучивал новый фреймворк? Ты работал в команиях или большую часть на себя?

[@VladilenMinin]

больше 10 лет в разработке новый фрейм даже не надо учить - просто читаю доку и пишу 7 лет в компаниях, последние 3 года на себя

[@nikitos2442]

@@VladilenMinin Я неспроста спрашиваю. Видел вакансии, которые хотят все фреймвоки и опыта от 1-3 года. Это типа джун-универсалный солдат с соответствующей зарплатой.

[@VladilenMinin]

@@nikitos2442 Да это бред. Научись на них писать и количество лет/месяцев не важно

[@bebeto123g]

​@@VladilenMinin, оно и видно как неважно, в Реакте делать в useEffect реакцию на изменение состояния, в котором меняешь другое состояние, явный признак "профи", хотя я, к слову, джун в Реакте :Ъ Уж простите за сарказм, но опыт везде важен, как и в чистом JS понимание азов, работа с объектами как ссылками, иммутабельность. В реакте так же важно понимать для чего нужна мемоизация и когда ее стоит использовать, а когда нет, почему в зависимости useEffect лучше не передавать объекты, и самое по моему мнению важное, глядя на г***окод людей, писавших приложения в компании до меня, это для чего нужна композиция при написании структуры компонента, особенно если речь идет о модулях.

[@pavelhamanovich4951]

@@nikitos2442 Зачем учить фреймворки, если надо учить и понимать концепции. Как ты заметил, 6 из 10 фреймворков в видео - одно и тоже, только названия функций разные. Если в двух словах, то концепции можно сказать следующие - Темплейта и ее язык описания (JSX, полунативный HTML, другое) - Байндинг переменных к темплейте - Обработчики событий - Жизненный цикл приложения и темплейт - Реактивность или как фреймворк понимает что данные обновились Все остальное это фичи этих фреймворков, что их и отличает

[@user-xk6zl4vo7x]

Когда знаком с angular и vue но не с самым популярным Реактом

[@mifaress]

Не душнила, действительно интересно: Зачем тут 5:50, внутри useEffect используешь дополнительную функцию, если логику можно было просто прописать внутри useEffect?

[@batm1x]

Ну типа изолировать эту логику в async обёртку

[@shakapaker]

А как еще писать async await в useEffect? Callback в useEffect не может быть асинхронным

[@mifaress]

@@shakapaker в таком случае не лучше ли просто через then написать?

[@mifaress]

@@batm1x она и так изолирована (в самом useEffect)

[@shakapaker]

​@@mifaress а чем хуже написать в отдельной функции?

[@mrerikBRO]

после ul.innerHTML = html можно выключать...

[@Valentin_I]

Думаешь в name предадут ?

[@funsionxd4589]

Точно не видел у Fireship. А вообще в заимствовании не вижу ничего плохого, особенно в классных адаптациях, таких как этот видик)

[@VladilenMinin]

Фаершипа уважаю, вдохновлялся названием его ролика. Ссылочку оставил в описании

[@narek1771]

Lit как по мне слаб так как autocomplete нету из за строчного синтаксиса, долго печатать, а время то дорогое

[@denixsg]

Владилен забыл сказать что сделал это с помощью ChatGPT )))

[@fitter2boss72]

Я ожидал сравнение перфоманца, размеры файлов и т.д.

[@ode2877]

даешь прод!

[@ojgenn]

смотрел исполнение на ангуляре. плакал

[@sameng4912]

Почему плакал, в каком смысле?) Я новичок . Ещё ничего не понимаю

[@zhoramc]

ну как уже писали, на ангуляре можно было это сделать куда проще

[@zhoramc]

@@sameng4912 думаю классическое "ангуляр говно, много, сложно и не нужно, ооп отстой"

[@ojgenn]

@@sameng4912 oninit там не нужен. и тем более переприсвоение значения в нем. это из того, отчего в принципе рыдание начинается

[@ojgenn]

@@zhoramc не угадал, конечно

[@maximkiselev1554]

многое из перечисленного совсем не фреймворки а всего лишь библиотеки взять тот же самый react он особо то не диктует вам о том как устроить архитектуру, а также нету каких либо строгих правил и ограничений, вы сами вольны выдумать что вам угодно. Фреймворк это как правило строгие правила и соглашения по которым готовится ваше приложение

[@user-io6jp1up9c]

Тимлид ушел в отпуск на 2 недели Также я когда он вышел: 00:00

[@sa1ntman331]

Прошу прощение, комментарий не по теме, на превью, когда видео не запустил, перепутал Владилена Минина с автоблогером Стасом Асафьевым. Все успехов в изучении!)

[@theoty-js-react]

1:07 Vanilla js framework 3:50 React js

[@arturmollaiev5015]

1. ALL_USERS не константа, чтоб в таком формате его прописывать 2. ALL_USERS undefined в начале, а должен быть инициализирован с пустым массивом так как апи может кинуть ошибку (которую ты не ловишь, кстати) и input change будет вызывать filter у undefined. 3. Почему юзер обозначен как “i “при переборе через filter? i - index, номер итерации. Bad naming 4. Если у тебя есть метод start, который все начинает, так запихни подписку на инпут туда же, а то нелогично Это по JavaScript примеру. Дальше не смотрел

[@unet900]

На 10 фреймворках ах ты негодяй )

[@VladilenMinin]

ахах ну почему негодяй сразу ;D

[@bloodjopa]

Где jQuery и motools?

[@tribesman82]

А где заключение и свое имхо?

[@VladilenMinin]

Мое имхо - нужно выбирать фрейм под задачу, это всего лишь инструмент Мой личный топ: ангуляр, свелт, вью

[@Oleksandr_Yukhno]

Я в этом иало разбираюсь, но со стороны кажеться что фрейворки плодят много ненужных сущностей. Намного проще HTML

[@user-jx9rw3ip6w]

в реакте второй useEffect нафиг не нужен.

[@parnasmi]

Было очень интересно. Не всегда находиш для себя время чтобы весь этот зоопарк пощупат..

[@kirillpodolinniy309]

Ответ к вопросу на видео: Лучше тот, на котором есть вакансии.