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
Community Posts
No posts yet. Be the first to write about this video!
Write about this video