Transcript

00:00:00We got a new JavaScript framework a full stack framework, but hear me out before you quit. It is pretty
00:00:08Interesting because it's by the remix people
00:00:12So the people that built remix JS Ryan Florence and Michael Jackson. No, not that Michael Jackson
00:00:18Which are also the original authors of react router. They shared their vision and actually the first
00:00:27Prototype you could say if some first demos of their brand new JavaScript framework
00:00:34Remix version 3 so it's not really a new name
00:00:38It's an existing name, but it is an entirely new framework and in this video
00:00:44I'll try to make sense of all of that
00:00:46I'll explain what it is
00:00:47and of course what my opinion on it is if you really need another JavaScript framework and what I think it's
00:00:55Chances of success or adoption will be now in an age where large language models
00:01:01Of course spit out react apps by default
00:01:04But but let's get there step by step what exactly is remix and why does it matter?
00:01:11remix in case you missed it is a
00:01:14react meta framework in the end an alternative to next JS and
00:01:20Remix was released a couple of years ago already remix version 2 was released. I think in
00:01:262022 if I'm not entirely mistaken and then in
00:01:302024
00:01:33Remix version 2 was essentially merged with react router
00:01:38Which is why now when using react router
00:01:41You can either use it as a routing library in react apps as you always did that still works
00:01:48It's still an amazing library for that, but you can also use it in
00:01:52framework mode to essentially spin up a full stack react application where react router is
00:01:59More than just a router where it also helps with data fetching data loading
00:02:03Data mutations just as remixed it because it is remix merged into react router, but that of course
00:02:10Brought up the question what will happen with remix then with the brand?
00:02:17remix and
00:02:18Turns out it'll become a new framework with version 3. It'll become a new framework which important is
00:02:26independent from react it's not a
00:02:31React meta framework. It's not another next JS alternative so to say instead
00:02:38It's a brand new full stack JavaScript framework written from the ground up from scratch
00:02:44With all the features and the API Ryan Florence and Michael Jackson would like to have in a new
00:02:51JavaScript framework so basically solving the problems they see and saw with the JavaScript ecosystem with
00:02:59The existing library and framework landscape if you will specifically of course with react since that is the main
00:03:06Library and framework depending on how you want to call it that we have out there. So
00:03:13What's this new remix all about well last Friday?
00:03:17We were able to get a first demo a first glimpse at the API
00:03:23And I'll link the full live stream where you can watch the entire announcement event
00:03:28Below this video of course in case you want to go through it all but be aware of the fact that it will be around
00:03:34four hours of
00:03:36Non-stop demo and explanation I watch them so that you don't have to if you don't want to but definitely take a look if you
00:03:43Want to learn more and here you see one of the main things this new?
00:03:49Framework will be about or let's say the main thing that made some waves on X this dot update
00:03:57Doesn't look too spectacular does it well it actually implies two things which?
00:04:04JavaScript developers are not really used to anymore a the usage of the this keyword
00:04:10I mean old people like me we learned all the
00:04:14quirks and features of this when we got started with
00:04:18JavaScript nowadays you don't really use it a lot in react you will probably never write this
00:04:24But it is a keyword built into JavaScript. They are leveraging that this keyword to expose
00:04:31Some api's to you. Where do you get access to those api's well you still write functions?
00:04:39So you don't write classes even though you might think you do with this keyword
00:04:42But when working with remix you are still building components, and you'll still use functions for that
00:04:48So just as you know it from react, but those component functions will look a bit different
00:04:53But let's get back to this dot update. I mentioned there are two important things about that. This is one of them
00:05:00Update is the other because in remix version 3
00:05:05You will have to tell the framework when it should update the screen when it should re-render
00:05:11And that is of course something we're not used to anymore
00:05:14Because in react but also in vue and angular you rely on the framework
00:05:20Determining for you when to update in react when you call set state
00:05:26You're assigning a new value to the state you're managing and that will then also trigger a ui update
00:05:33But not necessarily instantly instead react will do some batching will collect multiple state updates potentially and so on but
00:05:40Eventually it will update the ui so with set state you kind of tell react that it should update the ui
00:05:46But you mostly tell it that some value changes and that it's an effect of that that the ui will be updated that the ui will
00:05:54Be re-rendered with remix. It's different with version 3 of remix
00:05:58I should say there you'll manage your state and standard variables nothing special
00:06:04There is no use state hook or anything like that
00:06:06there are no hooks at all actually and you then just call this dot update whenever you
00:06:11Know that the ui should update so you can change a bunch of variables and not call this update and ui will not be updated
00:06:18Or you change a bunch of variables and you call this dot update and ui will update
00:06:23That's how it will work, and it seems a couple of people you know the internet well people on the internet
00:06:30They're horrible a couple of people got some problems with that. I'd say let's see how it works
00:06:36I mean, it's a new approach and the old approach definitely works well
00:06:42I guess there is a reason why it's being used in all those libraries and frameworks
00:06:46but the old approach definitely also has the potential to be a foot gun which
00:06:53can lead to
00:06:55situations where it's not really clear why something updates or does not update and in more complex apps and especially with newer versions of
00:07:04React which have become quite complex with lots of hooks and stuff it can be overwhelming to truly understand
00:07:10What's going on and that is one reason why they're going back to a simpler API where you have full control?
00:07:16They're also using the this keyword to expose a couple of other
00:07:20Apis to you, but not not a lot actually because
00:07:24clearly the idea is to keep the framework simple and focused and
00:07:29Give you a good developer experience and make it easy to use this framework also
00:07:36Because a clear goal and they stated that in a blog post which they shared earlier this year a clear goal for
00:07:44This framework is that it should be easy to use by large
00:07:50language models so the idea clearly is that you will be able to like feed Docs articles or examples into your
00:07:58Chat history with a large language model provide some information as context and then have LLM's and code assistants help you
00:08:06Generate the code because of course they need to do that because it is a brand new framework so
00:08:13Obviously none of the existing large language models were trained on this code base and for the foreseeable
00:08:20Future they won't be trained on it because eighty percent of all front-end code examples are react as it seems
00:08:27Specifically react with shed CN so of course they need to find another way of allowing
00:08:33Developers to make the large language model aware of how to write remix we free code
00:08:39Which is another reason why they're keeping the AI simple
00:08:42I would imagine and why they want to keep it expressive and easy to understand and easy to use because
00:08:48It's not just humans that should use it, but also
00:08:51Models large language models, so that is clearly one goal they had
00:08:57And you can see that in the examples they shared in addition another goal
00:09:02They have and they stated that multiple times in that
00:09:06Keynote in that presentation is that they're using web primitives
00:09:11They're using features that are available in modern browsers and not just browsers
00:09:16But also on the back end and I'll get to the back end in a couple of seconds
00:09:20But they're using things that are built into the browser
00:09:24They're relying heavily on native events and the built-in capabilities to dispatch custom events
00:09:31So you can create custom events in the browser and dispatch them and they're heavily relying on that
00:09:38they're relying on abort signals to communicate that a component was unmounted for example and to allow you to
00:09:46Stop your event listeners automatically. So they're using what's built into the browser because I
00:09:51Definitely feel like we web developers. We have not kept up with what modern browsers are able to do and not just modern browsers
00:10:01There are certain capabilities that have been there for years and we don't use them
00:10:05We might not even know about them if you really dive into
00:10:09What the DOM has to offer what browsers have to offer which API's are available there
00:10:14There's a lot you can do there and a lot of things where you might not need extra third-party
00:10:19Libraries and that's in the end what they're trying to leverage. Keep it simple and use those built-in capabilities stats in the end
00:10:26Their approach here now as I said, it's still a framework though
00:10:30You'll not create DOM nodes with create element and all those DOM API's instead as mentioned before
00:10:37You'll still create components by creating functions and by using JSX code in there. They showed all of that
00:10:44It's just that the state management works totally different that it's in general leaner that you won't have hooks or anything like that
00:10:52Also because those component functions will not be called again
00:10:57And again as it's the case in react instead you'll have two kinds of functions and depending on how you write them
00:11:04They'll either be called only once or a part of them might be called multiple times and here's something for the people that might have worked
00:11:11with react in
00:11:132000 I guess 17 already back then you might recall we had two types of components
00:11:19We had class based stateful
00:11:21components that could manage state and that could update when that state changed and we had state less
00:11:27components and that were the component functions back then and then we had react hooks and all
00:11:33Components became component functions eventually and they cannot be either stateful or a state less
00:11:39Remix version 3 is taking that old-school react approach so to say but not with classes or functions
00:11:46But instead always functions but different types of functions if you have a function that returns JSX. It's a state less
00:11:53component in the end you
00:11:55Can't call this update in there and expect the component function to be executed again. That's not how it will work
00:12:01You can accept props and if the parent component re-renders your component function will be executed again and so on
00:12:07But you can't manage state in there you do
00:12:11Turn a component function into a stateful component function so to say by not returning the JSX code
00:12:17But instead by returning a function that returns the JSX code
00:12:21So a component function that contains and returns a function that then returns the JSX code
00:12:27that will then be or that can then be a stateful component and
00:12:31There when you call this dot update that function you returned will be executed again, at least that's how I understood it
00:12:38so we have different component types, but again a very simple API in the end a very simple way of
00:12:44Differentiating between stateful or state less component functions
00:12:48And then there's the backend because remix version 3 is not just a front-end
00:12:54Framework instead. It's a full stack framework. It's intended to be a full stack framework
00:12:59But by the way, they will also be shipping a component library that makes it simpler to build complex form components and so on
00:13:07I should also mention this but back to the back end. It will also come with a back-end part
00:13:12It aims to be a full stack framework front-end and back-end combined
00:13:17Again without react entirely instead. They're rebelling it all from scratch so to say but on the back end
00:13:23You'll get a router a pretty capable powerful router because obviously since they built react router for the last 10 years
00:13:30They know a lot about routing so you'll get a powerful router
00:13:34you get the capabilities to return JSX code and remix components in your routes and
00:13:42Hydrate those components on the server
00:13:45They come up with their own alternative to react server components a simpler alternative
00:13:52Which allows you to return a component which made an update after being served on the client by
00:13:59Re-fetching parts of the DOM. So when you delete something for example, you could send a request from the client to that server and get back some
00:14:07HTML code that can be hydrated again to update parts of the DOM
00:14:13So they are giving us all these features to build
00:14:17snappy modern single page like full stack
00:14:21applications just as you can with next JS or
00:14:26the react router framework mode or other frameworks like tan stack start but
00:14:31Simpler, that's the clear goal have a simple way of building those apps. That's what they want to do
00:14:39There is more in this presentation. It's long but that is kind of the the most important part
00:14:45I'd say that's my main takeaway. They want to give us a powerful simple full stack framework. They're writing it from scratch
00:14:52We have manual updating and so on. So everything I described do we need that?
00:14:56That's the big question and I guess another big question. Will it succeed?
00:15:02Obviously both questions are pretty hard to answer, but I'll try my best
00:15:06Do we need that?
00:15:08Well, I think we have a lot of JavaScript frameworks out there and clearly there will be many people that say we have too many
00:15:16so the answer then is no I
00:15:19Always thought even back in 2018 when we had a new framework every week even back then I thought
00:15:26That it's always good to have innovation and to try out new ideas. I don't think we need a new framework
00:15:34That's just like react with some tiny differences
00:15:37I don't think we need that but a brand new approach with that manual
00:15:43Manually triggered updating and all these other little things. They have I think that is a great idea
00:15:49It's definitely worth a shot. It sounds interesting
00:15:54It might give us a simpler alternative to react which is amazing, but has become quite complex over the years
00:16:00So yeah, we might need that. Will it succeed?
00:16:04That is another question, of course because especially now in the age of AI and large language models
00:16:11Obviously those models will typically recommend react by default
00:16:17Now on the other hand people that don't know how to write code
00:16:20Of course are not the target audience necessarily at least not directly. I'll get back to that
00:16:26So it doesn't matter there now
00:16:29experienced developers
00:16:30however
00:16:31might be interested in using remix and
00:16:33Simply steer the large language model with help of official examples and so on to generate remix code
00:16:41simply because they want to have a simpler code base because ultimately as developers we still
00:16:47Touch our code. We might generate large parts of it, but we still control the large language model
00:16:54We still tweak parts of the code
00:16:56We might write bigger parts of that code if we have a very specific feature in mind that the AI just can't seem to get right
00:17:03So obviously we still care about the tech stack as developers
00:17:07I still care at least and I'm sure some of you do too. So there it might be
00:17:12Interesting to try out something else and as long as that framework is easy to use with large language models
00:17:19There are enough resources to teach the large language model how to use it
00:17:23Which of course is something they seem to focus and seem to have as a priority
00:17:28That sounds good to me. So that might definitely give them a valid chance of success
00:17:35It will obviously be difficult. But hey, that would have always been the case, I guess so
00:17:40I see chances but of course, it's a it's a crowded market to put it like this now
00:17:46What's important though? Is that remix belongs to Shopify back in 2022?
00:17:52Shopify bought
00:17:55remakes you could say so
00:17:57remakes the remix team became part of Shopify now Shopify
00:18:01Clearly of course is interested in
00:18:05Having a framework that's actively maintained and that's being used at least inside Shopify and with that
00:18:11I don't just mean inside the company for their Shopify
00:18:15Marketing and branding pages. I mean for the Shopify shops
00:18:21it's definitely possible that the goal is to
00:18:24have remix as an option for
00:18:27Shopify vendors that wanna build their own shops on top of Shopify and that want an easy way of
00:18:35adjusting those shops and building custom
00:18:38Shop fronts or pages that make up the overall shop and they are of course having a framework
00:18:44That's easy to use and easy to use with large language models could be huge
00:18:49It's still not a guarantee, of course
00:18:52but having Shopify behind remix of course is worth a lot I would guess and
00:18:59therefore I'm quite positive about the future of remix also, of course because they have a maybe small but very
00:19:07Enthusiastic community as far as I can tell they have an awesome track record, obviously
00:19:13Having developed react router and so on. So yeah, I'm super excited to see
00:19:18what we'll get I'm excited to finally use it myself because right now that's not really possible and
00:19:26These are my thoughts on it. So as always let me know what your thoughts are if you think we need it and if they'll
00:19:32win and
00:19:33Watch the entire four hour part of the conference if you're interested and want to learn more

Key Takeaway

Remix v3 is a brand new full-stack JavaScript framework from the React Router creators that simplifies development through manual UI updates, web primitives, and LLM-friendly design, backed by Shopify and aimed at providing a simpler alternative to React's increasing complexity.

Highlights

Remix v3 is a completely new full-stack JavaScript framework built from scratch by the React Router team, independent from React

Features manual UI updates via 'this.update()' instead of automatic reactivity, giving developers explicit control over re-renders

Designed to be simple and easy for Large Language Models to understand and generate code, addressing AI-assisted development

Uses web primitives and native browser APIs (events, abort signals) rather than custom abstractions

Shopify owns Remix, potentially positioning it as a framework for Shopify vendors and custom shop development

Includes both stateful and stateless components using different function patterns, similar to early React but without classes

Provides full-stack capabilities with server-side rendering, hydration, and an alternative to React Server Components

Timeline

Introduction to Remix v3 and Its Context

The video introduces Remix v3 as a new full-stack JavaScript framework created by Ryan Florence and Michael Jackson, the original authors of React Router and Remix JS. The speaker acknowledges viewer skepticism about yet another JavaScript framework but emphasizes this one is particularly interesting given its creators' credentials. The framework represents a complete reimagining rather than an iteration, as Remix v2 was merged with React Router in 2024. This sets the stage for understanding why the Remix brand is being repurposed for an entirely new framework built from scratch, independent of React.

Background: Remix's Evolution and React Router Integration

This section explains Remix's history and evolution to provide context for the new framework. Remix was originally released as a React meta-framework around 2022, serving as an alternative to Next.js. In 2024, Remix v2 was merged with React Router, allowing React Router to function both as a traditional routing library and in 'framework mode' for full-stack React applications. This merger raised questions about the future of the Remix brand, which is now being answered with v3 as a completely new framework. The speaker emphasizes that unlike its predecessor, Remix v3 is not a React meta-framework but rather an independent full-stack JavaScript framework written from scratch, incorporating all the features and APIs the creators wanted to implement based on their extensive experience.

The Manual Update Approach: 'this.update()' Explained

The video dives into one of Remix v3's most controversial features: the 'this.update()' method that requires developers to explicitly trigger UI updates. Unlike React, Vue, or Angular where frameworks automatically determine when to re-render, Remix requires manual calls to 'this.update()' after changing state variables. The speaker explains that developers manage state in standard variables without hooks like useState, and they have complete control over when the UI updates - you can change multiple variables without updates, or trigger an update when ready. While acknowledging that this approach differs from established patterns and has drawn criticism online, the speaker suggests it could solve problems with the automatic approach, particularly in complex apps where it's unclear why something updates or doesn't. The manual control aims to provide a simpler, more predictable API where developers have full transparency.

Design Philosophy: Web Primitives and LLM Compatibility

This section explores Remix v3's core design principles, particularly its focus on web primitives and large language model compatibility. The framework heavily relies on native browser capabilities like built-in event systems, custom event dispatching, and abort signals for handling component unmounting, rather than creating custom abstractions. The creators stated in a blog post that a clear goal is making the framework easy for LLMs to use, as none of the existing models were trained on this new codebase and 80% of frontend examples are React-based. The simple, expressive API is designed so developers can feed documentation into chat contexts and have AI assistants generate code effectively. The speaker notes that web developers haven't kept up with modern browser capabilities that have existed for years, and Remix aims to leverage these built-in features to keep the framework lean and avoid unnecessary third-party libraries.

Component Architecture and State Management

The framework's component system is explained, showing how it uses JSX and functions rather than DOM manipulation APIs, but with a crucial distinction from React. Remix v3 introduces two types of component functions reminiscent of pre-hooks React: stateless components that simply return JSX, and stateful components that return a function which then returns JSX. The outer function is called once, while the inner function can be re-executed when 'this.update()' is called. Stateless components can accept props and re-render when parents update, but cannot manage their own state. This creates a clear, simple distinction between component types without requiring classes or hooks. The speaker emphasizes that component functions won't be called repeatedly like in React; instead, only the returned function in stateful components gets re-executed, providing a more controlled and predictable rendering model.

Full-Stack Capabilities and Server-Side Features

Remix v3 is positioned as a full-stack framework with comprehensive backend capabilities, not just a frontend solution. Building on the team's decade of router development experience, it includes a powerful router for the backend with support for returning JSX and hydrating Remix components on the server. The framework introduces its own alternative to React Server Components that allows simpler server-side rendering patterns. When clients send requests (like deleting an item), the server can return HTML that gets hydrated to update parts of the DOM, enabling snappy, modern single-page-application-like experiences. Additionally, they're shipping a component library to simplify building complex forms. The goal is to provide all the features available in frameworks like Next.js, React Router framework mode, or TanStack Start, but with a dramatically simpler API and development experience, maintaining consistency with the framework's overall philosophy of simplicity.

Market Viability: Do We Need Another Framework?

The speaker addresses the critical question of whether the JavaScript ecosystem needs another framework, acknowledging the crowded market and common sentiment of 'too many frameworks.' However, he argues that innovation and trying new ideas is valuable, distinguishing Remix v3 from frameworks that merely copy React with minor differences. The manual update approach and other novel features represent genuinely new ideas worth exploring. The speaker believes it could provide a simpler alternative to React, which has grown increasingly complex over the years. Regarding AI concerns, he notes that while LLMs typically recommend React, experienced developers remain the primary audience. These developers can steer LLMs to generate Remix code using official examples, as they still touch, tweak, and write code themselves despite AI assistance. The speaker emphasizes that developers still care about their tech stack and having a simple, AI-friendly framework could be compelling.

Success Factors: Shopify Backing and Future Outlook

The final section analyzes Remix v3's chances of success, with particular emphasis on Shopify's ownership as a crucial advantage. Shopify acquired Remix in 2022, and the speaker speculates that the framework could become an option for Shopify vendors building custom shop fronts and pages. Having an easy-to-use framework that works well with LLMs could be transformative for the Shopify ecosystem, though success isn't guaranteed. Beyond corporate backing, Remix has a small but enthusiastic community and the creators have an excellent track record from developing React Router. The speaker expresses excitement about eventually using the framework himself, noting it's not currently available for public use. He concludes optimistically about Remix's potential while acknowledging the challenges of entering a crowded market, encouraging viewers to share their thoughts on whether the framework is needed and whether it will succeed, and pointing them to the full four-hour conference presentation for more details.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video