 Well, hi everyone. So what I'd like to share today is about the how we do front-end development and sky scanner in general because I Thought that it's it might be useful for you to to learn about the things that we're doing and And the problems that we're encountering maybe or your company encounters the same problems like like ours Like if for example, you have about maybe about a hundred plus engineers working on the same site And all of a sudden the next thing you know is that you have some really messy CSS files CSS your JavaScript code code base has so many Like functions that have maybe different standards and different frameworks. So what I'd like to share to you today is It's mostly just about us. How we do it the sky scanner a little bit about me So I'm I bit I've joined sky scanner since 2013 and since I joined sky scanner I've been working with a different different groups different teams every year I changed teams So every year it felt like I'm working for a different company And also every year means that there's a different stage of growth that we we go through So there's a different reorg then we handle different products then we introduce new products So here are the different teams that I worked on GitHub and LinkedIn. I posted it there So what this talk is so this talk is about just very high-level view of how we do Front-end development and sky scanner. I'm not going to go through the specifics like for example, how we do I'm not going to dissect to the code. I don't think I Don't think we'll have time for that and I'm not really the best person to to walk you through on that and This is also coming from a perspective of someone who's who doesn't do really front-end On a day-to-day basis or on a regular basis So I'd like to share to you the outline of this this talk So the the first the first I'd like to share to you the Story of sky scanner the the growth that we've experienced over the years and With that growth we also have It means that the team is growing as well and we we ended up with distributed teams across different countries in different regions I'd also like to share with you the What what did what else did we do in order for us to make sure that we keep the business running and also deliver quality products on a regular basis so the the things that are outlined from nailing the basics all the way down to Front-end standards we cutter. So this will be I think mostly the I'm going to show some demo every now and then and I will walk you through Some of the technical aspects of it. So the sky scanner story how it all began so it's We have a this is our CEO. So it started as a just a very simple spreadsheet where Because he liked to they liked he and his brother like to ski around Europe and at that time on the year 2 I think about in early 2000. It was it was The the advent of a budget airlines There were quite a lot of budget airlines around Europe and they find it hard to Compare the prices. So they started with a spreadsheet with the MS access back and I mean database Growth so After the we have founded they have found this guy's guy. We have experienced this massive growth along the years where I'm going to show this timeline here probably I'm going to highlight here that some of the things that exactly happened and and we can go back to this later and So that I'm going to reference this back because it's going to show you some of the problems that we encountered so 2003 sky scanners founded I'm going to highlight some of the probably some of the things here like in 2013 when we started to Acquire a hotels company, which is called fog and then after that we opened an office in Sofia and Around 20 so early 2015 we also acquired another company another hotels company, which so it's another group of people another team and That that's one of the reasons why we have a very diverse team in sky scanner So these are the growth that we experienced. I'm going to go back to that later oops That's I don't want to go through that and our ultimate goal is make travel booking as easy as possible. So Along that growth that we experienced we We ended up with having this distributed teams across across the region across different countries. So We ended up being a very let's say we're being a global company where We have a 60 about 60 million visitors and we also have all this different employees from Around the world where it became a bit Really challenging to manage at some point So I'm going to highlight the challenges that we faced when we were During that stage of growth. So when you see this picture, I probably Would like to maybe what you can imagine the communication problems that we have probably we have different teams from different countries. So There were different teams that had different standards and we also had We ended up with too many languages and frameworks and there's also duplication of work that has happened So these are the engineering challenges that we faced that I mentioned earlier and Yeah, so imagine we ended up with a situation like this where we had this Different teams from different regions. They have different stacked. We had this We had some really strange combination of tech stacks it's it's more of a like result of acquiring different companies and also different people from all over the world and if you notice there's some there's this Aurelia the lower that you see which is I just want to highlight that because it's one of the JS frameworks that one of the one of our engineers in Singapore proposed and right now I don't know what happened to that framework So so the story here is that we were not we were not ready so Because we didn't have the proper infrastructure and tooling and also we've given All the teams too much autonomy in what they're doing. So we ended up just having this diverse set of languages and frameworks and Also, there was some at a time. We were also Playing around with the AWS. We're experimenting with AWS. So we I think what we did was that we had we just gave everyone a $500 budget per month on AWS and gave them the license to Every team the license to deploy and and use AWS. So this is one of the consequences that we need to face so in order for us to solve that we need to first we need to nail the basics which is I'm going to walk you through in the next few slides, but I'm not going to Dive exactly on this nail the basics part because it's mostly has something to do with our deployment pipeline So I think this this alone deserves its its own its own talk 30-minute talk. I think so in order for us to To start tackling the problems we need to nail the basics I think that the very first that we need to look into this our continuous delivery pipeline where We're using just this open-source software. You can look it up drone.io it's it helps you easily build your Docker images and configuration as code you can easily just Just paste there the command line scripts that you need to run and then It's also container native. So if you're using Docker, it's very easy to integrate with Docker deployment orchestration. So after you built your your app in the deployment pipeline you can We need something that will deploy this to across different clusters in AWS. For example, if you're using ECS We need something to to build that to to do that So we have this internal tool that we call slingshot that allows us to deploy a clue in ECS clusters I'm not going to dive into that But I do have some articles here that I I posted in the reference that you can you can check It's a it's a three-part article that our former CTO wrote that probably can learn a few things on Yeah, I'll do that Sure Yeah, cool Then okay, so after we nail the standards we need to come up with our own Front-end standards that we need to adhere to in order for us to Make sure that the business is running but at the same time we need to Also make sure that we adapt to the growth that the growth rate that's happening So a part of the front-end standards is cookie cutter cookie cutter is it allows you to somehow reuse the Existing templates that are pre-configured and run them as services Is anyone is anyone familiar with cookie cutter? I have used cookie cutter the Python No, okay, I will show a bit of a demo later, but we we kind of Modified it a little bit to in order for us to reuse it and internally so what what basically it is is yeah You have a set of templates, maybe I'll just go straight to the To this diagram, hopefully it's which is hopefully clear enough, so you you just need to run this command line This this command on your shell and you just we just have a preset template which which contains the configuration that we need to deploy and the Existing like front-end components that are reusable and then we just need to enter the The details in order for us to to make sure that we we name our services properly We know who's the owner You know what? I'll just show a demo and then So it's easier so Here's how it looks like So we have a It's too small is this Visible enough, okay So we're just we just need to run this command like this for example, you have this template that we already have prepared and I mean let's say I want to build a new A new front-end or just a new simple web app with the node. I'll just run this in my command line for example Then it's going to ask me for certain details or information like Okay, it looks like the demo doesn't work Let me try again Okay, looks like it's it's our lucky day today, so I'll just So so the idea is that I'll just enter this and then it's supposed to ask me a few set of Information like a service name then the group github group description of the service and you'll end up with You're supposed to end up with this With a service that Has all the pre-configured Script that we have for example this one so Maybe I'm connected to the row. Okay. I don't know why I'm connected to the guest Wi-Fi. I Need to connect to our internal Wi-Fi Okay, I'll try that again. Well, at least at least the the page loaded Okay, so there you go Yeah, so this is what it's supposed to ask me So it's supposed to ask me the name of the microsite So this is going to be the namespace when you when you deploy your your web app to production So I'll just name it as For example and then it's going to ask me another information Which which is the description blah blah blah, so I'll just put some description the AWS project So that's an example and then it's going to ask me. What's my target user? So if I put their partner for example, it's going to enable authentication if I put Internal is going to use to enable the LDAP authentication for example. I'll just use Chover so these are This is just arbitrary questions like in our case we have a we classify our services into three categories So if it's first class it means that it needs 24 hours 24 7 support for example, so I'll just just for testing. I'll just put So here so after this it's a support is right now generating the project in the background and I'm supposed to see this Folder right here and when I come in you can see that it has all the everything that you need about When you want to run a react a react web application It pre-configures everything for you and if you go here you can actually see the so this is We can reference this back later, but this is oh You can see the so from here the what is not the one So actually pre-configured the feed the service name. This is just one example so there are many other things that it has pre-configured for you and Yeah, this this was the this is a service that I Cookie cut earlier just to make sure that in case in case it fails But but you get the idea is just you're just cookie cutting an existing template and Anyone can just reuse that same template over and over again So going back to the slide Okay, so that was the cookie cutter Then the other standard that we tend to follow is reusable react components Luckily recently react has been quite a bit of a game changer for us. I only have 90 minutes left, okay, okay, so then react components right cool, okay then Okay reusable react components. So these are just reusable standards Just imagine it's it's our own version of a bootstrap where we just go to one location And then we just reuse the same elements the same buttons with a with their own with exactly the same color same padding and margin and So in case you haven't seen we have a It's open source. It's it's called backpack Backpack and it's on github Uh, okay Maybe so this is the how it how it looks like so the entire process Maybe I'll try to connect it with the quick cutter So somebody for example going back to the quick cutter somebody will click at the template and then enter the service details in there and then the next thing is that once your Web app is ready. We have this reusable react components that we just We can copy and paste literally and just install as Just npm install and then copy paste the the element name and set it so I can show a bit of demo here Let me go back to my Editor so here. I'll just you can tell that I've done this so many times before Presentation, okay, gotcha So here So this is the an example of One of our pages internally, so this is an example of a backpack tag and then I'll just probably just add another backpack tag here and And just deploy it save the changes exit full-screen mode and then just refresh the page and I'm supposed to see the Changes that I did just now there I go Okay Yeah, so that's basically our what an example of our backpack component and What I normally do is this I'll just go to our documentation page and just copy paste the Elements and the examples here Play from current slide Okay, that was the demo for Our react components, which is which we internally call backpack The next one is open components. So we have this We have this Tool that we this open source open components. So basically it's it's it's also a reusable component But it runs on its own server. So what we do is that we deploy it behind the API gateway in Amazon and it's it's just a it's just another node react app, but it's It's reusable and it's hosted and it's dynamic so you can pass a parameter So one example is I'm not going to show an example. I'm going to show an example later But I'm just gonna show you like maybe a How it looks like from a high-level point of view So this is for example, this is your web application right here You can see the header OC OC is open components and then you have the OC registry This is where all the open components are hosted So what we do is that our our web application sky scanner net for example will consume this from from another server, which is What we call the OC registry and then doing that it makes it easier for us to let's say you have a separate pipeline for your header sidebar footer and If if there are changes that you need to do on the header and sidebar it it reflects across the different web application that use it Which is which kind of helps visibility, I mean helps in visibility and makes it easier for us to Work together, especially when it's a bigger team. So this is how it looks like and in the overall workflow. So Just a quick cutter and then after you click you got you have this web application that was done from the quick cutter And then you just need to Make sure that you call the the open components header and sidebar so so that you can render them and I think it's best to show another demo for that So I'm gonna show you first how it looks like in my local machine if I'm running a preview of the open component So this is an example of an component for our when a partner is logged in for our partners for example Expedia whoever the online travel agent or airline so so what the What our web app does is that it's going to do a get request to this and it's going to somehow inject the The content part or the the microsite part in between or in the middle or just somehow do some sort of composition and We also have this This is another example, which is which probably look similar to some of you who uses the sky scanner net who visited Yeah, so this is basically the another open component that that just hosted somewhere So imagine somebody when somebody makes changes here It's supposed to reflect across the different verticals flights hotels car hire and so many other pages and What else can I show and it's it's rendered this way actually it's rendered in a unique way so So it's very flexible when you render it so you can render it like this and then you can set different versions So your your app this and then this will be consumed by your maybe you can however you want to use it you can use Probably the the new async async function and react or just as long as you can get and render it should be fine So we use this a lot I think for mostly a bit testing so it's easier to maybe switch the different friend components So that's the open component Demo And I'm going back to my slide Okay So this is so just now I showed you the the bits and pieces starting from the cookie cutter then the The react components and then the open components. So this is how it looks like right now the our overall structure from another maybe higher level so we have We have this different microsites and there's our routing service and this microsites are owned by different different teams so it's easier for us to just To to deploy and we don't have to worry about Using the same one of the code base from different locations different squads and It also makes it easier for us to To switch to another squad because or another team because we're practically just reusing the same Components and the same standards that we have Yeah, so the here the just a few lessons learned that I want to highlight So when we're implementing all of these standards overall, it's it works both ways So for example, if you're an engineer using it you you need to You need to for example, if you encounter any issues you need to Have this that patience and report the bug file the bug reports to the developer and a woman team was working on it and And also you also need to Instead of having to find a work around yourself. Just you need to be very disciplined enough to to hold it off and maybe wait for the fix so that every because it's it's kind of a More of a long-term investment You're going to slow down for a while, but then it's going to speed you up at some point It will not work for all engineers. So I think one of the lessons we learned was that they were Not a lot of engineers really are okay with this kind of change because most of the really CSS focus or JavaScript focused work is Offloaded to another team who's really doing all that work So if you're unfortunate to not belong to that team and then for example, there's You couldn't join the team because they they they already have enough people So it's going to be hard so we had a few people who who left because because of this situation because they really want to do some really pure front-end stuff less effort in handing over ownership and team rotation so this one makes it easier because there's a clear line of what you own and What what services are are you supposed to maintain and when you switch teams as well? It's it's quite easy for you to just hand over all this all the microsites the open components Because they're pretty much the same but but we still have a this challenge at the moment because there are still some Old pages that we haven't migrated yet because Due to you know because there's just so many things going on. So for example, if you look at this page the far flights page Obviously, this is already using our latest Components react react component the backpack component. This is the standard button if you go to hotels You see the same thing as well. It's so it's exactly the same style of button But when you go to car hire You you easily notice the our legacy It's one of our kind of neglected product at the moment, but we're we're we need to prioritize but I think as long as right now It's the business is still running for car hire. So it's okay, but we're we're working in it and You see what else? Yeah That's that's it. That's how we do. That's our standards and how we do front-end development Here are the questions. Yes Yeah We cutter because we react have so reactive isn't that react specific? Okay, we cutter we use it. It's it's more of a general tool that we use not just for react So it it helps us. It's because for us. It's more flexible. We use squeak cutter for our Java services or Python IOH TV's HTTP services and for react so it's and it's also meant to somehow help you template ties the some of the configuration for service like your AWS file your Drone or deployment file and Docker file Dynamic Yeah, there's a bit of a trade-off with the convenience that we There is a trade-off definitely so you need to do a bunch of HTTP requests for that but but I think nowadays the Computing power is cheap and all these HTTP requests can actually when you're on the cloud is quite cheap So we have that the trade-off that we have to deal with it slows down a little bit It's not very noticeable. Just like just like how for example when you search Google flights It's your sky scanner. You see how noticeably faster Google flights is Because because they have their own GDS so we also have that disadvantage with a Because of the convenience that we're trying to to achieve with open components It's it's actually a service that's open source that's being maintained by a company called open table so if you look up the that I sent here, so that there are I think they're they're a startup that Have the same problem as us. So they they found a way to to Come up with this open components thing that where you can just deploy your front components Because we wanted to be dynamic So this also components actually react and node so you can pass parameters and do some processing in the background and You know, so call another API endpoint Yeah I was gonna ask about your performance because I saw like the lazy loading each other script in your CSS Which is forcing very paints and all sorts of stuff I'm guessing you just haven't really looked at it all that much yet. Is that not yet? Yeah, yeah, it's very safe. Yeah, and also also because Especially for us the teams who use this tools that we have Probably it's not a good habit, but we have this habit that we'll just leave it to the developer and a woman squads to Figure it out for us and they'll just we use whatever they see in the performance budgets Yeah Email other questions from anyone else Thanks So how long did it take this whole process like from the point where you realize we need to switch to this thing and To how long was out and was there like a core team that was put together to kind of like formula this whole thing Oh, was it more like organically that? Right. It was a conscious decision. We really came up with We had a you're right. We had a cooking that we started this so we started with a what we call a release engineering team who we Who focused on automating all of these so it started from 2013 Maybe late 2013 and then It took us probably a year to really nail the Deployment pipeline and make sure that no maybe you have less five engineers complaining every day just to make sure that it's It's usable. How big was that team so the team that started it it was It was about seven people actually. I was I was supposed to be initially with the team, but it was hard for us to coordinate because most of them are in Edinburgh, so Yeah, I only I only contributed on the command line Not very significant contribution any last questions If anyone doesn't know what sky scanner does because sky scan is one of my favorite things and I'm on all the time any time you are Looking to fly from somewhere to somewhere else sky scanner does a search across basically every airline you can think of all sorts of weird route configurations that you've never heard of and Carries it across lots of different sites, so they don't sell you the fair themselves They basically show you other places And to give you a practical example say you're organizing a talk CSS conference in January of this year and had to fly someone Had to get them here as cheaply as possible Sky scanner is my go-to for that So if you don't use it all similar things for when you're planning your holidays, then do Thanks