Episode 130 / 2022.04.25
Andrew Welch, Jennifer Blumberg, Ryan Irelan
On this episode, we talk with Michael Jackson (no, not that one) about Remix, the “center stack” web framework that embraces the web platform, rather than attempting to replace it.
We discuss how Remix is an outgrowth of the work that he and Ryan Florence did on React Router, and how Remix attempts to bring balance back to the web world by being a stack that spans the frontend and the backend.
Remix is a web framework built in TypeScript, which allows you to use as much (or even zero!) JavaScript on the frontend as you like, balanced with SSR JavaScript on the backend.
It’s a refreshing take on web development that harkens back to PHP and Ruby-based frameworks, but using the isomorphic superpowers that only JavaScript has!
- Remix.run
- Remix on GitHub
- Remix on Twitter
- The Basics of the Cockpit
- Remix Quickstart
- Is “Isomorphic JavaScript” a good term?
- Universal JavaScript
- There’s a chance I believe client side routing on the web is usually not preferred.
- React JS
- React usage statistics
- Laravel
- Remix goes open source
- Remix OSS
- Application Holotypes
- What is Trepanation?
- deno
- JSX
- MDN Docs
- Next.js
Andrew: Hello welcome to devmo fm a podcast dedicated to the tools techniques and technologies used in modern web development I'm Andrew Welch from and ny studio one zero seven
jen: I'm Jennifer Bloomberg from next solutions in Seattle.
Ryan Irelan: So I'm Ryan Ireland from http://ryanirrewin.com
Andrew: That that was not your fault Jennifer Ryan was supposed to queue in there and today we have on Michael Jackson entrepreneur co-author of remix run in a former life I believe somehow involved in something called react router how you doing Michael.
Michael: Doing great. Thank you so much for having me on the podcast. It's a pleasure to be here.
Andrew: And today we want to talk about this new creation of yours am I correct to list you as co-author of remix dot run is that how you want to be identified here all right? So if you were at a private airstrip in Memphis Tennessee.
Michael: Sure man yeah that that what that works great.
Andrew: And a nice sultry afternoon. You're out there with a colleague who wanted to take you up in his private plane and you hadvisions of this beautiful jet with cocktails. Everything you walk out onto the tarmac and you see this plane sitting there that looks like it could be abandoned on a beach somewhere and in the old Tv show lost. It has experimental written in huge letters on the side of the plane as you walk around it. You see that the center stick appears to be a cutoff broomstick that's sitting in the middle and there's duct tape all around the edges of the plane you look at him a little bit nervously and he says hey look. Ah, you ready to go up in the plane or would you rather tell me about remix run. What would you say.
Michael: I would say let's go for a flight. Yeah, let's do it man. Yeah.
Andrew: Ah, he looks at you says are you crazy? you're going up in this thing. no no I want to know I want you to tell me what remix run is in 2 sentences.
Michael: Well yeah, yeah, so ah so I love your story. Um, and and I want I want I want to actually touch on that. But if if I had to give you just 2 sentences for what remix run is I would basically say remix is.
Andrew: Yep.
Michael: A web framework for building. Awesome websites that are based on web standards and it is really an extension of react router which is a project that we've been working on since 14 which sounds a little weird to say now that we've been working on that thing for.
Andrew: Wow.
Michael: 8 years but but we totally have yeah you know, react kind of came onto the scene in 2013. Um, nobody remembers it now. But at that time in 2013 everybody hated react I was working at Twitter at the time I had a boss who. Was really really well respectced in the industry and I remember he he attended the jsconf where they they talked about react for the very first time and I think it was jsconf I can't remember the exact conference but I yeah I think that was it anyway. And I remember him tweeting something like because because when you work at Twitter all of your communicate you you cease talking to people face to face all of your communication is just tweets so anyway I remember him tweeting something to the effect of you know Html. Like Html and Javascript are we really back to this you know because they showed the sort of jsx syntax and and I remember you know that was sort of the the reaction that a lot of people had to react at that time. So. So a lot of people just missed it including me. We all missed the boat in 2013 when it first came along.
Andrew: I Think there are a decent number of people that still dismiss it. It all depends on where you're coming from right? So one of the the fun things about Web development is there are a wide variety of ways that you can approach building the same thing.
Michael: Yeah, yeah.
Andrew: At the end of the day we're we're just taking some data and we're forming some html and we're getting it to the browser somehow so it can render it. But you mentioned 2 things in 1 sentence that I have rarely heard use together which is web standards and react use those 2 words together in the same sentence now.
Michael: Ah, yeah, yeah.
Andrew: Some of the developers that are are listening are probably from a more traditional background where maybe they're using a ph p framework or a Cms that the request comes into the server it renders the page. Maybe it's using a templating language and then it goes back to the browser. And if they use Javascript. It's just to sprinkle a little bit of interaction in there and then you have other developers that are listening that are full on the javascript framework bandwagon they're using react or they're using vue and maybe they're using a framework like nuxt or next along with it and. Potentially they're using something like Gatsby which is pre-rendering all of the pages ahead of time we're still doing the same work right? So if we're doing something like Gatsby where we're using a jamstack approach and it's pre-rendering all of the pages everything so needs to be rendered, but it's being done either on a build server or on your local. Development machine or something like that if you're using a php framework it comes in and maybe there's a templating language like twig or or blade for laravel and it renders the page and and delivers it how does remix fit into this in terms of so first of all, why are there. Did you say web standards along with react and then secondly how does remix fit into this where stuff is done and how stuff is rendered thing I'm I'm a little confused.
Michael: Yeah, ah, yeah, no thank you, thank you for asking First of all I want to say that I 100 % sympathize with anybody who feels the way that you do, um, you know web standards react ah people. You know the the the react team for example, has been like very slow to like include really good support for web components. You know there are lots of things that about react that that yeah you know a lot of web standards advocates. Just really don't like um 2 thing that I do to sort of ah you know keep keep myself grounded because I to be honest I love react? Um, but 1 thing that I do to sort of keep myself grounded and keep you know in touch with a lot of the industry is is i. Love to talk to people who don't feel the same way that I do about it. 1 of those people is Alex Russell who's a you know you a developer advocate over at Google and so I've been kind of like dming him about you know. Remix and the stuff that we're doing to just kind of try and make sure that we're not going too much off the rails and I was really actually really really happy to see recently when um when he tweeted he said you know I'm actually really aligned with what the people at remix are doing um, you know that the.
Andrew: So.
Michael: Thing that like I don't use react because I hate the web I use like I've I've been developing for the web long before react ever came along the very the the very first thing I ever built for the web was back in 2008
Andrew: Michael why do you hate the web.
Michael: It was this thing called shadowbox it was ah it was actually one of the very first light boxes. So nowadays you see the the modal thing and you click an image or whatever and the modal pops up nowadays they're they're they're super annoying because like lots of times they'll do it when you. You know you mouse off the document or whatever this modal pops up. It's super annoying but but shadowbox was actually one of the very first ones that you know that that had actually came along so that was anyway I I just I'm um, I'm just trying to say like I've I've been around for a while and been developing websites for a long time long before react came along. Um. Reason I like to use react is because of its capability for managing state I just love the virtual Dom and I love the the ability to build a component that's got a little bit of state and then the the ability to compose them together and we don't have to.
Andrew: Right.
Andrew: I Think the visceral reaction to react like the people that I'm talking about who have a negative impression of either react or viewer any of these frontend Frameworks like you can kind of lump them all together is they are coming from the experience where they've loaded a page.
Michael: M.
Andrew: And it was done in react. It's a maybe it's a marketing brochure page and they see nothing but white as they load the page because this massive amount of javascript is coming down the pike. The actual html is just Div id equals app right? So and then that's all there is.
Michael: Yeah, yeah, oh yeah.
Michael: Oh yeah, yeah.
Andrew: And the experience is terrible because that's where it originally? yeah this was dialing back many years ago there are lots of different ways that it can be used now. But I think some people that was their first impression is these all client side react based applications for sites that there was no reason for.
Michael: Um, yeah, and it's.
Andrew: To be that way but it sounds like remix is taking ah a different approach to this right? It's not all this is not just a framework layered on top of react that renders everything inside of your browser.
Michael: Yeah, exactly. So so yeah, so I actually sympathize with those people as well. Um, that the web shouldn't be like that you shouldn't have ah an empty body tag and a bunch of spinners while you wait for your data load. Um.
Andrew: Right.
Michael: 1 of the this is like like the whole reason we're building remix is because we love react but a lot of the tools out there for building websites with react end up you end up with ah something like what you just described right? You end up with. Ah, blank page. You end up with a bunch of spinners. You end up with megabytes of Javascript. Um, react is like this very capable tool that you can build really really terrible experiences with um, you can also build I'll point out really great experiences with it. But it turns out you need some kind of like. Bumpers in the bowling lane to kind of kind of guide you a little bit with it. So so yeah, so our our philosophy really is don't abandon the web right use the web for what it's good at remix is a a server rendered framework. So. You know at at the very very minimal end of react. We like to say or sorry remix we like to say remix scales up and it scales down all the way down at the bottom and if you want to scale it all the way back. You don't even have to have Javascript on the page at all in remix. And yeah.
Andrew: Oho So we're we're talking about a framework that uses react and it can render a page that when someone loads it. There's no javascript on it.
Michael: Yeah. Yeah, absolutely so so in that situation we would just be using react for the server render we just generate a bunch of html kick it out. That's great, but it's not we don't stop there. Okay so there's there's this this weird like. Ah, you know people talk about like the backend and the frontend people talk about you know apps that are full stack. 1 thing that we've kind of started saying about remix is that we feel like we're a kind of center stack. What does that mean? so you know remix actually since we know about the full stack remix will actually. Give you things like you know our our data abstractions both for data reading and data writing um are are fully based on web standards. So for example, our data mutations api is completely based around html forms. What does that mean that means. Even if you do scale it all the way back scale remix all the way down and don't have any Javascript on the page at all our data mutations api still works because it's based on html forms right now we yeah yeah.
Andrew: So just so just like an old school ph p framework or Cms if you have a bunch of fields where you're going to change stuff. They're going to be a bunch of inputs with values and a form and you hit submit and it goes to the server and something happens. It's not this crazy Javascripty thing that's going on.
Michael: Um, yes, absolutely yeah, it scales all the way back that that way. Um and and but what.
Andrew: You know with an XHR to some graphql endpoint. Whatever you're telling me that that's how remix works too and.
Michael: You know that's not where like remix really shines. But but absolutely like you can you can do it that way. The the nice thing is and the the reason that we describe ourselves as Center stack is that as you start to scale it up and as you start to like add some interactivity to the page. Let's say you wanted to do like a bit of optimistic Ui right? I just. Created a new record in the database and I want to show it in the page immediately after they click the submit button I don't want to wait until I know for sure that that record has been saved I'm going to be optimistic and just assume that the you know that the save succeeded. So So of course you're going to need some javascript on the page to do that right? so.
Andrew: Right.
Michael: So what do you have to do in order to get that on the page. Do you have to completely change your programming model so in remix all all you do is you you add the scripts component to the page which now says okay now react is on the page and now we're gonna hydrate right? Your your html didn't didn't actually change. But now we're. All you did was insert 1 little scripts element into the page now you're fully hydrated and now your components you know can come to life. So now they have state client side state and you can do client-side routing so in that situation we would give you you know you wanted to do some optimistic ui we would give you like a little um. The the hook is called a ah use fetcher or or sorry use transition use fetcher is for for scaling even further up, but the the hook that we would give you here is use transition which would let you know you know as soon as the form is submitted it lets you know things like. You know the state of the transition that that you know are we are we still waiting on the response from the server or not what was the data that we submitted to the server when we get the response back. What does the response look like so that we can you know manage ah, a nice little optimistic ui there. Um, yeah.
Andrew: So you used a term that I just want to make sure we clarify before we continue which is hydrating So let me see if I can explain this and you tell me where I've got it wrong, but essentially if you're rendering javascript a javascript component on the server I must start over.
Michael: Yeah.
Andrew: If You're rendering a react component on the server you have the state of that component and it will render its html and great. You deliver it to the client and the client will have maybe the same react component there but it doesn't have the state right? You return the html but you didn't return the data. That was used to render that html my understanding that the hydration part of things is taking the data that was used to render the server-side component sending it along to the client. And allowing that data to then be in the javascript component that is in the client is that right.
Michael: Yeah that's right? So the hydrate step is basically where react takes a look at the html that the server sent back and takes a look at you know the html that when when you when you when you say hydrate you basically regenerate a virtual dom or a virtual. You know representation of all the elements that should be in the page and it just sort of looks at the 2 and says is this is this server that was is a html that was sent from the server is that consistent with you know what? this what this? Ah what what? the developer is now telling me that the page should look like.
Andrew: Yeah, and Jennifer is someone who was coming from doing more traditional websites using Krafcms which uses php as a backend and then has a templating language called Twig and she has recently been I say recently the last couple of years.
Michael: Um.
Andrew: Has been doing some things with nuxt which is very similar to next Js and I remember Jennifer we had a ah conversation where you looked at what was going on you like looked at the source and you saw the the html in there but you also saw this window object.
jen: Next.
Andrew: Just had this massive Json array of data in it that was delivered as part of the the whole package and that was the basically the state data that was used to hydrate the entire page so you would have you would have your html you would have your Javascript and you would also have this massive Json Data Object and it would all be part of the response that comes in and and Jennifer do you remember that when you kind of discovered that and the the fact that that actual hydration step actually can be blocking and can take time to.
jen: Yeah I do remember that um and that that was a couple years ago now and I think we were looking at next js not so much nox all right? Maybe I don't remember as in 99% of the front end frameworks that I've been working with in the last couple of years been with next js and yeah I mean I was making.
Andrew: You yep.
jen: Comfortable php apps for years and years with a light sprinkling of Javascript when I absolutely had to and was sort of dragged kicking and screaming into the jamstack world. Um, and it it got a lot better actually over time, especially as nextjs improved and then typescript became a thing and now I'm sort of comfy in that world and. Almost when I when I discovered remix and I almost despaired because I thought oh no, why do we need another javascript framework and what's going on and and I've sort of dragged my team as well into the next Js world and and now it's now you're telling me that this is not the way there. There is another way. And and this is the way now is that is that what I'm hearing here.
Michael: Yeah, so so if you look at if you look at the next approach. Um, like they don't talk about progressive enhancement. They they never talk about it because it doesn't exist. It's not something that they place a lot of emphasis on or or even think about. Um, in the in the situation that you just described right? if the hydrate takes a long time or even if you're you're using the app and you know you're on a train and you go into a tunnel and and the javascript fails to load or you're on a mobile device and the javascript fails to load for some reason or the hydrate takes forever and they've already tapped a button. Um, and your next step that doesn't work right? your your app totally fails right? exactly exactly in a remix app or or really just in a progressively enhanced app. Let's back up 1 step right.
Andrew: That that's when you see if the windows on the train open so you can pitch your phone out the window. Yeah, right? okay.
Michael: And a progressively enhanced app where all you're doing is using Javascript to enhance the user experience. Um everything that you need to know everything that you need to do is already available before Javascript is even parsed or or loaded. So if if you if you want to tap that button or tap a link or submit a form or or do whatever. You know interact with the page in some way. It's still going to work. You're not going to have the enhanced experience because the page has been progressively enhanced so you know the the interaction is still going to work as long as you can actually download the htmo does that make sense. So so yeah, so so what I'm saying essentially is yeah there is a different approach There is a better approach. Then what next and Gatsby have traditionally prescribed and it's the progressively enhanced approach that we're that we're by default using in remix.
Andrew: So in order to put this into a mental mind space that makes sense to me I've been thinking about remix and how I would categorize it because it's not a new front end framework necessarily. It's leveraging react the way that I have been couching. It. Is that it's more similar to Lril on the php side and laravell is essentially a bunch of components that you can use together. It will do things like routing it will. It has a templating engine for rendering things in remix's case. Let's just simplify it and call react the templating. Engine I realize it's more than that and I know that state is a huge part of it but it really seems like it is something that you kind of nestle react into along with your custom code and it takes care of a lot of the hard things for you so it feels kind of like a web framework like laravelle. But using javascript and using the superpower that only Javascript has which is that it is isomorphic so I want to ask you Michael is isomorphic javascript a good term because I stumbled upon a blog post from you from 2015.
Michael: Ah, ah oh gosh.
Andrew: You said you didn't like the term isomorphic javascript. So why don't you tell us what it is and and whether you still don't like it or not.
Michael: You know I'm an idiot don't don't don't don't pay any attention to that post I committed the the the Universal Sin I feel like that everybody tries to do when they try and invent something new and they're really just adding to the pile. Um.
Andrew: Oh that's something I've seen over and over again so again I'm coming from development from a little bit of a different background I was a ios and mac developer for a long time and then I got into web development and I learned a whole bunch about server-side frameworks like Php and ruby and that kind of thing.
Michael: Ah, yeah, yeah.
Michael: Yeah.
Andrew: And then I've been doing a bunch with frontend frameworks and the the thing that I've been noticing over and over again is things are getting reinvented in Js land that have been around in other ecosystems for forever and they just get some fancy new name. But but tell us what isomorphic javascript is.
Michael: Um, yeah, yeah, yeah, yeah, so so this actually you know you you talked a little bit about laravele you talked to you know about isomorphic js so. You know this really gets to the point of what I was something I was saying earlier is why we kind of describe ourselves as center stack right? because you know react was react was kind of born on the the front end. Um, you know if if you worked at Facebook.
Andrew: So.
Michael: Ah, you know all of their html is generated using their php stack but they wanted to sort of enrich the front end of things right? that you know they're not. They're not you know, generating their views with node Js at at Facebook right? So you know they're not running isomorphic javascript there. It's it's a ph p backend right.
Andrew: I Feel like some developer in there or maybe some higher up was just like you know what we can save a ton of money on servers. Let's just put all of the work on all of the clients that are using our stuff. Yeah, yeah.
Michael: In all the browsers. Yeah, yeah, yeah, it's great. Um, so so so you know what? what you know react router also likewise the project that that remix is built on which by the way is is being used by. A lot of people right? So some people say like well oh yeah, next Js is like react router actually has 3 times the usage of nextjs like all of nextjs has a lot more usage than vue ah, and I'm not I'm not trying to like brag here I'm just trying to give you like some sense of the the scale that we're already at with remix.
Andrew: Yep.
Michael: Right? A lot of the people who are using like we estimate that just based on npm downloads about 7 out of 10 people who are using react dom are building with react router. So we're we're coming from a background of years of experience of building apps on the front end with with react router. And and what is react router doing for you. Well it's it's giving you things like you know it's it's helping you build like really fancy apps like if if you've used the http://netflix.com app or you know the the Twitter app or you know a lot of stuff from airbnb that shopify is using react router github's using react router. Like a lot of the the apps that you use all the time you know these client-side apps are built using react router um, and and what remix is doing is remix is saying okay, what is what is this? What would a full stack app look like a progressively enhanced web app look like if we. If we did this isomorphic thing right? We know how to do stuff on the client. We know how to do stuff on the client. We've been doing it for years. What does it look like yeah and what kind of optimize optimizations. Can we unlock if we go back to the server and and we own now like the full stack. Um, and you know, um and so remix gives you things like you know we'll we'll give you the Bundler we'll give you the compiler. We'll give you things like cookies and database and session storage. You know will give you things like ah you know full control over the http output the headers and the you know the ah the html the streaming. all all of that kind of stuff so when you when you do have full control over over both sides of the stack. You can do some really cool stuff and this is this is I think why a lot of ssg apps or like kind of the existing state of. Ah, javascript frameworks you know, Gatsby and next have really promoted they've and they've pushed pretty hard for for Ssg and and what you do when you're when you're taking that approach is you're essentially doing a lot of stuff at build time right? and there's and there's only so much that you can know about what should be on the page at build time.
Andrew: Right.
Michael: You don't know who's using your app. You don't know what the request looks like you don't know what the session is you don't know any of that stuff at build Time. All you know is the data that's in your database already and so you only really know half the story. So So what you end up doing is you end up sending a lot of blank Pages. You end up sending a lot of spinners. Like hold on we you know we're going to. We're We're going to find out who's using our app once they actually request the page and then we'll know what to show them then we'll know what products to put in once they punch the the query into the search bar then we'll know what to put in the in the product page but at build time we have no clue.
Andrew: Right.
Michael: To put in the product page. You know that that that kind of thing and so what remix does is remix says. Okay, we're going to go. We're going to go really full stack here. We're going to generate the full html response at request time we're going to know exactly what that search query looks like we're going to fetch the list of products from the database we're going to put it in the html here you go. By the way you don't need to hydrate that page if you don't want to you don't need to get into the hydrate step. You can scale it all the way down or if you do want to scale it back up. Yeah, throw some Javascript on the page have a nice transition have some optimistic you I do your Ajax thing. do whatever you want to do you know I telling you early I've been in this industry a while I was at Twitter in 2012 when we launched a new version of http://twitter.com I don't know how long y'all have been using Twitter for me, it's been a lifelong vice I always I always tell my partner Ryan I'm like I will know that I am successful. Day that I can delete my Twitter account and I hope you and I are all like in real life friends because that day is is going to come for me someday. But but anyway I was at Twitter in 2012 and there was a team at Twitter that built this thing called New Twitter and it was like ooh new Twitter. What's new Twitter new Twitter was completely client-side rendered new Twitter was an empty body tag with a div in there that said here's the root good luck and and what we didn't realize at Twitter at that point in time is that there were people I mean think about mobile phones in 2012.
Andrew: Nice.
Michael: Think about how much javascript you could run on your iphone v 2 you know like it was a terrible experience for so many people basically anybody who wasn't on a really nice fast connection had a terrible experience with the Twitter web app. Luckily we had the the it's you know. Twitter's tried to kill itself many times but it it's still it keeps killing. Ah so so what do we do? We immediately reverted back and then we published a blog post in 2012 that said hey, Twitter's going back to server rendering and it was like it was like this like flag in the ground like client rendering doesn't work. We're going back to server rendering and I had always wished. Ever since that point in time that was ten years ago I've wished that I had like this magic lever. You know that I could use because I don't want to go one way or the other I don't want to go fully old-school Html apps all the time but I don't want to go to megabyte payload of Javascript. Fancy pants apps all the time either. But sometimes I kind of want I kind of do right I want I want a nice easy lever. A nice way that I can say okay, what is this app need what? What app am I building am I building http://netflix.com or am I building a deb blog like please please tell me like what does this app need and and that's 1 thing that.
Andrew: Right.
Michael: We're doing with remixes. You know, like like you can scale it all the way back and keep Javascript off the page you can scale it way up and put a lot of Javascript on the page. It just just really depends on what you're building right.
Andrew: I but Michael you mentioned something that I found really funny is that Ryan and I have talked about the idea of tourist devs they're sort of developers that whenever the new shiny thing comes out. They're immediately jumping on it and you know doing stuff in it and.
Michael: Um, yeah, yeah.
Andrew: Inevitably what you see is all they make from it is a developer blog. They're like this thing's awesome and I'm like well you all you built was like a blog that with a couple of blog posts that probably won't be updated in 3 years or whatever or whatever, whatever it's using. Yeah, but the reason I thought in my mind.
Michael: Yeah, right right.
Michael: But it's using Phoenix live view isn't that amazing. Ah.
Andrew: That remix was a little bit more like Laraville is that you do have access to all that kind of stuff you've got the headers you've got database connectors. You've got all of this kind of infra that makes it easier for developers to kind of nestle in there and and build their thing but the big. Thing that you have which is the superpower which is this thing called isomorphic Javascript and I'm going to attempt to define that isomorphic javascript is just Javascript that it will run on the client and you basically you write it once and it will run on the client and it will run on the server.
Michael: Yeah.
Andrew: That's all it is right isomorphic just means it runs in both places which is something you cannot do with a framework like Laol It just doesn't work. You can't run Well there is a terrible way. You can do it but you really let let's just say you can't run p.
Michael: Yeah.
Michael: Ah, compile your ph p to javascript come on Andrew.
Andrew: It's a thing that exists I don't even want to give it time but it does exist that in theory you could do that be. You don't don't do that. It's terrible. But that is the.
jen: But what's the difference. Sorry what's the difference between that what remix is doing just so I understand is I have never heard center stack before I think it maybe makes sense but you have let's say a normal react app without any framework other than just react and then you have some node Js.
Michael: Yeah, yeah.
Michael: Yeah.
jen: Backend that's do it processing something and you're fetching data from it. Maybe it's a Cms is that isomorphic javascript.
Michael: Well I think what Andrew's describing yeah I think the the idea is like if if I had a component like a react component that generates some html I can run that in node Js and I can kick out some html and say here jen here's an html string run that in the browser.
jen: Okay.
Michael: And and without actually sending any javascript to the browser at all right? So it's running in 1 spot. But then I could also like actually ship the javascript to the browser and then say use state in that component and now you're clicking the button and you're seeing like the you know the interactive right? there in the component without going to talk to the server at all right? So same component runs in two different.
jen: Um, so you don't need node Js in this case.
Michael: Spots is ah what's isomorphic about it.
Michael: That's a great question jen I'm glad you said I'm glad you said that? So yeah, no, yeah, you could build a fully client site app right? with node Js or sorry without node js yeah you could you could serve your app out of larall with you know, use Php on the server. Load up react in the browser and then boom. But but but to Andrew's point like that's not really isomorphic because you you had to write that component twice. You know you wrote it once in Php and you wrote it once in react and um, ah I said that your question was a really great question because ah. 1 other trick that remix does and this is something that like we haven't even talked about yet and this is a total tangent but it might be interesting to some people who are listening to the podcast is that ah remix runs. Ah, remix yeahbram runs on node Js but what we are seeing increasingly in in the industry today is we are seeing a proliferation of javascript runtimes right? So you have different cloud providers that are building things like cloudflare workers or fastly compute at edge or Aws is building lambda at edge or. You know I wouldn't be surprised if shopify or 1 of the other big you know companies decided to create their own javascript runtime that was just a v 8 isolate that was not node Js right? and so we actually built. Ah so Dino actually is a really exciting project that was from the creator of node that's not node Js ah remix actually runs.
Andrew: Yeah.
Andrew: Nice.
Michael: In all of them so we built so it's it's not. It's not just we run on the server and the client we will literally run on any Javascript runtime any server javascript runtime and any client runtime. Um.
Andrew: So setting up your server could be as simple as setting up a Cloudfront function and mean they there. We'll just run it in there.
Michael: Yeah, yeah, absolutely we can run the whole thing in we can run the whole server in in a cloudflare worker now here's where it gets really trippy because we're just using the browser primitives. So we polyfill a bunch of the browser primitives to actually run them on node Js right. So our server if you go and look through our so our server runtime code. It's just using fetch and headers and request and response and a bunch of these apis that are actually available in the in the browser we don't rely on any node Js primitives. Um, so we're working on something right now which is a version of the remix server. That runs in a service worker which as you know runs in the browser right? same programming model. So so this is this is kind of like taking the the whole idea of isomorphic and like expanding on it right? because traditionally to be honest, right? Andrew Isomorphic meant
Andrew: Yep.
Andrew: You yep.
Andrew: So yep, so.
Michael: Node Js and browser. That's what it meant nowadays it means lots of different javascript runtimes on the server you've got this service worker thing which is like this mixture of both. It's like a server that runs in your browser and you've got the browser. So it's like I don't even know what the word is for that.
Andrew: I I know what the word is we? we've we've got a new word. We're developers as all we do is we come up with crazy new words. This is now known as megamorphic javascript.
Michael: Maybe maybe we need a new word.
Michael: Yeah I Love it. I Love it. Yeah, it's it's it's to to So. So I said I was an idiot for writing that article but there really was something there right? I I I wrote this thing and I said hey this is we should call it universal javascript because. This javascript really runs in so many different places you know people are and and and and we're seeing it now we're seeing people who are taking javascript and just running it like everywhere. Um, yeah, and and and so that's that's what I was trying to get at. But obviously we've already said I just added to the pun.
Andrew: Yeah, let let me take a step back for a second so we're old school developers. We wrote some html. Maybe we used a templating language but we really found that we needed javascript to be able to do some of the fancy things in the client. There's no other choice we got to do it.
Michael: Yeah.
Andrew: And then we found Well you know what the more complicated stuff we're making this state management stuff is really really Useful. You know, maybe we would start using react and the client just for the the state management but still the rest of our app would be server-side this ends up being super painful. Because you have state on the on the front end and then you have state on the back end and who's responsible for what like this is the most contentious part of doing it. So I Get why initially react Developers were just like let's just put everything in the client because it's just much easier to do that.
Michael: So.
Andrew: And then there are frameworks like nox and next that make it a little bit easier to handle that state between things but still it. It ends up being complicated. So I think what developers are trying to solve is having a unified state and having a unified rendering model. So that. No matter whether it needs to be client side because it has to be done via Javascript or it's better off being done server-side. There's 1 state that you can deal with now you mentioned briefly earlier livewire. That's something that is taking it the other way. Let's say we're going to have minimal javascript on the front end. Server is going to do everything and it's just going to return raw html that gets inserted. That's their approach to kind of simplifying the mental model of having 1 state and 1 thing that renders stuff and it sounds like remix is taking a little bit different approach and it's saying let's leverage the fact. Javascript is isomorphic that we can run it in all these crazy places. It's not just isomorphic. It's megamorphic we can run it in service workers. We can do all that stuff this lets us write our components once and have 1 state and then our life is so much easier because. I have developed these hybrid applications that have front-end javascript frameworks that are married to some other kind of random back-end system and man it is painful having to juggle the state between the 2 or having to write the same component twice like you're you're saying. Is that something that remix is really looking to address here and.
Michael: Yeah, so I'm glad that you're talking about State. Um, one thing that I just want to kind of point out and discuss is that you know we don't really care where you keep your state and I know that sounds a little bit scary because most Frameworks kind of have an opinion on this like you were saying livewires Like. We're going to make the client as thin as Possible. We really prefer to keep the state on the server you can build a remix app that way and say you know what we're We're not going to do much state on this on the client at all. Um, but what if your app requires it like what if you want to build an app like that then then you have to find another framework.
Andrew: Right.
Michael: Right? Then you have to you have to okay out with you know if you're very opinionated about that. You're you're going to. You're going to cater to some kind of apps but then for other kinds of apps. You're just not going to be a good fit.
Andrew: I well most developers what I see them do in these cases is they get out their hammer and they're saying nope I'm using this thing and they just pound it and pound it until they end up with some kind of semblance of something that does what they want. So.
Michael: Um, yeah, yeah, yeah, yeah, yeah, and then you end up with a poor user experience usually because you're using the wrong tool for the job right.
Andrew: Or you end up with something that is you know it's been hammered to do something. It's not great at doing so you end up with a codebase that isn't super fun to work with.
Michael: Yeah, so developers look at it and think well that's not how it's supposed to work. Why are you doing that. So 1 of the one of the you're right managing state is is tricky right? So in remix. You know you've you've got lots of different. Places that you can do it right? You can manage state in your database. You can have state in the cookies. You can have a client-side state it really just depends on where your state actually needs to be um, part of this whole idea of us being center stack is we're trying to actually alleviate some of that pain for you? Um, so one of the things that we do. For example is. You know we know about mutations right? Mutations are post put delete requests that go to your server and the way that react router works is you have these nested routes. So if you picture like a typical ui like picture the github ui where you have like your global nav and then your Repo nav and then a. File system browser right? You've got like a couple of nested boxes on the page. Um, so you know if you or if you are like on your settings page and you have more even more nested boxes. Um, we would recommend we would represent all of these nested boxes in react router with with different routes different nested routes on the page so let's say you make ah a mutation. You know you're in your in your settings page and you make a mutation in this in this box. That's nested deep down in the page. Um, but then you know that causes some state to change on the server that actually needs to be reflected up here in the global nav you know, maybe some count or some. You've got like a account of unread messages or something right? and you're and you're down here in this in this this nested route and you're reading messages. You know that's it's typically kind of difficult to to think about managing those different kinds of state. Um, so 1 thing that we do with react or with react sorry with remix is when you. Do mutations on the server we have these things called loaders which are attached to each of your routes and these loaders are responsible for providing data and which is essentially so you know state to to each section of the page. So if you make a mutation. We'll actually go and you know behind the scenes will. We'll just refresh. Ah, the data for the routes that need it as a result of that mutation so you know lots lots of times you know state that you would have to manage yourself client side. You would have to say okay I and I know I just made a mutation I know I just read this message I need to go and decrement the the unread message count in the global nav. Ah, we'll automatically take care of doing stuff like that for you and it's completely decoupled right? You you read the message. You know the unread message count for the global nav in the in the loader for that section of the page and without worrying about anything else that was going on the page. Um, and but we detected that hey there was a mutation. So.
Michael: You know that that state for the for the views that are on the page probably needs to be updated. So Let's go and and fetch some fresh state from the server. Um, obviously you can opt out of that if if you don't want it but it's just one of the ways that remix is actually kind of taking this center stack approach and saying you know we know that we know that managing state is Hard. We're going to try and help you out a little bit. You've got stateed on the server you've got state in the client we're going to try and help you keep you know fresh state on the page without it getting stale.
Andrew: So let's say I'm a developer and I'm listening to this and I say this sounds interesting but I want to know what knowledge I need to have that I need to bring to the table before remix run might be right for me, it sounds like I probably need to know Javascript do I need to know react. As well and how well do I need to know it do I need to know how to set up an express server because that sounds exotic to me that's something I've never done before what collection of knowledge do I need to know before remix is something you would reasonably recommend and say yes, you're ready to go. You can. Try using this thing. So.
Michael: So yeah, javascript is definitely javascript or typescript is definitely going to help you out. Um, yeah you you should probably have a decent understanding of of you know how to how to write some jsx which is obviously an extension of of of Javascript. Um, you know.
Andrew: And jsx is essentially html inside of Javascript right? yep.
Michael: React it? Yeah yeah, yeah, yeah, it's basically like this little syntax extension that they made so they could write stuff that looks like Html and react react is the only supported front end that we have right now but we are actively working on making our frontend more generics that we can support different. Frontends because I I know that some people would prefer to use preact or some people would prefer to use you know vue or whatever on the frontend and and when it comes to building out your your view layer I want you to be able to use whatever you want to use? Um, but yeah, so yeah, right now you'd have to know some some ah some react. And we're working on this last piece which is you know, experienced developers. Yeah can can they can make their own server adapter and they can run it on express or they can run it on Aws or they can run it on cloudflare wherever they want. We're working on and we're actually getting very very close to launching a new feature where. Um, it'll be a lot easier for you to spin up a new remix app on any stack that you want because because part of the problem that we're having right now is its its remix is so flexible and there are so many options that it's kind of hard for somebody new coming into it to say like oh I know exactly you know what needs to be done. Um, so we're actively working on solving that problem. But yeah, it helps if you're familiar with you currently it helps if you're familiar with some kind of server runtime whether that be ah, you know, probably the most common one will be express on node js but we even support a lot more exotic runtimes as well. If you're interested in playing around with that stuff.
Andrew: So Ryan has been over there listening to this. He's been digesting his avocados for some reason he always eats 2 and only 2 avocados I'm not sure why Ryan I want to get you in here and see if you have any thoughts on remix or any questions that you might have had that have come up while you've been listening to.
Ryan Irelan: Sure, um, so I I do not currently work in the react world. So I think the some of the the technical details are not as much interest to me right now except for kind of the overall philosophy of the project. So Michael I'm definitely.
Andrew: Michael talk.
Andrew: So.
Ryan Irelan: Like more um old school in the sense that I was part of and participated in the original ah web standards movement of the early two thousand s and um I think that what I've seen is especially as the Javascript Frameworks have taken hold is that we've had. Ah, developers retreat back into 2 different corners. One was the corner of like handcoded html pages and handcoded Cs Css or Dai and the other one was were. We're just going to pave over all the web technology that has existed in browsers and we and all the specs and we're just going to you know, just do.
Andrew: So.
Michael: Yeah.
Ryan Irelan: Ignore it all and just use this big honkin Javascript delivered payload to your browser. This seems like is a place where both can meet and I'm curious. Why your philosophy is to honor the original web technology like is there something in you as one of the the founders of this. That influenced you to to want to you know not pave over like all of the web tech and kind of force this whole new paradigm but really honor it and leverage it and be so progressively enhanced and backwards compatible to just forms on a page. So.
Michael: yeah yeah I I appreciate the question and I appreciate your perspective I have to say that I think our approach is influenced a lot by the perspective that we have one of the reasons earlier. Why I was talking about. Just how big react router is is because I think when you have a project that is used by literally millions of people all over the world. You. You do gain some perspective right? We have many many times people trying to build things with react router. You know? ah. You know, ah in in emerging markets right? places where people just don't have access to the best technology. Um, you cannot you know you cannot build a good experience for those people using a lot of like. This ssg like jamstack sort of approach like you just you have to you have to go with progressive enhancement. That's the reason that that we were you know talking about yeah and and I you know we were talking about it a lot in the earlier 2000 but yeah it's it's completely gone out the window in the last five years with you know ever since react came on the scene. It seems like ah you just don't hear people talking about it. You you hear the professionals talking about it though you hear the people. Yeah, absolutely yeah, the people who are working at scale are still talking about it. They still recognize that you know it's better to use you know image source set.
Ryan Irelan: So the people that are working at scale right? It sounds like is what you're saying. Yeah.
Michael: Than it is to use. You know a bunch of Javascript and intersection observer to to serve images. You know they're paying attention to the network tab I mean the network tab if if you go to remix run we have a little graphic on the on the very front page that's like 1 of the things that we're the most proud of that shows you. Here's what the network tab looks like in in remix versus versus our competitors and and and versus non-remix. Basically everything that we're doing in remix is you know and that that has to go deep in a company right? when you're talking about some api you know if if you. If you don't appreciate the fact that not everybody is on an extremely high powered device on a super fast connection. You're going to make decisions you know at that point that that are that are goingnna be detrimental and you know effectively for those people and so I think it's just it's just a perspective thing you know and and I'm i'm. Super privileged and and happy to have had the experience you know and and the the perspective that I do have because ah you know like like I said you know ten years ago when I was working at Twitter and we shipped that version of the I wasn't on the team we meaning Twitter. Shipped that like completely client-side rendered version of the app that that just did not work at the scale that we were operating at and we should have done a lot. We should have been a lot better than that frankly, but you know experiences like that have informed my my personal bias and then experiences like you know, building react router. Um, you know building unpackaged. You know it's funny. We haven't even talked about unpackaged I built this little thing called unpackaged it serves about 5000000000 requests a day out of the unpm registry and it's primarily script tags right? if you go and talk to a developer you know like on Twitter and say like oh yeah, you know what the vast majority of the world. Doesn't actually use webpack yet doesn't actually use a Bundler they use script tags and a Cdn they'd be like what what are you talking about I have my you know I have my thing here. That's like my my spaceship that I built and everybody I thought everybody uses that it's like no no, not everybody uses your spaceship. You know.
Andrew: It's true I.
Michael: And so anyway, just having that kind of perspective I think ah it runs deep in the Dna of our company and and it shows in our product I think.
Andrew: So speaking of perspective I think this is interesting to note based on the statistics that I've been able to look up react in some circles is the world right? If you're not using react you're not doing web development. That's just the way it is.
Michael: Right? right.
Andrew: React is used on three point one of websites worldwide. That's it three point one now where this gets more interesting though is when you look at the top 1000000 sites in terms of traffic. It's used on 14% of those top 1000000 websites
Michael: Right? right.
Andrew: Then you get into the top one k of websites in terms of traffic and it's used on 28% of the top one k websites you go to the top ten k websites. It's used on 45% of them all right? So we're talking about the big sites that get tons and tons of traffic. That's where react is really used now. Obviously this is going to be skewed by Facebook for instance, right? I mean or other large properties like that that are using it. But it's still interesting to think about. So if you think about it globally 3.1% of websites are running react. You're like oh that's tiny like very few. Yeah I realize that. Number of websites is huge but still relative to that. That's small. But then when you kind of peel the layers down and you look at what the top one million hundred K Ten k are using you see that those really big websites are using react now that might lead you to believe? well. React might be a good thing for me to learn as a developer because I can get a job at 1 of these big websites that needs jobs but it also might make you think well that means that react is maybe only really good for these really big websites because they need that kind of appish interactivity. What I like about what you're doing with remix is you're saying. You can take or leave however, much of it that you want. In fact, you can make you can spin up your proverbial developer blog and you can have no javascript on it. So.
Michael: Yeah, yeah, yeah, yeah, yeah, exactly it's not about react. It's really not about react like ah you know next describes itself as like the react Framework we've we've never said that we've we've always told people like we're a web framework. Ah you know.
Andrew: Right.
Michael: And and honestly the most of the time the people are going through the remix Docs like we're linking off to mdn all the time because we're just built on web standards. We're like oh yeah, you want to know about http caching like you want to know how to make your site fast here. Go and read about stale while revalidate go and read about cache control.
Andrew: Right.
Michael: Um, you you know you know you want to know about ah forms. You know you want to know about data mutations. Check out these different properties. You know these different html attributes that you have on buttons and inputs and here's how to use an input type hidden you know, like that's like a lost art right for a lot of people. They're like oh well I need Ajax for that like no, no, you can actually.
Andrew: Right.
Michael: You can You can submit like private data in ah in a form. It's supported in html. Yeah abs. Ah.
Andrew: Yeah, use the platform and that's the other interesting thing is I was looking I don't remember where I was looking but someone was talking about how you could load ui ahead of time like if you know someone's about to click on something you can load that ahead of time.
Michael: Yes, pre-fetching whoo. Yes, who.
Andrew: And it's really just a ah link rel prefetch right? I mean that's what you're doing so you really are leveraging the platform rather than writing all this a lot elaborate Javascript to do the thing you're saying no if if we think they're going to need this. We're going to prefetch this.
Michael: And and and you can only do that if you know how to server render every page right? So in remix because we started there on the server it is. It is absolutely trivial and we are seeing some people building some amazing experience. I'm I'm really excited about this actually because. You stick a link rel prefetch and and you can you can prefetch any route in a remix app and it is amazing. How fast these experiences are um I so one of ah, ah 1 of my one of my friends Jamie Jamie Kyle who's a software developer. He's done. Ah, he's done quite a few stuff. He's worked a lot on babel anyway, he tweeted the other day he said hey he said the the transitions in my remix app are almost jarring how fast they are there was somebody who posted ah ah on a hacker news the other day they posted ah a hacker news remix clone and and 1 of the wei exactly.
Andrew: Oh god.
Michael: 1 of the one of the top comments though in the thread was is it just me or is this actually like faster than the real hacker news because because like you just throw a couple of prefetches on the links you know and and and. As you're tapping around because you can server render every page the browser's like you know what? I'm good I already loaded up all the html already loaded up the scripts like it. You can build some really cool stuff with that. Um.
Andrew: Well, that's the funny thing is the browser platform has amazingly elaborate things built into it in terms of caching and and I've seen people build these spaceships as you said in javascript that run on top of the browser that kind of make it sort of like what the browser could do but.
Michael: Yeah, yeah.
Michael: Yeah. Yeah, yeah, well and and and the and the thing that's that's really great too about using the platform is now you can ship less javascript right? So on average like like on average remix will ship 30% less javascript than your next Js app. For example.
Andrew: They just rebuilt the whole thing and it's just kind of crazy and.
Andrew: And.
Andrew: Yeah.
Michael: And and we include support for mutations right? which which they're not even doing over there like they're not even thinking about it. So it's it anyway.
Andrew: I mean in in the end I care less about how much javascript is shipped and then some of these things I care more about what the user experience is like and I care more about what the page performance is like for for the user experience but also for Seo purposes. So.
Michael: Yeah.
Andrew: I mean it's great that you're able to leverage the platform because then you're running native code and a very elaborate system that that does all this stuff for you I mean I think that's ah, a great way to do it I want to ask you something about remix my understanding is that originally you were charging two hundred and fifty dollars
Michael: Um, yeah.
Michael: Yeah.
Andrew: Remix or $1000 every year for companies to use this thing but then something happened sounds like someone backed up the money truck or something like that and you had made remix free open source software. So what happened.
Michael: Yeah, so that's a great question. Um, you know we we're we're people we need to make money to live put food on the table. Um, we looked at the ecosystem we were not satisfied like I like. Feel just like probably I can tell you Andrew feel like that. Ah you know, ah probably a lot of your listeners were not satisfied with with the current state of of of things. Um and we had this big thing called react router that was being used everywhere and we had a lot of.
Andrew: I I heard you can just put up a github sponsors page and then retire wealthy.
Michael: Um, two. Yeah, right? Yeah exactly? Yeah,. So so so what we did was we said you know what we're gonna create a ton of value here for people and I want to see how many people show up and actually pay for it and it turns out a lot of people showed up we we and I'm not again I'm not saying that to brag I'm just saying.
Andrew: You nice.
Michael: This is the need for like ah like a lot of people recognize the need for a good alternative in this space.
Andrew: Well, the the most validating thing about that is you're like Wow Lots of other people have the same problem I have you know? yeah.
Michael: Yeah, yeah, exactly yeah and and so many people showed up though that I was like okay so how are we gonna do this Ryan and I are gonna build remix and we're gonna support thousands of people who are using it because at that price point you make about. You know, even with that level of usage you make about what you would make at like a nice tech job and you know so I was like ah like how how are we gonna do this and and and and the other thought that was in my head was you know what we're gonna do here is we're we're gonna build this thing and you know like. Not everybody's going to be able to use it because it's not It's not open source. So it's not It's not free for them to use and you know they'll probably just go and use something else which as a result like I really believe that remix has the ability to make the web a better place to to help lots and lots of people build better websites. So I want as many people to use it as can use it? Um, and I don't want to put up a barrier there and so what we said was okay, let's let's let's open source it. That's going to fix that's going to you know, allow people to contribute to it. Um, so we've we were already getting some great contributions. We have we open sourced it back in November we already have well over two hundred and fifty people who have contributed to the codebase now a lot of those are docs fixes but do not underestimate. You know the level of effort that it takes for somebody to actually go through the docs go to github like. Manipulate the code and make a pr like that is that means they're interested that means they're engaged and they're interested in seeing it succeed right? So we have over 250 people in you know, just over three months of open sourcing this thing so there's a lot of contributions that we're getting um.
Andrew: Not even just that though documentation. There are so many projects out there that when I approach something new if the Docs are not good I will just move on to something else I think documentation in terms of adoption as well as one of the things Ryan does is he does training videos.
Michael: Yeah.
Andrew: That type of upskilling is so important if you want to have anyone adopt your framework. So.
Michael: Absolutely I didn't I didn't mean to downplay it I Just know that there are there are developers who would look at something like that and be like oh well, most of those are just Docs fixes but they're important Docs fixes are absolutely important and they're critical for the.
Andrew: You right? right? I get okay but if you if this is open source now. Are you gonna have to fall back on your old career as an exotic dancer to support yourself or what's what's going on.
Michael: ah ah ah yeah so it's it's a very straightforward business model actually like there's there's a lot of stuff that you actually need to build a really great website right? So we've taken a lot of time and care with producing remix. Um, and and you can you can bet that we're going to take. The exact same time and care and attention to building other services that you're going to love to use so you know where we can where we can build. You know there's a lot of stuff that you need for your app you need authentication. You need analytics you need hosting you need Cdn you need you know. Lots of other things to to use to actually host it and and then there are various. You know layers at which you can integrate right? If you're an if you're an old pro and you've been doing this stuff for 20 years and you might say you know what? I'm I'm good with you know, the. Unquote community edition right? I'm going to take this off the-shelf. It's all free. It's open source software I'm going to piece it together myself and deploy to my custom bespoke. You know aws stack I'm good. Fine. You don't ever have to pay us. That's fine. There are a lot of people who are not there yet and they want like a point in click. You know they want to have preview deployments and they want to have you know analytics and they want to have oh it's click point and click and I'm done and and that's that's totally valid as well, right? and so we're going to build all the services that you need to to build your web app we're we're not ever.
Andrew: Yep, yes.
Michael: 1 thing I want to make absolutely clear to anybody who's listening here is that we are not ever going to say hey remix is a better place to host your app than you know your favorite host that your company has already signed a contract with because I've been in that situation before where you know it's it's just.
Andrew: Right.
Michael: Vendor lock-in is no fun. That's that's not our.. That's not our MO at all. Um, what we want to do is we want to create a really enjoyable Experience. We want to provide a lot of value. You know to to people who who would prefer to use us over the alternatives. Um, but I don't ever want to tell somebody look you have to use us in order to get benefit X I Think that's a that's I don't I Just don't like that business model.
Andrew: Well, it's also not great from a growth point of view because you really do want to make it so that people can adopt your thing very easily. They can adopt it for free and there are also may be requirements that specific companies have it has to be on our it infrastructure.
Michael: Right.
Michael: Right? right.
Andrew: But you want to be able to have developers get their foot in the door so that when a client does come along that will it makes sense to leverage some of your services that they can then use it. You want to make the path to them using this thing as flexible and as quick as possible but it sounds like you took on some. Investment or some Vc and then your your tried and your plan is the tried and true method of make this thing open source and make money from either the support or services that are adjunct to that in terms of serving it in terms of Apis I mean this is what Lareville has done. This is what wordpress has done. This is.
Michael: Huh.
Andrew: Sort of what everyone is doing to monetize these open source projects is they make the thing and now that you've found. It's awesome and and useful here are some great services that make it even easier for you to use. The thing is that where we're going and.
Michael: Yeah, Absolutely yeah, it's it's it's it's a tried and true kind of business model that we're after so it's not yeah, we're not I just I Just want to be clear with people kind of where our kind of our ethos is you know we're not.. We're not out for vendor Lock-in. We're just out to provide valuable services that you're going to love to use.
Andrew: Well Jennifer you've been using next and you've been using Strapi recently is something that you've been using what do you think about remix is it something that you might potentially be looking into does it kind of hit that sweets up. Does it kind of hit that sweet spot in terms of.
jen: Yes.
Andrew: Giving you the power that you need on the the front end while still leveraging the platform and.
jen: Yeah I mean I am definitely interested in trying it. Um I Love the idea of using the actual browser and its capabilities. Um, because it sort of takes me back to you know that time when the web was pretty cool and you know you're basically just delivering.
Andrew: Yeah, yeah.
jen: Simple documents with a little bit of flair to people and you didn't crash. People's phones you didn't deliver. People's deliver people some white pages. Ah you didn't overngine engineer everything A guy recently inherited a website that was built is a simple marketing site but on craft.
Michael: Yeah.
Andrew: Oh yeah.
jen: Ah, cms that was built with react and Redux I don't know how to pronounce that um it looks like that you know they took a sledgehammer and there was a little nail and I thought why? um and and I think.
Andrew: Yep.
Michael: Yeah, yeah, yeah.
jen: This looks like a really interesting technology and I I really want to try it. But the problem that I'm having right now is that my brain is full and in order for me to do something new like this something has to exit my brain. So I'm not I'm not sure exactly what like I I want to look into it a little bit more and figure out for.
Andrew: And.
jen: What would be the best use case for this because it does sound like everything I'm currently using Nextjs for pretty much everything for small marketing sites and large sort of dashboard interactive type apps. Um, so and and it's definitely a ah wonderful framework next next Js and I've. Managed to work around its limitations to be able to do everything so it would be interesting to know you know what's the best use case for remix and is it Everything do you envision that it's going to take over the web and it should be your hammer because it's so flexible and so minimmalist it Maybe it should be. Or maybe that's something to be seen I don't know you let us know.
Michael: Yeah that's ah, that's a great question so I want to address the the first thing that you said which was I feel like my brain is full and something needs to exit my brain in order to make room for something new I totally sympathize with that idea. Um, because there's so much cool stuff that I want to check out right now that I just I feel like I just don't even have time to check that out because my brain is full. Um, and and there's only so much time in the day and I want to do other things with my life too. Um, the 1 thing I would say about that is you might actually. You might actually find um you know so some some people have said when they come to remix they and they start using remix. They'll say you know I actually just spend the majority of my time like reading through the mdn you know docs about you know web stuff like I'm like I'm not learning remix. Specifically I'm really just learning the web because we're built so close to you know standards and we and we try as as hard as we can to use you know standard Apis that are like you know already present in browsers for example on the server. Um. We try and we try and cut down on the amount. There is to learn I guess is is what I'm trying to say like if if you go and you build a remix app and you learn a bunch of stuff. There's probably a lot of stuff that you learn there that you're going to be able to take to any other app that you're where you're not using remix right. Ah, so there was ah there was somebody in our chat the other day who was like yeah you know I'm working at my my day job I'm not able to use remix I just use remix for fun at night and on the weekends and stuff he said but I'm already I'm already like taking some of the things that I'm learning in remix and like I'm applying to them I'm applying them to my existing stack at work. And it's like making it a lot better. So anyway, just just to just to kind of talk a little bit to that point about yeah I I feel it we're all on kind of max. You know there's so much cool stuff out there now that we're all kind of maxed out with with the ability to learn new stuff but hopefully. The fact that we're building on web standards means there's less to learn um and then.
Andrew: Well Jen something that can help you out is something called trepidation have you heard of that so it's an ancient technique for relieving pressure in the brain where they would actually bore a hole into your skull to relieve the pressure.
jen: No.
jen: Oh.
Andrew: You bore a couple of those the old stuff will come out and you got room for plenty of remix stuff to go in not quite a lobotomy. This is just drilling a hole in the skull to relieve the pressure. We're not actually getting in and removing part of your brain. No no, no.
Michael: Boom.
jen: Look Lobotomy I guess.
jen: Ah, ah, you're not scrambling things in there. Okay, cool.
Ryan Irelan: Jen What you should probably do to free up some space in your head is just block Andrew on on your phone and email That's probably the best way.
Michael: Everywhere Um I wanted to speak. Ah well I mean what I'm wondering is when you drill the hole like does your brain like start coming out of the hole now.
Andrew: That hurts Ryan ah.
Ryan Irelan: Oh yeah I owe you? yes.
Andrew: I Don't think so I think they're I think there's just a layer in there and it's supposed to like Relieve the pressure as if you know I don't know you were offca and um, this is an ancient technique I Think there's a reason it's not done anymore. So.
Michael: Like is that the idea that we that we have more room for the brain. Ah. You try it and let me know how it goes um, just so I wanted to speak to the second thing that Jen said which was um, you know like what? what am I supposed to use this for like am I supposed to you know and and or.
Andrew: No comment.
Michael: You know am I supposed to use remix to build everything? Um, but 1 thing that I like to refer to when I when I when I think about this question is there's a developer his name is Jason Miller he developed this page. We could probably put it in the show notes. It's about application hollotypes he's the guy who created preact and I like to go there and just kind of look at it because he he talked about like a lot of the different types of apps that you're building right? You're either building like something you know, pretty basic. You know, maybe some maybe it's good as like a. You know some marketing pages or a blog or you you know you're building like a social app where it's like a feed and you know are you building like a chat app or it's real-time. Are you building something that's like ah like a full-blown docs editor like Google docs like there are lots of different things that people are building on the web. Um. And and you know so he talks about these application holotypes and he talks about like here's here's probably you know, different strategies that would be good for building these different types of apps. You know some of them are better as just like pre-rendered html. Some of them are better as you know, ah server rendered stuff you know and some of them are better as like. Ah, really fat client. You know like if if I were to take every every time I pressed a character in Google docs and send it to the to the server as a mutation like you know it'd probably be pretty heavy. So anyway, you know a fat client is is is better in that situation. So this is something that we we try to. Keep in mind when we're building remixes. We want it to be good for a lot of different types of apps and I think that you know by not really trying to invent too much like we've we've really only invented a little bit with remix. You know we have a couple of conventions for. You know, nested routing which I think is really really powerful I think that's how the majority of web apps are built with these nested boxes in the page and then you know having having you know features like with our data manipulation layer. You know with with you know, doing things like the automatic refreshing of data so that the. The data on the page doesn't get stale things like that. Um I think you know if if we just sort of give you these building blocks and and we base them on web standards. Our hope is that it should be easy enough for you to take that and build whatever you want with it right? We're not, we're not trying to prescribe too heavily. You know a certain approach to building things. We're not saying oh well, you need to you know, integrate everything into your compiler and here's a bunch of plugins. You know like Gatsby style where you do everything at build time or here's you know incremental static regeneration. You know, which when really you could do the same thing with a stale while revalidate.
Michael: Ah, directive in your cache control Header. You know we're not, We're not trying to prescribe too much. Um, and so we're we're really just trying to give you those little Lego blocks that you can use to build any one of those holotypes and and I know that's I know how that sounds you know people they always want you to yeah they ask you like? well. Where does your thing when does your thing Suck. You know when does your thing not good like tell me tell me, you're be honest with me show me your your warts and your failures and I I am happy to talk about those? um. But I Really do think remix is a great abstraction for building just about whatever you want because again, we're not trying to prescribe too much so I know that that ah you know that's yeah.
Andrew: So I think Jason Miller is a incredibly intelligent person. So don't I don't want him to take this the wrong way. But I'm looking at that page and he lists content websites as one of the application types and the holotype there is Cnn and his.
Michael: Ah.
Andrew: Ideal delivery recommendation is pw a in default display mode I think Jason you think you's smoking something do we really need a pw a for a blog essentially or for a marketing site I it seems.
Michael: I mean I here's the thing though like you you don't know like what I I don't go to http://cnn.com like they they have they have some constraints right? they have they're building their thing and it's it's very difficult for me to to go to somebody else and be like.
Andrew: It me, It's horrible. Ah.
Andrew: Right.
Michael: You should do it like this right? Um I think as as you know, just the more experience you get in engineering like you. You just know like these people and most of the time that I see something that's built a weird way honestly or somebody who's really smart make a weird recommendation like that I think they probably know something that I don't about. Whatever is going on over there. You know, maybe maybe he's talked to somebody over there. He has some insight but um, but I know yeah for and it could too just be like kind of an old doc because ah back in the day they were ah and I'm sure they're still very bullish about it. But it was like progressive web apps. All the things. At Google for a while. So. But but anyway yeah, just ah, just a short summary of of you know, just a short answer to what Jen thinks is or what Jen had to say is I think yeah I really do I'm optimistic that people will be able to build whatever they want with remix and you know we're we're exploring lots of.
Andrew: Yeah.
Michael: Different models like I said already earlier we're exploring moving. Ah, you know the ability to put your server runtime in a service worker which should enable the people to build lots of like quote unquote offline experiences a lot easier. We've got the server side case handled really? well obviously. We've got the fully client side case that you can do today with just react router like you can just boot up a create react app and drop react router in there and you know it's not remix but react router really is the core of remix. Um, and and so you know I think I think we've got you pretty well covered no matter what kind of app. You're into with the with the stuff that we're working on.
Andrew: Ryan Ryan's got nothing. Okay, well that about wraps it up for another episode of the devmo fm podcast if you enjoy the show make sure to subscribe tell a friend drop us a review. We really appreciate. It. For the demo fm podcast I'm Andrew Welch and and thank you for coming on and telling us all about remix run Michael.
Ryan Irelan: And I'm Ryan Iron and
jen: I'm Jennifer Bloomberg
Michael: Hey thank you guys so much. It's been awesome.
Andrew: That all right, that was great this out music at the end sound weird to anyone for me. It starts off slow and then it speeds up but in the recording It's always right? No you guys hear it correct. No.
Michael: Yeah, it sounded good to me.
jen: So yeah, sounded good.
Andrew: Ah, you were Jason you're going to say some all right? Sorry Michael you're going to say something earlier about the the airplane.
Michael: Oh yeah, about the? yeah no I We never can we never circled back to that I was going to say ah sometimes looks can be deceiving because you can you can hop into that airplane and and you could find out that like yeah and I know this isn't where you were going with it. But.
Andrew: Yeah, so.
Michael: You know, let's say that it looks all duct taped from the outside and then you hop in and it's actually like really nice inside. Um, it was a piece of guy. It was a piece like Hyrids.
Andrew: no no no it it was a piece of garbage this is something oh yeah, this is something that actually happened to me and I actually got into that plane that said experimental and we got up and we flew around and there is you can use a yoke to control a plane which is kind of looks like a steering wheel. Or you can use a center stick which is basically a stick that sits in the middle and that's what this guy had and 1 time when we're in mid flight the guy picks it up and pulls the stick off. He's like oh look at this like like oh my god I'm gonna die and then he stuffs it back into the control and it was no I was deathly afraid for my life. It was not.
Michael: Yeah.
Michael: Ah, that's ah well, the only thing that the only thing I was going to say about that was um, lots of people have told us you know like oh well next is the thing and next is battle tested and next is like Blada da da da da.
Andrew: It was not good I.
Michael: And I want to tell them like we've been doing this since 2 14 like like react router like yes, lots of people are building with next absolutely lots more people are building with react router and have been building with react router for a long long time. So. You might look at remix and think from the outside and this thing seems kind of new It seems like it's kind of you know you got the duct tape on it. There's some warts on it. But what I wanted to say to the people and I should have said this is that I think I kind of did is that like we're building on a ton of experience here. So. Even if it even if it looks kind of risky to you. It might not be as risky as you think it is.
Andrew: Well, what got me interested in is we had KentCDods on to talk about his epic react course. So it was his opportunity to sell his stuff and he wouldn't shut up about remix. It looks like it was like all he talked about I'm like all right I've got to I've got to look into this a little bit further.
Michael: Yeah, yeah.
Andrew: But let me stop the recording now stop in this recording.
Michael: Yeah, we we we ended up hiring.