00:00:00У нас появился новый JavaScript-фреймворк,
00:00:03причём полностью full-stack,
00:00:05но выслушайте меня до конца,
00:00:07прежде чем закрывать видео.
00:00:09Он действительно интересен,
00:00:11потому что его создали разработчики Remix — Райан Флоренс и Майкл Джексон.
00:00:17Нет, не тот Майкл Джексон.
00:00:19Они же являются авторами React Router.
00:00:21Они поделились своим видением и показали первый прототип,
00:00:26можно сказать,
00:00:27первые демонстрации своего совершенно нового JavaScript-фреймворка — Remix версии 3.
00:00:33То есть это не совсем новое название,
00:00:36оно существующее,
00:00:37но это полностью новый фреймворк.
00:00:40В этом видео я постараюсь разобраться во всём этом,
00:00:44объясню,
00:00:44что это такое,
00:00:45и,
00:00:46конечно же,
00:00:47выскажу своё мнение — действительно ли нужен ещё один JavaScript-фреймворк,
00:00:52и каковы,
00:00:53по-моему,
00:00:54его шансы на успех или широкое принятие в эпоху,
00:00:57когда большие языковые модели по умолчанию генерируют React-приложения.
00:01:03Но давайте разберёмся по порядку: что именно представляет собой Remix и почему это важно??
00:01:11Remix,
00:01:11если вы вдруг пропустили,
00:01:13— это мета-фреймворк для React,
00:01:16по сути альтернатива Next.js.
00:01:18Remix был выпущен уже несколько лет назад,
00:01:21вторая версия вышла,
00:01:23кажется,
00:01:23в 2022 году,
00:01:24если я не ошибаюсь.
00:01:25А затем в 2024 году Remix версии 2 был фактически объединён с React Router.
00:01:31Вот почему сейчас,
00:01:33используя React Router,
00:01:34вы можете применять его либо как библиотеку маршрутизации в React-приложениях,
00:01:40как и раньше — это по-прежнему работает и остаётся отличной библиотекой для этого,
00:01:46— либо использовать его в режиме фреймворка,
00:01:50чтобы развернуть полноценное full-stack React-приложение.
00:01:54В этом режиме React Router — это больше,
00:01:57чем просто роутер: он помогает с загрузкой данных,
00:02:01их обработкой и мутациями,
00:02:03точно так же,
00:02:04как это делал Remix,
00:02:05потому что Remix был интегрирован в React Router.
00:02:09Но,
00:02:09конечно же,
00:02:10это вызвало вопрос: что тогда станет с самим брендом Remix?.
00:02:17И оказалось,
00:02:18что Remix станет новым фреймворком в третьей версии.
00:02:22Он станет новым фреймворком,
00:02:24который — и это важно — независим от React.
00:02:28Это не мета-фреймворк для React,
00:02:30не очередная альтернатива Next.js.
00:02:33Вместо этого это совершенно новый full-stack JavaScript-фреймворк,
00:02:38написанный с нуля,
00:02:39с самого начала,
00:02:41со всеми функциями и API,
00:02:43которые Райан Флоренс и Майкл Джексон хотели бы видеть в новом JavaScript-фреймворке.
00:02:49То есть они решают проблемы,
00:02:52которые видят и видели в экосистеме JavaScript,
00:02:55в существующем ландшафте библиотек и фреймворков,
00:02:59и конечно же,
00:03:00особенно в React,
00:03:01поскольку это основная библиотека и фреймворк — в зависимости от того,
00:03:07как вы хотите это называть — который у нас сейчас есть.
00:03:11Так о чём же этот новый Remix.
00:03:14Что ж, в прошлую пятницу...?
00:03:18Мы смогли увидеть первую демонстрацию, первый взгляд на API.
00:03:21Полную прямую трансляцию,
00:03:23где можно посмотреть всё мероприятие с анонсом целиком,
00:03:26я,
00:03:27конечно,
00:03:27оставлю ссылкой под этим видео,
00:03:29если захотите изучить всё подробнее.
00:03:32Но имейте в виду,
00:03:33что это будет около четырёх часов непрерывной демонстрации и объяснений.
00:03:37Я посмотрел их,
00:03:38чтобы вам не пришлось,
00:03:40если не хотите,
00:03:41но обязательно загляните,
00:03:42если хотите узнать больше.
00:03:44И вот одна из главных особенностей,
00:03:46вокруг которой будет строиться этот новый....
00:03:49Фреймворк,
00:03:50или,
00:03:51скажем так,
00:03:51главное,
00:03:52что наделало шума в X — это this.update.
00:03:55Выглядит не слишком впечатляюще, правда.
00:03:59Но на самом деле это подразумевает две вещи, к которым...?
00:04:04JavaScript-разработчики уже не особо привыкли.
00:04:07Во-первых, использование ключевого слова this.
00:04:11То есть старички вроде меня изучали все хитрости и особенности this,
00:04:15когда начинали работать с JavaScript.
00:04:18Сейчас его не так часто используют — в React вы,
00:04:21вероятно,
00:04:22никогда не будете писать this.
00:04:24Но это ключевое слово встроено в JavaScript,
00:04:27и они используют это ключевое слово,
00:04:30чтобы предоставить вам доступ к некоторым API.
00:04:33Где вы получаете доступ к этим API?
00:04:36Вы по-прежнему пишете функции..
00:04:39То есть вы не пишете классы,
00:04:40хотя с этим ключевым словом может показаться,
00:04:43что пишете.
00:04:44Но работая с Remix,
00:04:45вы всё так же создаёте компоненты,
00:04:48и для этого всё так же будете использовать функции.
00:04:51Точно так же,
00:04:52как в React,
00:04:53но эти функции-компоненты будут выглядеть немного иначе.
00:04:57Но вернёмся к this.update.
00:04:58Я упоминал, что в этом две важные вещи.
00:05:01This — одна из них.
00:05:02Update — другая.
00:05:03Потому что в Remix версии 3 вам придётся явно сообщать фреймворку,
00:05:08когда нужно обновлять экран,
00:05:10когда выполнять ре-рендер.
00:05:11И это, конечно же, то, к чему мы больше не привыкли.
00:05:15Потому что в React,
00:05:16а также в Vue и Angular,
00:05:18вы полагаетесь на то,
00:05:19что фреймворк сам определяет,
00:05:21когда обновляться.
00:05:22В React,
00:05:23когда вы вызываете setState,
00:05:24вы присваиваете новое значение состоянию,
00:05:27которым управляете,
00:05:28и это также запускает обновление UI.
00:05:31Но не обязательно мгновенно — React выполняет батчинг,
00:05:34собирает несколько обновлений состояния и так далее,
00:05:38но в конечном итоге обновляет UI.
00:05:40То есть с setState вы как бы говорите React,
00:05:43что нужно обновить UI,
00:05:44но в основном вы сообщаете,
00:05:46что какое-то значение изменилось,
00:05:48и как следствие UI будет обновлён,
00:05:51произойдёт ре-рендер.
00:05:52С Remix всё по-другому.
00:05:54С третьей версией Remix, я имею в виду.
00:05:56Там вы управляете состоянием в обычных переменных,
00:06:00ничего особенного.
00:06:01Нет хука useState или чего-то подобного,
00:06:03вообще никаких хуков нет.
00:06:05И вы просто вызываете this.update всякий раз,
00:06:08когда знаете,
00:06:09что UI должен обновиться.
00:06:11Вы можете изменить кучу переменных и не вызывать this.update — и UI не обновится.
00:06:16Или вы меняете кучу переменных,
00:06:18вызываете this.update — и UI обновляется.
00:06:21Вот как это работает.
00:06:22И,
00:06:23похоже,
00:06:23некоторые люди — ну вы знаете интернет,
00:06:26люди в интернете ужасны — у некоторых с этим проблемы.
00:06:30Я бы сказал, давайте посмотрим, как это работает.
00:06:33Это новый подход,
00:06:34и старый подход определённо хорошо работает.
00:06:37Думаю,
00:06:37есть причина,
00:06:38почему его используют во всех этих библиотеках и фреймворках.
00:06:42Но у старого подхода определённо также есть потенциал стать источником проблем,
00:06:47что может привести к ситуациям,
00:06:49когда не совсем понятно,
00:06:51почему что-то обновляется или не обновляется.
00:06:54И в более сложных приложениях,
00:06:56особенно с новыми версиями React,
00:06:58которые стали довольно сложными с множеством хуков и всего такого,
00:07:03может быть сложно по-настоящему понять,
00:07:05что происходит.
00:07:06И это одна из причин,
00:07:08почему они возвращаются к более простому API,
00:07:11где у вас полный контроль..
00:07:16Они также используют ключевое слово this,
00:07:18чтобы предоставить вам доступ к ещё нескольким API,
00:07:22но на самом деле их не так много,
00:07:24потому что очевидно,
00:07:25что идея состоит в том,
00:07:26чтобы сохранить фреймворк простым и сфокусированным,
00:07:30обеспечить вам хороший опыт разработки и сделать этот фреймворк простым в использовании.
00:07:35Также,
00:07:36потому что у них есть чёткая цель,
00:07:38которую они озвучили в блог-посте,
00:07:40опубликованном ранее в этом году — чёткая цель для этого фреймворка заключается в том,
00:07:45чтобы им было легко пользоваться большим языковым моделям.
00:07:49Идея явно в том,
00:07:50что вы сможете загружать статьи из документации или примеры в историю чата с большой языковой моделью,
00:07:56предоставлять информацию в качестве контекста,
00:07:59а затем LLM и помощники по коду помогут вам генерировать код.
00:08:03Конечно,
00:08:03им нужно это делать,
00:08:05потому что это совершенно новый фреймворк,
00:08:07и очевидно,
00:08:08что ни одна из существующих больших языковых моделей не обучалась на этой кодовой базе,
00:08:13и в обозримом будущем они не будут на ней обучаться,
00:08:16потому что восемьдесят процентов всех примеров фронтенд-кода — это React,
00:08:21как выясняется,
00:08:22особенно React с shadcn.
00:08:23Так что,
00:08:24конечно,
00:08:24им нужно найти другой способ позволить разработчикам познакомить большую языковую модель с тем,
00:08:30как писать код для Remix v3,
00:08:32что является ещё одной причиной,
00:08:34по которой они упрощают API,
00:08:36я бы предположил,
00:08:37и почему они хотят сделать его выразительным,
00:08:40простым для понимания и использования,
00:08:42потому что им должны пользоваться не только люди,
00:08:45но и модели — большие языковые модели.
00:08:48Так что это явно одна из целей, которые у них были.
00:08:51И вы можете увидеть это в примерах, которые они поделились.
00:08:54Кроме того,
00:08:55ещё одна цель,
00:08:56которую они многократно озвучивали в этом основном докладе,
00:09:00в этой презентации,
00:09:01заключается в том,
00:09:02что они используют веб-примитивы.
00:09:04Они используют возможности,
00:09:06доступные в современных браузерах,
00:09:08и не только в браузерах,
00:09:09но и на бэкенде,
00:09:10и я вернусь к бэкенду через пару секунд.
00:09:13Но они используют то, что встроено в браузер.
00:09:16Они в значительной степени полагаются на нативные события и встроенные возможности для отправки пользовательских событий.
00:09:23Так что вы можете создавать пользовательские события в браузере и отправлять их,
00:09:28и они в значительной степени на это полагаются.
00:09:31Они полагаются на сигналы отмены,
00:09:33чтобы сообщать,
00:09:34что компонент был размонтирован,
00:09:36например,
00:09:37и позволять вам автоматически останавливать ваши слушатели событий.
00:09:41Так что они используют то,
00:09:43что встроено в браузер,
00:09:44потому что я определённо чувствую,
00:09:46что мы,
00:09:47веб-разработчики,
00:09:48не поспеваем за тем,
00:09:49на что способны современные браузеры,
00:09:51и не только современные браузеры.
00:09:53Есть определённые возможности,
00:09:55которые существуют уже много лет,
00:09:57и мы их не используем.
00:09:59Мы можем даже не знать о них.
00:10:00Если вы действительно погрузитесь в то,
00:10:03что может предложить DOM,
00:10:04что могут предложить браузеры,
00:10:06какие API там доступны,
00:10:08там много чего можно сделать,
00:10:10и много вещей,
00:10:10для которых вам могут не понадобиться дополнительные сторонние библиотеки,
00:10:15и в конечном итоге именно это они пытаются использовать.
00:10:19Сохраняйте простоту и используйте эти встроенные возможности.
00:10:22В конце концов, таков их подход здесь.
00:10:25Теперь, как я сказал, это всё ещё фреймворк.
00:10:27Вы не будете создавать узлы DOM с помощью createElement и всех этих DOM API.
00:10:32Вместо этого,
00:10:33как упоминалось ранее,
00:10:34вы всё равно будете создавать компоненты,
00:10:37создавая функции и используя там JSX-код.
00:10:40Они показали всё это.
00:10:41Просто управление состоянием работает совершенно по-другому,
00:10:45в целом оно более лёгкое,
00:10:46у вас не будет хуков или чего-то подобного.
00:10:49Также потому,
00:10:50что эти функции компонентов не будут вызываться снова и снова,
00:10:54как это происходит в React.
00:10:55Вместо этого у вас будут два типа функций,
00:10:58и в зависимости от того,
00:10:59как вы их напишете,
00:11:01они будут либо вызваны только один раз,
00:11:03либо часть из них может вызываться несколько раз.
00:11:06И вот кое-что для людей,
00:11:08которые могли работать с React в 2017 году,
00:11:10я думаю,
00:11:11уже тогда вы могли помнить,
00:11:12что у нас было два типа компонентов.
00:11:15У нас были классовые компоненты с состоянием,
00:11:17которые могли управлять состоянием и обновляться при изменении этого состояния,
00:11:22и у нас были компоненты без состояния,
00:11:25и это были функции-компоненты в то время.
00:11:27А затем у нас появились хуки React,
00:11:30и все компоненты стали функциями-компонентами в конечном итоге,
00:11:33и они могут быть либо с состоянием,
00:11:36либо без состояния.
00:11:37Remix версии 3 использует этот старомодный подход React,
00:11:40так сказать,
00:11:41но не с классами или функциями,
00:11:43а вместо этого всегда функции,
00:11:45но разные типы функций.
00:11:46Если у вас есть функция,
00:11:48которая возвращает JSX,
00:11:49это компонент без состояния,
00:11:51в конце концов.
00:11:52Вы не можете вызвать там this.update и ожидать,
00:11:55что функция компонента будет выполнена снова.
00:11:57Так это работать не будет.
00:11:59Вы можете принимать пропсы,
00:12:01и если родительский компонент перерисовывается,
00:12:04ваша функция компонента будет выполнена снова и так далее.
00:12:07Но вы не можете управлять состоянием там.
00:12:10Вы превращаете функцию компонента в функцию компонента с состоянием,
00:12:14так сказать,
00:12:15не возвращая JSX-код,
00:12:16а вместо этого возвращая функцию,
00:12:18которая возвращает JSX-код.
00:12:20Так что функция компонента,
00:12:22которая содержит и возвращает функцию,
00:12:24которая затем возвращает JSX-код,
00:12:26тогда это будет или может быть компонентом с состоянием,
00:12:30и там,
00:12:30когда вы вызываете this.update,
00:12:32эта функция,
00:12:33которую вы вернули,
00:12:34будет выполнена снова,
00:12:35по крайней мере,
00:12:36так я это понял.
00:12:37Так что у нас есть разные типы компонентов,
00:12:40но опять же,
00:12:41в конечном итоге очень простой API,
00:12:43очень простой способ различать функции компонентов с состоянием или без состояния.
00:12:48А затем есть бэкенд,
00:12:49потому что Remix версии 3 — это не просто фронтенд-фреймворк.
00:12:53Вместо этого это фулстек-фреймворк.
00:12:55Он задуман как фулстек-фреймворк.
00:12:57Но,
00:12:58кстати,
00:12:58они также будут поставлять библиотеку компонентов,
00:13:01которая упростит создание сложных компонентов форм и так далее.
00:13:05Я также должен упомянуть об этом.
00:13:07Но вернёмся к бэкенду.
00:13:09Он также будет идти с бэкенд-частью.
00:13:11Он нацелен быть фулстек-фреймворком,
00:13:13фронтенд и бэкенд вместе.
00:13:15Опять же, без React полностью.
00:13:17Вместо этого они, так сказать, переделывают всё с нуля.
00:13:20Но на бэкенде вы получите роутер,
00:13:22довольно мощный и функциональный роутер,
00:13:25потому что,
00:13:25очевидно,
00:13:26поскольку они создавали React Router последние 10 лет,
00:13:29они много знают о роутинге.
00:13:31Так что вы получите мощный роутер,
00:13:33у вас будут возможности возвращать JSX-код и компоненты Remix в ваших маршрутах и гидратировать эти компоненты на сервере.
00:13:41Они придумали свою собственную альтернативу серверным компонентам React,
00:13:45более простую альтернативу,
00:13:47которая позволяет вам вернуть компонент,
00:13:49который может обновиться после отправки на клиент путём повторной загрузки частей DOM.
00:13:55Так что,
00:13:55например,
00:13:56когда вы удаляете что-то,
00:13:58вы могли бы отправить запрос с клиента на этот сервер и получить обратно HTML-код,
00:14:03который может быть снова гидратирован для обновления частей DOM.
00:14:07Так что они дают нам все эти возможности для создания быстрых современных одностраничных полнофункциональных приложений,
00:14:14точно так же,
00:14:15как вы можете с Next.js или режимом фреймворка React Router или другими фреймворками,
00:14:20такими как TanStack Start,
00:14:22но проще.
00:14:22Это чёткая цель — иметь простой способ создания таких приложений.
00:14:27Вот что они хотят сделать.
00:14:28В этой презентации есть ещё много чего.
00:14:31Она длинная, но это как бы самая важная часть, я бы сказал.
00:14:34Это мой главный вывод.
00:14:36Они хотят дать нам мощный простой фулстек-фреймворк.
00:14:39Они пишут его с нуля.
00:14:40У нас есть ручное обновление и так далее.
00:14:43Так что всё, что я описал, нужно ли нам это?.
00:14:56Это большой вопрос,
00:14:58и я думаю,
00:14:58ещё один большой вопрос — добьётся ли он успеха?
00:15:02Очевидно,
00:15:02на оба вопроса довольно сложно ответить,
00:15:05но я постараюсь сделать всё возможное.
00:15:07Нужно ли нам это??
00:15:08Что ж,
00:15:08я думаю,
00:15:09у нас есть множество JavaScript-фреймворков,
00:15:12и очевидно,
00:15:13будет много людей,
00:15:14которые скажут,
00:15:15что у нас их слишком много,
00:15:17так что тогда ответ — нет.
00:15:18Я всегда думал,
00:15:19даже в 2018 году,
00:15:20когда у нас каждую неделю появлялся новый фреймворк,
00:15:24даже тогда я думал,
00:15:25что всегда хорошо иметь инновации и пробовать новые идеи.
00:15:29Я не думаю,
00:15:30что нам нужен новый фреймворк,
00:15:32который просто похож на React с некоторыми крошечными различиями.
00:15:36Я не думаю, что нам это нужно.
00:15:38Но совершенно новый подход с этим ручным,
00:15:41запускаемым вручную обновлением и всеми этими другими мелочами,
00:15:45которые у них есть,
00:15:46я думаю,
00:15:46это отличная идея.
00:15:48Определённо стоит попробовать.
00:15:50Это звучит интересно.
00:15:51Это может дать нам более простую альтернативу React,
00:15:54который потрясающий,
00:15:56но стал довольно сложным за эти годы.
00:15:58Так что да, возможно, нам это нужно.
00:16:01Добьётся ли он успеха??
00:16:04Это,
00:16:04конечно,
00:16:05отдельный вопрос,
00:16:06особенно сейчас,
00:16:07в эпоху ИИ и больших языковых моделей.
00:16:09Очевидно,
00:16:10что эти модели обычно по умолчанию рекомендуют React.
00:16:13С другой стороны,
00:16:14люди,
00:16:15которые не умеют писать код,
00:16:17конечно,
00:16:17не являются целевой аудиторией,
00:16:19по крайней мере,
00:16:20не напрямую.
00:16:21Я к этому ещё вернусь.
00:16:22Так что здесь это неважно.
00:16:24Опытные разработчики,
00:16:25однако,
00:16:26могут быть заинтересованы в использовании Remix и просто направлять большую языковую модель с помощью официальных примеров и так далее,
00:16:34чтобы генерировать код Remix,
00:16:36просто потому что они хотят иметь более простую кодовую базу.
00:16:40Потому что в конечном итоге,
00:16:42как разработчики,
00:16:43мы всё ещё работаем с нашим кодом.
00:16:45Мы можем генерировать его большую часть,
00:16:48но мы по-прежнему контролируем большую языковую модель.
00:16:51Мы всё ещё дорабатываем части кода.
00:16:54Мы можем написать бо́льшие части этого кода,
00:16:56если у нас есть очень конкретная функция,
00:16:59которую ИИ просто не может правильно реализовать.
00:17:02Очевидно,
00:17:03что мы как разработчики всё ещё заботимся о технологическом стеке.
00:17:07Я,
00:17:07по крайней мере,
00:17:08забочусь,
00:17:09и я уверен,
00:17:10что некоторые из вас тоже.
00:17:11Так что здесь может быть интересно попробовать что-то другое,
00:17:15и пока этот фреймворк легко использовать с большими языковыми моделями,
00:17:20есть достаточно ресурсов,
00:17:21чтобы научить большую языковую модель,
00:17:24как его использовать.
00:17:25Что,
00:17:26конечно же,
00:17:26является чем-то,
00:17:27на чём они сосредоточены и имеют в приоритете.
00:17:30Это звучит хорошо для меня.
00:17:32Так что это определённо может дать им реальный шанс на успех.
00:17:36Это, очевидно, будет сложно.
00:17:38Но, эй, так было бы всегда, я полагаю.
00:17:40Так что я вижу шансы,
00:17:41но,
00:17:42конечно,
00:17:42это переполненный рынок,
00:17:44так сказать.
00:17:45Теперь,
00:17:45что важно,
00:17:46так это то,
00:17:46что Remix принадлежит Shopify.
00:17:48В 2022 году
00:17:52Shopify купил Remix, можно так сказать.
00:17:54Команда Remix стала частью Shopify.
00:17:57Теперь Shopify,
00:17:58очевидно,
00:17:58конечно,
00:17:59заинтересован в том,
00:18:00чтобы иметь фреймворк,
00:18:02который активно поддерживается и который используется хотя бы внутри Shopify.
00:18:07И под этим я имею в виду не только внутри компании для их маркетинговых и брендинговых страниц Shopify.
00:18:14Я имею в виду магазины Shopify.
00:18:16Вполне возможно,
00:18:18что цель состоит в том,
00:18:19чтобы иметь Remix в качестве опции для продавцов Shopify,
00:18:23которые хотят создавать свои собственные магазины на базе Shopify и которые хотят простой способ настройки этих магазинов и создания пользовательских витрин или страниц,
00:18:35которые составляют общий магазин.
00:18:37И у них,
00:18:38конечно,
00:18:38есть фреймворк,
00:18:39который прост в использовании и прост в использовании с большими языковыми моделями,
00:18:45что может быть огромным.
00:18:47Это,
00:18:47конечно,
00:18:48всё ещё не гарантия,
00:18:49но наличие Shopify за Remix,
00:18:51конечно,
00:18:52многого стоит,
00:18:53я полагаю.
00:18:53И поэтому я довольно позитивно отношусь к будущему Remix,
00:18:57также,
00:18:58конечно,
00:18:58потому что у них есть,
00:19:00может быть,
00:19:01небольшое,
00:19:01но очень энтузиастичное сообщество,
00:19:04насколько я могу судить.
00:19:06У них потрясающий послужной список,
00:19:08очевидно,
00:19:09разработав React Router и так далее.
00:19:11Так что да, я очень рад видеть, что мы получим.
00:19:14Я рад наконец использовать его сам,
00:19:17потому что прямо сейчас это не совсем возможно.
00:19:20И это мои мысли по этому поводу.
00:19:22Так что,
00:19:23как всегда,
00:19:23дайте мне знать,
00:19:25каковы ваши мысли,
00:19:26если вы думаете,
00:19:27что он нам нужен и победят ли они,
00:19:29и посмотрите всю четырёхчасовую часть конференции,
00:19:33если вам интересно и вы хотите узнать больше