 Okay. Hi, I'm Robin Ginn. I'm the executive director of the OpenJS Foundation. I am here with Tiffany Lanuyen from Expedia, and we're going to talk to you about a really cool customer case study, which is how Expedia is using OpenJS Foundation technologies. So, hey Tiffany, why don't you tell us a little bit more about yourself. Hi, so I'm Tiffany. I've been working at Expedia for the past two years and working on their landing pages as well as building their testing pipelines and generally trying to make the developer experience their good and my free time. Then I'm also a mentor for Free Code Camp Montreal and I teach new people how to code and kind of reach their development goals. That's very cool. So for those few people maybe in the world who don't know about Expedia, just give us a little description about what, you know, what kind of company Expedia is. Sure. So Expedia or rather Expedia Group is a travel company that has, is a multi-billion dollar industry with millions of users from all over the world and booking properties and booking dates for their travels. Great. I know I use it all the time. So it's great to have you here. So sort of just broadly, tell us about sort of the engineering team that you're on and what sort of challenges that you all face every day. Yeah, right now my engineering team is facing some pretty interesting problems. Essentially at Expedia for context, we have a lot of different brands and a lot of different pages, which a lot of apps end up serving. So that makes it so that we have a lot of duplication of code and issues of inconsistency throughout the user flow that we want to solve. So that's what my team is doing. We're trying to reduce that duplication, reduce the inconsistencies and make sure we're all aligned in our, in our design systems. Great. So then describe some of the solutions that you're building. Right now it's in order to kind of remove that duplication. Then we are building this library, which is kind of making business level components that can be reused throughout different clients that are tied to a GraphQL to data so that people can just use it and plug and play, for example, a property card or a header or or something that has, that's kind of attached to data. And that will, and that is also following accessibility norms, performance, SEO kind of best practices as well. And that's kind of what we're working on. That's great. I was going to ask you sort of what are some of the things that were really important from a developer point of view when you're, when you're building a solution. So you just mentioned a few. Are there any sort of other top level ones? I thought I, I think I heard you mentioned some in your Oskan talk. Yes. Yeah. So I was saying there's some accessibility concerns, you know, also concerns that we want to make sure that the bots are properly tracking and seeing through all the metadata that is on our page. And I think that was, oh yeah, and also performance, making sure that our pages are not too slow and that we're not kind of pushing big libraries that are maybe a little bit too hefty. Oh cool. So tell us how did you build your solution? What technologies did you end up using and how were those all put together? We ended up using TypeScript React node and GraphQL with React Apollo. So that's kind of the way that that library was built. We have internally a UI library for kind of these smaller pieces of the UI, so the fundamental pieces like H1s and A tags buttons. But we didn't have anything that would make a like a hotel card or something that is a little bit bigger, more business level and also tied to data, which is kind of reused everywhere. So those were the, those are the texts that we use and we try to make it kind of server-side driven as well. Great. And then tell us about your testing. Yeah, so yeah. Yeah, so our testing suite is pretty robust and it has been kind of ongoing for the past couple of years. We have an unit test and end-to-end test and an integration test. So that's using just testing library for React in our case. And then we have Cypress, which uses smoke under the hood for our end-to-end and our visual regression tests. And then we use BrowserStack for some smoke tests for cross-device and cross-browser testing as well. Oh, great. And then I heard that you were using the ESLint project. Yes. Tell us about that. So ESLint, as you know, is a pretty well-known lender at this point. And we used that at the step of the testing pipeline, which is the static checks, which catch so many bugs and so many kind of formatting in code smells right before we even push anything. And so that for us, it's really important because it's low cost, but it's also there to resolve a lot of issues for us before we even ship, right? So it's going to be catching things like if you forgot to initiate a variable before using it or assign it some value. So we're able to catch those errors before they ship as well as for new users that come into Expedia or people that are not really used to JavaScript type script and React yet. So it kind of gives them the kind of these rules and these don't do this and don't follow these types of standards and stuff, other standards. So that's kind of how we use it as well. So to save the time from our more experienced UI engineers from having to kind of teach them and train them through the pull request reviews. Oh, cool. So describe like a common scenario because I use Expedia all the time. So tell me like if something's not working, what are the sort of the common things that you see and then how do you fix that? Is it related to ESLint or just kind of a general problem? Either, whichever you know. Yeah, so for us, if we see on a page that there is an accessibility bug somewhere where this image doesn't have an alt tag or this anchor tag doesn't have, isn't connected to the proper buttons, then that usually would end up getting flagged to us by our product managers. And that ends up going into the queue of our technical product managers and going back to developers that then have to kind of figure out what this issue is. That usually at that point we would look at the testing to see what tests have been written that would, because we would have, we should have been testing that anyway. And then that kind of goes all back into fixing that bug. So we much prefer that these things which could have been caught by ESLint if we did have ES, which we do have now in place. So we can help us catch those types of accessibility bugs that are kind of surface level. And at that point we would have fixed it before even shipping in. Oh, great. Great. So a lot of, I mean, you catch a lot before it even reaches a general consumer. So that's, that's huge. Yeah. So I know you mentioned some other OpenJS Foundation projects you're using NodeJS, for example. How is Expedia using NodeJS? What is it? Expedia used to be more Java and JSP centric. And there was a push to kind of modernize these applications using Node and React and TypeScript. So now most of our applications, I'd say, that are serving web pages are using using Node. And it's been working very well. There's been a lot of training for kind of getting our Java developers more familiar with JavaScript. But Node in itself has been going very smoothly. And we use Node paired with Express for our apps, which is Express, of course, is another OpenJS project. And to server pages. And it's also part of our internal scaffolding and build tool. So scaffolding is being kind of setting up that repository and the build tool kind of very similar to create React app. We have our own that spins up these web apps. And we use, that scaffolding tool uses Node and Express and all those tools. Great. That's great to hear. You're even using, talk about sort of the globalization aspect. I think I heard you're using some of our other technologies. How do you globalize and scale your apps? Yeah, so as you know, our users are really from all over the world, and they are purchasing or they're renting properties for certain dates and travels. So having that invoice come out with really the proper currency, the proper date formats and all that is extremely, extremely important. And also, and I'm sure any developer would say dealing with dates and formatting and localization is a huge pain. And having globalized there and globalized within our internal build and scaffolding tool is super helpful and makes that really difficult complex piece of work really trivial for us to use. That's great. I'm sure the globalized maintainers will be happy to hear that. Absolutely. So how do you all measure what you're building? I mean, from a developer point of view, or maybe just your team, what kinds of things do you look at overall? In terms of metrics. How do you measure your success? We do it in a few ways. I think when I first joined, it kind of started out as conversion rates of how many people were based on certain experience, how many people were booking more properties based on if it was red or if it was blue. That's not really an experiment, but to show my point. And now we're taking an account a little bit more qualitative data of trying to see, well, maybe right now it's not as impactful, but in the long run, then this is going to improve the customer experience and provide customer value in different other ways as well. So I'm not a product manager, but it's that's kind of how I see it being looked at. Great. It sounds like you have a really nice integration with the product managers, your dev team, probably marketing folks for SEO. Yeah, we have our own SEO team and we have our product managers that kind of really let us know why something is winning or how it's doing and how we can improve it. And the developers are right part of that. That's pretty cool. Great. So let's see, what other questions do I have? One question I always like to ask developers when they're working is like, what would be just a great day for you? What's a great day when you come into work and you're like, this was a great day? A great day for me is when I don't have too many meetings and I can concentrate on doing one task. I'm at a point where most of what I do is helping others and kind of getting on meetings, pairing and figuring that out. And that's great, but sometimes I just want to be able to delve into a problem and spend a few days that are even consecutive three hours of solving it. And then being able to push it, merge it in at the end, having all the tests pass. That's a great day. That's great. Well, you've been sharing your expertise with others as well, public speaking. I know you spoke at OpenJS World in Montreal. Yeah, and the OSCon Super Stream, those are my first two speaker experiences. Hopefully I'll do more. That's great. And I know we have your slides on our website from the Montreal event for people who want to do a deep dive on some of the solutions. Great. So is there anything I missed that you think would be important to share for developers working in your space? Well, I think that UI testing in general is pretty new and there's a lot of new modern tools that can make things a lot better. Before and you had to kind of always use these Selenium-based or rather web driver-based tools and it was always kind of flaky and annoying and people would have to... People, even at Expedia, we have some repos that still kind of use these and it's always a pain to have to refactor and make any new changes as people dread that testing pipeline. I think it's important, even though it can be a little bit daunting to look into these tools and to try to build it in a user-centric way, which is not something that I think a lot of people would normally think about. But it helps so much and it helps to develop our experience and move so fast. That's very cool. And that user-centric testing is really what you've been really sharing your knowledge. So we really appreciate you sharing your knowledge with us, the OpenJS Foundation and all of our communities and really appreciate Expedia as a great case study for our technologies. Of course. Thanks for having us.