Video: Sitecore Headless Software Development Kit for Astro

Vasyl Gavryliuk, our Sitecore lead developer, presented Sitecore Headless Software Development Kit for Astro on SUGCON 2024.

Autogenerated transcription

00:00:04 [Music] okay guys I think we can start it's a pleasure for me to be here together with you in such a wonderful irand I hope you like this place the same as me so today we will talk about sore headless SDK for Astra and um before I start I want to thank you all of our sponsors that make this conference possible it's uh a big privilege for us to be all here of offline you know to meet each other face to face and let me quickly introduce myself so my name is basil Guk and I am a software developer at EXDST company I have more

00:01:30 than 15 years of web development experience and I'm also an ex Sitecore employee I've been working for CYO company uh different projects different Marketing Solutions especially a site called.com website and I also was working on an sxa solution and um I'm sure most probably you use this wonderful model or at least read it and um I'm here on behalf of anon tishcheenko who is the CTO of exist and he is also a six time technology MVP he is also a hakon winner but um the main he's the main inspirer of

00:02:27 this project unfortunately he has join us today um so let's start today we will talk about the current sore GSS Market development State the Frameworks that are currently in use we'll see what is astro web framework why when and how to use it with cycore and we will also have um short Dema to see how to work with it so before suggesting some new Frameworks or approaches we have to understand the market so let's look what web Frameworks are currently in use and what are current trends in sore headless

00:03:19 development so sore does not provide us with any official statistics of the usage but we live in open data world and we took PM downloads packages statistics and we passed it and we analyzed it and what what we can see here we can see that nextjs framework is dominate the market so it started fast grow in 2022 and still doesn't stop and there is no surprising that if you are starting a new headless project in24 most probably you'll go with nextjs but we can see that other Frameworks are still in use so for

00:04:09 example reaction use but it is slowly decreasing because most probably its usage is continuously replacing by nextjs plus react approach VJs is slowly decreasing as well and and an angular is in use but you see there are some spikes in usage which we cannot explain most probably uh sore does some internal testing with with this packages yeah uh so we think Zen popularity is caused mostly by a technology named SSG that stands for static generation and SSG makes our sze blazing fast and uh sore provides currently only one official way

00:05:14 to use SSG that is nextjs nextjs is a meta framework on top of react so we can easily MGR our react GSS project to next GS but there is no easy option for GSS sites based on view and angular to use SSG uh it is still possible to apply SSG for example we did it for view framework on next but it requires of course an additional effort and some custom code to be written so pie chart can give us a better understanding of a site cover Frameworks Market distribution we can see that nextjs is taking free quarters of the

00:06:16 market and re framework still has about 10 to 12% and um angular plus u has about 15% in common you can find uh a bit more stats on a sitecore GSS packages Distribution on the exist website so let's Su up what we saw in the statistics so sitecon made a right decision by choosing nextjs in 2021 it became very popular and it revolutionized AET core headless development react is continuously replacing by nextjs and most probably at some point clean react approach will be completely replaced by next

00:07:15 J but there are still sore clients who use angular in view Frameworks and there is simply no easy option for this clients to to upgrade if they want SSG they have to remove or rewrite a lot of existing code so nextjs is a really good option for site C site but one single option could not be an answer to all the challenges and there are a set of tasks where other Frameworks can feed better and one of such Frameworks is Astra it is quite new but already well known we framework so let's figure out why when

00:08:06 and how to use it together with Cyro so there are many reasons why Astro can be selected Astro is very fast and performant asro can be easily integrated with any other UI framework um Island architecture Islands architecture allows you to mix static and dynamic content on the same page and a great developer experience and easiness of use allows developers to be more productive initial content focus makes it perfect match with CMS like cyer so let's stop on each of the adventures separately first of all at a speed so

00:09:05 nothing could be faster than a plan HTML and CSS even small portion of GSS makes our s slower and all other Frameworks like NEX GS KNX asalt heat they are fast but they have limitation by Design so they have to hydrate the HTML and hydration is a quite time expensive process of attaching JavaScript events to the HTML Dom events uh Astro is Fast By Design and for most of the project for most of the components asro does not run this zation process that's why it's really hard to make really kind of slow website using

00:10:10 nro HTTP arive website contains a lot of data regarding performance of a real well-known websites in one of the tests they run leous report in simulated mobile loading conditions and here we can see a million liouse score for different Frameworks Astros shops here just aw some results we also made our own benchmarking and we created two exact the same uh websites one is based on Astro and another one is on nextjs and in all the cases Astro were faster how much it is faster it is different um from that kind of differ on the test

00:11:10 type mobile just stop rling and internet connection speed so yeah but anyway if you ask me how to build fastest possible website my answer would be asra so next adventure is Island architecture most of sore sites are marketing sites and marketing sites are perfect for static side generation so SSG gives us bling fast and SE friendly pag but part of this uh part of the pace anyway should be dynamic because such Dynamic components makes our site alive and to allow this Astro providers with technology name it Astro

00:12:11 Islands so components that can be static and generated in advance they will be static asra will not run expensive iteration process for this component parts that should be dynamic can be marketed with special client directive and inside such Island you can use one of few components from your favorite web UI framework react view or angular so this architectural approach allows you to get to get the B from to wordss speed and C of from SSG and a re client behavior from Dynamic Frameworks so asra is your agnostic

00:13:11 framework what it means unlike nextjs Astro can be integrated with any UI framework of your choice so next GS is meta framework for react it can be integrated only with react potentially it can be integrated with preact but uh only with some limitations and Astro has its own very easy U language plus it supports integration of any popular UF framework react angular view swell and aone list of others so so that means that you and your development team can choose the framework that you like or the one that

00:14:08 is already in use and yes more probably most probably for existing GSS react site you will choose nextjs as your SSG framework but there is simply no options for for sites based on view on angular so adding asro will allow you to improve performance decrease hosting prices and gave you give you a better SE all the advantages you get with SSG asra was designed to feel familiar regardless of skill level or past experience in web development I'm a back and developer and I was working with backand codes the

00:15:02 most of my life uh probably the same as you if you are quite long in a sore development right but it took me just about 1 hour to start with asro asro has its own very easy UI language and basically each HTML snippet can be a valid D component so you don't need to be experienced in any other web framework like view angular or react to start with Astro but if you really want to integrate Astro allows you to do this easily so it's even possible to integrate few of the UI Frameworks on the same page and we will show on Z Dima

00:16:00 of course that is not something that we recommend but it's possible nlii proves asro easiness of use so Z makes web developer surveys each year and we took one slide from the previous year report so it shows us a change in usage of web Frameworks and also and change a developer in a developer satisfaction and as is located in the top right corner you see a great place so that means that Astro now more used and developers are more satisfied with it and nextjs were almost in the same position in the previous year's reports

00:16:54 and where it is now it dominates the market so that's why netlify predicts asro a bright future and change in satisfaction score even more important for us because satis satisfaction means uh Happy developers and happy developers they are more productive and productive developers can do their work faster and do it better that which gives us a lower time to Market and low time to Market of course that is uh as a result we have happy clients and that is our goal right so we built our sites using

00:17:43 sitecore and the sitecore is a digital experienc platform but the main part of a DMS is content management system CMS so we build mostly a Content Focus sites with cyer otherwise we don't need CMS so it's very rare case when we build not a website but a kind of complex web application using sitecore so to be efficient we should use tools specific for websites not web applications as we all know tool is a hammer so nothing wrong with Frameworks like react view or angular they are perfect tools for their tasks so if you

00:18:42 really need to build the complex web applications then just use them but if you need to build a website you may use tools for building content sites and as is a framework that was designed for building content reach websites so together sitecore and dustra could be a perfect match because they are both about content so we talked about main Astro advantages so now let's sum up Astro will be will be a good choice for site corv from marketing sites other content Focus sets like landing pages blogs

00:19:33 documentations portfolios Astro can be used for adding server generated content for your existing view reactor angular website and of course if you plan to upgrade your existing net website there are other work case when you may consider um Astra as your web framework that is a complex animations so both the Frameworks and animations libraries wants to be responsible for a cont component life cycle and there reach much easier to integrate integ um integrate animation Library without the web framework like

00:20:25 react view angular in another case when you have some complex front end integration for example alol search it might be easier to make something custom without the web Frameworks because of their compatibility so asro andite core can be a perfect match but it requires additional code to be written and we already did it so let me introduce a sore G ssdk fastra so we made a fully futured SDK fastra and it has uh the same functionality as other official sdks for other Frameworks like neckest react view or

00:21:19 angular we support text re text link image and other field types additional field type is an asro image it gives you it gives you a very cheap image optimization during the build time so you have reach P design capabilities with placeholders and edit frames and of course allio Pages can be edited using the experience editor also support uh XM cloud and also a pce interface uh multil language functionality works the same way as it works for other Frameworks we also made sample Integrations for free main

00:22:19 popular Frameworks for react View and angular you still have inline EDI in ability if even if you use S cor Fields inside Dynamic parts of your page based on any of the framework so it makes adding asra to your existing react view or angular GSS project a matter of weeks you're just replacing your existing layout to Astro layout do some small changes and starts your firm Astro based project we made this SDK open source all the code is available on GitHub the code is distribute under the up2 license

00:23:11 which is the most free licenses you can use modify create derivative work or sell it and all the packages that we distribute are built using GitHub C action and uploaded to npm registry so now let's see some demo okay [Music] so we have an empty projects folder and we have um doer compos project that is the only one scene that I run before the demo just to save us some time because it is you know taking time and we have uh much more good things to do here than waiting for Docker so a do compose

00:24:24 create a sore headless website for us and it contains a lot of um style guide Pages similar to what we have is a de case so to start with asro we navigate to the npm registry and copy the initialization command let's run it it will copy the initializer initializer which will run and ask us some of the questions so first of all that is a template that we are going to use currently we're supporting two templates one includes all the samples for different Frameworks like react View and angular and and another one is built

00:25:32 specifically for migrating View application to Astro so we will use the first one for our demo then we should provide a folder so let it be Astro and then we should provide a name for the app and the name of the app should correspond to the app name in the settings of your site so it it is going to be as as well then we have to provide a sideo host that is a host name where we'll pick all our layout service information and we can uh find it on the site item definition that is asro headless Local Host in our case the

00:26:33 only thing we should prefix it with https then to make a connection between side core instance and the rendering host uh secure we should provide an API and API is located under the system settings as you know so let's pick a proper for API key is going to be IDE of this item then we have to provide an itm ID of our Astro site because otherwise um dictionary functionality will not work properly so let's do it so during the initialization it is coping some of the files from the template that we selected and it is

00:27:41 running npm installation so it is taken usually about a minute maybe sometimes two depends really on internet connection speed so meanwhile let's navigate into the project folder and see what we have there so let's run Visual Studio code here so let's check first the GSS config we can see that all the variables are properly populated they looks absolutely the same as it is in the other sdks and there is one additional file is asro config so we see it as present and everything is fine

00:28:40 so let's switch back okay we can see that soree Astro and um exist logos are rendered and we have some welcome message and the next steps so we ready to run our Astro instance let's navigate into an as folder first okay when it starts what it does it's actually registering all of our components into a component Factory it does a registration of an S3 plugins and also it creates a proper configuration basically all the steps that usually any GSS application does so we can see a list of available

00:29:46 URLs for our application let's run a first one and yes we can see it is loaded we will look in the sty guide page it is very similar to what you seen usually when starting with um uh GSS with any other Frameworks but with some additions so you can see uh a single line M multi line reach text are supported there is also image Fields a separate uh component is Astro image already mentioned it there is there is also file number checks box and date which is supported different type of links then we can still build the custom

00:30:49 layout patterns and reuse the content tops is available as well uh aite core contexts are always accessible for you on any Astro page uh on any Astro component so you can get any necessary data that you need there is also component params which you know usually as rendering param that uh allows us to usually modifies the presentation of the components and there a section with Integrations so basically we integrated components from a different UI Frameworks for example that is the react components and that is the block with

00:31:47 view components and that is another one with angular components and all of them are R properly rendered and working so as I already said not recommended practice but just a fun fact it properly works okay so let's switch to the experience Editor to quickly check the style guide page so as you can see the page looks the same so for most of the components in L editing is working as it is usually works for um other SD keys so you can edit the text you can change the images let's select some proper

00:32:54 image uh then links also can be edited the very common way a components can be added and can be removed in the same way as we does it for Rd casys so all the functionality in place at if frames still still in here so if you need to have some additional editing possibilities uh for fields that does not support inline editing then you just use edit frames and they are working here so let's wait for a second you see the text were changed and you also um May edit the content inside of the inside of

00:34:12 the react for example uh react component inside of the react placeholder on the Astro page so all this still continue to work and if you have some time okay so we still have some time and let me show you some code so how actually development happens so we are going to extend one of the components on the homepage it is named the content block it contains of U some heading and some content let's wait for a second yeah but before extending the component itself let's first go into our content block template

00:35:15 and fill it with some additional data so let's create a demo section here let's create a some single line fields and add some image field and let's save it okay so you can see it is now reflected good so then let's navigate to a Content block Astro component so you can easily distinguish Astro components by an astro extensions and each Astra component contains over two blocks that is um script block that is executed on um server site and also a template block so we are going to edit a template block

00:36:20 first so let's put some section directly after the heading and this section will [Music] contain our single line field let's render it is for example H fre Tech and let's specify fi here so is going to be a single okay and another field we have that is image so to make image available here we have to import it first from aset GSS package let's do it and then let also specify a field so let's select an image okay let's now save it and let's get back to the experience editor and just refresh

00:37:51 it okay we can see new Fields were properly render it so we can uh put some text in here maybe just it is still loading okay let's refres one more time there is no text in field bug you know it is not disappearing some time and it is common for all the de Keys okay so let's pick an image let's put some let's put some text in here interesting yeah that would be nice and let's save it and let's now um refresh it in a normal mode and we can see it is reflected I'm using a master database

00:39:33 you know just to skip publishing okay so that's it for demo so you can see that you can quickly start with your own Astro project you have the same abilities as with other sdks that sitecore provides for us so it's very easy to use everything that we show here is open source including the docker compos project and all the calization so you can easily pick up and do this at your side all the packages are built and deployed to in P registry so what are you waiting for give us a try give as a

00:40:32 try so it requires a really low effort to start and you just try and may a conclusion for yourself and we a team of Astro are always happy to help you make your Astro project successful thank you so if if you have some additional questions uh we have I don't know if you have time we have we have time cool so you can ask do we have any questions all right yeah hi sorry looks great but how about sxa headless so that was uh that works with sxa headless so what you saw is just uh is just headless sxa site it's just

00:41:39 locally hosted yeah but this is the the example of the the plane jss example uh but in the connection with uh as you say headless I think some extra stuff needs to be done yeah it it will work if if you mean an exam cloud example yeah it works with exam Cloud so that was tested okay I'll try it out thanks yeah just has to have a support for more um complex side of the things like setting up um uh URL slugs or uh re-rooting and S map generation that normally next year does provide out of the

00:42:31 box uh that's interesting question uh yeah I I think I may ask um guys from our team who sport us yeah and get back to you we can meet after the session yeah right any other questions still have some time all right it sounds like that's it thank you very much y thank you guys