Migrate to Remix - Girish Venkatesan

Girish showed his company that even when on a Slow 3G network, a Remix version of his company's app was faster than their current Create React App on a fast connection. Deciding to migrate was obvious.

00:00.00
Kent
Hello friends This is your friend kent see odds I'm super excited to have on the podcast gearish and your last name starts with a V but I don't actually know what it it is what what is your last name.

00:12.18
Girish
Um, ah it's my father's name. It's ah venkaation. Yeah yeah, it's it's correct and young.

00:16.27
Kent
Oh awesome, awesome and did I pronounce your first name correctly. Okay, sweet. Yeah, so this ah you're listening to the the remix podcast where we talk about how to make web your user experience better for the web. And we're really excited to chat about that with gerish before and garish has actually been super helpful in the Discord community making examples for people answering. People's questions giving talks for the indian online meetup. So lots of really cool. Ah, stuff that your she's done for us for the community. Um, so yeah, could you just give us a couple minutes and and tell us about yourself. You can be as professional or as personal as you like Um, yeah, we just want to get to know you.

01:05.79
Girish
Um, yeah, cool. Ah hello everybody I'm garish so I'm a dollar lover from India and I work at a startup. It's early startup and I work as a full stat. Engineer here and I mostly work on Frontend so react. That's why I got into this community this frontend work and yeah and got into remix and I'm really loving developing apps using remix. I'm very happy to chat with k about my experience and very happy to share my experience with you. All.

01:46.15
Kent
It Sweet sweet. So um I um realize this maybe too soon but are are you exploring using remix for your product at work for your startup.

01:57.53
Girish
Yes, I actually demoed ah demo ah version of our app to the management and they were actually really blown away. Okay, so yes, and actually so if you have visited remix.

02:06.99
Kent
I sweet.

02:14.90
Girish
Run website and if you've seen the example that they've showed right? like that waterfall example like first the mains screen load level load and then some part of the app gets loaded and we see how most spinners and most min as until the whole javascript is downloaded. Our app is actually architecture. In that way because of various constraints and stuff and I e demonstrated like a simple landing page in remix and that app that um, my our current product was still loading but the remix it loaded and was fully in interactive before even the first. A chunk of Javascript got downloaded. They were really blown away like ah and I also showed this to our colleagues like who are backend developers throughout their career and they were really blown away with how much simpler remix makes for.

02:56.35
Kent
Whoa.

03:12.27
Girish
Everyone ah from the whole stack to work and contribute to the product and yeah was a really huge hit in my startup and I think pretty soon we might move but we don't know the time lengths Charlie.

03:26.18
Kent
That wow that that is awesome to hear. Yeah that um, we didn't make that up on the homepage. That's that's definitely the the way things are architected because it's like um when when we first started doing client-heavy apps. It was all in 1 giant. Javascript file that we would concatenate all these things together and just boom one big thing and so you you may have a loading spinner in your index html while the Javascript loads. But once it's all loaded then it just boom. It's all there and it's ready to go um and it takes a while because you have to download and parse and execute all that Javascript. But you don't have like this bouncing of loading spinners but because it took so long um to to download everything and and render it. We started talking about code splitting so that we you know could um, load the um you know not have to load all of the application all at once. And once we started doing code splitting um then like then we had all this loading spinners bouncing all over the place. So yeah I think it makes a lot of sense to just say hey how about we make the app totally interactive as soon as it. Um. The document loads and then from there we can progressively enhance it with the javascript and we still get the codes splitting but it's totally interactive because it's server rendered and because remix understands how to handle mutations whether they're. They come from Javascript or just from the browser form. So I'm glad that that resonated for you all at your company and I look forward to hearing how things go with the the move are are you using what? like what is the current stack right now. So.

05:09.50
Girish
Yeah, um, yeah cars is plane react create react app app running fully on the client. We did not invest in any server side Framework the cost like da. Created tab before I joined and it was there and I used to sort of picked it up and worked on it. So we're still following the same stack and yeah, it's still and create react app and pay client set up. Yeah.

05:39.29
Kent
Yeah, yeah, you know for a long time I was I was convinced that createreact app was good enough for most people. Um, especially for apps that are on the other side of a login screen which I'm guessing That's the case for you right? like most your app is yeah.

05:54.26
Girish
Um, yeah, exactly exactly.

05:58.70
Kent
And so like it's not a big deal to just have a loading spinner while you wait to determine whether the user's logged in and then show them the login screen if they're not logged in and and the app if they are especially for like ah a Saas product where like people it's like for business. You're not worried about Seo. And so like I was always convinced that like yeah, it's Fine. It's not a big deal. Um, until I realized or until it dawned on me I guess that the user experience could be so much better. Even for those those users who have to log into the product. And then you add on top of that the developer experience that remix offers then it's like becomes a No-brainer. So Um, I'm I'm guessing that your user experience could probably be improved just by using next.

06:38.73
Girish
Yeah, exactly exactly.

06:51.48
Kent
And potentially your developer experience as well by using Nextjs because that can do all the server rendering and everything as well. Is there A reason why you haven't thought about moving over to Nextjs before Remixed even came around.

07:04.60
Girish
Um, okay so I am a really big fan of nested routes. Ah, even even before v 6 react route a v six came out. We were Vr and v 5 but still we are using nested routes. And we looked at next days and that's not doable with their current routing system that they have ah and we decided like our whole app is architectured in such a way and we cannot go back and.

07:28.60
Kent
Yeah, yeah.

07:40.72
Girish
Change it like that cost was really big for us to react reitet the whole lab but with remix and with this Drs I Just have to change the way I'm calling the loader like I'm calling the Apis I can just port my whole code. Yeah.

07:54.36
Kent
I I see. Yeah so so next Js wasn't um, better enough to justify the the massive like basically rewrite that you would have to do um and the um and remix the. You wouldn't have you don't have to change as much and you get a lot more benefit because of the nested routing is that right.

08:18.28
Girish
Yeah, exactly and we are not very right Heavy App. We are a lot of like we just like and we do a lot of fetch and show the pages to our Users. So. And yeah, again, like we never thought like it was the right direction to move to next when we had like a performant app and ah like the plane react, but but not something strong case for us to make that we have to move to some other framework to. Really drastically improve the user experience.

08:55.20
Kent
You gotcha? Yeah well and and um, when you get over to remix since you're such a read heavyavy app it. It becomes pretty straightforward to to do that stuff because the loader um that is tied to the route as well. So that ah makes things nice and.

09:09.55
Girish
Um, yeah.

09:14.16
Kent
You'll be able to reduce the amount of javascript you ship because all of that loading happens on the server. Um, yeah, it's It's awesome. That's great. Um, so is there anything else that like really appealed to you about remix like from a user experience or developer experience standpoint that you just Read. Or sorry that you're really excited to have when you migrate over to remix and.

09:37.25
Girish
Ah, yeah, so like I'll sharem my first experience like what brought me to remix first like I I joined here like I bought the license like. When premix was behind the the license I was a early supporter here. So I just wanted to sharem my experience of what made me to get into remix and I think it was March or April of last year when Ryan was giving the demo for the v one.

10:11.22
Kent
Yeah.

10:11.49
Girish
Beta Launch and he was ah doing basic stuff fit to do app I Follow the stream. But yeah, it was fairly good.. The develop experience was good and the the the moment which brought me to remix was when he. Tick to check box. Okay, in the todo app he ticked the check box and the whole app updated without even doing any revalidation like automatically ah the whole app got invaluated and all the loaders and the site navigation everything got fetched and it.

10:38.16
Kent
Yeah.

10:49.48
Girish
There was no to stale data and everything was really fresh. The data was really fresh and I was like ah man like I should not leave out be left out of something such powerful at this and it's going to blow everything out of fodder when it. Finally comes out.

11:08.88
Kent
So yeah, that's very perceptive of you to to like realize that they were were really onto something that early because that was really early that was before um so many of the features that we enjoy now are.

11:18.25
Girish
Um, yeah. Yeah, exactly like even in the early stages if if if if a framework can solve lot of issues that we developers face do day-to-day like managing the server side state managing the client side state like if a framework can do everything for us like. This is going to be game changer and I was like I have to be part of this and I have to learn this and I have to share this framework with everyone who are not who who do not know about this framework like at least in India like people are very. Reluctant to adopt new technologies like they feel like the technology needs to mature enough so that they can adopt as part of the product. But yeah I felt like I need to be the person so to be able to like show the show this framework that. Which can solve most of the issues like most of products are facing nowadays. So yeah, that's my remix journey and that's when that's what brought me to work me here. Yeah.

12:30.16
Kent
So that's awesome. Um, and you've been really helpful for folks in the community. What what drives you to be so helpful.

12:39.57
Girish
Yeah I Just want the framework to succeed right? like I want to be as helpful and as welcoming as Possible. So that many people can adopt the framework and they can share the framework with their colleagues their friends and Yeah. He just want the framework to be successful I Maybe buy us here to think like that. But I Really love this product and I feel like ah ah like I play a part of this by helping people to get their answers sooner rather than later and. And I Also like to help people a lot like be as welcoming as possible. Yeah.

13:20.74
Kent
And well we really appreciate that especially as ah, an early member of the community. It makes a big impact when we have members of the community. Be really friendly. It kind of like forms. What the community is so yes, thank you for for being that in our community.

13:34.34
Girish
Um, yeah.

13:40.26
Kent
Um, so ah, what? Ah um, what are some of the um, well actually you know what I want to explore your background a little bit more can you tell us? Um, how long you've been in the web space and and building Web Apps and.

13:55.90
Girish
Um, yeah, sure. Ah, this is my third year professionally in my career. Ah, and I've been doing web development for like 5 years like to throughout a colleague like my second third year of my college and. Yeah, like I got into the react space and when it was like pure client side and and actually like e learned a lot about web development after getting it to remix like I never knew how a form was supposed to work and I never knew like.

14:27.83
Kent
I.

14:30.80
Girish
Why we need Anchor link for navigation I Never knew any like how a form data works like I never knew anything before remix. And yeah, I'm I'm learning a lot through the journey I'm learning a lot from the people in the community. The brilliant people who are there like. I'm moving from you guys. And yeah.

14:55.30
Kent
You know that's that's great. That's exactly what I was curious about because there there seem to be 2 different kinds of of developers coming into remix. There's those who have been doing software development for a long time before the javascript craze happened. And so they're like oh wow remix is such a brush of fresh air or breath of fresh air like you know going back to the roots of the web and and ah actually taking advantage of what the web has to offer has always had to offer for years. Um I am not in that camp because I also I started around seven years ago but that. Um, where I started was kind of the leading edge at the time and so we were doing client side apps and so I also learned like how you do a forum is you have a submit handler that has prevent default on the event like yeah so I I never really understood any of that. Um.

15:44.95
Girish
Um, yeah, um.

15:52.39
Kent
You know, like as I was getting started I Only understood half of web development the frontend and so for me when I started with ah um, with remix. It was kind of funny because I was being tricked into being a backend developer. Okay.

16:08.70
Girish
Um, yeah.

16:11.87
Kent
I spent so much of my time doing backend stuff and and when I was done was like wait a second am I in backend Dev now like and so you you really do um, learn a lot about like full web Dev So like I guess now I I Never really could have called myself and a real web dev.

16:16.66
Girish
Um.

16:30.38
Kent
Um, like full web Dev I was only half of a web dev because I only did a frontend um and now with remix I get to do both.

16:31.51
Girish
Um, exactly? Yeah, exactly that's that's been my take away from from developing using Remis like I've been able to work the full stack. Um. I Never would have imagined imagined like I would be like tinkering with my cache headers or like my caching at the server I never would have imagined like being like a full frontend developer whose my background has been there and it really opened my mind and I am really happy that. I can also take this knowledge forward in my career like it's not confined to remix I can apply the same logic to which of framework That's I'm going to be using in the coming years I don't know but I'm really happy that I'm actually learning web development because of a framework. I Don't know how many frameworks are that is out there that does this.

17:30.72
Kent
Yeah, well and what? what's really cool about that is because of that property of remix. Um the like so like the knowledge is transferable I Really like that. Um, and also the when you're. When you learn how the web works um by itself then you stop having to reimplement stuff that the web does already like ah a lot of people or for a long time when we're doing Client-side Heavyy Apps we would um, we couldn't really leverage caching properly because we didn't have the server. To to cache our our and data responses and stuff you'd have to like file a ticket with the backend engineers and so we would just put our data cache in in-memory which meant that now all of a sudden. We also have to manage garbage collection. Um, because you know you don't want to fill that cache up indefinitely. Um, which also means now you have to like if if you want to make it so that your cache persists over page refreshes and stuff Now. You have to store it in Index Db or local storage or something which of course not many people would do that and so. Ultimately, the user experience suffers because we don't ah, we number one Maybe don't even understand the the full stack web from the the backend as well as the frontend and number 2 It's just difficult even if you are the developer working on the backend. It's. Ah, difficult to make those two sides of the the network work nicely together and so remix improves the user experience in that way because like there's less code that you have to write therefore there's less bugs. Um, and because we can rely on the web platform as it is and and you can rely on on caching but also like just on and the fact that remix embraces the fact that when you do a mutation we invalidate stuff and so your stuff is going to be fresh and always and so. Um, yeah, anyway, less less code in the front end less bugs there less code for the user to Load. So The user experience just gets better when we use the web platform the way it's intended to be used.

19:44.58
Girish
Um, exactly and 1 more thing I realized is like for many components that I write and remix I've been using react as a templating language instead of like the language the framework that's driving my whole client and the whole experience.

19:58.69
Kent
You? Yeah yeah, absolutely yeah, know it's yeah, like you can build a a full like Realw world application without a single use state.

20:03.31
Girish
That was really funny to me and I realized that.

20:11.88
Girish
Exactly I forgot like I need to use review states or effects or something like that to build applications because remix and the web platform handles almost everything that we need right? like we've been trying to reinvent the whole wheel when the platform. Use The platform already does everything for us. It was really like ah I open a for personally.

20:38.33
Kent
It? Yeah, totally well and um and it so the platform already supports it and it does it better than we could with just Javascript on the front end. So yeah, you don't have that loading spinners bouncing all over the place it it can.

20:48.78
Girish
Um, yeah, exactly.

20:57.32
Kent
I'll be interactive right out of the gate which I think is just awesome now 1 thing that I'm I'm curious about with your migration from create react app over to remix is like create react app is really nice because you can just take the build directory and put it up on a Cdn somewhere. You don't have to think about servers but when you use remix now. You have to suddenly start thinking about servers. Do you already have a place that you're going to be hosting your remix app or what what is your plan there.

21:27.27
Girish
Ah, yeah, so we are a cloud-based app like our servers are running on Aws. So yeah, it like ah instead of a backend apa lambda that is running like ah we can just replace it. But the remix app and you would be good to go like ah it's it solves all of our use cases personally like in our current application with our current product like just replazing our backend api with the remix app will almost solve.

22:04.60
Kent
You Wow Yeah so sore. Um, you're not going to say Okay, we're just replacing the create react app piece and then we'll talk to the same services. You're actually going to replace both the frontend and the backend with just a seamless frontend backend experience with remix.

22:04.65
Girish
But whole migration for us.

22:19.30
Girish
Yeah, that would be the ideal way because our backend is written and node so we can just I can just like import like I can just copy paste stuff into our loaders or any abstraction that we come up with like we have not like really thought about the plan.

22:24.62
Kent
I yeah.

22:36.61
Girish
About how we are going to convert it but it it will not be like a very yeah tedious job or Dds friend to convert it like we can also incrementally convert it. But yeah like I don't expect very big road blockers for us and we do that eventually.

22:52.24
Kent
So yeah, that's that's awesome I actually hadn't really thought about that a whole lot. But especially if um, your createreact app is the only consumer of of your backend then yeah, why not just you know, talk to the database directly in your loader. Um right? it.

23:09.85
Girish
Yeah, yeah, exactly yeah exactly that would be the ideal path. But yeah as I said like we have not really thought about the migration yet.

23:11.81
Kent
And the same file as the component that's rendering the Ui like that that is really nice. Yeah.

23:27.16
Kent
It? Yeah yeah, well it's still pretty early in figuring those sorts of things out. Do you feel like this is going to be the sort of thing that you have to halt all development while you do this migration or is this something that you think you can figure out how to migrate.

23:28.21
Girish
So yeah, yeah, yeah.

23:44.98
Kent
Incrementally.

23:45.64
Girish
Um, yeah, actually I would prefer to do it incrementally like stopping the whole development for this migration would not be the ideal path for the product but ah. Yeah I Hope like we figure out a way to do it incrementally. And yeah, we can still keep keep a backend server as it is host a new lambda spin up a new lambda for a remix app and communicate between the lambdas. So that like the Ui part from the loaders I can call the the existing lambda.

24:19.93
Kent
Yeah.

24:21.45
Girish
So yeah, that is also possible like we just need to replace our axios calls with the loaders. So yeah.

24:29.16
Kent
So yeah and and delete all of the state for managing loading states and spinners and stuff.

24:34.37
Girish
Exactly I'm really happy when I'm going to delete the loaders loaders from our app we have loaders all over the place.

24:41.90
Kent
I Yeah yeah, yeah, seriously. Ah yeah that I'm sure that will be really nice I'd love to see screenshots of like your poll requests that show like how many lines of code were removed and added and stuff.

24:56.42
Girish
E I am pretty I'm pretty sure the eye is going to be a lot of red lines.

24:58.77
Kent
Lots of red lines there. Yeah yeah I think that that makes a lot of sense that you would um, might leave leave the existing backend there and have the loaders just talk to that and then over time you can move that stuff back into the remix app. The Ui is a little bit more tricky I Think. To do incrementally over time. Um, like you could set up an and nginx server that like routes different pages and stuff but with especially since you're using react Router already. Um, you can.

25:25.89
Girish
Are.

25:32.99
Kent
Um, just kind of move files around so that they match what the remix Apple look like and then install remix and it should hopefully mostly just work and then you can incrementally move things into loaders that way. So I'd be really interested to hear how your experience is because you'll be 1 of the first to to try this.

25:51.69
Girish
Um I have shirk it.

25:52.78
Kent
Actually moving a product that that's out like in production over to remix. But I'm I'm excited that you're doing it.

25:59.89
Girish
Yeah, sure I Yeah sure I would be happy to share it with the community. So yeah.

26:07.68
Kent
Sweet cool. Well we're down toward the end of our time in garish. What would you say is the 1 thing that folks listening could do to improve the user experience of their apps.

26:23.60
Girish
Um, the 1 thing. Ah.

26:27.46
Kent
Based on our conversation I think you would say just migrate to remix.

26:33.36
Girish
Yeah that's that' should like people like ah yeah, like um, it's it's going to be no brainer right? like I'm pretty sure like ah without a server-based framework it's going to be nobra and like everybody is going to shift from plane createor react app or. Very client send up to server based app because like the the improvement user experience is dramatic like as I said right? like we eliminated all our loading spin is just because like we are rendering at the server and we know what we are going to render. We can eliminate the whole the fetch render waterfall. Ah yeah, ah 1 thing that I would suggest people. Ah okay, so I really what I would suggest is like ah I think it was already shared in the previous product draw pause.

27:14.77
Kent
I Yeah cool.

27:32.44
Girish
Podcast but ah remove the script tag from the application and check how much your product is accessible and forcable without the scripts loading that would be like because like this is what. This is a very unique feature of remix right? like um with a plain markup that is getting generated with the server like pretty much most of the app is going to be interact up even before Javascript is getting loaded because we are going to base on app on the platform and we v might not. Going to rely on like various states or like various third party libraries to manage it for us. So ah yeah, like remove the script tags and check how much. Ah, the app is intractable.

28:27.14
Kent
That cool. Yeah, and if their app is create react app like yours then the answer is none of it. None of it works. Yeah, yeah, that's true. Yeah, that like it really it. Um, we can't drive this point point home enough that um, all of a sudden it.

28:34.30
Girish
Yeah, exactly.

28:46.43
Kent
It matters quite a bit less. How much javascript you're sending to the browser when your app works before the javascript shows up in the first place. Um, so you can send a lot more Javascript without it hurting performance as much when the app works as soon as the document finishes loading. That's that's pretty soon.

28:53.51
Girish
Um, yeah.

29:01.99
Girish
Um, yeah, yeah, yeah, that's so yeah, when more people are going to try this out like they will feel like this is going to be like a deal picker for many of them. Ah yeah, really excited for.

29:05.43
Kent
Significant I think.

29:14.71
Kent
Yeah.

29:20.90
Girish
Feature and I also heard like lots of many exciting things are in store so for remixing 2022 so yeah really stopped for her. Yeah.

29:29.39
Kent
We Yeah, we're definitely not done. Yeah, awesome. Well hey garish it was a pleasure to to chat with you? What's the best way for people to keep in touch with you and and just keep up with what you're doing.

29:42.31
Girish
Just hang out and remix the Scots server like ib or I'm not going anywhere so feel free to ping me whenever you feel like you're stuck and I'm sure like the community we will all help you to get get to what you need. Like yeah.

30:02.50
Kent
Thanks! Awesome! Hey, thanks so much. And yeah, we'll chat with everybody in the future bye.

30:08.22
Girish
Um, by.

© 2022 Remix