Solid js - signals, createEffect, createResource. Круче React?

[@PurpleSchool]

⚡Полный курс по React и Next: purpleschool.ru/course/nextjs Все курсы: purpleschool.ru Telegram канал с полезными советами: t.me/purple_code_channel

[@habalgarmin]

глоток сежего воздуха после реакта и всех его массивов зависимостей

[@PurpleSchool]

Именно!

[@КонстантинТарасов-к6щ]

Все ещё жду каминаута Абрамова по поводу хуков. С редаксом уже разобрались.

[@CJIu3eHb]

​@@КонстантинТарасов-к6щ Сами по себе хуки вещь неплохая по задумке, это композиция, недаром в том же Vue3 подобную вещь назвали Composition API. Другое дело, что этот банан потащил за собой стадо обезьян и все эти джунгли с магией ререндерингов.

[@КонстантинТарасов-к6щ]

@@CJIu3eHb хуки тащат с собой кучу ненужного оверхеда (deps, rule of hooks), при этом они тормозные. Стейт вверх не поднять без перерендера. Приготовлены исключительно для реакта. И ВСЕГДА ведут к плохому дизайну приложении с логикой в компонентах. Увиденные мной приложения на хуках уже не развидеть. Ну а в композиции можно как без хуков, так и без фп.

[@BlexJS]

Спасибо за контент про солид жс❤️ Незаслуженно непопулярный фреймворк, любою его всем сердцем, жаль работу на нём не найти. Хотя preact используют в некоторых специфических сферах, но это больше как исключение

[@PurpleSchool]

Да, там сигналы тоже появились.

[@moon.trance]

А почему собсна не Vue? Я когда вижу подобное восхищение, что все само обновляется и не надо подписываться, вспоминаю computed из Vue, который еще в 14-м году так работал. Минимум телодвижений - максимум результата. В 3-й версии еще подвезли JSX, улучшенную подержку TS и много всего полезного.

[@виртуоз_ру]

Просто эти дауны этого не понимают.

[@voloduhe]

кажется, во vue слишком мало чистого js, чтобы он стал популярным

[@nade3282]

@@voloduhe слишком мало чистого js. что это за выражение? мало чистого js? так идите на ванилу

[@voloduhe]

@@nade3282 я и так на ваниле, реакт это библиотека

[@keyboard_brothers]

​@@voloduheт. е. Ты не используешь react-dom?)

[@andyjs666]

Спасибо! Очень нравится твой подход к разбору технологий. У Solid есть один очень существенный недостаток по сравнению с React: это по сути проект одного разработчика. И каким бы не был гениальным Ryan Carniato (он автор Solid), но существует отличная от нуля вероятность, что если по каким-то соображениям он перестанет его поддерживать, то на этом история Solid и закончится. Кстати, я экспериментировал с @preact/signals-react. Пока очень сыро. В Next 13 он ломает HMR. И в ишьюсах народ пишет, что не работает с новой папкой app.

[@PurpleSchool]

Спасибо! Да, сигналы в реакт это пока хаки.

[@sergeydostovalov6180]

Короче. Реакт, это как батина Лада Веста: ее могут перебрать в любом гараже, запчасти есть в любом магазине, да ты и сам начинаешь разбираться в строении мотора и ходовки, а ручная коробка передачь поможет выехать из любого говна. Правда ехать на ней по пробкам или на дальняк тяжеловато и кондей может подарить тебе воспаление легких, но ты в ней уверен! Солид жс - это как бэха, ты просто едешь туда куда надо: быстро, с комфортом и думаешь как бы она не сломалась ) Пс. На самом деле я тоже жду когда разрабы реакта сделают камингаут и сообщат народу, что реакт это шляпа, по типу редакса)

[@peiiiajikuh]

Может наоборот, Реакт это бэха, а нативный жс - лада?

[@sergeydostovalov6180]

@@peiiiajikuh проблема ререндера - это проблема только реакта, в других фреймворках ререндер отсутствует (потому что изменения отслеживаются реактивно в шаблоне) . Из-за этого, кроме того что тебе нужно в целом программировать бизнес логику или логику представления, ты ещё должен заморочиться со всякой мемоизацией, колбеками и композицией компонентов. Вот сидишь этим и жонглируешь, как будто на С программируешь. Ну да ладно, хорошо, что ты овладел мастерством избежания ререндеров. Ну так кто-то другой может в твоем проекте про что-то забыть и вот у тебя опять экран при нажатии на кнопку отрисовывается заново. Для примера можешь посмотреть на яндекс маркет (лагучее нечто написанное на реакте) и на озом, который использует вуй (всё летает).

[@KuruApni]

Тема с сигналами конечно крутая, но я вижу только одно преимущество. Это точечный рендер. Что смутило: 1. Какие-то игры с реактивностью. Очерденой эксперимент. Мало нам Vue. В RxJS уже все придумано до нас. Из коробки нет банального throttle/debounce, надо ставить solid/primitives. 2. Когда в return (условной разметке, все понимают о чем я) миксуются структуры вида , у меня пред глазами всплывают болезненные флешбеки со временем PHP древних, когда под wordpress писал. Там такая же мешанина из всего была. 3. Притензии вида "в реакте надо подписываться\отписываться" ну прям такое. Даже джуны по-хорошему про это должны знать. Как итог, фреймвор интересный, но не более. Рискнете выводить в продакшн в b2b, потом будете переписывать на что-нибудь из большйо тройки, как сейчас происходит со многими прошлыми "перспективными" фреймворками. В текущих реалиях залог успеха фреймворка - это не его условны перфоманс или фишка, а комьюнити и поддержка. PS. Интересно было бы узнать твое мнение по поводу ангуляра. Или вообщ небольшое видео, где ты влоб но коротко сравниваешь Angular/Vue/React Заранее спасибо.

[@PurpleSchool]

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

[@Slesh2911]

Тоже хотел похожий коментарий написать. Но хочу добавить ещё один пункт. 4. Всю "магию" с автоматическими подписками и точечным ререндером можно реализовать на реакте написав соотвествующие хуки.

[@nade3282]

chel, react kal prosto priznay eto

[@nade3282]

@@Slesh2911 хапхапхап че за бред, а может тогда вообще на чистом js будем писать? ведь все что есть в реакте можно написать на чистом js xdd

[@Slesh2911]

@@nade3282 Пишите

[@ilnurryazhapov]

Про сигналы в ангуляре будет видео? уже добавили

[@PurpleSchool]

Думаю что да

[@juniornavsegda]

Антон, сними пожалуйста новый ролик про ts + react

[@PurpleSchool]

Хорошо

[@shava1788]

+++ На ютубе мало нормальных роликов про типизацию React.

[@alienspro]

@@shava1788 может вам курс у Антона купить по TS? Прерасный курс. И на Udemy TS+React очень много превосходных курсов.

[@dergunovalexandr]

Хм. Это очень похоже на Vue3 с jsx. Антон, попробуйте тоже самое написать на Vue. Только лучше без jsx, тогда кода будет ещё меньше и он будет более прост для восприятия.

[@PurpleSchool]

Не трогал Vue 3 с JSX, гляну

[@andykud63]

Пора уже пилить курс по TS 5...

[@PurpleSchool]

Он есть и дополнен особенностями 4.9 и 5.0 purpleschool.ru/course/typescript

[@andykud63]

спасибо, Антош, гляну.

[@vovergg]

Ну, наконец-то.)) Всегда всем сердцем ненавидел React с его подходом к рендеренгу (ну, не заходит и всё :). Вот, есть же более-менее нормальные подходы.)

[@PurpleSchool]

Да, это мне тоже очень понравилось в Solid js.

[@lionstar3189]

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

[@vovergg]

@@lionstar3189 Рендеринг не имеет отношения к тому, большой проект или маленький, это просто способ визуализации в браузере. Мне просто не нравится подход визуализации, который реализован в React, потому что там с переходом на хуки стал не полностью явный жизненный цикл компонентов. Простыми словами, не всегда понятно, когда именно будет отрисовываться компонент при различных комбинациях зависимостей изменения данных в нём.

[@lionstar3189]

​@@vovergg В этом случае, да нужно понять как именно работают хуки, но и там можно всё разобрать. солид по мне хороший фреймворк, если тебе нужно чисто что то на подобии jquery. Если иметь ввиду просто процесс рендеринга, при первом появлении в дом браузера, то тогда солид быстрее сделает. А если у тебя сотни компонентов на странице и их родитель обновляется и нужно так же произвести РЕрендеринг в некоторых(не во всех т.е.) только. То тут только решает фреймворк на подобии реакта, солид в ауте как бы.

[@виртуоз_ру]

Нормальных людям реакт нравиться не может. Попробуй Vue 3 и ты забьёшь на всю эту хрень.

[@uncle_ara]

Очень печалит, что мало библиотек, которые работают с solidjs. А без библиотек, как без рук.

[@PurpleSchool]

Это верно

[@Илья-с1л6э]

у solid есть интерсная особеность. Многие библиотеки не нужно под него прям адаптировать, так как весь пласт библиотек написаный под ванильный js могут просто работать) За счет того что нет ререндера компонента как в том же реакте

[@Chantaletecker]

Подскажите название color scheme для NVim, пожалуйста

[@PurpleSchool]

Базовая тема astronvim

[@akella6084]

Самое трудное в Solid - это понять, зачем он нужен, когда есть Vue.)

[@очиньзлойпон]

Более структурирован

[@Александр-ф9в4ю]

Vue и любая подобная шаблонная срань - это помойка, на которую не надо тратить время

[@awenn2015]

23:53 чет магия какая то, сначала data это функция, потом data это уже объект, с Солид не работал поэтому выглядит как то странно, плюс все эти Show какое у них преимущество перед обычной проверкой тернарниками?

[@Илья-с1л6э]

использование Show вместо тернариков обусловлено тем как работают сигналы. С простым тернаринком не будет работать подписка на сигналы

[@awenn2015]

@@Илья-с1л6э понял, спасибо

[@rudinandrey]

попробуйте RiotJS

[@dsbasko]

А давай тоже самое про vue 3 и\или nuxt3 )

[@PurpleSchool]

Хорошо, записал на заметку)

[@wellmare]

Круто

[@PurpleSchool]

Спасибо!

[@artyomvashkevich602]

Если честно то очень похоже на svelte но в svelte мне кажется более понятнее реализованно все тоже самое. По этому никого не хочу обидеть, но solid не взлетит т.к. врятле сможет быть похожим на svelte и стать лучше него. Форк svelta как по мне.

[@PurpleSchool]

Ну не, они прям координатор отличаются и подходом и синтаксисом разметки. Общее - реактивность.

[@Илья-с1л6э]

и вот в свелте тоже добавили сигналы)

[@evgeny_mdr]

Можешь дать ссылку на репозиторий твоего конфига для Astronvim?

[@PurpleSchool]

Он почти дефолтный сейчас, как допилю, выложу и сделаю видео.

[@uncle_ara]

Как называется ваш шрифт?

[@PurpleSchool]

AI Writer Mono

[@Endru1994]

зачем столько фреймворков? вообще пишу ванильно и не парюсь, выработал свои подходы и рад. Только в python - django юзаю как фреймворк, а на php тоже пишу без фреймворков. Это всё субъективно, но первый вопрос актуальный, зачем? Столько фреймворков..

[@ЕвгенийЯкунин-ф2д]

Читаю доки по solid-start... такое ощущения, что с сайта документации remix не переходил)

[@PurpleSchool]

Да, взяли всё лучшее от других)

[@ЕвгенийЯкунин-ф2д]

@@PurpleSchool ну и правильно, с одной стороны. Ждем релиза. Спасибо за видео, Антон!

[@xice111]

Не юзайте его, это лютое кусок г, он несколько лет в нпм, и его никто не юзает, потому что он неудобный и не решает всех задач. Само название не даст вам найти что-то в поиске, а будет показывать на принцип solid. Его любят программисты с синдромом гадского утенка, которые хотят быть, не такими как все. Там даже деструктуризацию невозможно сделать. Вы не найдете программиста на нем к себе на галеру. Просто посмотрите как работает reconciliation и мемоизация в react, и писать на нем сразу станет понятно и полизводительно

[@alienspro]

@@notrodans вам скрости в React не хватает? Так не закапываейте его в кучу контекстов и следите за ререндером. Оптимизацию своего приложения еще никто не отменял, а комментатор выше прав на 100%

[@alienspro]

Полностью поддерживаю, некоторые программисты просто не полностью используют возможности react

[@КонстантинТарасов-к6щ]

@@notrodans его любят программисты, которые делают ставку и на UX и на DX. Иначе приходится читать про мемоизацию, изучать реконсиляцию, вручную, прописывать зависимости в массивчик, дрочить на правила хуков, откапывать редух... А когда тебе говорят, что можно без всех этих приседаний, просто говори, что solidjs лютое говно.

[@xice111]

@@КонстантинТарасов-к6щ в реакте очень простой механизм мемоизации, так и скажи, что всю голову забил не нужными алгоритмами, и не понимаешь как работать на прикладных задачах, которые требует бизнес

[@Илья-с1л6э]

​@@xice111 механизм то простой, но его использование приводит к боли. Пример. Есть компонент внутри него есть некая мемоизированая фунцкция, которая зависит от пропсов компонента, среди которых есть не только примитивные значения, а допустим еще и объекты массивы или другие функции. Теперь у нас появляется компонент который используется компонент . Теперь компоненту нужно знать что компонент внутри себя что-то мемоизирует, и мемоизировать все нужные пропсы, иначе вся мемоизация компонента теряет смысл, и возможно даже будет во вред. То есть компонент должен знать о том как реализован компонента внутри, что явно говорит о проблеме в коде. Зависить от интерфейса компонента - ок. Зависит от внутренней реализации не ок. Теперь добавляем еще компонент который использует . И может сложится такая ситуация что компонент тоже должен быть обмазан мемоизаций потому что комопнент внутри себя использует компонент , о котором компонент вообще не знает. То есть мы можем прийти к ситуации что нам нужно просто все приложение обмазывать мемоизацией. Мало того что это бьет по DX, так еще и любая мемоизация не бесплатна, а значит увеличивая кол-во мемоизаций, мы можем прийти к тому что вся мемоизация жрет ресурсов не сильно меньше чем изначальный проблемный компонент без мемоизации. И когда именно настанет такой момент предсказать не то чтобы легко. P.S. данный кейс относится к больше к проектам, где реакт используют именно как полноценный фреймворк а не ui либу. То есть строя на нем свое приложение. Описывая всю логику в хуках, затаскивая react-query и react-rotuer связывая их именно через реакт. Лично я сам мемоизацию использую крайне редко, так. как всю логику я держу вне реакта. Но проектов которые используют описаный выше подход достаточно много и подобные проболемы с мемоизацией я встречал там достаточно частно. И либо мемоизация теряла смысл, так как один родительстких компонентов не использовал мемоизацию либо/или/и весь код превращался в сплошную кашу из useMemo/useCallback

[@dev_kd]

Хм... это же svelte, только с лишними тело движениями

[@PurpleSchool]

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

[@Илья-с1л6э]

@@user-kfh56gjxt компилятор у solid? Solid использует jsx, там необходим только транспайлер. Но если это считать эквивалентом компилятору то тогда и react "использует" компилятор)

[@givgiv6688]

солид это реакт в связке с mobx, интересная штука

[@PurpleSchool]

Очень свежо смотрится

[@КонстантинТарасов-к6щ]

Mobx интересен в связке с реактом. А вот солид уже можно и без mobx, там концепты сторов и реакций из коробки. Итого, минус пару десятков килобайт зависимостей.

[@alienspro]

Может и свежо, но миллионы проектов на React + TS не будет никто переписывать и продолжат использовать реакт для доработок. Дорого и не эффективно.

[@m.kolomoyets]

Когда-то так говорили про jQuery. Признаю, на нем еще пишут до сих пор))) но ситуация какая сейчас есть)

[@PurpleSchool]

Переписывать нет, но может свежие проекты, где производительность критична могут начать, так как переход от React минимален.

[@КонстантинТарасов-к6щ]

Пособолезнуем нафигачившим на хуках и редаксах приложений. Пусть поддерживают и страдают.

[@alienspro]

@@m.kolomoyets jQuery не обладал даже долей возможностей React, переход был вполне логичен, ведь началось все еще с Backbone и первого Angular

[@alienspro]

@@КонстантинТарасов-к6щ пишу на React больше 5 лет, посление 4 + TS, страданий не обнаружил. От классов страдал только малость.

[@MELkey3]

limit не значение, а функция .. блин ну тогда так и пиши [getLimit, setLimit] = createSignal

[@Илья-с1л6э]

это реактивное значение)

[@wh1te26]

Реакт - это не фреймворк... Правильно - вИт, а не вАЙт контент не в кайф после такого

[@PurpleSchool]

Я в курсе, что он не фреймворк, но выбирать ты будешь между Angular, Vue и сборкой с React, так что, то что на сайте у него написано, что он библиотека, не мешает его сравнивать с фреймворками.

[@nade3282]

правильно вИт, клоун

[@starwalker.musician]

Очередная "гениальная" хрень? Angular, Vue, React - уже пришли в творческий (и технический) тупик! Пора еще одну херню сделать! Ииииитак - встречаем SOLID JS! Еще один гвоздь, который через пару лет даже гвоздодером не вытащить. А может хватит уже плодить абстракции? От всего этого говна уже и так тесно.

[@PurpleSchool]

Давайте писать на чистом JS? Как вы не понимаете, что любая новая реализованная концепция в очередном фреймворке это новый шаг развития Frontend. А то бы мы сейчас до сих пор на jQuery элементы выбирали, не имея полноценные приложения на фронте.

[@starwalker.musician]

@@PurpleSchool А кто говорил об этом? Давайте допиливать пару основных фреймворков - а не велосипедить новые?!

[@ЕвгенийАфанасьев-о5у]

@@starwalker.musician Такой интересный ты. Сколько PR в основные модули React/Angular/Vue сделал ? Дай угадаю, 0, зато первый в очереди на указания для сообщества. У каждого мейнтейнера есть свой взгляд на то как должна решаться та или иная проблема. Новые фреймворки пишут не потому что людям делать нечего, а потому что каждый по своему считает как делать ту или иную функцию правильно. Фейсбук решил, что виртуальный DOM это правильно, svelte и solid решили, что это оверхед. Ну и в конце концов это open source. Тебе тут никто ничего не должен. Open source не означает вторую работу, где нужно реализовывать хотелки заказчика. Там ребята реализуют себя, а тебе дают возможность попробовать или внести свой вклад в эту же идею

[@OleksiiMalichenko]

А с каких пор реакт позиционируется как фреймворк? 1:52

[@PurpleSchool]

Да, он библиотека. Но когда ты выбираешь на чем писать ты сравниваешь Angular, React, Vue или что-то ещё. И фактически собирая React + Router + остальное получаешь фреймворк.

[@anatoliiilescu839]

это все что ты понял...скажи спасибо автору , неблагодарный п**д*к

[@lionstar3189]

сам реакт это биба. С реакт-дом уже фреймворк. Зачастую это и имеют ввиду уже.

[@EntrataAstrales]

очередная пропаганда typescript

[@PurpleSchool]

Ему не нужна пропаганда, это по факту стандарт разработки

[@виртуоз_ру]

Всё это говно. Лучше всех это Vue и Nuxt

[@nade3282]

смотря для каких задач, solid на порядок меньше весит чем vue

[@starwalker.musician]

Кого - всех? Лучше чем - что? В каких случаях? Может у тебя код - говно, потому что получается только на Vue?

[@виртуоз_ру]

@@starwalker.musician Дура, если ты не понимаешь того, что реакт говно, то с тобой не о чем вести диалог.

[@nade3282]

@@starwalker.musician АПХАПХАПХ ты че конченый?