Hygraph Studio Launch - DevX: Performance Gains
In this session, our Product Managers Alexey Orlovskiy and Fabian Beliza walk you through new features and improvements around developer experience and performance. You will learn about Hygraph Studio, Hygraph Asset Management, and some under-the-hood improvements to Content and Management API. Then our Sr. Technical Writer, Romina Soledad Soto, will talk about our approach to documentation and where you can find all information related to Hygraph Studio Docs. https://www.linkedin.com/in/aorlovskiy/ https://www.linkedin.com/in/fabianbeliza/ https://www.linkedin.com/in/romina-soto-098b4139/
Asset Docs: https://hygraph.com/docs/api-reference/assets/assets-overview Blog post about new Asset System: https://hygraph.com/blog/new-digital-asset-management-system Caching Docs: https://hygraph.com/docs/api-reference/basics/caching Studio Docs: https://studio-docs.hygraph.com/
Join our Hygraph Community slack channel and give your feedback here: https://bit.ly/hygraph-studio-feedback #HygraphStudio
Transcript
[Music] [Music] w [Music] w [Music] [Music] [Applause] [Music] hello everybody we are live and let me know in the chat if you were fing like us Backstage on all that fun music that was so much fun anyways so today is day two of our live events for the launch Studio of this the studio launch that we just did yesterday and so it's all about the developer experience and so today we have three um speakers all from hgraph and so if you have any questions um about what they're talking about or you have comments whatever put them in the chat so we can grab those filter them out and talk about whatever you have to say in the Q&A so you can actually influence what we talk about here today and so now that I'm at the subject of the chat um please put in there where are you tast and what's the weather like because for me it's the south of France it was super nice outside today like I even have like a bit red on my face because it's already hot I'm not sure this is supposed to happen right now um it feels like it's still winter anyways so if you have any other questions that feel like more like an offline thing or you have comments or you have feedback on the new studio because maybe you've used the studio already um feel free to join us on slack it's slack at High gra.com in our community and actually give us all the feedback and so um this is all out of the way let's now kick it off with our first speaker and our first speaker is alexe and I'm looking at your last name I'm gonna shall I attempt it I'm I'm just gonna say absolutely we're gonna go for it and then you're gonna just give me whatever it really is and then also you can just take over and say what you do um and what you're going to talk about and then we just go for it all right so let me just read it we're okay Alexi oh oh no orlovski yeah it's it's pretty close uh it's it's very close uh originally the r is pronounced so it's Alexi Arlovski but all right there you go you've been very close close Al the the jury is still out on how to pronounce Alexi in English but I go with the most common one and but generally introduce myself Justice Alex ah that that works yeah i' I've done a a lot of MC gigs where I try to guess people's names and it's always hard anyways um so you are a product manager and so you know what I'm just going to give you your screen share and get out of the way and you can start talking to us about all the lovely stuff you've been working on recently all right uh yeah thank you uh my pleasure to be here with all of you today and finally be able to talk on what our team was working on for the last half a year and even more but before we go into that I want to give you some just a little bit of context and as you all know hgraph is not a new product and uh it was founded back in 2017 as a graph CMS as a first ever graph kill native head CMS and been steadily developed over time and but we always wanted to be more than just a CMS and there was vision for the future of content for Content Federation and in 2022 a couple years ago it was rebranded into high graph which is what we are today and U with this one the new challenges have also appeared because to deliver on the promise to deliver on promise of the future of content we realize that we need to invest heavily in our platform in our infrastructure and being able to scale faster deliver like higher deliver high quality features deliver it faster and just make sure that we um we can support what we have promised and uh with that uh several projects were born two of those I'm going to talk with you today about it's uh the HRA Studio the big name of this of this week and it's also Regional Manion server and uh let's get straight into it and uh Regional management server is something that been released a month ago roughly and uh if you live outside of Central Europe you have probably experience the benefits of it and uh let's let's dive straight in uh here you can see our old classic hgraph architecture and we always had distributed Conta content we always had it uh region Regional distributed content Ser servers and uh when wherever you are if you're in sa Paulo the content sits right next to you but the management server was always Global it was always located in Frankfurt and it held all your project metadata your account your projects and most importantly your schema and the structure of your content you might not think that's it's a big deal right you don't change cont change the schema that much you don't manage uh your account that often you mostly work with content but it's not that easy anytime you open your content entry anytime you do anything in hgraph UI you need to pull up your schema structure so it still goes to the manag server to retrieve the structure to retrieve the schema itself so no matter where you are in the world the UI was always request sending request back to Frankfurt which always did did increase latency if you were in Australia or in Brazil you you felt that the latency is there and also whenever the busy region wakes up you do feel it in your performance so what we did obviously we changed the deployments uh deployments for our management server we made sure that management server is now Regional it is now it now sits the same in the same place where your content is so if you're in Tokyo everything is local now your content is in Tokyo your schema is in Tokyo everything's there the latency is much lower we in the data we see up to 10x increased in performance and it just feels great to work with your content if when you are outside of of Central Europe also now you don't really care if when us wakes up because your uh your servers are isolated and you don't get this noise neighbor effect obviously we did keep some of the functions Global uh your account your list of projects you have access to your applications within hgraph it's all still managed globally it's still all managed in one Central server but there are much less uh much uh less request in there uh there are the use cases are less frequent so you don't get uh don't don't get any latency or any problems with your usual workflows obviously with uh this kind of project we had a lot of challenges because now when you clone the project you can clone it between the regions we need to handle that we need to make sure that all the data is synchronized we need to make sure that you have all the data about the projects you have access to even though those projects may be in different regions so all the con consistency issues that you might think of in distributed systems we did face many of them if you want to listen to hear a bit more on on the details of this make sure to tune in on March 27th where our Engineers will be talking a little deeper into the challenges we faced along the way so yeah um second Pro second big project is the HRA Studio the big name of this week and uh as I said said we realized that we need to invest heav into our platform and part of it was rebuilding the UI because we needed to make sure that we can onboard our Engineers quicker we can deliver on the new uh content Federation features and we can we need to we can deliver on the new vision and this required us to move much faster than we did before and to scale much fast faster than we did before so this we went for a full rebuild we switched to service side rendering first approach we went to the remix and now even before hyra was an sbaa single page application now it's a proper full stock application and what you see now in the beta is just the tip of the iceberg most of the work was done under the hood we did work a lot on security on observability on testability and just the platform feels so much better and we already see the impact of it in how fast we can deliver new features and New pieces of code on on this new platform so hopefully you will also see it soon with how quickly we will introduce new features and introduce new things to the beta uh but obviously we didn't just work with the existing uh things we did sneak up few quality of life upgrades first is common menu now for all of you who prefer working with a keyboard who don't like using the mouse to navigate it's all for you we you can now just use command K like you do in notion or any other product you'll love and uh we we're going to continue introducing new actions to it to make sure that you can do most of the things you do in hgraph just with a keyboard we did upgrade the flow for schema management for field creation and updating it does uh feel much smoother now it has less risk of losing data when you click outside of the window or just it's just more natural for the platform and we are also expanding on our Federate uh content Federation capabilities uh with adding all out for remote sources now it's just two predefined vendors but we are continuing working on it and uh sometime you will be able to create custom out configuration for your remote sources for your custom services that you need to connect to and yeah uh now with this in mind Let's uh go and take a quick look on how it looks in the product itself uh so you see here uh it is our hgraph studio and uh this is the great starter developed by team uh you can always uh see it uh when you create new project it's one of the available starters and uh first thing I want to show you is the new flow for enumerations so now you have display names you have uh API IDs before we just had the values uh so let's do categories and uh we'll have and with uh this one and uh we will also add uh the Contour and uh we did update the flow it's uh now it doesn't require you uh multiple actions to add the the inum so much smaller now now with a more interesting is the schema itself so now what I want to show you is as we go to the proper full stack application everything is a root so if you take a look at the all the classic uh web app when you add try to add the field nothing is changed here we just have the action but now in the studio when we do when we do the new field you can see that action happens here uh you can see it in the URL so everything we do everything is a root everything uh everything is reflected there it makes us it helps us uh maintain it much easier it helps us separate the concerns much easier and uh just generally uh much more convenient to work with so we do the category and we do the enumeration and we edit and here it is also we can always say category oh oh yes we didn't did not add uh in numerations here I'm sorry for that uh but as I said uh we can go to content now and see here's the content for the same model and we can just go back and uh go back to model and go back to editing the model we have also upgraded our API playground to a newer version of graphql that's Library you probably know if you're working with graphql and uh this just lets us let this let us clean up the implementation and uh just upgrade to the latest version and uh we will continue to monitor the progress on this one and uh continue to implement uh new features on the playground because we have some big plans for the playground as well so yeah this is is what I wanted to show you today uh thank you team thank you so much Alexi and it's lovely to learn how much you know about skincare just making enumeration like that knowing all the things that's awesome um so um if you have any questions for alexe um feel free to put them in the chat and then after all the talks we'll put like a little panel together with all the speakers and then we'll go in I'm actually panning down a bunch of questions myself now seeing these conversations um so if you wanted to know a lot more in depth about certain features that we buildt and how remix helped us doing this like full stack app and the performance and stuff and on the 27th so next week we have a panel discussion where we go like real deep dive on all the tech so if you wanted to know like what kind of functionality we use without sharing our our IP obviously you will see a lot about that um then and um anyways outside of that on to our next speaker which is Fabian I'm gonna put him on the stage here and so Fabian you are employee number two at HRA like we feel like you know everything when I started I could just ask you a question and it was always there so how does it feel to know everything about hgraph I think it's a curse and a blessing um it's pretty nice like I mean it always gets you talking with new people right there's always something can chat about um there's probably more that I forgot now than I remember so that's also yeah it's pretty nice yeah and it will like when you you know talk about something that was a little bit older and it it went away it will come back soon because you Liv through all the changes in the product and you know name changes all the things and so um without further Ado I won't go deeper into this we have a Q&A session after this where we can talk all about your whole history um go for it let me just put your stuff on the screen and let let's talk about some Asset Management thank you Tim all right as Alexi just shared earlier with HRA Studio I want to showcase two additional projects that we have worked on in the last couple of months uh to improve our performance and Rel reliability and two other aspects of the system as well uh first up here I want to start talking about HRA Asset Management what I'm referring to here is our asset system that we use in the back end to deliver assets but also handle uploading here you might have seen in the last couple of weeks that we launched this new asset system for new projects in HRA so if you now go into Studio or even classic and create a new project you will be able to try this out and give it a spin um when you can use it on your existing projects we'll talk a bit about later to get started I want to dive a bit into performance and what we changed here um with assets caching is pretty straightforward and we can like keep cached assets for quite a while but there's also the portion when you request new assets and specifically do transformations to resize them Etc what we did here now is looking specifically at asset transformation and the initial request duration um as you can see before um with in this case a 2 megabyte size image that we first resized compressed and then converted to Webb all in the same transformation chain we were able to cut that down from roughly 1.2 seconds to just below 700 milliseconds one additional thing that I'm super proud of that the team was a able to accomplish is the in Project performance so if you're a user of cloning so you clone your project or you do environment clones um which is pretty useful if you have more sophisticated development workflows we were able to decrease this by quite a lot so if you're looking at a project that roughly has 10,000 of assets um we were able to from extreme cases like up to 80 minutes cut that down to just a couple of minutes if you have roughly 1,000 Assets in your project there that is now down to just under a minute um so pretty nice what the team was able to accomplish here next up I want to talk about a new way of uploading with this new Ence system um all of the uploading handling is now part of our native graphql API so for developers this will be a nice change to just use the same API for everything um there's two more things that you can do here so first of all you can upload an S VI URL um on the bottom right you can see an example with for example an image from unsplash um but there also the way of using a file upload from example a local file if you choose to do that um you'll send a similar request just with an empty data object and you will get back a preent URL some additional parameters and then you can send the asset to our system next up I want to talk a bit more about the asset URLs and what we did to improve them um similar to what Alexi mentioned a bit earlier with the regional management server we also opted to go for a regional asset format here to everything in one region in place the asset will still be delivered globally through CDN um so they fast everywhere we also while changing the asset URL went to do it a bit more SE friendly so if you want to you can now opally include the file name plus the extension at the end of the URL one thing we didn't change is the URL transformation so if you used them before and resized images um you can still do that the same as before and speaking about that there's also a few things we did here to improve so besides keeping the resize and output Transformations we also introduced a bunch more that will be super useful for anyone using that transformation um first up we introduced Auto Image uh this one will allow you to um spe specify that if client send an accept header um we either return a Webb or an A with image or a fullback jpeg um so we can always get the best image uh source for your client there's also crop options now you can compress images you can change the quality there's border sharpen and also lastly blur which could be super helpful for lazy loading what we did for resize it's exactly the same as before you can reset it different width different heights and also do a cropping in the same run um for output what we've done is for now we will support every sort of Mind type for images so if you have a PNG you will be able to convert to jpeg the other way around and also one exciting change that we roll out in the next couple of days is a support so if you have existing images in the new asset system you will be able to convert them into a and also the other way around lastly for this project I want to talk a bit about timelines so as we mentioned earlier uh beginning of March we launched this for new projects created in hgraph and our plan is in the next couple of month to provide some migration tooling for existing projects so you can start going ahead switch your existing projects to the new system around end of Q3 um we will start kicking off some automatic migration so to get everyone involved but don't worry we'll also send out um reminders for this way in advance so you know when it's happening and can prepare and then lastly the thing here the final part will be sunsetting our Legacy application which we currently roughly plan for q1 of next year as the last project I want to dive a bit into our high performance endpoint if you used high before you probably know that we have two available content endpoints the first one is our regular content API and then we have the high performance endpoint the main difference between both of these is that um the caching and the granularity of the caching is a bit different with the content API endpoint whenever you do a schema or content change the whole cach will be invalidated with our high performance endpoint we are much more granular and today we also want to share some updates for that the Baseline El validation for this high performance endpoint is happening on a model and a stage level what that means is that if you send a query is for example asking for blog posts um we would also cach that query specifically and only if you make changes to the blog post model that cash query will be invalidated we also take the stage into account so if you do updates you will only invalidate things that ask for draft and if you do a publish the same for the publish stage one thing that we're introducing here is a new entry level granularity and our first iteration will be about in requesting indiv individual entries by its ID so on the bottom right you can see an example of how that would look like for requesting a specific post by ID what we will be doing here under the hood is making sure that this specific query once it's sent and cash will only be invalidated if you actually make a change to this specific blog post so if you change any other blog post entry this will not be invalidated this will be roll out in the next couple of weeks as well um one benefit that you get from using this high performance endpoint I would highly encourage everyone to try it out if you haven't yet um you can find it in the settings of your project under endpoints um you will get much faster response times in your applications because the cash it will be cash ratio will be so much higher that's it from my side for today um if you have any questions we can talk about it later in the QA but you can also reach me in our select Channel or via email thank you everyone thank you so much Fabian that was awesome um nothing gets me more excited than doing stuff with assets like I'm an images geek it's in the chat somewhere that people even attest to me being a bigger geek about images than them so Fabian beware for my questions let's see if we go too deep or not um so for our next speaker we have Romina and Romina is in charge of our documentation and so R talk to me about the fact that you were a college professor for 10 years and now you write documentation is teaching the same but just a different outcome how does that work um there is a lot that comes from teaching that you use in technical writing because in technical writing you're still pretty much an educator so you have to think about how other people learn uh which is not all the same for all people so you need about you need to think about different ways of presenting the knowledge that you need to pass on so that they can learn it otherwise it's useless exactly so it's not that much different okay so it's not that different that's good to know teaching is hard no matter what I imagine teaching is hard yeah but it's also very beautiful yeah exactly but it's also taking a responsibility on you or people that learn anyways um yeah this goes a bit far but look we have some solidarity hear you from technical writers because yes thank you Sarah this is a serious job um without further Ado I'll sh I'll put your slides on the screen and can kick off okay well hello everyone team did a wonderful job at introducing me so I won't do that uh and I'm here to talk to you today about our documentation uh during beta our documentation is going to leave in two different places first of all you will continue of course to be able to access the high graph classic documentation through search engines when you're looking for information from our website and of course the tool tips that we have inside the classic app but also we have launched a new documentation project for hgraph Studio during beta these documentation is going to be accessible through the link that we're sharing here this is my my right now um and also through the tool tips inside the studio app we have selected some strategic links that you can access from there to help you on your journey um also well our documentation beta documentation you could call it's very much beta because um it will be following development um meaning we will make sure that it is constantly updated and it that it contains all the latest updates and additions to the studio so whenever you're using the studio and you have a question make sure to move over to our documentation to see if we can help you there um now this documentation covers basically everything High graph meaning all the features that are supported by the studio they have had documentation updated but also all the new features have been fully documented right whenever you access however a document that covers a feature or a subject that is not greatly supported by uh the studio you will find at the top of the document that there is a call out and this call out will let you know that the feature is not currently supported and we'll give you a link to uh quick instructions on how to switch up so that you continue working um on the app with the with the feature um if you are looking for a quick way to compare feature availability in both classic and Studio we have that for you as well in the documentation the studio documentation homepage you will have a p button that links you to a comparison view document of both apps uh there you can quickly see uh what is available for both one or the other if you've managed to see um that something is available in studio but not in classic that means it's one of our new features for example the command menu or the field outline and um if you see that something is available in classic an AUD Studio that means our team is still working to make it available in both as soon as possible um this document will also be constantly updated we will make sure that all Studio changes are there uh so we can assure you that every time you check that document you will have the the current information on feature availability um and we have one more update regarding the documentation we're extremely excited about this studio but we're also very excited about this um especially my team and myself we uh have used this time to not only work on updating information to make it current to Studio but also on improving the experience regarding our documentation so if you look at do in classic and Studio you will see that they're a little different we have listened to our community and we have structured information in a way that makes the project easier to navigate we acknowledge that this is a fairly large documentation project so it needs to be easy to navigate and we've also made structural changes to ensure that information can be easily found right whether you are using the search whether you are navigating the documentation project looking um at the main navigation or the nested menus that we we've designed for you uh or if you are looking for a specific piece of information inside a document we got you covered um also we have added new guides that you have been asking for like our brand new implementation guides that are available in the studio docs right now and this change of technology to our docs has made it possible for us not to just make our documentation more approachable but also to be able to hopefully very very soon make our documentation more interactive which is something we have wanted to do for a very long time and um well my presentation is very short because I just want to make sure that you find the information when you need the information so save this link for later and if you have any comments or if you have any feedback on the documentation please make sure to remember that this um improved user experience in our docs is an ongoing piece of work that we're actually on so whatever feedback you can give us please head over to our community we'll be very happy to receive it just gonna put everybody on the screen here yeah I was removing your slides and Andie our colleague put them back on because we're both very eager to get things organized anyways um thank you so much for all your talks um I'm just going to have a quick peek through our comments because there's not that many questions which means you presented really well know this this is very important to know let's have a look if there's anything specific that we can directly grab from this from the chat and we can actually this one is for you Romina what do you mean by making documentation more interactive oh I like this one thanks Mario okay so I I will explain this with a with an example that I think it's fairly easy to understand uh today we have a lot of developers that look into our documentation that are very experienced developers but that are not necessarily graphql developers so um they go into our documentation on queries to look at how they are structured and to see how they can work with in their projects and now they can have example queries where they can see um uh how it is structure and they can copy it they can go back to their project go to the API playground baste it there adjust to their schema and run it to see how it works is that helpful yes could that be more interactive and educational yes so what we're looking into is making it so users can query run queries directly from our documentation and maybe do some modifications there and try them out there so that we we don't add unnecessary steps in the middle between them seeing the example and being able to actually understand it right thanks for that um so I'm going to quickly go into one of the other comments here that is actually for Fabian can I transform a PDF to a thumbnail I was thinking how is he gonna answer that one that's a fantastic question Yeah we actually can also with the new asset system Romina did a fantastic job on including also a nice table on documentation where you can actually see which file formats you can convert to which so that's also a part of it where you can make sure that if you have any assets um you can also use that yeah we we're like currently in a support role for Emily here um I know Emily you're on slack so let let's chat a bit later about the error message you found so I have one for me to alexe because you were talking about like our um Regional management server right and so we actually use that management server even if you don't know a lot lot as users right when you see your schema when you're logging in changing accounts there's actually a lot of stuff that's happening there and so you mentioned something about noisy neighbors and I know a few of our Tech folks here will know what that is but maybe not everyone so could you explain a little bit what you meant by that yeah uh what I meant is yeah anytime you do anything in UI anything you do anytime you do anything with your schema you acire that management server and this is one Central server like on in Frankfurt in Frankfurt data center but then uh so everyone from all over the world all the requests coming into this one and when the region the more active the busier region does wake up it does take a lot of bandwidth so people from that region start to query the server a lot and uh if if there are too many of them the capacity starts to doesn't scale that fast and then if you are let's say in in Eastern Europe where there are less users you still feel even though there are less users on your region you still feel that um performance uh is not not issues but if you still feel that in the performance that you know there are a lot of queries into the server just because uh because the time the time is not convenient for you exactly all right and so um with that in mind can you talk about like like are there certain features in this management server that are still Global or is everything fully Regional like I'm in France it's always like next to me in Paris for example uh yeah so we did keep a little of a little things uh Global because it was not worth it to go through all the Hoops to solve the consistency for them one of them is just account management uh you you only need this data when you're on that list of projects the initial page on the application also the list of project itself the application management for those of you who do custom apps so all of those are still Global but uh it's still it's everything that you man that you see on that project list uh screen that's why we call directory app is that that is your project directory and whenever you go into the project you're a local yeah you're there no nothing affects you it's all good all right right um let's see I'm just looking at the chat here and I have a question I don't know and I think Fabi and you probably know let me try and find it here this so will the new set be available to a list of components from alar that's a good question I think for this speciic one not yet um if might not be exping but I also need to check a bit later but I don't think it will be available just yet now all right we'll and keep you posted if you come to slack you see all our product updates and you we'll keep you posted for that one um let's see so I'm actually being pinked by my colleague there's something about um our playground that that we have a question from Emily again I cannot find it in the chat here but is there a way that we can save our queries that we've done before in the playground and I use that myself all the time in my session it's there but then I come back next time and it's gone will we have that yes we don't have it yet but there are I I do plan to make playground into proper developer feature rather than just the playground we do plan the query saving and also the query sharing first within the project so you can also collaborate with your colleagues when you need to right query for them and then send it to them you don't need to so you don't need to use any messages so you can just save it in the project and anyone in the project will be able to reuse that so we do have plans to expand the capabilities of uh API playground to make sure that it is a proper developer Tool uh to help you develop and help you push your projects to life that's cool that's really cool um so this one is for Rina I actually have this one prepped here so can you explain like the different learning paths um that we set up for um the docs yeah actually we have several there's a little bit for everyone in there if you are a nude hgraph if you're a baby high grapher we have a really complete getting started flow for you where you get to know some of the fundamentals some of us as a company and then you get to um go through the steps of creating a project all the way through to uh connecting it to a front end and uh it's a really nice project to start with because it gives you a complete view of what you can do with HRA we used a lot of our field types there and a lot of our structure so it's it's an actually really nice uh project to follow um it's also kind of like a follow your own adventure because depending on your level of knowledge you can do the whole thing or you can just clone part of the project and go right to query practice amutations practice if you're are experienced developer who is not that experienced with graphql right then we also have uh the developer guides for our developer friends who want to use the UI they cover everything UI if you are a developer who does not use the UI you also have our API reference um if you are an editor of of course you're you're using the UI you have the editor docs that get a lot of the noise out of the way by only showing you the things that you're going to see on the screen when you are under an editor role uh but do give you some additional information for context and um there is one thing that is this is important to to distinguish with our documentation and it is that some of our documentation is more oriented towards your Consulting when you have a doubt and some other parts of our documentation are more oriented to you following a flow to learn something like you have the full tutorial for the getting started and even for for the app framework you have one of those but then the developer guides and the API uh reference is more for when you have a doubt and you just go there and you get the information you need wow there you go that's a lot that's good like everybody learned different L right um so we have a pretty nerdy one but before I'm asking this one this one is for um for Fabian I had one myself that kind of fits feels this this one can come after so when we discussed like building this whole new asset system my first question was there are so many out there why not just wide label it while why roll your own can you talk a little bit about the considerations sure of course yeah um so there there's a whole bunch of things that come come to mind here we used a bit of a white label System earlier um there's the biggest thing for us was always reliability and making sure that we are in control of things that we're doing here um and for us specifically the asset is always a key part of the product so delivering assets making sure that they're delivered properly that we can upload them that we can also um feature some functionality around it that is helpful right so for us that was a key decision in making sure okay we'll actually roll our own here there's a bunch of tooling around it that helps us with that so um that was one of the key initiatives for us here and to get to Ronaldo's question here um for now for videos this won't be possible but it's something that we've heard in the past before it wasn't possible with the solution we had before so it's something we'll definitely consider also awesome so um Alex so you know a lot about the tech behind the studio and stuff right and so currently we're running the classic one and the studio side by side that is if you look at engineering things that's kind of a feat on its own because you would tend to just say I'm going to update this part and this part and at one point everything just works so can you elaborate a little bit about how we did that um why we did that was it maybe just due to our own history that we had to do it that way can you just talk us through that a little yeah um so we as I said before we are we we are a great native CMS and also what does it mean that we use own CMS to power things up so for us how it was structured was always we had this U Back end with a graphical API and the front end that does use that API which means that we are when we are rebuilding the front end we can also not touch the back end and we can just build the new front end on on the same apis which also lets us push uh push it side by side so just the decisions that we made at the start of the project made it possible and uh when we decided that yes yes we will be running this side by side we actually didn't do anything didn't need to do anything extra just because the way we structured our work the way we structured our project and it just made it so simple to switch uh switch UI on top of the back end and it's also like through headless in in a sense where if someone uses high graph you may also not want to use our UI you might want to build your own UI but you still have this back end this powerful API that just provides everything you need for cm as function yeah you you say that like it's simple right but actually using the CMS just by its apis and not using their UI I can count on one hand the cmss that do that and for us that was that feels super native and it just worked so that's um that's actually really cool anyways um something else so this one is for Romina and let me see if I have a banner for this one so people can read yes okay let me find it yes so so if there are any changes coming to the studio better right like lots of them are coming obviously what is the best way for people to actually know about these changes they should join our community there you go if they join our community I promise they will have access to all information on the new additions and also in the docs we will have new tags next to every new document but the community is best thank you for that I promise it wasn't the CDA setup but it worked really well um so Fabian um can you talk a little bit about like you know what I'll go with one of the questions I wrote down when you were presenting because you were saying like we have this Auto Image thing right so you can figure out based on like a browser string or a header what type of image a user gets that's the most optimized do we take into account and I'm not sure we have this actually I'm not sure I should know but I'm asking the expert right do we actually look at the image itself to see how much we can actually compress it for example and then based on that choose a webp or an aiv or something so in this specific case for the Auto Image it's essentially more about just converting it to a different file type so um depending on the accept header right so we'll take a look at what's in there um depending on the browser for example Chrome will maybe like webp a bit more um others might like a a bit more so depending on that it will be returned and there's always the fallback to just the Classic jpeg so even older browsers will be able to support it you can just make sure that whatever client you're using it gets the best image that it actually wants to display exactly and there's there's this lovely upgrade path for us they are looking at because certain images just work nicer when they're compressed into a web fee even though the browser wants an FIV but that's like a few steps ahead we we are not essentially a product that justes just that that right so we we do everything a little in that sense um so with that in mind with like we're talking about transforming the image type but there's also a bunch of different transforms we can do to these images right cropping making them smaller filters all those things so can you talk a little bit about the ways a developer can use to make these Transformations happen like in code what would be definitely of course there's um essentially two different options you can go with so the first one is if you use our content API whenever you re request an asset entry um or if it's a relation to an asset field you will have access to the URL field and that URL field will have a specific parameter you can pass to it which is for the transformation so right there you can decide if I'm requesting assets um what transformation do I want to for example every time I request an image I always want to be a that P or I want to be in a specific format maybe it needs to be a square right so that's one option the other one is just using that URL and then yourself just putting in the Transformations on your front end if you have specific ones if they should be in a specific order or maybe they're different depending on the page they're at and you want to be in control more on the front end what you can do so these are the main options you can use oh that's awesome being an image geek myself I tend to prefer to just query it once with graphql and then build the the the URL in context to where I want it but I've also experimented because on the 26th next week we're doing an s management Workshop where I'm actually building a website as we go and people can just you know dive in and ask me questions and try and work along with me where I have prepared to do like graphql queries that get versions of images in the query like in one query I would have one image with five different um you know Transformations and that works extremely well I've have not really seen any cms's do it that way and that makes me super happy as a nerd and working here how about that that that works out um so let me see if there's anything left here um maybe we can end with this bombshell of a question for Alexi let me find it here um okay I cannot find it because when I'm I'm seeing I cannot read um I'm just goingon to ask you so all right this is a big release right we did a ton of work with all these teams what like how as a product manager for this thing do you figure out what is the definition of done for this first release ahie you found the question thank you like where do you draw the line in the sent like this is enough this is what we call a beta like talk a bit about the process please yeah so I think the first part is you always want to get your product in the hands of users as early as humanly possible like the earliest the better because the the highest quality product always is built on top of feedback you want to start getting feedback as early as you can as much feedback as you can so uh this was one of the things we did consider then but then you have considerations what is what is enough to push because when if we just push an empty shell we don't get any feedback so there were two main criteria for this project one is we don't break anything so when you what wherever you are whatever project you have if you switch to Studio you don't lose any data we don't break anything you still have can switch back at any time so making sure that we do not affect our users in any way like this probably was the most important one uh just the safety of your data and the second one is you we still to get some quality feedback we still need to make sure that our uh beta version does is sufficient for at least portion of of our users to fulfill their their day-to-day job as uh so for projects we don't have localizations let's say in the beta but some projects they do not have localizations and uh we just we looked at all the features we had and we uh figured out the percentage of the projects that we need to cover at minimum and we went from there so all the features that we uh we have in the beta there is a subset of users that will it will be enough for them and that they will be use be able to use the studio and actually Fe feel how feel feel it and uh experience uh the and flow in it so yeah that's just the main the main the main ones uh for the decision thanks for that um so with all this and I think the chat is dying down a little I think this is a perfect natural stopping point for us so thank you everyone for attending for listening so intently and to our speakers as well for presenting this and keeping it short which is awesome because that's hard to do I know I take space as an MC you know that's how these things are complicated so thanks for that and so um thank you for all the questions in the chat as well and so tomorrow we are going to be looking at um the developer oh sorry the editor experience inside the new studio there's a ton of design and ux and research that went into that and so we're going to have Daniel and low tomorrow talking about all that stuff so make sure to sign up and um maybe I'll say it one last time join us on slack if you have any questions or feedback and also something I haven't mentioned before hgraph accounts are free and you get a lot on that free account I have a ton of projects that I'm doing and I haven't there's no need to upgrade there's a lot in there so um anyways thank you everybody and I hope to see you all tomorrow cheers byebye bye
Related videos

How to personalize e-commerce with Relewise and Hygraph
Tim Benniks is inviting Christian Bennich to explore state of the art e-commerce personalisation with Relewise Join us to learn how to connect Relewise to Hygraph and elevate your digital platform experience.

Adding serverside rendering to Astro with Tim Benniks & Bryan Robinson
Tim and Bryan are taking a static Astro e-commerce shop and converting it to be server-rendered. They're using the newly empowered site to push data from the user to Hygraph via GraphQL Mutations so tune in!

Exploring the Composable Commerce Accelerator by datrycs
Are you ready to revolutionise your commerce strategy?