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