00:00.00
Kent
Hey, everyone it is Kent seed odds this is the remix podcast and super excited to be joined by my friend Eric tomayo today and talking about remix and user experience and how we can make it amazing and Eric and I um. We're introduced through the remix community through a cool project that he's been working on called metronome which I am using on my personal site. Um, and for acting as a forcing function for him to make it scale nicely. So that's been good. We'll talk more about that. You know a bit but Eric I'd love for people to get to know you. Could you introduce yourself to us. Okay.

00:39.49
Erick
Hi Thanks yeah, ah, thanks for having me I'm Eric so as you mentioned we met with ah in the remix community. It's been awesome. So I'm a developer I shopify right now that. In my free time I love to create you know, new projects and um I've been doing um, programming for a while more than eight years so it's been great and what I'm doing with metronome and with remix. It's been amazing. I. Instantly fell in love with the um framework. And yeah, it's it's been really good. Overall.

01:24.30
Kent
And sweet sweet So you're not using remix at shopify yet. Are you.

01:29.90
Erick
No, we are using playing all react along with Ruby and rails as a backend.

01:36.18
Kent
So cool quote and and and I'm guessing you spend most your time on the front end with the the react stuff. Do you do much with the rail stuff.

01:44.70
Erick
Not a whole lot. But yeah, my main focus is on the front end. So yeah.

01:49.16
Kent
So cool, good stuff. Okay, so I'd love to get to know ah your origin story with remix a little bit. Um, how did you come across it and what inspired you to build? Um, yeah, Well we can get deeper into metronome right now I'm mostly. Curious Um, what sparked your interest when you saw remix and and how did you get introduced to it. So.

02:13.22
Erick
Yeah, so in to any 20 I believe um, it was like end in the year if I recall correctly Ryan we're talking about this um framework right? Um. So then you had obviously by that time you have to had like a license for that. Um, so I was like excited for that. But I wasn't ready. You know to invest on on it up until 2020 early you know. Before my before April I believe I was um, looking at it and I say hey the hell let's let's buy it and see what it what it is because by that time I know that it where it was getting traction. Um, so you were um on board on on that. So I've been following Ryan Michael and and you for a while I know you know your work and obviously who who doesn't know react router by this time. Ah so.

03:13.78
Kent
Yeah I.

03:19.63
Erick
Then I bit the bullet and just joined the community and since day one you know it's ah starting to learn the logic and and and what day. What. Ryan and and Michael wanted to accomplish with this and obviously you know learning a lot about the real api. The web browser api which is like a plus on top of it. It's that's I and also my. My mental model of how to make an application just get so simplified that I was like ah this is amazing I need to do something right away with this and that's why I started metron um, and then I I like I love. You know, dealing with metronome and and dealing with the internals of remix open my eyes to something that like it's really great. What what's been doing and and it's so easy to do something right? Ah and right away and yeah, that's that's I believe that it's. Been great and that's my history of of um, meeting you guys and and remix as a whole.

04:37.77
Kent
That awesome! Awesome! Um, yeah I'd love to talk more about metronome. Especially since metron um metronome is basically a tool for helping people track and improve their user experience. Um I'm curious about 1 thing that you said ah in addition to that? Um, you mentioned. That ah, your mental model for building web applications was simplified. Can you dig into that a little bit. What? what is it about remix that simplified your mental model.

05:04.55
Erick
Yeah, 1 other thing is like you have just two functions. You have the loader and you have the action and you do whatever you need to do there right? and that it gets collocated with your react code right? Ah right away so having that and letting um remix just to split the code for you one for the server and one for the frontend then you have the data what you want to do with the data on the server side and then basically use a hook. To connect your data and and with react the react component. That's it. You don't have to deal with that and and and anymore like um, you know when you have these usual ah react apps that you have to use effect and then fetch and then loading states. Check if it fail or not, you know that that thing is getting handled for you and you have to and you only focus on what you need to do I need data and I need to represent that in ah in the web browser and that's about it so having that handle for me. It's. It it lifts ah weight from me and if it if we have an error having error boundaries. It's amazing because I don't have like it's a component that if it fails it will render automatically I don't have to keep ah and and I if something fell. I have to you know, check a hundred states right? to make sure that I Don Handle Exception it's not going to break the whole app which is on this hard so that's why I meant by you know. Simplify my mental model that I focus on what I need to do instead of having these edge cases that I have to handle. Obviously it will be nice. You know to handle but for getting something out there I don't have to deal with that because it's already handled for me.

07:09.52
Kent
I yeah yeah I ah completely agree remix has really simplified my mental model from a state management perspective like that's always been one of the biggest challenges to so ah, software is managing state. Um, we often say like the 2 biggest challenges. Of um, ah software is ah caching naming things and off by 1 errors and ah I think we we really should add. Um ah state management to that and I guess caching kind of kind of fits into that lots of the.

07:35.34
Erick
Um, yeah.

07:42.92
Erick
Um, guests.

07:48.37
Kent
Um, what I've been doing over the many years that I've been doing web Dev is like the state management is actually cache management because I'm just managing the cache of of what's on the server and remix makes it seem like I don't it makes me feel like I don't have a cache and. And that I'm actually interacting directly with the database. Um, and when of course there is a cache there just to make it so that it's not slow and it's taking advantage of the browser Apis and things to to prefetch things and whatnot. But but as I'm developing. It doesn't feel like.

08:08.67
Erick
And.

08:26.12
Kent
Um, there's there's anything there and and it's not just that there's this really big weird abstraction. But it's actually a very simple mental model that goes back to web one dot O um sort of feel so it. Um, yeah, it's simplified my mental model as well.

08:34.22
Erick
Um, yeah.

08:40.35
Erick
Yeah I have a ah story with regarding the state I remember that when when I started to um, you know, um, code with rammix I install react query and like I tried to make it work. Right? Because my in in my mental model that I had previously. You know you had you had to have ah a estate management rather than bad as um, for example, Redux or or react query and then when I when I sat down and and think. About what do I need to accomplish and then I like it's like Clari with this or like it. It came like a like to me and said you don't need react query for this because it's already get handled with that with the hooks. So it's it's nice. You know to.

09:31.65
Kent
Yeah.

09:37.94
Erick
Just get that estate management out of the way and just get your thing done. Um, so yeah, definitely it's something that we had to include in that. Um it's It's been great to be honest.

09:48.72
Kent
Yeah, yeah, it's funny people will ask me hey can I use Redux with remix and can I use react query with remix can I use apollo with remix. And at first I would say why would you want to? but ah, people were very confused when I would ask that? Um, and so what I started saying was ah yeah, you totally can. Yeah, absolutely go for it and and then in the back of my mind and just know that when they try they're going to find out. They don't need it.

10:15.90
Erick
Um, yeah I mean you can but you shouldn't You don't need it.

10:18.50
Kent
Yeah, yeah, it's It's just like you know you you need to hammer a nail into in some wood and so you bring your screwdriver along with the hammer and you're like why did I bring this I don't I'm not going to use this thing. Um, yeah, so anyway.

10:30.43
Erick
Um, exactly.

10:38.14
Kent
I'm I'm kind of curious since you started working with remix you. You aren't using it at shopify yet I expect that will change in the future. but but yeah you're kind of currently not working using remix at work. You decided to just try it out because you trusted me and Michael and Ryan and and thought it.

10:43.87
Erick
Um, meta.

10:56.88
Kent
Sounded interesting. Um and the first thing that I am aware of that you built was metronome. Did you build anything and I really do want to get into metronome but I'm like holding off because I want to make sure we cover everything else before did you build anything else before metronome that like led you to to feel like you needed.

11:08.91
Erick
Yes, of course.

11:16.40
Kent
Something like metronome and.

11:16.13
Erick
Um, well I've been like I sat down and then thought about what will be nice to have um, right of the bat with a new ah remix application and looking at another Frameworks you have vers all next as you have um. Well, that's pretty much like the the one that has it um and then you have this kind of insights or real user monitoring that you know that how how your app is performing right? and and I thought.

11:36.86
Kent
Yeah.

11:52.10
Erick
That will be really nice to to have something like that. Um, because if we say that remix is fast. We should be able to demonstrate that. Um, so. And also I was looking for something that will be useful for everybody. Not only you know doing something because I need to do something with remix just like how I can combine these things that I can that can be useful while doing the same app. And I and I always wanted to do something that you know duck fooding itself and in in a sense like an app that uses itself and what what that anything that will be nice to have then something that can be measured so that's why. I started to poke around. Um you know web vitals and and and durations and that stuff and and how I can um, plug this into remix and that that's how um, Matro um was born.

12:56.77
Kent
So yeah, that's awesome. Um, so metronome Um, like did you have a lot of experience with web vitals before did you like what? what made you so interested in having this sort of measurement in place and Like. Um, yeah, like why is why are these numbers important to you I guess.

13:21.60
Erick
Well, you know that a lot of people tend to disregard a framework because it's slow or um because it takes too much to load or something and and I know that ah Ryan and and Michael were. 1 of the pillars of remixes delivering things fast even if you don't have the Javascript loaded. You can be shown like can show something and you can work with what do you have while everything is floating in in the background. Um, also the waterfall simplification. Ah, right? and you know trying to help the community as a whole why? Why would I do something for measuring. Okay, let's measure it um, so everyone is um, you know, yeah remix is fast remix works and thinking back like. I've been doing things with analytics since I started to work with in in the this deaf environment like developing um, dealing with huge data tables and I have a little bit experience. But. With what vitals I was um, like I didn't know a whole lot I know what they were but I did not know how they were measured so that one of the things that I spent months and and I still you know learning a lot about those is how how we can measure. Um, those kind of of titles and how ah like what determines what is good or what is needs to be prove or or what is a poor performance on on your web app. So it was a nice challenge and I said okay, what up let's get. Let's do it. I mean one of the things that um I love about doing new things is the challenge so you have remix which learning it's not a challenge because it's so easy. But at least if you put something that it challenging. It's challenging. You can focus. As I mentioned previously you can focus on on dealing with the difficult stuff because which is something like measuring and and showing with vitals and let remix do the hard work which is dealing with with the the server and and the front and so yeah.

15:47.69
Kent
That yeah, that's awesome. So can you describe a little bit about what web vitals are and 1 1 thing that I think people make um, find particularly interesting is that the measurements are not um, like just run on on Ci or something like there. They're coming from actual user interactions. So can you talk about that as well. And.

16:10.89
Erick
Yeah, sure. Basically what bys are ah you know a couple of measurements that not a couple but some measurements that are done against your um web app basically telling you um, how. How can say this? how good they are. Ah, for example, what time it takes to load um from the server from the request that the browser has ah do to the server to the user be able to see um also how. Much movement or or layout changes you have on your app you know I when Ryan has this explanations. You know that sometimes we had the we have previously what we do is. Put a lot of spiners and then you can see the jump around of of your layout. Um like all over the place and those things those kind of of things that are measured. It's pretty much what what titles combined like I can go deeper on that. But I don't feel like you know it's a good explanation. Um, just to go with like layout and and time to ah first buy or something like that. But yeah, that's pretty much what what bible says? Um, it's their whole experience. That the user has against your app pretty much.

17:46.63
Kent
Yeah, and and people who go to my site if you open up the network tab. You'll see these network requests that are coming from from your browser as you're using the app not just on the load but also like as. You're interacting with the app and so it's it's the whole user experience. Not just the first initial load right.

18:05.90
Erick
Yeah, exactly. It's the whole thing. It's not just if I load fast but my ah app jumps around too much or or the layout changes a lot.. It's not a good experience. Even if you're loading fast if you're load your app fast. So. It's It's like the whole experience I Just as you said.

18:27.73
Kent
It? Yeah yeah, yeah, and having it on actual user devices rather than measuring on some Ci that just like runs every day or something like that. Um I think is also significant as well. Right.

18:41.10
Erick
Yeah, yeah, for sure I mean that's the difference you know from lighthouse to metronome having all kinds of devices hitting your app and you to be able to measure it is something very valuable in my opinion. Because it's a real. Um, it's out there. Your app is out there and and people having real people are having real experience against your app. Um, so that feels more valuable than having a ci or even in your computer usually as a but has you know good. Max Max good computers good pcs and you run lighthouse against your your production build and you say oh it's a hundred It's fine. It's good, but that's not the reality when you have somebody really far from from your server. Ah, trying to you know, use your app in um, a mobile in and in an all computer in and a different um Android device. For example, right? It's not the same thing and if you have these kind of interactions you can. Work and and take action. You know to improve your app doing that.

20:01.22
Kent
I Yeah I think that helps a lot. Um, yeah because we typically and do measurements on our own machines and and sometimes we'll forget to like throttle down so that we're simulating ah a low-end device or whatever and. Um, what's cool about metronome is you're not just like even if you do think to throttle down and and change the network speed or whatever you still might not be capturing the actual user experience of your actual users. So having the users tell you how their experience is without them having to actually tell you is.

20:33.93
Erick
Yeah, yeah, yeah for sure.

20:36.99
Kent
Helps a lot. Um, so I've been using metronome I may be 1 of the the first users that you had ah and I think unless I am mistaken I'm still the largest user that you have and so I get in fact I just looked at the.

20:48.66
Erick
Um, yeah.

20:56.46
Kent
Weekly report this morning from my fathom analytics I had 52000 unique visitors who had about 100000 page views just last week. Um, and and then my metronome stats are also public just like my my analytics. And I'd like to to talk about my metronome stats a little bit and and um because they're they're not as good as I was hoping they would be so because to to be perfectly. Honest. So um, I'm actually a little interested I have a couple questions about it. So I'll just mention.

21:22.33
Erick
Ah.

21:31.79
Erick
Sure.

21:34.91
Kent
And people can if you go to? um my transparency page on my website http://kenc.dotcom/transparency then I've got a link to the public analytics and the public metronome stats and right now I'm looking at January to February fourteenth um so it's it's a month time. And in that time I have 5 almost five and a half million requests um and let's see 8 and ah just over 8000000 loader calls and 77000 action calls which like lows my mind. Um, yeah, it's crazy. But.

22:05.64
Erick
Yeah, it's a lot.

22:12.20
Kent
With all of that and and there it says 831000 data points and my web vital score my overall score with the the p 75 which maybe you can explain that a little bit to the overall score is 72

22:24.49
Erick
Sure.

22:29.41
Kent
Percent I guess it's is 100 points total. Um, and yeah and so that's lower than than I was hoping for um when I released my site and and when I'm using my site I feel like it's quite fast. Um, but the real web vitals are are showing that it's not as fast as I was expecting.

22:29.66
Erick
Um, yeah.

22:47.79
Kent
And then this is desktop if I switch to mobile actually sometimes I think it improves. Yeah, it's a 91 on mobile somehow. Um, so anyway I'd I'd like you to talk about ah some of these numbers like why do you think? um.

22:51.13
Erick
Um, yeah.

23:03.25
Kent
Or Like what are some things that I could maybe do to improve this or or why do you think it's a little slower. Um and I'll just mention before that I let you say that? um, my my initial thought is well I'm doing a lot of things like every request is not hitting a Cdn It's actually hitting an actual server. Ah, because it can't hit a Cdn like every request is unique for every user So is that like primarily explanation is there just no way to make this any faster or or what? What do you think.

23:24.70
Erick
Um, yeah.

23:32.39
Erick
Yeah, for sure you know as this is a a score that. Overall um, is your your score across all routes of your app. You know it's summarized so you could have like a. Ah, slower route that it gets hit a lot and that it's you know, hindering your performance overall or or your web Bys a score Overall. So Um I have. Ah yeah, I'm I'm almost released be V one so you will be able to see.

23:56.86
Kent
And yeah.

24:07.66
Erick
Ah, who's ah, who's the culprit or what route it's you know, making your stats a little bit lower than you want it to be um, but yeah, something you know that has a lot of things going on and waiting for rendering. Its. Affecting your your Lcp or largest contentful pain. Um, so pretty much that what it is is what how long it takes to render the whole page and and and to repaint the whole. um um app in the browser that's your like largest contentful pain and it's taking a little bit. Um, so yeah, something that that we have ah we need to check that out. Obviously also the first contentful pain which is with takes ah how. Fa the first render of your page in the what browser takes um so that's what it's taking so long and again these are your escorries across the whole website. Not. Like yeah, you know your index or your first can see that's dot com. So luckily um, I'm hoping that next week or or in two weeks I can relay so we can take a look again at this and say hey Kent this is a route that is hindering like your whole.

25:19.29
Kent
And.

25:35.64
Erick
Ah, it's affecting your whole score. Um, but even with that It's not too bad to be honest, but yeah I mean it can be improve and that's one of the things that this is a Beta I wanted you know to get it out there and and um, get as much as feedback. Sorry get. Feedback as much as possible because one of the things that you will like is hey I want to see what's going on there. It's just not a very actionable actionable number if that's correct saying I Apologize. Um.

26:06.65
Kent
Yeah, yeah.

26:11.22
Erick
So yeah, it's something that is coming right? Our way It's just like it's checking a little bit.

26:14.46
Kent
Yeah, yeah, well no, it's it's certainly not your fault I should just my site should be faster. So but ah, but yeah that that actually makes a lot of sense if if I come down here I can with with the version that I'm looking at now. I can see the route durations for my actions and loaders and the route calls a number of of calls and things and I do have a couple of routes that are like way way slower than the others. Um, in particular like the Discord callback. So when people connect their Discord account that that takes. Um, over almost 5 seconds um because I'm interacting with the discord api and Discord is I guess not fast or something the rest of them are are all sub-secd or a lot less than than a second. So yeah that that could explain a lot of of this number. Um.

27:01.29
Erick
Now.

27:07.79
Kent
So I'm looking forward to to V one to be able to drill down a little bit more and improve this. It would be here's a feature request for you. It'd be really cool for me to be able to like filter out certain things and see what the average number without some things that are outside of my control that that would help me make that number more actionable. And also just help me feel better about myself. Um.

27:28.76
Erick
Yeah, there are a little little things that are coming. Um, it's It's more you know, rolling out things um, takes a little bit ah of time but the the good thing is you know these things are I ready being taken care of in in in that.

27:37.93
Kent
Oh yeah.

27:48.39
Erick
Um, getting the data. It's like the data is there. It's just like how and one of the objectives of meroom that I have it something like that getting action actionable data and to be able you know to know what's going on on on your app. Um, so. Yeah, definitely. Ah, filtering is is um in the plans. But as you mentioned having 5 millioning of requests. Ah you know I have to sit down and and think how I can do it fast because one of the things that I want is. Having this experience near instant and as as you may know right now we are not using this is hitting the database right away but with some tricks of prefetching. Ah, you know you feel it a little bit. Ah, faster. But if you take for example that month it's going to take out a little bit because you have a lot of data right now. So yeah.

28:48.40
Kent
Yeah I I'm glad to give you the opportunity to to figure out how to scale this pretty. Well do you do you have very many other users or is it mostly just me.

29:00.82
Erick
Well I have right now. Ah um, more than 100 um so yeah, they're they're being using it and not not at your scale I think you are yeah obviously you are like the top one and I have sure Geo is the second one and then.

29:05.64
Kent
Nice.

29:20.60
Erick
It's it's ah it's a little bit easier for for the others. Ah, but yeah I am really grateful because this gives me an insight of how to live with high traffic data. Um, and I'm I'm not doing it too bad in my opinion. But yeah of course it's.

29:36.44
Kent
You Yeah, it's great.

29:39.75
Erick
It's something that I can you know take a look and and take as an example of your um, you know your huge um data points I I think I have more than 50000000 right now of entries. So yeah and it and it's handled very well.

29:51.82
Kent
Who smoked.

29:57.39
Kent
You yeah, that's awesome I just think this is the coolest project and I really appreciate you building it? Um, you mentioned that you wanted to improve the performance of your own app and 1 thing that you mentioned in there was was prefetching and um, this is where we're down to the end of the show.

29:58.50
Erick
So that's good.

30:17.60
Kent
And um, we'd like to hear what your bit of advice on helping people improve the user experience of their own apps. So what would you say? what's 1 thing that people can do to improve the user experience of their own apps. So.

30:28.85
Erick
Well remits has the easiest way to improve with ah perfection. So a refreshion. Not a a lot of people and even I didn't know about it. You know, um, you know and it's not even remixed per se it's the browser. That does the prefer like the prefetch. It's insanely good and it's ah it's ah api for the browser and remix what it does is leverage it to ah to a point that hey you can't prefetch things before even the user clicks on it. So one of the things that we can improve it using remix is using prefetch links. So I am um, very like I love them and and I I want to let people know that you can use it and. It's it's a got sent in my opinion, you probably don't know it about it if you don't know it go ahead and and sit down a little bit. It's 5 minutes it's nothing it's very easy to learn about it but that improvement and and. And the feel of the user that is using your application. It's going to be ah like insane like good I use it. You know you can be using a little tricks to improve using profet links. But. Even you know hovering I navigation and and trigger that prefetch and just click on it. It. It feels like way faster than just fetch the data from once you click. So yeah, that's that's one of the things that I love about remix and and I love and and what I love about it is that it's not even like. Ah, rimix a specific thing is just like it leverages. So yeah, that's 1 other thing that's 1 thing and and and I and I can you know say a lot of things that ah ah to to improve user experience. Well yeah, that's the most. Ah, important in my opinion.

32:31.34
Kent
I yeah yeah I love it I'll put a link to mdn has this cool link prefetching fact that I will link to for people to to go take a look at it is. It is pretty legit. Um, so yeah, and remix makes. Ah, this is the the beautiful thing about remix is that it exposes these web. Ah Apis to us to make it really easy for us to use these web apis to make our apps really fast. Um, so that's awesome, cool. Well ah Eric what's the best place for people to keep up with you and what you're working on.

32:59.50
Erick
Um, yeah. Well, you can follow me on Twitter at Eric Tomaio ah and also you can follow metronome. So it's metronum. Ah my god I forgot metum sh so I think ah you gonna put it. Down there. But ah yeah, you can follow me there I tried to publish my as small um, progress on a metronome. Also you can find me on the remix discord. So if you tag me or you can send me a private message. I'm more than willing to respond it. So yeah.

33:43.84
Kent
That awesome. That's super nice of you to offer. Thank you Eric and thanks everybody for giving us a half hour of your time today to chat about remix and user experience and with that we will see you all later bye.

33:56.86
Erick
Again.