Video: SUG LATAM, Sitecore + Astro
Anton Tishchenko presented Sitecore Astro SDK on SUG Latam on 1st February 2024. He told about blazing fast websites.
You can check presentation here.
Autogenerated transcription
00:00:00 [Music] for bu to switch our languages switch our brain language to English this time because we have and there's going to be a lot of people that uh have heard H this person is one of of the creators of Dianoga WP this is maybe an a a tool that lots of us have used um he's also one of the creators of Astro ER which is going to be explaining today he has been five times MVP ER he is a sitecore ex employee also he's a hackathon winner for 2023 I mean he's just a rockstar I please ask you all to welcome
00:02:41 anton tishchenko yeah hi everyone and uh thank you for this warm and great introduction oh yes yes it's so good to have you here Anon H we are very glad we are very uh happy to have you here uh this is the the first session of the Year also so we are starting strong okay okay so uh I I didn't understand anything that you said in Spanish but I also hope that there that was a good words yes yes for sure for sure I was just uh saying that you are a master or you are Rockstar basically H we were talking before with
00:03:35 Anon I mean he's such a cool guy he we were talking about the psych hackathon maybe he's going to have a team for this year are you going to participate Anon uh yes for sure I will I will participate if if nothing strange bad happen if even even if I will not be able to GA a team I will participate as one person because I just I just like to code and I think hackathon it's great even to try yourself to try to do something crazy something interesting in 24 hours so oh yeah if you haven't
00:04:30 registered yet I would say register and try yourself oh yes yes yes some of some of our viewers will also for sure participate uh and yeah it's as you said a very good challenge ER for the coders for the Developers for everyone so be sure to try and uh subscribe get your team up and get on with it I also want to do a sorry that I take a little bit of time that also do a a shout out to all the people that have applied for psycher MVP maybe there are some of you that already know or no we we are not sure but h on
00:05:14 February 6th on the official sitecore ER official shout out of sitecore we will know but I get this time to say congratulations to everyone maybe Anton you also we're not going to say but probably congratulations to you probably I I did a lot related to headless and Astro last year so I hope that I will be in this list oh yeah oh yeah awesome so yeah H with this said the stage is all yours we are dying to hear about Astro uh okay let's uh let's start and let me uh let me share my screen and
00:06:06 uh uh you should be able uh to see it now yes sir we hear we we see it okay okay so let's uh let's go as uh ER as you understand from the name of this uh event today we will talk about Astro Astro is a new popular and the hype framework web framework and we will talk about it and we will talk about how to use it together with sitecore uh I was partially introduced uh uh already by Vladimir but I'll repeat it I'm five times sore MVP probably I will get six this year I'm last year hackathon winner we
00:07:12 did the interesting thing last year to replace scriban with react and it was quite fun experience I have a lot of sitecore uh experience I work for different sitecore projects more than 10 years I'm also sitecore employee and the co-author of D webp so uh if you quite long in sitecore World probably you used my code in your production I work for XDS company er I'm co-founder and City of this company and uh before we start our presentation disclaimer uh in this presentation we will talk a a lot about next JS because
00:08:16 we will need something to compare astro Vis and uh uh you may get wrong feeling that I can in some kind hate nextjs no that's not true I love nextjs I think that nextjs is great tool for right projects uh the only one thing that currently in sitecore uh world we uh if we start new project we almost don't have any other option rather than choose nextjs and introduction of Astro is uh just an attempt to add some alternative and for something next will be better for something Astro will be better and uh some dictionary for this
00:09:22 session uh I will use this uh too often that's why I decided to start from it so SSR it's a server side rendering it's when when your request is rendered each time when client make a call to your browser and SSG it's uh static site generation it's when your site is generated in advance and the all pages are generated the before uh they are displayed to client uh now our agenda first of all uh before talk about another framework we need to understand the uh Sor headless Market itself we
00:10:29 need to understand what framework are used now and what are current trends after having understanding of it we will be able to talk about Astro and where on this Market can be the place for Astro afterwards we will have demo and I will show you how easily you can start with Astro and how easily you can develop visit so about current headless State sitecore doesn't provide any official statistics about Frameworks that are in use but uh there are public uh resources that we can analyze and one
00:11:26 of these resources in is npm package registry and we can check uh which packages are downloaded more or less and we can see Trends so I wrote some kind of script to analyze this data and here is here are results we can see that uh nextjs uh skyrocketed last two years years and uh the only uh two gaps when nextjs didn't grow it was just Christmas time so no one C on Christmas and that's why we see not full-time grow uh we can see some strange something strange happens with angular which is in green actually
00:12:29 it started to happen in January and I can't explain what's going on uh probably sitecore team is preparing something internally or we will have a lot of clients on angular I can't say for now or maybe it's just back in npm package registry statistics also we can see that other Frameworks are still in use uh here is trend for react uh when I talk here about react I mean clean website only on react so it means website on react without nextjs it's important to say because when you build
00:13:19 the nextjs site as components you still use react and the uh react is it looks like nextjs as approach replace clean react and sometime in future I think it will be about zero and also we can see that VJs is still in use so we still have sites uh that use VJs and uh what conclusions can we make from this slide for some reason nextjs became became the most popular fra framework I think that reason for it is SSG it is static side generation and uh for react uh the straightforward pass to upgrade will be to use
00:14:30 nextjs but for other Frameworks like View and angular sore doesn't provide the this straightforward pass so for Vi we can use uh next but in order to start cite cor with next we should do a lot of things by ourself for angular it it could be scaly or it can can be upgrade to angular uh 17 but uh it's still a lot of work uh for yourself you can just use it out of the box and uh that's why it looks like uh in order to start new website uh on sitecore this year you don't have any other options like any
00:15:32 other options than nextjs and that's why uh I want to introduce you option that you can use it's Astra it's uh the web framework that was developed for Content driven sites and S sitecore is content management system uh first of all then it could be a perfect match uh why astro why not other fra Frameworks because we have a lot of Frameworks and almost every day someone creates new framework and saying use my framework uh Astro comp comparing to its competitors has these advantages first
00:16:31 of all it's uh very quick second it's UI agnostics and it has Island architecture uh also it's easy to use and it has a great developer experience and the most important for us as sitecore developers is it's that Astro is content focused and uh uh as we build this sitecore content reach websites uh we probably it may be the best choice for us so let's stop on each of advantages separately about performance I built exact the same style guide website that that sitecore provides for each framework sitecore
00:17:32 officially provides it for react view angular and next and I build exact the same website but Astro based and uh there is no surprise that I get 100 performance because it's actually hard to build the slow website on Astra because out of the box you get only HTML and CSS you have no JavaScript you have no run time nothing can make your performance bad about UI agnostics and what does it mean uh this nextjs uh you can use only only react uh probably you can use uh preact but I wouldn't recommend it because uh if you
00:18:37 open nextjs official repository you will see that there are a lot of uh box related to preact and I wouldn't recommend you to use nextjs with preact on production but if if we talk about Astro this Astro we can use uh Astro language itself but we also can use any framework that we like so we can use react preact uh view Alpine solid SW and angular but angular we are able to use only only s uh Standalone components and I will stop on it on our demo later also uh one of Astro benefits is that Astro has Island architecture so uh this
00:19:46 initially was introduced by Astro nowadays other Frameworks also try to adopted what islands architecture mean uh it means that uh your site can be divided on so called islands and the part of your content uh can be uh generated in advance so for example uh main part here and the footer will be generated uh in advance uh some parts will be interactive uh they will have some rich Logics they will behave like uh single page application and uh uh some part can be generated on backend on Astro backend on
00:20:48 each request and use SSR so this Islands you uh don't need to choose anym between either fully static or fully Dynamic single page application with Island architecture you can get the best from these two words also Astro is very easy to use uh for me it took just one hour I watched just one video on YouTube and I was able to start developing with Astro uh previously if if you are inside cor World quite long uh you you probably know that when we used MVC it was quite hard to find the frontend developer who
00:21:50 also know sitecore and who also can do some things on sore things became better this headless because frontend developers doesn't need to do a lot in sitecore anymore and Vis Astro it will be it will be even better because uh Astro UI language it's quite easy you any any valid HTML it's uh valid Astro com component and uh you can easily copy your HTML from anywhere and use as your Astro component uh another benefit which probably is related to previous one easiest to use is that uh is developer experience
00:23:00 uh here you can see graph of nlii state of web development report and uh on y AIS you can see change in satisfaction and uh on X H you can see change of usage and you can see that Astro is uh has a great change is in both usage and satisfaction last year if we uh look on reports from previous years on the place where is Astro now there was nextjs uh but last year nextjs satisfaction dropped from 4.2 to 3.6 uh and meanwhile Astro faction is impressive 6.8 score and uh NY uh analyze this graph that if your
00:24:12 framework is on top right corner it will be the one of top Frameworks next year so they predict bright future for astro but for us it's important that uh developers are happy when they develop using Astra and the happy developers are productive developers and uh the last but not least advantage of Astro is that it is content focused uh let's uh think about sites that we develop using site cor uh what we actually develop do we develop content reach websites or do we develop uh uh some reach web
00:25:16 applications uh as for me the major part of sites uh that use sitecore are content reach websites so if we build some uh complex web applications like figma like some reporting dashboard probably we don't use sitecore on back end and if we don't build to uh reach single page web applications with sitecore why do we need the Frameworks like react like view like angular fre and uh also one probably one reason why nextjs become so popular it's because we built content focused websites because uh we with nextjs we generate
00:26:21 static websites with SSG approach and uh probably it's strange that initially we use react as tool for reach single page application and then we use nextjs as tool to make our reach single page application to be static maybe we do some additional steps that we don't need and uh that uh could be a reason why you need Astro you will be able to use uh simple content components content Astro components for major part of your website and if you have some complex Parts like reach menu at the top you still will be able to use
00:27:27 uh framework of your choice it still can be react it can be view it can be angular or it can be some popular and high web framework like SP solid Alpine anything that you wish now it's time for demo it's time for for demo let me let me open uh terminal and uh what what I did uh in advance to prepare the demo I started sitecore and the I created the uh sxa managed headless website so here you can see my content editor and uh uh you can see that I have headless website and it's named Astro uh it's named Astro it has uh some
00:28:48 some pages actually it's it's exact the same like other style guide websites but we is uh one small change about which we will talk a little bit later and uh I don't have anything for now on headless side and uh we will create our headless website during this demo so to initialize Astro project I will use uh this command uh this command will download this uh package from npm registry and uh we'll use this package as project initializer so let me run this command it will uh it should ask
00:29:46 me about uh it should ask me few questions and uh like uh which template I would like to use and current there there is just one F template Astro probably we will enhance it in future uh up folder to use Astro that's fine for me name of your application it's this this name should correspond to the name in your sxa website configuration so it should it should be exact the same like uh like it's in settings so in settings we have Astro that's why I leave it as Astro uh sore host uh sore host it's a URL
00:30:40 address uh which we will use to get access to layout servers for our case it will be Astro headless Local Host site for API key let me copy this from site site core settings Services API Keys uh GSS Astro uh here it is and uh root item uh root item is used to find proper uh dictionary to allow us uh to create multilanguage websites so here it is now it will uh initialize project and it will install packages Let's uh wait few seconds it shouldn't take along so let's uh let's review what what
00:31:49 had happened uh we can see that project was initialized uh yeah n PM packages is become become outdated too often it was updated just uh few weeks ago but we already have some some warnings but it doesn't matter for us here we have GSS we have Astro and we have message that Astro is ready now let me change uh directory to Astra let me start the W code uh we will we we will use it later and now we can we can check we can check what's what we have in this folder yeah we have some files and we should be able
00:32:48 to run our website in development mode so let me start it it should take about about 10 seconds for first start let's check uh how how it works it works in exact the same way like other Frameworks so it register all components in components Factory like the same as on next react view angular then it creates configuration in uh config file and then uh it use these generated files to start website you can see that uh uh my start my site is up and running and uh I should be able to open it uh in
00:33:58 browser it opened in different browser so let me let me copy to this one and uh here it is we have Astro website and uh if you uh worked with site before probably you would recognize these Pages uh home and style guide pages are exactly the same as in other Frameworks and for style guide we added uh additional use cases we added examples how to use it with uh react so on this page uh we have Dynamic component that uh is based on react we have a view component that uh also is uh interactive and uh we have angular
00:35:13 components so here in one page we have we have three Frameworks at once we have react we have view we have angular and of course it's not recommended to do anything similar in production that's that's just for demo to show you that you can mix Astro with the framework that you like and uh now also Let's uh check uh how to how to run it in experience editor so in experience editor in settings in settings uh I connect to my local host on this address and uh I I am able to open pages in exact the same way as with
00:36:19 other Frameworks so here here is homepage and uh here is uh uh let me open style guide extended page and everything works in experience editor as with other Frameworks so here we can see single light component so we we can change text here here we have uh reach text component this is reach text we have we are able to save page we and you can see that my changes are here we are able to add components we are able we are able to uh change images we are able we are able to remove components so we can
00:37:31 do exact the same like with other Frameworks we implemented all Fields uh that sitecore officially provides for other Frameworks like react view angular and next and on this page you can see all these examples like file usage number usage check box date links we can we can use internal link external link Med link mail we can have link to item we uh can use some complex layout Partners patterns like uh columns or like tabs for example here we can see how tabs uh looks like uh in uh edit mode uh and we are able to edit them or
00:38:37 we are able to insert additional tab if we wish and we can see how tabs uh look uh in normal mode uh where everything is uh functional uh also we have the full access to sitecore context and we can get any values from Context if we wish uh we are able to pass rendering parameters to components as well we are able to use different languages and we are able to use dictionary for translation we also have ability uh to uh use complex ER complex editing scenarios using edit frame so in this case I have fields in edit frame that
00:39:44 I'm able to edit here and you can see that it works and uh here here is interesting part that is not available in official sitecore examples it is integration with other Frameworks so uh for react uh here we have client side running component that is fully interactive also we for react we still are able to use uh soree Fields inside react components and they are still a itable so we can have react components with editable Fields inside it and even more we are able to use uh uh Place holders inside react components
00:40:45 so here we have react placeholder and we are able to insert inside the react placeholder react components the same thing is about view uh we are able to uh use sitecore Fields inside it we are able to run any complex Logic on client side and we are able to use placeholders in uh view components as well this angular it's it's almost the same uh the only one limitation with angular is that currently we support only Standalone angular components and uh that's why we are able to add the
00:41:39 client side uh any client side logic and we are able to add the site core Fields inside the uh angular components but we can't use uh placeholders inside angular components but it's uh uh it could be implemented but it will require require some time so if any client will need it it's it's possible but uh it will need uh some effort now let's uh let's do something with with all of it let's um let's change one of our components uh let me let me edit homepage uh because uh uh it will be
00:42:37 easier for them so uh we can look on homepage and we can check what components are used here we can see that we use content block so let's change content block and extend it with the few you more Fields so let me find it it should be on the project headless Astro content block data yeah let me edit this template let me add another one section and let me add the few Fields uh single line uh reach text and image uh we we we we can use any of fields I will just just for demo I will show you only this three fils
00:43:44 so uh we changed our data source now we can we can back to our Visual Studio code that I opened before as you should remember and we can find our content block uh you can see that uh in the uh project that I initialized uh I have content block for react as sample I have content block uh for view as sample but uh for our case uh we want to do something with Astro so let me open Astra content block and uh let me add this uh this ref fields at the bottom so first of all I will add the horizontal line and
00:44:50 uh I will add the our three Fields so copilot s just me to add this field but we know that we named our single line fi as single line uh then let me add reach text and the name for reach text was reach text yeah the thing that I like about capil that even it's even if it if it doesn't guess what what I want it helps me to type faster so for image uh for image it's actually guessed that field name should be image but it didn't guess uh where to import it so I will I will change it and
00:45:53 save that's it now we we can back to sitecore and we can back to experience editor now let me refresh this page and we can see at the bottom immediately we have horizontal line and we have three Fields so we can add single line we can add this is reach text and and uh let me use bolt on reach to make sure that it's reach text and for image uh let's use GSS logo it's uh fine for us now let me save this page and uh we can see that everything works fine we can we can check our data
00:46:57 source uh that is used on homepage here it is we can see demo we can see single line we can see reach text and we can see image and now also let's check uh uh what we have in normal mode what we have on our website that is running on Astra and we can see that our component is here and every walks fine that's that's how you easily can start with Astro and try it by yourself it uh it should take just just a few minutes to start and you can try it and I hope you will love it now let me back to presentation and
00:47:54 uh let's uh summar summarize so where and when to use Astra so first of all asro is content focused web framework uh it means that uh you will get more from Astro if you will use it with content first sites and major part of site core sites are content reach sites and that's why it can be a perfect match so for any blocks any portfolios any documentations any marketing sites and the landing pages it will be it will be a good Feit also as we talk before when we analyzed the uh current headless
00:48:47 State uh we found out that sitecore provides uh only the for react to add nextjs and use SSG so uh if you already have view angular or react website you can easily add Astro migrate your components and continue to use your view angular react components on your Astro website and migrate them one by one and if component has some complex logic you can leave this component to use this framework if it's just static component it's better to migrate it to astro you will get better performance also probably you may
00:49:45 consider to use Astro instead of uhet headless websites and the other additional cases uh can be can be sites which relies on uh some uh uh additional libraries so for example you have a lot of animations on your page and the animations libraries often conflict with your web Frameworks like react because both both of them want to manage components life cycle and in this cases probably it can be better to use Astro and also when you have some complex uh Integrations like algolia search uh you can achieve more with
00:50:48 Astro because if you compare algolia API algolia JavaScript API and algolia react API you will see that with clean JavaScript API you can do more uh here is list of all links uh it contains almost all information that I showed in this presentation and uh here is QR code you can scan it now and you can get access uh to these slides with all links and that's it the the the one important thing that I forgot to mention that we distribute Astro as open source it's completely free it's distributed
00:51:53 under open source license it available on GitHub it is available as npm package uh on npm registry so feel free to try it feel free to use it and uh we would like if uh you will contribute and you will improve it that's uh all about uh that's all about in my present presentation and I'm open for questions insert clapping noises clapping sounds here thank you very much Anton uh this has been a very interesting eye openening presentation with we start by thanking you and I invite all the people that are
00:52:50 connected I want to well first say hi to everyone Hi Freddy Mario hi Mari hi Ramiro Andre Fernando Luis Fair Christian thanks to everyone that are uh connected on the chat sending us uh the comments H love we love everyone that uh follows us and and gives us likes and subscribes of course um I see that uh not regarding Astro but I see a question here maybe I'll do it later okay hi Gustavo we have a question we have a question here Anton he says how hard will it be ER the Astro learning curve for a
00:53:36 developer who knows nextjs uh so if you uh if you know nextjs uh it will be enough you just watch one video so just just Google astro crash course and it will be 1 hour and uh it will be easy for you to start so if we if back to Astro component uh you will see that it contains from two parts one part is uh HTML uh it's it's almost HTML it's some kind of J some kind of mix of uh HTML and J and uh you you may recognize that all html text and you as you know uh nextjs it's it's easy for you uh the first part
00:54:41 of component it's logic that is executed on backend so it's some kind of uh get static props uh if you use uh nextjs so concepts are exactly the same so uh just a little bit different syntax and for so for you I think it can take one hour nice one hour and then you will be ready go thanks for the question uh hi Mar Pancho hello thank you for for joining and I have a question Anon you said that we can apply Astro also in production environments or in production applications right from my devops stand standpoint how
00:55:40 would you H deploy uh okay so how how to deploy it's uh uh it it wasn't prepared for demo so so something may may may go wrong here but but we will try all right awesome so in uh pre pre previously I run command npm runev but uh now I will re run command npm run build and it should generate the completely static website I hope every will go fine fingers trust let's let's let's let's check let's let's wait awesome yeah and uh after after you have static website you can deploy
00:56:36 it ER everywhere you can deploy it on any static files hosting so you can see it was generated oh nice and uh uh let me firstly open it in uh in westcode in westcode we can see we can see this uh folder and in this folder we have two parts insert technical difficulties here sorry guys uh I'm checking I'm checking with Anton probably something happened on his side ah how much time took Mar Pancho this say how much time took to develop the Astro project which clients are using this framework now we have a jss package we
00:58:03 used to M the template feels in an easy way how do we do that with Astro an [Music] framewor okay fore the ER as l for Fore spe thise fore spee foreign fore fore fore fore B [Music] for yep sure I think yes hello I joined the uh streamlabs but I can see you it's okay I think we have you back Anon we are on live now I am showing the I am showing the the SL hle like the call in slack so if you can you can uh turn on your camera we had like a couple of more questions and it would be awesome if you can uh answer the
01:05:08 sure uh I think I need to turn off streamlabs in order to use to use my camera yeah uh on slack sure [Music] we have I think two more questions two more questions uh let's let's firstly finish with this previous one what what was the last thing that you heard uh I think um we were talking about uh putting Astro in h in different environments I think H we're talking about the the pushing the you were showing us the the dist folder with everything compiled and ready to push yeah yeah so yeah so you you got
01:06:06 static files and you should be able to push it everywhere it can be a Amazon S3 bucket it can be aure static files and you you can use just static uh uh uh just some static hosting and if you need use some CDN on the top of it and if you don't need just uh static hosting should be enough if you have some server logic you can you can uh you you can host it anywhere in noj container I'm still trying to turn on my camera but uh it's uh it's loading and the I I I will continue to try just just
01:07:01 you know okay if I if I give you the next question so that we can yeah yeah all right so Mar Pancho here ask us how much time took how much time did it take to develop the Astro project and additionally which clients are using this framework in their websites uh that's uh uh that's that's a tough question because currently we don't have any client on Astro and we we looking we looking for clients to try it and we so everything was built just on Sample websites and if you have any clients that would like to
01:07:52 try Astro would try would like to be on the edge of Technologies feel free to contact me and uh your website can be the first Astro sore website in production also also we we presented it to sitecore and probably uh sitecore will uh suggest it to some of their clients yep all right all right um we have the another question uh from Freddy uh now we have a psycho jss package we used to map the template fields in an easy way how do we do that with Astro uh so uh uh with with Vis Astro I showed it during present
01:08:54 presentation that uh you get you get Fields as props you get Fields with Astro in exact the same way not exact but in very similar way like with other Frameworks and uh uh you are able to uh mop Fields using using props that you have in Astro component so when when I showed the demo I added the components I added text component I added reach text component and I add added image component and I mapped Fields uh using uh field prop so uh the development experience will be very similar all right awesome
01:09:57 okay I think uh well guys if you have any other questions be sure H to take this opportunity we have Anton we made our best effort to recuperate it thank you Anon for all the answers we H all all of the viewers thank you for the answers gavo Mariela I'm sure Freddy's also thankful the rest of the guys H so I yeah I think yep uh I think if anyone will have any other questions feel free uh to reach uh me under this video on YouTube or reach me in uh slack directly I will be glad to answer your
01:10:48 questions thank you very much thank you very much Anton well with no more not any other thing to say h we thank you one more time uh this was a great presentation yes thank you for hosting this event and uh thank you for having me here I thank you Vladimir and thank you all audience and people who ask questions yes well this was a great H session number 12 uh thank you one more time Anton we'll see you in the next one and thank you to everyone that has joined H one more time H you know how sometimes we have ER technical
01:11:38 difficulties sometimes it's you know