Ходит мнение, что каждый день во фронте появляется новый JS фреймворк и от части это правда. Я же собрал 9 самых актуальных инструментов в 2023 и сделал этот обзор, объяснив их основы. Заодно кайфанул от изучение новых и от актуализации кодерских умений. Лайк если зашло видео 🤟 Еще подпишитесь на мой ТГ, а то вдруг с CZcams снесут канал 😅. Там же найдете исходники на GitHub t.me/js_by_vladilen/594 P.S. Если хочешь узнать как стать крутым мидлом, то я записал марафон, где за 2 дня можно получить овердофига полезного контента абсолютно бесплатно, которого так структурированно нет в открытом доступе: bit.ly/404UYEV
@Владилен Минин, привет, ты писал CRM на вью 2. Даа, вспомнил я старые вещи, что поделать) Сложно это написать на вью 3? То есть, часто придется отклоняться от твоих действий в уроках, много отличий?
Привет а можно добавить спидтест для наглядности работы фреймворков! Было бы очень интересно смотреть батл между ними, возможно это больше раскрыло особенности каждого из них.
Как приятно было смотреть на твой чистый js код. Обычно когда сравнивают фреймворки, в подобных видео как обычный js пишут полную лапшу, чтобы сказать: смотрите какой он страшный. А у тебя все по полочкам, прям кайфанул
Спасибо большое за отличный ролик! Отдельное спасибо, что начали с ванильного js, чтобы было очевидно, какое количество кода добавляют абстракции фреймворков поверх основной логики. Из нового для себя обратил внимание на qwik - интересная концепция подгружать даже всякие мелочи в процессе работы. И еще хотел поблагодарить за то, что в качестве примера взяли более приближенный к реальности кейс (загрузка данных с сервера, фильтрация, работа с текстовым импутом), а не надоевший, мне кажется, уже всем TODO лист :)
Владилен очень хорошо знает Angular, и то как он написал столько простое приложение, задействовав все возможные сущности меня лично порадовало. Плюс хочется также подчеркнуть, что если такой подход кажется сложным и вычурным - стоит ещё раз напомнить, что Angular предоставляет архитектуру и как сказал автор, такое делегирование решает самую главную проблему - масштабируемость приложения. Помимо этого сама абстаркция Angular позволяет писать, по моему мнению, очень чистый, читабельный код, чего мне не хватает ни в каком другом фреймворке. P.S. Влад, поставь пожалуйста расширение для подсветски синтаксиса Angular (vscode - Angular Language Service), если в будущем будут видео по Angular. Спасибо за видео!
Вот это я понимаю, крутой подход демонстрации, серия бы подобных видео по разным направлениям. Для всех новичков наглядно, что и как. Полезность этого видео на долгие годы. Спасибо за задумку и работу.
Отличное сравнение. Можно было еще input и список в отдельные компоненты вывести и в этих фрэймворков покозать как у них обстоят дела с стэйтом между компонентами. И потом сравнить сколько всего строк кода, вес и перформанс. Вот тогда можно будет увидеть существенную разницу. А для себя уже давно сделал выбор - в пользу Svelte
Ещё туда добавить роутинг с параметрами, разной лейзи фигни, работу с формами и валидацией, ну и до кучи какой-нибудь темплейтной магии, вроде темплейт аутлетов и т.д
Спасибо, отличное видео В своих видео начал с самых азов, а дальше буду давать более глубокие знания, только по бэк-энду. Безумно приятно и интересно смотреть, черпаю опыт и в фронт-энд, и в подаче материла :)
@@tribesman82 скорее всего solid. Есть сравнение оверхеда (по отношению к Vanilla) выходного бандла после компиляции для различных фреймворков на главной странице solidjs.
@@makkapoya Во-первых это единственный такой коммент. Во-вторых, предположу, что человек оценил по названию ролика - что тема ему интересна. Он ничего не сказал, что посмотрел и все круто
Очень интересно. Хотелось бы узнать про динамический роутинг. В случае, когда структура приложения на момент загрузки ещё не известна. Как это можно сделать на разных фреймворках?
Владилен, подскажи пожалуйста, в примере Vue ты используешь вычисляемое свойство, а вот в React ты используешь useRef с дополнительным useEffect. Получается у тебя: 2 списка данных Дополнительный useEffect Можно ведь было бы использовать useMemo как вычисляемое свойство, завязанное на одном списке и input и рендерить уже его. Почему был выбран вариант именно с useRef и useEffect? Так лучше по производительности или просто чтоб показать как это делается по-другому? 🙂
Самого главного в видео нет - а именно выводов автора относительно фреймворков, их плюсов и минусов в сравнении друг с другом. Желательно было бы добавить ещё краткую информацию о распространенности фреймворков и их доли на софтверном рынке. В общем, есть куда стремиться )))
Спасибо за интересный обзор. По данному примеру приложения- чистый JS рулит :), все проще и понятнее. Я понимаю, что 100500 фреймворков придумали не просто так. Мне, как новичку, хотелось бы увидеть какие проблемы решает каждый конкретный фреймворк, какие у него киллер-фичи. Может быть на более сложном примере и поменьше фреймворков за раз...
Привет, предлагаю снять продолжение и реализовать доп фишки поиска, которые помогут раскрыть различия, когда задача доводится до реального продакшена и как код приложений плсле этого усложнится. 1. Функция возврата поиска отрабатывает секунду. 2. Во время поиска отображать loader. 3. Добавить debounce в пол секунды, т.к нет смысла грузить сервер пока юзер вводит текст. 4. Если получается так, что дебонс не поможет и сервер будет выполнять 2 запроса параллельно, то выполнить самый последний, а более старые игнорировать (как switchMap в rxjs).
как раз недавно смотрел огромную таблицу сравнения разн. фреймворков (по скорости) и в ней огромное значение имели ключи. хз, что это, но, например, в angular на некоторых тестах они сильно замедляют его работу
Qwik впервые узнал о существовании такого фреймворка 😮 Идея в нем заложена крутая, особенно актуально если пользователь с древним смартфоном. И само видео крутое, приложение пусть хоть и простенькое, но на 10 разных стеках, такого в русскоязычном Ютубе мне пока не попадалось.
Блин очень интересно. И очень плохо понятно. Требую ролики, в которых можно будет все эти фреймворки поделить на пару тройку категорий и с примерами(если возможно) рассказать о их отличиях, в плане разработки, сложности, доступности инфраструктуры вокруг них. И условно. В свелт нет такого количества юай библиотек как на реакте, но на нем она тебе и не так нужны, потому что все очень легко пишется и наоборот. В общем тема интересная. Контент годный, дайте еще!)))
Соглашусь, Alpine действительно выглядит идеальный для подобного рода простых приложений Stencil стал интересным открытием между React и Angular ну и понравился Qwik своей идеологией и реализацией
Сказать честно, Я ожидал ещё какой-то ытог (Conclusion) к таковым сравнениям, что где лучше, или более приглянулось .. А так, да, весьма объёмно и познавательно, gracias ))
Vue конечно же топчик! Angular как будто китайский язык, что-то понять там ну очень сложно было, и расхотелось в принципе лезть туда. Приятно удивил Alpine, не знал про него ничего , но этот подход показался простым и логичным! P.S. Возможно будет туториал по Vue StoreFront и Vue script setup + nuxt 3
мне как ангулярщику, конечно понятнее всего ангуляр)), мне кажется автор слишком усложнил объяснение, что там и как устроено - возможно, сложится впечатление что куча всего там нужно прописать руками, но большинство из этого генерируется фреймворком автоматически при создании нового приложения (структура, корневые модули и компоненты, методы жизненного цикла, импорты, метод рендера в корне index.html)...остальное при создании сущностей за кодера делает cli, например. Но за трикс с пайпом однозначно лайк!
Привет! Круто делаешь, много черпал из твоих видосов) теперь пришел с критикой) По поводу реализации на реакте. А что если не нужно следить в useEffect'e то, что ты ввел в инпуте. Зачем менять users? напиши лучше const filteredUsers = useMemo(()=>{},[input]). И рендери отфильтрованные. Нет?
Не понял из твоего объяснения, в чём именно проблема. На всякий случай: ты точно понял, что users - это как раз уже отфильтрованные юзеры? Кстати, соглашусь, что именование тут не самое идеальное)
@@user-wm2pf4fo3f в подходе проблема , я считаю ) в users не должны быть отфильтрованные юзеры Дальше должен лежать стейт с условиями фильтрации И на основе юзеров и данных для фильтрации должно высчитывается новое значение
Сразу начал с Angular 2. React почему-то не зашел, но сейчас думаю освоить и его тоже. Выглядит с одной стороны проще, но с другой стороны будто надо все самому придумывать. В Angular есть много готовых решений, которые можно использовать сразу из коробки, это конечно означает, что надо будет все это сидеть и изучать, но после изучения это здорово облегчает жизнь. С React я так понимаю надо будет придумывать самому как это должно будет работать. Если сравнивать с Angular, то как будет например выглядеть работа с формами в React? Валидация, отображение разных сообщений, связь между разными контролами, и в целом с формой, ее состояние, состояние каждого отдельного контрола, вложенные формы и массивы форм, возможности в части переиспользования синхронных и асинхронных валидаторов. Я понимаю, что в принципе, всë можно сделать и на чистом JS, и на любом из этих фреймворков.
В Реакте для работы с формами обычно используют какой-то из множества сторонних плагинов. Как, впрочем, для любого другого относительно сложного обособленного функционала - хранения состояния, асинхронных запросов, работы с формами и т.п.
Мне в Реакте не понравилось то, что html код должен быть где-то в скрипте, который не всегда может быть компонентом. Верстальщикам старой закалки приходится очень тяжело.
Когда открыл для себя канал Fireship 😁 Без обид надеюсь. Содержание и подача сильно отличаются, но заметно, что идеи подглядел (прошлые видео про технологии за 1 минуту и это). P.S. Закрыл форточку и не душню больше, увидел в описании "inspired by" и ссылку на оригинальный ролик
С точки зрения бизнеса какие качественно новые возможности мы можем получить от новых фреймворков или они все делают одно и тоже только разными способами?
Ангуляр таким тяжеловесным выглядит просто по тем причинам, потому что автор решил использовать весь его функционал. Если использовать стенделон компонент, темплейт описать вместе с компонентом в одном файле, не использовать пайпы и сервис, то там кода с гулькин нос останется) Кстати, в Ангуляре нет сигналов еще, которые есть во всех других фреймворках
Я думал зафигачать нативный фетч в компонент, но потом подумал, что есть клиент, его по-хорошему в сервис надо засунуть и... получил что получил. Зато по феншую ;D
@@VladilenMinin Что большинство новичков и пугает, мол mental model слишком сложная. Зато придя в кровавый энтерпрайз на ангуляре не надо тратить много времени на понимание архитектуры - он везде одинаковый)
интересно было бы посмотреть как фильтрацию на сервере сделать, чтобы при вводе текста уходил запрос и результат перерисовывался. тут интересно посмотреть как каждый фреймворк с рейс-коднишенами работает. Но даже в текущем примере. Если запрос будет очень долгий, а пользак начнет вводить текст до загрузки, то фильтрация по загрузке во многих фреймворках не отработает, а вот в примере с ангулар и solid все будет ок.
@@ZaurmagRu denounce не отменит запрос при вводе след символа, а интересно как раз посмотреть как в разных фоеймворках этот race condition отруливается
@@Dimonina Вообще пока набираете текст быстро запрос не идет, как только останавливаетесь дольше времени задержки - улетает запрос всего текста. Так работает debounce...
@@ZaurmagRu все верно. Но возможна ситуация, когда предыдущий запрос ещё выполняется, и приходит новый символ даже после дебаунса. В любом случае нужно отменить предыдущий запрос. Дебаунс тут не поможет.
нет. Lit это либа для создания стандартных веб-компонент, которая добавляет декларативную шаблонизацию, стилизацию с учётом специфики ShadowDOM и реактивные свойства. Признаться честно, объяснение про Lit разочаровало. Получилось крайне поверхностно, к тому же всё свалено в кучу, да ещё и перепутано. Например, connectedCalback() - это не функция, а метод жизненного цикла элемента (из стандарта), а вот метод render() - как раз то, что добавляет базовый класc LitElement (т.е. либа). Кроме того, html это не функция, а тегированная шаблонная строка (и да, я знаю, что фактически это функция, однако для понимания проще воспринимать html`как строку из ES5` )
Ребят, почему так сложно то, только закончил с основами JS и почти ничего не понятно, даже в файле про фактический JS и от этого большое уныние наступает, вроде человек все детально объясняет и толково, но используются какие то слишком продвинутые технологии
многое из перечисленного совсем не фреймворки а всего лишь библиотеки взять тот же самый react он особо то не диктует вам о том как устроить архитектуру, а также нету каких либо строгих правил и ограничений, вы сами вольны выдумать что вам угодно. Фреймворк это как правило строгие правила и соглашения по которым готовится ваше приложение
Владилен, очень важный вопрос, сколько ты уже находишься в фронтенд разработке и как быстро ты выучивал новый фреймворк? Ты работал в команиях или большую часть на себя?
@@VladilenMinin Я неспроста спрашиваю. Видел вакансии, которые хотят все фреймвоки и опыта от 1-3 года. Это типа джун-универсалный солдат с соответствующей зарплатой.
@@VladilenMinin, оно и видно как неважно, в Реакте делать в useEffect реакцию на изменение состояния, в котором меняешь другое состояние, явный признак "профи", хотя я, к слову, джун в Реакте :Ъ Уж простите за сарказм, но опыт везде важен, как и в чистом JS понимание азов, работа с объектами как ссылками, иммутабельность. В реакте так же важно понимать для чего нужна мемоизация и когда ее стоит использовать, а когда нет, почему в зависимости useEffect лучше не передавать объекты, и самое по моему мнению важное, глядя на г***окод людей, писавших приложения в компании до меня, это для чего нужна композиция при написании структуры компонента, особенно если речь идет о модулях.
@@nikitos2442 Зачем учить фреймворки, если надо учить и понимать концепции. Как ты заметил, 6 из 10 фреймворков в видео - одно и тоже, только названия функций разные. Если в двух словах, то концепции можно сказать следующие - Темплейта и ее язык описания (JSX, полунативный HTML, другое) - Байндинг переменных к темплейте - Обработчики событий - Жизненный цикл приложения и темплейт - Реактивность или как фреймворк понимает что данные обновились Все остальное это фичи этих фреймворков, что их и отличает
1. ALL_USERS не константа, чтоб в таком формате его прописывать 2. ALL_USERS undefined в начале, а должен быть инициализирован с пустым массивом так как апи может кинуть ошибку (которую ты не ловишь, кстати) и input change будет вызывать filter у undefined. 3. Почему юзер обозначен как “i “при переборе через filter? i - index, номер итерации. Bad naming 4. Если у тебя есть метод start, который все начинает, так запихни подписку на инпут туда же, а то нелогично Это по JavaScript примеру. Дальше не смотрел
Ходит мнение, что каждый день во фронте появляется новый JS фреймворк и от части это правда. Я же собрал 9 самых актуальных инструментов в 2023 и сделал этот обзор, объяснив их основы. Заодно кайфанул от изучение новых и от актуализации кодерских умений. Лайк если зашло видео 🤟
Еще подпишитесь на мой ТГ, а то вдруг с CZcams снесут канал 😅. Там же найдете исходники на GitHub
t.me/js_by_vladilen/594
P.S. Если хочешь узнать как стать крутым мидлом, то я записал марафон, где за 2 дня можно получить овердофига полезного контента абсолютно бесплатно, которого так структурированно нет в открытом доступе:
bit.ly/404UYEV
@Владилен Минин, привет, ты писал CRM на вью 2. Даа, вспомнил я старые вещи, что поделать)
Сложно это написать на вью 3? То есть, часто придется отклоняться от твоих действий в уроках, много отличий?
@@nikitaermolenko7813 Процентов на 30 отличается
Привет а можно добавить спидтест для наглядности работы фреймворков! Было бы очень интересно смотреть батл между ними, возможно это больше раскрыло особенности каждого из них.
Как приятно было смотреть на твой чистый js код. Обычно когда сравнивают фреймворки, в подобных видео как обычный js пишут полную лапшу, чтобы сказать: смотрите какой он страшный. А у тебя все по полочкам, прям кайфанул
Спасибо большое за отличный ролик! Отдельное спасибо, что начали с ванильного js, чтобы было очевидно, какое количество кода добавляют абстракции фреймворков поверх основной логики. Из нового для себя обратил внимание на qwik - интересная концепция подгружать даже всякие мелочи в процессе работы.
И еще хотел поблагодарить за то, что в качестве примера взяли более приближенный к реальности кейс (загрузка данных с сервера, фильтрация, работа с текстовым импутом), а не надоевший, мне кажется, уже всем TODO лист :)
Владилен очень хорошо знает Angular, и то как он написал столько простое приложение, задействовав все возможные сущности меня лично порадовало.
Плюс хочется также подчеркнуть, что если такой подход кажется сложным и вычурным - стоит ещё раз напомнить, что Angular предоставляет архитектуру и как сказал автор, такое делегирование решает самую главную проблему - масштабируемость приложения. Помимо этого сама абстаркция Angular позволяет писать, по моему мнению, очень чистый, читабельный код, чего мне не хватает ни в каком другом фреймворке.
P.S. Влад, поставь пожалуйста расширение для подсветски синтаксиса Angular (vscode - Angular Language Service), если в будущем будут видео по Angular. Спасибо за видео!
Тоже понравилась реализация на Angular. 👍 Самый понятный фреймворк для тех, кто пришёл с backend разработки.
А что было сложного показано?
Не было ничего сложного.
Даже зашла идея с написанием собственного pipe. Взял себе на вооружение эту фишку
Кайфанул. Было очень интересно. Самому взять и потыкать эти фреймворки/библиотеки не хватает времени. Спасибо Владилен. Видео пушка)
Вот это я понимаю, крутой подход демонстрации, серия бы подобных видео по разным направлениям. Для всех новичков наглядно, что и как. Полезность этого видео на долгие годы. Спасибо за задумку и работу.
Владлен, однозначно тема очень важная. Благодарю за множественное сравнение решений.
С вниманием изучу каждое.
Наконец-то появилось что-то про AlpineJS! Спасибо
Отличное сравнение. Можно было еще input и список в отдельные компоненты вывести и в этих фрэймворков покозать как у них обстоят дела с стэйтом между компонентами. И потом сравнить сколько всего строк кода, вес и перформанс. Вот тогда можно будет увидеть существенную разницу. А для себя уже давно сделал выбор - в пользу Svelte
Ещё туда добавить роутинг с параметрами, разной лейзи фигни, работу с формами и валидацией, ну и до кучи какой-нибудь темплейтной магии, вроде темплейт аутлетов и т.д
Сделал выбор в пользу статического типизированого языка с минимальным количеством фреймворков )
Пару дней назад видел в твоем github новый репозиторий и ждал выхода видео) спасибо за полезную информацию)
Привет Владилен 🤝
Буквально позавчера лазил по твоему гитхабу и увидел недавний код))
Ждал этого видео)
Спасибо 🔥👍
Прикольный такой челлендж !! 😄
Побольше подобных видео, порадовало
Владилен, Вы прекрасно постарались 👍
Очень крутой и наглядный споосб показать разные фреймворки. Вот бы ещё такой же по бэку:)
Спасибо. интересно!
Лайк. Хотел бы увидеть сравнения и тесты
Спасибо, отличное видео
В своих видео начал с самых азов, а дальше буду давать более глубокие знания, только по бэк-энду.
Безумно приятно и интересно смотреть, черпаю опыт и в фронт-энд, и в подаче материла :)
Крутое сравнение, хотелось бы увидеть ещё сравнение скорости работы в каждом из фреймворков)
Отличное сравнение! Хорошо бы найти тоже самое по фреймовркам по perl!
Приятно смотреть на чистый js, во всех смыслах )
Спасибо. Жаль только нет анализа проектов, по размеру и скорости. Было бы интересно.
Потенциальная тема на новый ролик)
Судя по всему свелт будет одним из самых быстрых,на выходе чистый js
@@tribesman82 но его пока мало где применяют
@@max_mgtow согласен, изучаю его на будущее. Сразу в составе svelte kit
@@tribesman82 скорее всего solid. Есть сравнение оверхеда (по отношению к Vanilla) выходного бандла после компиляции для различных фреймворков на главной странице solidjs.
Спасибо за обзор, хотелось бы поподробнее о Svelte.
Интересное видео, спасибо Владилен!
37 минутное видео: выходит
каждый второй коммент под ним через 2 минуты: отличное видео, спасибо ))
@@makkapoya Во-первых это единственный такой коммент. Во-вторых, предположу, что человек оценил по названию ролика - что тема ему интересна. Он ничего не сказал, что посмотрел и все круто
Очень интересно. Хотелось бы узнать про динамический роутинг. В случае, когда структура приложения на момент загрузки ещё не известна. Как это можно сделать на разных фреймворках?
Интересный контент. Спасибо
Спасибо за это видео
Владилен, подскажи пожалуйста, в примере Vue ты используешь вычисляемое свойство, а вот в React ты используешь useRef с дополнительным useEffect.
Получается у тебя:
2 списка данных
Дополнительный useEffect
Можно ведь было бы использовать useMemo как вычисляемое свойство, завязанное на одном списке и input и рендерить уже его.
Почему был выбран вариант именно с useRef и useEffect? Так лучше по производительности или просто чтоб показать как это делается по-другому? 🙂
Спасибо большое вам Владилен если бы обновили курс Vue JS на Udemy то было бы вообще здорово
Самого главного в видео нет - а именно выводов автора относительно фреймворков, их плюсов и минусов в сравнении друг с другом.
Желательно было бы добавить ещё краткую информацию о распространенности фреймворков и их доли на софтверном рынке.
В общем, есть куда стремиться )))
Вывод прост: реакт - говно 🤣
@@alexlightweight Да я не про навязывание, а про сравнительный анализ. Чтобы понятно было, какой фреймворк в чём силен, а в чём слаб.
@@edmondhamilton995это надо глубже копать, но аудитории и так зайдет
Спасибо за интересный обзор. По данному примеру приложения- чистый JS рулит :), все проще и понятнее. Я понимаю, что 100500 фреймворков придумали не просто так. Мне, как новичку, хотелось бы увидеть какие проблемы решает каждый конкретный фреймворк, какие у него киллер-фичи. Может быть на более сложном примере и поменьше фреймворков за раз...
Хотелось бы посмотреть на кое-что за пределами JS/TS - использование WebAssembly. Может, даже с бенчмарками.
vue, svelte прикольные, а вообще чистый js то крут!
Властилен на высоте!
Мне как человека, который не может работать без хорошей архитектуры - angular просто must have. Спасибо владилен за обзор
Привет, предлагаю снять продолжение и реализовать доп фишки поиска, которые помогут раскрыть различия, когда задача доводится до реального продакшена и как код приложений плсле этого усложнится. 1. Функция возврата поиска отрабатывает секунду. 2. Во время поиска отображать loader. 3. Добавить debounce в пол секунды, т.к нет смысла грузить сервер пока юзер вводит текст. 4. Если получается так, что дебонс не поможет и сервер будет выполнять 2 запроса параллельно, то выполнить самый последний, а более старые игнорировать (как switchMap в rxjs).
Познавательный ролик👍 У новичков, по-любому, возникнет вопрос: "нафига все эти фреймворки, если на vanila js сделать проще всего")
+
+
Чистый дж прекрасен.. сам использую вью.. но рад был бы работать на чистом дж )
Для Angular в pipe в условии прописано users.length === 0. Там скорее всего должно быть value.length
На самом деле лишняя проверка вообще. Я потом уже заметил
как раз недавно смотрел огромную таблицу сравнения разн. фреймворков (по скорости)
и в ней огромное значение имели ключи. хз, что это, но, например, в angular на некоторых тестах они сильно замедляют его работу
Владилен, покажи где-нибудь (постом в телеге, например) какие расширения для VS Code'а ты используешь, пожалуйста. Интересно посмотреть.
Спасибо)
Есть шорт на канале с этим списком
опаздал на год, но тоже неплохо
Qwik впервые узнал о существовании такого фреймворка 😮 Идея в нем заложена крутая, особенно актуально если пользователь с древним смартфоном. И само видео крутое, приложение пусть хоть и простенькое, но на 10 разных стеках, такого в русскоязычном Ютубе мне пока не попадалось.
Блин очень интересно. И очень плохо понятно. Требую ролики, в которых можно будет все эти фреймворки поделить на пару тройку категорий и с примерами(если возможно) рассказать о их отличиях, в плане разработки, сложности, доступности инфраструктуры вокруг них. И условно. В свелт нет такого количества юай библиотек как на реакте, но на нем она тебе и не так нужны, потому что все очень легко пишется и наоборот. В общем тема интересная. Контент годный, дайте еще!)))
В SolidJS для запросов на сервер лучше использовать Resource
Владилен планируешь когда-нибудь сделать видео о парсинге на чистом JS?
Мне понравился AlpineJS, можно больше видео на него Владилен?
Да, специально для вас сейчас начнёт фигачить!
Соглашусь, Alpine действительно выглядит идеальный для подобного рода простых приложений
Stencil стал интересным открытием между React и Angular
ну и понравился Qwik своей идеологией и реализацией
Angular 🔥
Что за шрифт вы используете?
Сказать честно, Я ожидал ещё какой-то ытог (Conclusion) к таковым сравнениям, что где лучше, или более приглянулось ..
А так, да, весьма объёмно и познавательно, gracias ))
Vue конечно же топчик!
Angular как будто китайский язык, что-то понять там ну очень сложно было, и расхотелось в принципе лезть туда.
Приятно удивил Alpine, не знал про него ничего , но этот подход показался простым и логичным!
P.S. Возможно будет туториал по Vue StoreFront и Vue script setup + nuxt 3
сделай след. видео - Обзор нововведений в TypeScript 5.0
Непохое видео снял Антон из PurpleSchool
интересно было бы замерить скорость работы каждого решения
Смысл на таких мелких приложениях замерять скорость? Разница будет в долях миллисекунд, которая глазу даже видна
@@user-cb6qu4qo1p Понятное дело, что не совсем корректно так сравнивать скорость, но просто интереса ради посмотреть на эти милисекунды
мне как ангулярщику, конечно понятнее всего ангуляр)), мне кажется автор слишком усложнил объяснение, что там и как устроено - возможно, сложится впечатление что куча всего там нужно прописать руками, но большинство из этого генерируется фреймворком автоматически при создании нового приложения (структура, корневые модули и компоненты, методы жизненного цикла, импорты, метод рендера в корне index.html)...остальное при создании сущностей за кодера делает cli, например. Но за трикс с пайпом однозначно лайк!
Больше всего понравился SolidJS.)
так какой лучше? будет ли сравнительное видео?
Лучше всего солид, но не пали фишку быдлу
Всегда использую next для своих проектов. Но как я понял, ты даёшь понять что next максимально не популярен в проде?
Привет! Круто делаешь, много черпал из твоих видосов)
теперь пришел с критикой)
По поводу реализации на реакте. А что если не нужно следить в useEffect'e то, что ты ввел в инпуте. Зачем менять users? напиши лучше const filteredUsers = useMemo(()=>{},[input]). И рендери отфильтрованные. Нет?
Не понял из твоего объяснения, в чём именно проблема. На всякий случай: ты точно понял, что users - это как раз уже отфильтрованные юзеры? Кстати, соглашусь, что именование тут не самое идеальное)
@@user-wm2pf4fo3f в подходе проблема , я считаю ) в users не должны быть отфильтрованные юзеры
Дальше должен лежать стейт с условиями фильтрации
И на основе юзеров и данных для фильтрации должно высчитывается новое значение
Сразу начал с Angular 2. React почему-то не зашел, но сейчас думаю освоить и его тоже. Выглядит с одной стороны проще, но с другой стороны будто надо все самому придумывать. В Angular есть много готовых решений, которые можно использовать сразу из коробки, это конечно означает, что надо будет все это сидеть и изучать, но после изучения это здорово облегчает жизнь. С React я так понимаю надо будет придумывать самому как это должно будет работать. Если сравнивать с Angular, то как будет например выглядеть работа с формами в React? Валидация, отображение разных сообщений, связь между разными контролами, и в целом с формой, ее состояние, состояние каждого отдельного контрола, вложенные формы и массивы форм, возможности в части переиспользования синхронных и асинхронных валидаторов. Я понимаю, что в принципе, всë можно сделать и на чистом JS, и на любом из этих фреймворков.
В Реакте для работы с формами обычно используют какой-то из множества сторонних плагинов. Как, впрочем, для любого другого относительно сложного обособленного функционала - хранения состояния, асинхронных запросов, работы с формами и т.п.
Ничего придумывать не надо у реакт куча либ выбирай любую и юзай. Хочешь строгости и какой-то архитектуры смотри на next это фреймворк для реакт.
Мне в Реакте не понравилось то, что html код должен быть где-то в скрипте, который не всегда может быть компонентом. Верстальщикам старой закалки приходится очень тяжело.
Когда открыл для себя канал Fireship 😁
Без обид надеюсь. Содержание и подача сильно отличаются, но заметно, что идеи подглядел (прошлые видео про технологии за 1 минуту и это).
P.S. Закрыл форточку и не душню больше, увидел в описании "inspired by" и ссылку на оригинальный ролик
С точки зрения бизнеса какие качественно новые возможности мы можем получить от новых фреймворков или они все делают одно и тоже только разными способами?
Плюс минус одно и тоже делают. Есть небольшие различия под разные специфики проектов
А зачем во вьюшном примере onMounted?
Классное видео, жалко что на неделю раньше не вышло ) как раз на экзамене нужно было писать фильтр строк
Ангуляр таким тяжеловесным выглядит просто по тем причинам, потому что автор решил использовать весь его функционал. Если использовать стенделон компонент, темплейт описать вместе с компонентом в одном файле, не использовать пайпы и сервис, то там кода с гулькин нос останется)
Кстати, в Ангуляре нет сигналов еще, которые есть во всех других фреймворках
Я думал зафигачать нативный фетч в компонент, но потом подумал, что есть клиент, его по-хорошему в сервис надо засунуть и... получил что получил. Зато по феншую ;D
@@VladilenMinin Что большинство новичков и пугает, мол mental model слишком сложная. Зато придя в кровавый энтерпрайз на ангуляре не надо тратить много времени на понимание архитектуры - он везде одинаковый)
интересно было бы посмотреть как фильтрацию на сервере сделать, чтобы при вводе текста уходил запрос и результат перерисовывался. тут интересно посмотреть как каждый фреймворк с рейс-коднишенами работает.
Но даже в текущем примере. Если запрос будет очень долгий, а пользак начнет вводить текст до загрузки, то фильтрация по загрузке во многих фреймворках не отработает, а вот в примере с ангулар и solid все будет ок.
Если фильтровать данные на сервере то событие input нужно пропустить через debounce. Небольшое дополнение...
@@ZaurmagRu denounce не отменит запрос при вводе след символа, а интересно как раз посмотреть как в разных фоеймворках этот race condition отруливается
@@Dimonina Вообще пока набираете текст быстро запрос не идет, как только останавливаетесь дольше времени задержки - улетает запрос всего текста. Так работает debounce...
@@ZaurmagRu все верно. Но возможна ситуация, когда предыдущий запрос ещё выполняется, и приходит новый символ даже после дебаунса. В любом случае нужно отменить предыдущий запрос. Дебаунс тут не поможет.
10 слишком красивая цифра... 3 фреймворка пришлось самому придумать 😆😆😆
Самый понятный вариант это на чистом js. Да и отлажиаться удобнее... По крайней мере это мой выбор.
Мне кажется или на чистом получился самый лаконичный код?
А будет еще отдельный курс по React?
Есть актуальный с TS в подсказках
Выбор пал на React, Vue и Svelte. Теперь нужно выбрать один из них
Vue советую
По скорости и простоте Svelte лучше всего. Vue и React уже устарели со своим Virtual Dom и тяжёлыми рантаймами.
1:07 Vanilla js framework
3:50 React js
когда хотябы 2к картинка будет
?
даешь прод!
не понятно, что вы думаете по этим фреймворкам? какой вам больше понравился? выделили хотябы топ 3
Мой личный топ: Angular, Svelte, Vue
Точно не видел у Fireship. А вообще в заимствовании не вижу ничего плохого, особенно в классных адаптациях, таких как этот видик)
Фаершипа уважаю, вдохновлялся названием его ролика. Ссылочку оставил в описании
Когда знаком с angular и vue но не с самым популярным Реактом
Lit как по мне слаб так как autocomplete нету из за строчного синтаксиса, долго печатать, а время то дорогое
Litjs это набор хелперов для создания "web components"?
нет. Lit это либа для создания стандартных веб-компонент, которая добавляет декларативную шаблонизацию, стилизацию с учётом специфики ShadowDOM и реактивные свойства.
Признаться честно, объяснение про Lit разочаровало. Получилось крайне поверхностно, к тому же всё свалено в кучу, да ещё и перепутано. Например, connectedCalback() - это не функция, а метод жизненного цикла элемента (из стандарта), а вот метод render() - как раз то, что добавляет базовый класc LitElement (т.е. либа). Кроме того, html это не функция, а тегированная шаблонная строка (и да, я знаю, что фактически это функция, однако для понимания проще воспринимать html`как строку из ES5` )
Я ожидал сравнение перфоманца, размеры файлов и т.д.
Почему vs code а не webstorm как обычно?
Ребят, почему так сложно то, только закончил с основами JS и почти ничего не понятно, даже в файле про фактический JS и от этого большое уныние наступает, вроде человек все детально объясняет и толково, но используются какие то слишком продвинутые технологии
хотелось бы услышать какое-то вывод
многое из перечисленного совсем не фреймворки а всего лишь библиотеки взять тот же самый react он особо то не диктует вам о том как устроить архитектуру, а также нету каких либо строгих правил и ограничений, вы сами вольны выдумать что вам угодно. Фреймворк это как правило строгие правила и соглашения по которым готовится ваше приложение
А звук где
Владилен забыл сказать что сделал это с помощью ChatGPT )))
Я в этом иало разбираюсь, но со стороны кажеться что фрейворки плодят много ненужных сущностей. Намного проще HTML
Вдохновился видео от Fireship? :D Чуть-чуть разный набор фреймворков, но всё остальное очень похоже)
Да, я даже добавил это в описании)
@@VladilenMinin А, и правда, ну, это мы уважаем 💪
в реакте второй useEffect нафиг не нужен.
По поводу Qwik - а ничего что такое количество запросов на сервер это по сути как DDOS атака?
Ну если это какой то NGINX то в целом и общем все равно. Но да, мне тоже интересно на сколько живая концепция в проде
@@VladilenMinin дохрена промисов жрут память
Владилен, очень важный вопрос, сколько ты уже находишься в фронтенд разработке и как быстро ты выучивал новый фреймворк?
Ты работал в команиях или большую часть на себя?
больше 10 лет в разработке
новый фрейм даже не надо учить - просто читаю доку и пишу
7 лет в компаниях, последние 3 года на себя
@@VladilenMinin Я неспроста спрашиваю. Видел вакансии, которые хотят все фреймвоки и опыта от 1-3 года. Это типа джун-универсалный солдат с соответствующей зарплатой.
@@nikitos2442 Да это бред. Научись на них писать и количество лет/месяцев не важно
@@VladilenMinin, оно и видно как неважно, в Реакте делать в useEffect реакцию на изменение состояния, в котором меняешь другое состояние, явный признак "профи", хотя я, к слову, джун в Реакте :Ъ Уж простите за сарказм, но опыт везде важен, как и в чистом JS понимание азов, работа с объектами как ссылками, иммутабельность. В реакте так же важно понимать для чего нужна мемоизация и когда ее стоит использовать, а когда нет, почему в зависимости useEffect лучше не передавать объекты, и самое по моему мнению важное, глядя на г***окод людей, писавших приложения в компании до меня, это для чего нужна композиция при написании структуры компонента, особенно если речь идет о модулях.
@@nikitos2442 Зачем учить фреймворки, если надо учить и понимать концепции. Как ты заметил, 6 из 10 фреймворков в видео - одно и тоже, только названия функций разные. Если в двух словах, то концепции можно сказать следующие
- Темплейта и ее язык описания (JSX, полунативный HTML, другое)
- Байндинг переменных к темплейте
- Обработчики событий
- Жизненный цикл приложения и темплейт
- Реактивность или как фреймворк понимает что данные обновились
Все остальное это фичи этих фреймворков, что их и отличает
Sveltekit ?
Где jQuery и motools?
На 10 фреймворках ах ты негодяй )
ахах ну почему негодяй сразу ;D
где-то я это уже видел...
fireship???
после ul.innerHTML = html можно выключать...
Думаешь в name предадут ?
Пасаны, всем SVELTE
Было очень интересно. Не всегда находиш для себя время чтобы весь этот зоопарк пощупат..
Ответ к вопросу на видео: Лучше тот, на котором есть вакансии.
А где заключение и свое имхо?
Мое имхо - нужно выбирать фрейм под задачу, это всего лишь инструмент
Мой личный топ: ангуляр, свелт, вью
1. ALL_USERS не константа, чтоб в таком формате его прописывать
2. ALL_USERS undefined в начале, а должен быть инициализирован с пустым массивом так как апи может кинуть ошибку (которую ты не ловишь, кстати) и input change будет вызывать filter у undefined.
3. Почему юзер обозначен как “i “при переборе через filter? i - index, номер итерации. Bad naming
4. Если у тебя есть метод start, который все начинает, так запихни подписку на инпут туда же, а то нелогично
Это по JavaScript примеру. Дальше не смотрел
Вот по этому куча легких сайтов на легких фреймах. А на ангуларе лучше энтерпрайз.