Build static sites with JAMstack and Agility CMS (Webinar)

ok everyone I think we're gonna do this welcome welcome to using jam stack with agility CMS this is our first time doing a webinar and also live streaming it on YouTube so we're really excited about that you're gonna be emailed at the end of this with the survey and some questions to help us improve but we're really excited to just have a chance to talk to all you folks about it's a technology that we're you know we're seeing a lot of buzz about we're getting a lot of questions and let's get started so the most important slide today so we're in this together we really feel that you know we want to partner with our partners and and developers out there we want to partner with our customers and develop close relationships and learn more together so if you do have questions it's okay to interrupt and the zoom feature you can use the sort of raise your hand thing or just start a chat james is sort of keeping an eye on that for me while I'm talking and when he's talking I'll watch it but also if you're watching live on YouTube feel free to use the chat function in there and we'll respond to you as quick as we can and if the app any sort of questions sorry it all didn't mean to interrupt there that's okay if you have any specific questions it actually meant easy to use the there's a certain Q&A feature in there that you may be able to use do I look right at see how it goes yep perfect let's get started so introductions my name is Joel Vardy I am president here at agility I've been with the company for many years spent a lot of time working on the product itself but now I spend a lot more time actually interacting with customers and partners and doing some strategic sort of planning around what the direction we're gonna be taking and how can we better work with our customers and partners and potential customers as well to sort of solve the problems that are happening today and so this one of the reasons why you know I have to credit James for bringing jam stack up you know many many many months ago as like this is the technology we need to be looking at and so and I said this is crazy you don't use JavaScript on the front end not the back end but I'm a convert loving loving the idea of jam stack really love working with it yeah well thanks Jill yeah my name is James Midler I'm the VP of Product I've been building websites for the better part of a decade a lot of that actually using agility CMS commands content and things and building integrations with that and you know throughout that time whether it's supporting other customers or building other websites another server rendered stacks got tired of you know all those performance issues that can happen is they were rendered sites so I'm just really tired of slow and tired of things going down in the middle of the night and I think Jam stack is something that you know if done right can really help alleviate those things and who knows you know if we have started building websites like this music where I might have a bit more hair left me to just just out of interest sake James is joining you from Toronto from our we work office which is our Toronto headquarters I'm joining you from Snowy Port Hope Ontario where my train was canceled this morning because of various reasons whatever so it's great that zoom allows us to be able to do this to have a virtual webinar be really interested to see where you guys are coming from if you want to shoot those in the comments that'd be really interesting to see the different locations where people are are watching from let's let's move forward so in case you didn't notice we really recommend using jam stack we love it as a technology it's a ton of buzz about it in this sort of the industry but also just in general you know if you aren't using it now then this is a great way to start learning a great time to start learning everything you can about it so what is this Jam stack thing that we've been talking about so Jam stack stands for JavaScript API s and markup very simple so in this case you Jilla TCMS we want to be your API it's your content API we have an SDK specifically geared to make it easier to get your content where you need it which is into DevOps processes like Jam stack obviously you use JavaScript for for all the coding and for the markup we recommend things like front-end frameworks that are generate so you could just code you know yeah you could just go draw HTML and vanilla JavaScript yes we recommend using front-end frameworks such as react you know a majority of the developers out there know JavaScript a vast majority but a majority of those JavaScript developers know react so we really recommend that as a framework of course there are other frameworks as well but one of the things that that does since you now have this thing that ISM you and use by a majority of people you can find developers to actually work on it much more easily so if you're sort of a leader in this industry and you're hiring people it's much much easier to find JavaScript developers that have front-end type skills that know react that you can use to work on your projects and the net effect is you end up launching way faster and you can iterate much more often on these DevOps work workflows that have jam stack yeah and like we're starting to see you know graduates that come out of these certain developer bootcamp programs that are fairly short in length they come out of there knowing react they come out if you're actually learning a lot of these frameworks so you know someone doing a three-month program can come out and be able to be instantly productive and be able to build you know performant scalable web sites using this technology and certainly I have today shin Rendell as it points out a smaller service base for attacks and construction yeah we'll talk a little bit more about security too as a major major benefit yeah let's just let's step back for a second and look at server rendered websites sort of why we could call them legacy websites at this point but this is the more mainstream way of doing it that sort of Jam stack is a reaction to I would say so typically when you're serving content on the web you have a web server that's gonna do your do your work and that could be and usually what that has is there's an HTP server plus there's a application server on top of that like asp.net or PHP or something else that's running you know Java running those engines as well you can also run node express as a server to to run node but we're not talking about that as much so when browser requests come in this web server has to do some work take some code that was compiled and deployed on that server and combine it with some content that was also you know sent in there somewhere it may call it an EP I call to it or whatever could be in a database it's gonna combine all that at runtime so at the time that that request comes in and service that request so if you want to service more browser requests you have to have oh it looks like my camera just died give me a second here to switch well let me let me let me take over wait wait wait where'd you left off there and one of the things that's that can be problematic about this model too is that your code is deployed there and your code doesn't change but your content can change in somewhat real time so you know if you are using a CMS for example and you're publishing content or you're changing content on the fly that chief essentially happens somewhat immediately and that gives you a bit of a bit of an area for risk because if you somewhat of an editor you know changes content in a way that somehow your application code didn't account for you might run into something like a null reference exception or you know some weird layout issues that you weren't tested so the idea of having content and codes through deployed and managed stuff really can be a little bit a little bit difficult to manage sometimes yeah and this this is what Jam stack is kind of a reaction to right we we've seen these kind of problems we've all known the kind of performance issues that come with web servers you know and spanning it in a web server farms it can get expensive so that's that's kind of the the landscape we're playing in we're trying to react to here now the DevOps process for server rendered websites is pretty straightforward the developer is going to check in your code it's going to go through some kind of build process and then usually it's gonna go through you know a staging server and that build will move to like be released to a UAT server or production server and then we tend to scale out the production servers to have you know there's more availability in there in terms of like a web farm and load balancing and that sort of stuff and if we're previewing the site we typically preview it on like staging or UAT before it goes live but as James was saying there's a lot of variables in that code right as you know it can get complex and things can change sometimes I'll only have my live content available on the production server so depending on what my code did it could have worked great on staging or worked on my local machine when I tested it but then when I test it on production I gotta wait until it's at run time until I actually you know use it and there's been techniques you know things like app services in Azure allows you to do like swapping of instances and stuff it gets really complex to do that and folks have a hard time developers like you and I have a hard time sometimes getting that right as these sites get more complex yeah and you know something to know like yours use like that staging u8c in prod environments those all might be up too either you know I guess like a sandbox content CMS instance or maybe it's using staging there's all these other other things you need to take consideration there's Howard what content are those going to use and sometimes we do I'm just gonna stop for a second and acknowledge the fact that I switched cameras and I'm now showing my kitchen to which I didn't think I'd be showing off to everyone but it's like working from home it's awesome okay cool so let's talk about just agility CMS content for a second because if you've already worked with agility CMS you know that we have we've always had a dotnet API that has a synchronization we also have JavaScript API so it's actually an open API that we've created JavaScript SDKs for that give you rest calls but there is also a sync API for JavaScript that you can use to pull content in and it actually sinks both your staging and your live content locally down to your build server so that fits in perfectly with the idea of Jam sack and static site generation so if we look at how that gets used in a DevOps flow we have what's called a build server so instead of a web server we have a build server that's gonna actually do all the work of combining your code and the content like a Joe DCMS content at Build time not run time it's gonna build it together and it's gonna create static HTML CSS and JavaScript based on the framework that we've used yeah and the key thing there you know combining content and code in your deployments so essentially nothing can change in your essentially your export dhtml unless something goes through that build process so that gives you a single point where you can add automated test run a good example of that might be you might want to run the caboodle PageSpeed insights or lakehouse labs test on on your bill to be able to track okay did that content that just update did that is that going to you know negatively impact the page performance and it sort of stopped that both going through in that case you can also do things like accessibility audits and things like that to all automatically when you have content that's changing in real time when the web server you know you have to do those things reactively it's like oh shoot some content got updated yesterday we need to go back and fix this this other way around gives me single points at you control that entire process so then so we've gone through that build process we have this sort of bundle it's really just a folder of static HTML CSS and JavaScript files it could have image and other files in there too whatever the build said it needed to have those files are gonna sit somewhere in online storage like a blob storage for Azure could be s3 there's also lots of other storage mechanisms out there and they're delivered globally via a CDN ok so this and this is really the second main main difference so we've switched from having a web server to a build server so all the logic happens at Build time and now in terms of the actual delivery of this content we put it out on a CDN and that gives us a ton of benefits and CDN is really really changing the way the internet works right now and if you believe the days of having a certain single Webster breathe just like a creeper Webster visiting a single data center all the requests go to and that's where all your content is the days of that model I think aren't going away because now with a lot of these modern CBN's and having all this great tooling it's so easy to be able to push your sort of content out to all of these CDN nodes all over the world and when you're in that scenario and a user tries to access your website you know they're no longer going to have to travel to whatever data center your server resides they'll be able to hit a CDN node that's closest to them geographically so that means you know much lower the initial response time consistently for all of your users no matter where they're located and some other great things about CDN is now to is you know they're really expanded the the sort of the ability to run logic and functions at the edge now into so now there's all this logic that doesn't have to live within your website codebase necessarily it can actually be deployed to the CDN layer and sort of have you know that will even complete abstract away from you similar to the idea of the server dysfunction a good example of that would be you know moving like if you have any redirect logic on your website that needs to redirect users to different areas of your site depending on where they're coming from you know that can be a fairly expensive operation in your application as do all those things or if you have a static site this was not even possible at all executors they run that object to move those out into a CDN node can have a lot of benefits yeah and typically those languages for to run at the edge are almost always in JavaScript so it's really really good I know that does all the different cloud providers have those one of the things we did when I talked about yet and I think is maybe the biggest benefit you kind of touched on it James is the idea of an atomic build so the build happens and it generates my files that are this version of the website at this point in time this Mike this so my complete site is now sitting in a folder somewhere I can then test that site before it goes live Netta Phi in particular as a as a provider there's a really great job of this as you know it has like a command-line interface where you can have the build say hey builds out but it doesn't go to production yet it goes to this sort of staging link that you have you can test that run speed tests on it and do all the different things you need to make sure that that build is good and then you can go live with that built at that time and if you go in and find something with your build later that's like oh my goodness we didn't want that to go live or there's a problem with this this part of the site you can roll back to a known time when it was good it was really good two days ago let's go back to that build until we're to working with this and we can fix it and a lot of these services can provide you a unique URL to be able to view that fill - so it's not like you have a single uet environment anymore that just keeps getting overwritten with your latest stuff you have a backlog history of all of the evidence you've sort of ever made and as joe said you can quickly roll back and select it one or you can just go back and look at it from records - okay what did we do last year at this time what if I website look like again what was that patient good score like all those sorts of things yeah now just just taking a quick break here if anyone has any questions you can use the raise hand feature or just do a chat thing and what I can do is I can just click on anybody's name and allow them to talk if they want it if they want to actually ask a question so at any point in time here please feel free to interrupt I'm good with that obviously if you're watching this on YouTube you can't interrupt that way so just in the in the right-hand panel just just type it whatever you whatever thoughts are going through your head right now that are relevant to the good call so you know what are the benefits of static site generators sort of in a nutshell when you're talking about this to other people one of the things we wanted to be able to do today is give you the ability to tell people hey what are the what are the sort of quick hitting things that you're gonna get first off static sites are lightning fast there is no code to compile at runtime your time to first byte is really low because they're on a CDN that's geographically close to you they tend to be more responsive partly because their JavaScript developers tend to be front-end developers so they do that stuff pretty well but also these frameworks like Gatsby and a couple others they do something called intelligent prefetching and they use tools on the build side that do with something called resource bundling so my actual page that I download that first time tends to be much smaller so it makes it feel faster which is perhaps one of the most important things of all I would say they also tend to be way way more reliable actually wouldn't say they tend to be they just are more reliable they're they're not birthday so things like DDoS attacks that would take down your web server before well you have no web server so you're not as liable to to be to be hit by those things traffic spikes so you send out an email that has 50 percent off coupons normally there's something like that oh my gosh I got I got a skill at my web servers don't have to worry about that anymore those kind of things don't cause you the kind of headaches that they did before and a fourth point this was James point that he made me put in there and I forgot weight cheaper you pay a nominal cost for the storage and even this even the cost of keeping even every version of your website is not high and then you essentially pay for the bandwidth there are some additional costs in a little bit for things like these server functions that James is saying but the cost of hosting these things so much lower than hosting web servers in a server farm and load balancers and switches and all sorts of stuff like that yeah it also just takes you know a lot of discussion of a wave from like you know you know you have an upcoming campaign it's like okay well what do we have to scale up to you what's our limit you don't want to you know pay too much because you know that's just money out of your pocket but you don't want it a searching for yourself either so you end up spending a little bit more to do those things when you have a site that's built like this you really don't need to even worry about that at all it is infinitely scalable and as well you don't need infinity but it approaches it the other thing is in terms of like things like Google PageSpeed in those kind of insights it's way easier to get higher scores on that with these kinds of sites which we've seen yeah it's it sets you up for best practices I mean obviously still you can still go the gem stack site that does not use images very well or video and you know still have bad PageSpeed scores but it certainly gives you all of the tools to be able to set you up for success and does a lot of things for you just sort of every box ok so what we're gonna do now is we're gonna actually demo some stuff we're gonna show James is gonna gonna take over the screen sharing here that's hopefully we can get that right in this webinar haven't done that yet and I'm gonna go and I'm gonna stop my share James you want to start your share all right you didn't see my screen right I can see it all right cool so what we're looking at here I just shows a couple sites that are sort of currently using you know this way of building websites these aren't websites that are specifically built on agility but again reminder chilly CMS is a headless CMS so it really doesn't with these sort of rumors you know it's not calling agility or any other CMS anyways so it doesn't really matter if they're not necessarily one until you're not decision to show its derivative how the websites actually sort of work on the run and what you can sort of come to expect from you know building either new pages where converting your website over to jam stacks so the thing we're looking at here is Ron comm which is the eastern 18 army and one of the things to notice I'll just do a refresh here the site is pretty quick to load immediately they do have some large images in here so that does you know in fact their page beats going a little bit but it's still quite high for the amount of media that they actually out and as we actually start clicking around in different areas you'll see how house not in response at that woods I just clicked on a link there and just immediately voted so you might be asking the question well how the neck doesn't do that how is it so fast it's almost like I knew that I was going to go to the page before I went to it and you're thinking that you'd be absolutely right I'll actually show you guys you know what is happening here let me just refresh the websites and what we're looking at right now is the number of tools let me just clear that out so our initial page is loaded as I start scrolling down the page here you'll actually notice that there's additional requests that start coming out specifically these paths have - - what's actually happening here is it's actually pre loading the data that it needs for these pages before I even click on it so by the time I actually do click on one of these items it already has the data it needs all it does is in JavaScript just hydrates that view so it's extremely extremely fast and snappy user experience as we going around and navigating the website so it was rendered so it was rendered as a static site with HTML that loaded the first time but then once the pages in a few it acts like a single page application exactly this acts as a single page application so it's a there's a session client-side logic that you know captures this sort of one-click event and then uses the client-side router and then I've read the next view with all of that data pockets so makes it even faster than just having static HTML pages because it also has a serve SP a go to it here's another site as well this is a chocolate Legos as charlie share with you will see so mainly feminine - products such as razor is wax isn't that kind of thing but this is also another example of you know everything media heavy site but it's still very fast as I click around two different things it loads up pretty much instantaneously it's really just the images that Behindwoods here and you'll see that these images are lazy loaded as well these are a lot of them things that just come out of the box on some of these frameworks so if your friend developer uses something like GATS we can get a lot of these things out of the box and don't have to do a lot of work on yourself some cool stuff I just want to show you guys what some of the sort of brain experiences you might expect from you know using a site was with Joel all on the high vacuum we do have a question in here oh yeah games so this is from Kevin can it incorporate lazy load images to increase page loads even further yes so these sites specifically are built with Gatsby which were actually going to get into shortly here and they are using there's a specific image component that Gatsby uses it's like essentially a react wrapper we're like regular images and what's really cool about that is there's a ton of you options to configure how you load images lazy loading is enabled by default so essentially it's not going to load your image unless sort of entering your viewport you notice you override that if you need to but it also it uses the picture the html5 picture tag with a variety of different sources so you can actually use that component to output several different image sizes of your of your image and then the browser will only download the one that fits the current viewport so that means you can have much larger images like this on your desktop but when you actually go down to mobile they'll actually load a smaller image because you don't need an image that's that big so that's a very efficient way to be able to optimize your site for mobile which is often one of the harder PageSpeed score is to get to get highs that move so it does all these things out of the box again you wouldn't want to definitely use the Gatsby image component though or that's before that specific feature thanks James playing let's jump back to the PowerPoint so static sites are awesome that's cool but there's a really unique challenge here that James talked about a little bit what about preview so when the code and the contents all pre-rendered how do we give our editors who are working with you know they're working with staging content they want to see how things are gonna look how do we give them an experience where they can actually preview that content ahead of time it's a really big deal especially for CMS well James has talked about Gatsby a little bit that framework is one of the fastest growing frameworks on the web it has you know one of the most contributions in open-source it's an open source framework probably one of the best skills to learn right now is Gatsby it has a really interesting answer and way to do this so let's look at what goes into creating and building a static site with Gatsby as it's one of our favorite tools right now and how that gives you the ability to do something like preview so how does Gatsby work well first of all uses a graph QL layer for all the data that you want to output statically doesn't mean you have to have graph QL data you could bring any data into this into this layer so that includes your agility CMS data so we've actually built a starter kit with a plugin for Gatsby specifically for agility but you can also pull in your own custom data so if you have your own you know API s and libraries or some other data it could be from any external source you can write your own plugin it's pretty easy to get that into this graph QL layer so what happens then is that gets basically enabled to use within your react code so Gatsby is written on top of react you create components so those page components and then there's sub components from there that have access to all that data in graph QL it's really fast then go through this build process where all that code is combined with the graph kill data and its output as static HTML CSS and JavaScript and it does all that stuff that James was showing automatically so if you as long as you use sort of the right best practices that Gatsby tells you to use use their components and sort of learn how things are going and it's really easy to do that you get that SP a sort of activity all that really great sort of performance benefits out of the box they also do a ton for accessibility as far as I'm concerned it's a whole new way of thinking about developing for the web and it fits right in with sort of being more agile and being able to launch faster yeah and one of the things I particularly like about Gatsby and he touched on there it is the is that's really an idea where you know you can have data from a whole bunch of different data sources but really they're all going to be stored in one area usually Coria bold by a flattened by a front-end developer so you know you know one of the strengths of a headless CMS you know to be honest is that it doesn't try to do too much no it's there to help editors manage their content and it's there to provide easy tools for developers to be able to get that content really we have a question how does how does something like gatsby support and this would be good question for any for any static for any HTML site or sorry static site as well as how would it supports something like load more so that's a good question couldn't tell you I think Gatsby actually has a components that are the box to help you with that but the idea is you can still read client-side logic in the Gatsby site so it doesn't happen on the server but on client side as you scroll down the site and you get past that certain point where you want to do something you can then use a different client side use a lot more just like you would in a regular react site actually there are react components out there and that handle lazy loading for you that are like wrapper components so you just use something like that and Edward pretty much there to the boss but to that point is well pagination is something else to that also needs to be taken into into consideration and there's some docks that are more freedom specific especially for Gatsby and how to do that so I would check out the Gatsby jsf org they have really really good documentation there was a lot of frequently asked questions that can that can help you out there all side yeah you'd still be sourcing the same content instead cool but yeah when I was I was getting it was you know the benefit of it hasn't seen anybody do too much and I think there's really two schools of thought when it when it comes to software right now there's that sort of monolithic thing like you know adobe experience manager for example that does a lot of things for you and keeps you within that sort of bubble but kind of harder to you know tweak and bend to your will and then there's this dog where it's like I want to use the best tool for the job so you might have you know agility CMS as your CMS you may use a different service free of personalization you may use a different service entirely for your e-commerce such as Shopify crap qaul and this sort of sort of plugin process and go and pull that data in de Graaff well all of that data stores you can have them automatically just by registry to plug in and saying if you take options it becames it becomes so much easier to integrate with those other services and really create your sort of custom content mesh that can really make your site stand out yeah content meshes is a term that is the gasps we have started using to to talk about how you know the process of bringing all this stuff into graphic you out so Gatsby is a big framework and it's one of the ones that we're spending a lot of time working with and recommending folks to use there's a couple of other frameworks that are also really effective to use with building static sites another one which is built on top of react is called next-next j/s so that's a really interesting framework it'll actually is is really just recently been used for static site generation it's for a long time been used for server rendered sites but what's really cool is you know if you're already using it for server rendered sites or you really just like the way it works it doesn't make you use graph QL you can use any way of pulling your data in that you want to build your components and then it can render either from the server or the aura as a static site as well and there's another framework that's very similar to next called next which is not based on react it's based on view jeaious so if you are a view person which actually I took to view a when I started on Jam stack right away and then next is another framework that very similar to next it allows you to do server rendering or client rendering or static rendering of the site so they're pretty interesting yeah and we have a sample github repos that show how you can use all three of these frameworks with agility CMS right now we're sort of using our we have like a blog template you can send it free iron website they all use that templating just for simplicity but it really illustrates how you can use all three of those frameworks I think Joel personally wrote the next KS one and they got to be an XJS Berlin or agility get every possible and so the other thing I want to take you guys through a little bit is show you I got to say that of course with agility and how preview works and sort of how you sort of go from okay I have this thing running locally I look at this deploy how to edit lose preview it just to give you guys an idea of taking all the big reserve learning today and seeing that actually we're in a real scenario so roll up it's a right all I'm going to take over this screen again there you go all right so let's close this and what I want to show you guys is is this site here actually the agility day is 20/20 so we are actually planning the our next agility conference May 26th and 27th so we're actually just the middle right now finishing up our web site that I directed me to experience Bob Browns been working on doing a great job and so we built this using Gatsby and we're also using a cloud service that Gatsby provides called Gatsby cloud and I'll go into that a little bit more afterwards we're also using metla Phi as our static website host in this case so you'll see that by the domain name on the site Jilly day's website blog so when I'm writing this locally I would just be using vias code I blend Gatsby developed which is the CLI came in and I'd be able to run this a locally a player outfit making any changes to CSS JavaScript all past hot module reloading felt in so it's really quickly to be able to iterate on the front end stuff I was part of the reason why Rob's been so productive on the site I think he's only been working on for a couple of days and he's already been able to get a whole bunch of stuff together further to that no to you know are probably guys new buildings web site for us you know he's he's not necessarily at the full stack developer he he has not had done a developer but he was running really well and then he was doused with really well and so it was great that he was able to sort of stand up the state entirely on his home and you know didn't have to serve involved in any sort of go back in software engineer to set up a hosting environment or anything like that this is also be dating with you on his own shows the capabilities of this so we've got this site here and then we've also got our agility CMS instance I'm just gonna make this a bit bigger here and this is just a single page website just for reference back to that it's pretty simple it's a single build a conference a two-day conference we don't need that that many different pages on here wait add some more later but pronounced single page and so you know what Joel had alluded to earlier was you know this is great I have to say deploy and a website but you know if I'm an editor and I want to make changes to this content you know I don't want to have to published up kick off a bill wait for that to deploy to be able to see my changes I want to be able to make my changes and see them in somewhat real-time similar to how the standard agility CMS done that website works and that you can see your changes in that real-time so what enables us to do this preview is the service that Gatsby has so in gatsby cloud this is my preview environment here and you can see that this gives me a history of all of the certain rebuilds that map TV has been husband has done today that's because we've made it a few content teams in the CMS which then we have a web hook set up that automatically hits gatsby cloud Intel's got three behaviors recipe view site so the editors can see the content so let's take a look at how that website looks again looks pretty much exactly the same as you know what we had in our in our in our deployed web site so I can actually go ahead and just make a content change here and be able to see the screen path so I'm gonna just put these windows side by side so we can see this you'll see here if I want a module that actually controls the content for this text as you guys see here so let me just go ahead add some more content to that just so we can see that sir your change here so I'm gonna go ahead and just save that change and what's gonna happen here is it may take it may take a few seconds but the content down here is actually going to update and if you notice that have an actually refresh the page yet either we're gonna wait for that to go through we switch back see me Oh dad that's too bad I switched away too quickly but you can see that the content was updated there immediately this actually works how how Gatsby has hot module reloading working that's based on your graph fuel so essentially what happened here is a web map in Gatsby cloud reran the sort hasn't updated the content and then notified our previous age up to the content here so this is how you're able to provide a really fast preview environment for your editors and it doesn't require them to kick off full builder you know that's you can give a very similar editing experience you have now I think it's really important to you know we're talking a lot about like how this is better for developers to book websites but you really need to keep in mind and have a lot of empathy for editors you know if you saw them when using Jam stack you don't sit at a previewing where and you can preview they're not going to be happy with that change regardless of calm we're deficient or it or how much you as you say them development experience is better so definitely keep that top of mind make sure you be working I note as well is that we are using Gatsby clouds you have this PV mark set up but we also know that it's possible to set up custom preview environments as well we've done some tests using as your app servers as well as Heroku other hosting services that you can actually deploy your Gatsby site essentially as a node.js application in in a container and you can have your certain long custom PV environment that way as well but Gatsby 5 just gives you this really cool interface to be able to see what's going on with so now that we're looking at preview now let's look at live right so again this is our live website this is our lab website via here and you'll notice that you know the text here has not treated that's because I haven't actually I haven't first why I haven't published that content change yet but even if I did you publish this content change one of the things that's important to note here is that right now the way we have this set up is still not gonna update our live website and all I say that by refreshing up our live website it doesn't change that content is still exactly the same so this comes back to you know the idea of having a static site generator this say is that I could generated I've updated the content somewhere else so in order to update the content here I essentially need to do another build and deployment in production to be able to get that static HTML out there now I think there are a few different ways you can consider to set up your DevOps but in this particular case we try to keep it pretty simple so the way we would actually go up though and actually deploy that's the introduction now that actually go to my production thing here and here I can actually see of a URL of my previous build that was successful so this is the same thing that's essentially live right now I'm in my site and as dog said to you know these are all of my previous bills that I had before so I'm going to take a look at every single one of them they each have their own unique build URL that I can look at but you know let's look at actually getting some live content there so I'm going to go ahead and I'm going to trigger a bill and what this is going to do is you know I'm an editor now I know everything I want is it's great I published my content now I'm gonna actually trigger that deployment to go and update my website so I'm trigger to build Gatsby Club gasps see girls literally was just released last week so sometimes the fields are really fast some of them just loaded others I think is still trying to figure out some kinks but let's see how long this would take shouldn't be too long and if you actually look at the logs you can actually see exactly what it's doing actually this one's been pretty fast so the bill it's already done it was deployed in 28 seconds so I think that's quite reasonable and that also auto data set I'm happy to point in that way as well so whenever this guild succeeds it automatically goes into place to nullify which means I should be able to go back to my website here refresh the page and you can see I now have that updated content the really cool thing about this is these builds as I said before because everything needs to do it build you have the opportunity to run automated reports so if I look at the details of a build here I can actually see my legless boys gasps beep ugh does this built-in you can also do this custom in your own dev ops pipeline as well but again they have a box so I can go take a look at the forecourt of the specific bill and I can see you know we sell some areas to work on before we launch before we launch the site there's always some things we can do better in terms of performance right now I don't think we're using the gasps the image components so there's some things we can do to you you know load of our spirit of top header as a small language for mobile accessibility we're probably missing some alt tags or something somewhere best practices in SEO Seneca see some direct recommendations and resolve those so it's just a really great way to be able to sort of keep tabs on your all of your website goals that are going out and you know you'll know that if you have content that that has really affected your page mean square you know you might want to take action on that before it actually goes live so that was a lot of a lot of information there I'm sure there may be some questions oblate expect that straight concludes what I wanted to show you guys regarding using something like Legaspi to be able to set up a chance back quickly that's awesome that was a lot of a lot of information and what's really cool about that and I know you guys really just started like you know Rob's been working on the site for a little while in terms of the design but in terms of getting it up on to Gatsby cloud and getting a building that was really really easy correct me if I'm wrong no there's like it was like 10 minutes you know we already had the we already have the code in github so when you create a gatsby cloud I guess they call as a site it was pretty straight for me next get up account today this is the repository area that's gonna be connected to the master branch so that means whenever it happens in that github repository or if we just manually hit trigger build it's gonna go grab the source code run gatsby build which is gonna go grab all the content we need and then export that all to HTML as you build that burns away goes where it's on them and then deploys to never fly so it was very easy to get that entire pipeline set up and you know you want again you don't have to use gatsby cloud is just a really good way to get that set up and going especially as a prototype you can certainly know do a lot of these things using Azure Devils pipelines or any other equipments or just amazing really really cool awesome I'm gonna stop sharing this being here ok so we learned a lot about Gatsby there and I'm sure there's a lot more sort of questions to come about that about how you know how we can use it and what not there's a lot to learn as well about about next also a really great framework and it has it has just like Gatsby has a gatsby cloud as a hosting model on top of that next has a hosting model called studied thank you yep so that's so that works with that really cool framework we've had a few customers using that and as well next as well is gaining popularity yeah one of the things about next that is actually fairly interesting is you know they certainly take a different approach than think gatsby it's what a minimalist frame at Gatsby sort of forces you to do certain things a certain way and that's what I didn't enable a lot of they go to boss performance benefits next-gen is sort of more of a lesbian bear sort of attitude what gives a lot more flexibility over things to do things to wage with so maybe more appropriate there is some very specific enterprise requirements so it's worth taking a look at that but there is right now forcing platform also hasn't built in pipeline and things too what's interesting about the way that they do things is that they actually deploy your next yes site on do what they call a smart CDN which is CDN running surrealist functions so each one of your page routes actually technically runs in a server this function when you're running it as a statically generated safe it essentially only runs that function once and then it goes past the yoga book and then it's completely static but what's interesting is that you can actually set up a parameter in the next vs website source code to instruct their smart CDN to periodically invalidate the cache and run your circles function again so that means if you have some pages or some areas of the state that you actually want to be fairly dynamic such as you know you may want a page to update every minute you know maybe you have a scenario where you have you know commenting or something on your website and you know you don't want to have to wait for a full repo in order for those new comments to show up you could actually have that set up in a way where every minute the comments are updated and new content is pulled in so you still have a staff engineer its site but it's still somewhat dynamic in some way so it's a really interesting use case I think that they have it's very new check that they have to like the idea of static building staff you can reinstate entirely using very new in fact still using unstable unstable functions at the moment but I suspect the next version the next week it's you will production we've also been in contact with next we as developers as well as gatsby as developers as well goes to all of our source plugins and things so if you guys have any specific questions and you're having trouble getting both of them to let us know we can certainly pass on some questions or some information do you have a question from the group here from Chu how does a chile support user data such as form submissions so that's a good question so WCMS offers something called user generated content which is there's some component of agility CMS and so that allows you to define you know fields and things that you want to be able to collect form submissions in terms of actually building the form and displaying them on the website currently if you're using an asp.net website as it is right now using various various ink model you can use our built-in form builder in that of this video right out of the box for you they create an end and in story simple submissions form submissions in a headless in the headless scenario right now what you would probably do if you wanted to use agility user-generated content is that you'd actually have a development code up the form and then use our new bc api which you can use no problem to be able to you know collect those form submissions and submit those to user generated content the other thing you can do as well is you don't necessarily have to use an ability you can see either i you know talked a little bit about the sort of content mesh before there are other services out there as well that can actually help you sort of easily have you know place to create and automatically render form submissions and we're going to be looking at possibly integrating with some of those services in the near future yeah the next question from to again thanks for these questions was about e-commerce so when you look at something like a gatsby site it's really interesting how when you have this kind of content mesh that James was talking about where you can pull lots of different data in so not only can you pull in data from your headless CMS you can pull in data from your e-commerce system there as well and so there's there's that side of it where the data gets pulled into graph QL that's used to actually render the static website but then after that once you have the site rendered and you want to allow interactivity and things like like a check out for free commerce or login and authentication you then just use your regular client-side API s so if you're using the fragility also has an e-commerce component or it could be that using Shopify their component so they have you know the the JavaScript SDK that they provide so there would be one set of calls that would you use to populate the graph QL and another set of calls it would you use it would be purely from the client side from there and then in addition if you're hosting in something like nullify where you do not have a web server you can build your own web api's that are you know either node whatever to do if you have a custom back-end process that you want to do or you can take advantage of or something like nanofied they have what's called net the five functions which provides kind of like functions as a service which is a fast which is kind of a new idea where you can work with api's that aren't necessarily aren't necessarily you know pre-built for if you have to make like a server to server call first and do another question here so I don't want to take this one or where you mind if I take it take it all right cool so we get asked this a lot the question is why use agility over you know WordPress actually had this WordPress site so there's a couple things you know WordPress gives you certain some certain functionality out of the box they allow you manage things like blog posts other areas but if you need something more sort of on top of that you then start to have to look at plugins and that kind of thing so there you start really customizing your WordPress thing and then now you sort of have to maintain that over time as well so a headless CMS leg agility CMS also one that's multi-tenant it which means we manage your database you don't have to touch your agent like that it's built on the ground up to be able to handle complex content schemas so if you're in a scenario where you're sort of like trying to surge in trying to customize WordPress too much and you're getting sort of frustrated that's going to be an area where you're gonna want to look at you know a headless you miss that specifically design for stuff like that because we have pretty much infinite capabilities to be able to configure custom content models so if you want to create a blog post and you want to add a bunch of different types of fuels that makes sense you can go ahead and do that very easily no plugins anything like that we also have a built in concept of page management which gives you a very granular control over all the content that is all that is on your pages so you know really to answer your question it's it's infrastructure and you know capabilities to be able to do a lot more things that WordPress can't or that WordPress was not specifically designed for I could also get into some things around secure that's often it consume that we're pressed to especially in terms of like who manages and maintains a wordpress instance so Julius CMS is a multi-tenant CMS that means all of our customers get up kids immediately we also don't dictate how your website is going to be built either so just generally speaking a lot more flexibility and our guys are also multi connected as well and - again so you don't have to manage great question really very great question a lot of the customers that we have now that are coming to us usually coming either from WordPress or WordPress is one of the things that they're looking at and they're trying to figure out well you know what do I want to do and really choosing a heavy CMS like agility really future proof future proofs your system because you can you can spend a little bit more time what James is really talking but there is something that we call content architecture where you and you do it you do what's called a Content first approach we just where you decide what does my content gonna look like before I actually go and build my website and going through that process makes your content really really valuable and that's where I got some videos that are coming out soon that will go through that sort of content first approach to talk about how that works great do we have any more questions like to sort of continue the conversation here that's the end of our sort of official webinar slides that we have we invite all of you to follow us if you're not already following a set of jodi CMS on twitter that's where we sort of post most of our stuff we invite you if you're a developer go sign up for a free account on agility right now jod CMS comm slash free and then if you are not a developer and you're just really interested in it's like hey I need this jam stack thing on my site right now I need to figure this out get in touch with our sales folks they are have a ton of information already they can give you but they can also get us get you in touch with with our not only are our internal senior folks but also with some implementation partners that can help you do this yourself so sales at a Jovi CMS com looks like there's another question is a question the question is if I understand it correctly my content will live on the edge do I have any control of demanding belly - that's a great question so in our example that we looked at here we had a Gatsby site that was posted on net looklive which is on it which is on the CB n so nevla phi is a hosted service that serve does all this stuff that means whenever a deployment happens they automatically creates the cache it's not something you'd have to worry about now in a real-world scenario you think you're building a straight you may not be able to use another five for whatever reasons it could be because the customer says they know you need to use AWS it needs to be hosts or something like that in which case you know the scenario is there what you might do can change or what you might need to do so there may be a scenarios if you're building your custom pipeline where when you actually deploy that out somewhere yeah you may need to also send an e VI request to the CDN to say hey where's the CDN content there is that question I think so that was PIM good good to hear from you Kim yeah cool so yeah in just in just sort of continuing the conversation even further check out our community page Jody Seay mass comm slash community on there we post all the upcoming events all the stuff that's happening worthy one of the things that sort of our mission our mission and agility is to help make you guys better leaders and that's and so our community events are really tuned towards that towards trying to teach folks sort of about new technologies about content first approaches and different ways of doing that in terms of we call it the whole product picture right from the beginning of thinking about something to the point where you've got it iterating and improving on it so and on that page it has links to to join us on our slack channel and to join us on get up yeah and just to add to that as well if you guys aren't curious to learn more votes you know Jam stack and getting we need talking to more developers using this stuff we're all memories here at agility of the jam stacks piranha meet up we meet up usually once every month sometimes every few months this is upcoming one February 19 I think it's a tranquilizer I'll be doing a talk they're actually on doing building jams back right with cage management so if you're curious to hear about that talk I recommend signing up to meet up and and coming up it's free to join and there's usually beer and fun people there so cool our next webinar so we are we are going to be hosting these webinars monthly at least we may actually end up doing some more webinars we make to end up doing some web some workshops with folks we've had some asks to do that but the next web star well sorry for that webinar webinar will be on March 6 so a month a month from today and the topic of that one is migrated to jam stack without rebuilding everything so it's gonna be a really interesting topic something that we're talking to a lot of people about it's like I had this huge website I have you know might be an agility website or it might be just you know it's my WordPress site or whatever I want to not touch that thing but I'd like to fix these pages because the Google PageSpeed is terrible or I want to fix this way add this new section how can I do that with Jam stack yeah that's gonna be an interesting one and as James already pre announced agility days is coming up in May this is our our company summit it's gonna bring together customers and partners everyone together for sort of deeper learning product training thought leadership on you know be more agile content first methodologies that sort of stuff and networking just a chance for you know people to meet each other for our customers and partners that may be there across the country or all over the world for a chance to meet us so keep an eye on that community page on our website for more details the registration as we were hard on work hard at work on that web site registration will open up soon that website coming soon and we're gonna have it we're gonna have as close as possible to 150 page beat score at least that's his plan anyways we'll see if we get there awesome well if there aren't any more questions thanks everyone for tuning in this was great we did a ton of ton of participants really really good to to see folks coming up some great questions I was happy to do this James how you feel oh good thanks Jason I'll see you at the jambs tech meetup as well cool take care everybody thanks for tuning in

Channel: Agility CMS

Views: 510

Keywords: javascript, web development, jamstack, cms, headless cms

Id: WWntcDtQldo

Length: 60min 48sec (3648 seconds)

Published: Fri Feb 07 2020