Back to front component development and deployment

Transcript

Next up, we have James with Back to Front Component Development and Deployment. Take it away, James. Thanks, Hannah. I hope everyone can hear me. A bit of an introduction. My name is James Zhou. I’m the Senior AM Solution Consultant from Adobe. I have been using AM for almost 10 years now, and I’ve led many small, large projects in Australia. So today, I would like to share a topic regarding the AM development. I call it Back to Front Component Development and Deployment. And obviously, the back to front here means the back end to the front end. All right. So in the next 30 minutes, you’re going to see three things. First one is a new way of developing AM components. And then you’re going to see how I’m going to debug my AM projects in a different way. And lastly, you will find that this is probably a new way for you to launch AM sites. And you may notice that I double quote new because when I talk this to our customers, I feel like they already start using some of the approach I’m going to show, I’m going to demo. Some of them maybe heard of it before, but haven’t got a chance to try it. Some of them maybe are just like, oh, this is a good way. So I like saying you may have the similar feeling. So if you have the questions, feel free to drop into the chat. I think at the end, I’ve got some time to cover the QA session. All right. So you’ve probably seen the slides from Cedric’s session before. This is 2023. So although we’re talking about content management systems, but we’re still leveraging a lot of technologies. And a lot of technologies, they actually changed a lot since the last time we have checked. So HTTP2, the protocol being invented about 10 years ago now becomes standard. And comparing with HTTP1, it’s faster, it’s smart. Which means now if you talk to the page, what would you just say? Is the server-side rendering, is the client-side rendering, or is it a mix of the rendering? They’re all fine now. There’s no significant difference in terms of responding when you’re using the three parts of the rendering method. So we’ve seen the biggest API we’re using is called a web platform. That actually is the browser here. So can I ask, do you remember the version of the browser that you’re using? Right? Like for me, if you’re asking me Firefox, I’d probably say maybe last time I checked it’s 10 or 20 or something. Chrome will be larger than that, 70 or something. So actually the fact is, in October, the stable version of this browser, Firefox is 119, Chrome is 118, and Safari is 17.1. So there’s lots of improvements and enhancements that this company has built within your browser now. That means when you consider doing something, usually you leverage some framework because you know that the browser cannot provide that functions and then you use this framework. But now maybe the browser has already provided that capability. So it’s time to consider when you want to use in a new framework or time to consider some frameworks that have been using for many years. What is the impact when you’re using a framework? That impact my page performance, that impact my Google Lighthouse score, et cetera. And the last thing in 2023, we’re not just building the web pages, we’re building the experience with the high performance and high impact. And we want to achieve 100 as our Lighthouse score. So actually the AEM Edge delivery services has already helped 100 plus customers to move from like a score lower to like 20 or 30 to 100. So I look at how the AEM Edge service works and I got a lot of inspirations from them, which made me to create this topic back to front and component development. All right. So in the last 10 years, I talked to a lot of dev teams. I usually ask them three questions. How long do you spend to deliver AEM projects? How long do you spend to launch a site? Is it months or weeks or days? And the second question is how quickly you can deploy your AEM changes to production? Need like a two spring, one spring, a couple of days? Can you do that in the business hours or do you need some content to create, et cetera? And the last thing I’ll usually ask them is how many components or templates you’re going to create a website in AEM? Is that like less than 20 or the 50 or more than 100? So here is the flow after my observations or my personal experience is a typical way of launching their websites in AEM. So you can start with the product managers, creating some like wireframe design, then moving to give it to the UX designer, applying some branding guide over there and give it to the front end developer to cut up to the HTML and give this HTML to the backend developers and they’re going to split it into the component. Some smart guy will convert this HTML into a component with author and dialogue and another guy will merge them together and make a big deployment. And at the end, we’re going to tell the content team that, hey, template’s ready, component’s ready, please start creating a content. It works, right? But it’s not that perfect, right? Because if you look at the time it spends, of course, this is the time it can vary based on your team size or skillset, but it’s actually take a lot of steps in order to finally get a piece of the content or the piece of the blank page your content team can start authoring them. And also, if you look at this approach in a high level, this sounds like a waterfall approach and everyone is kind of like a pending on the previous steps work. For example, your backend developers, they can’t do anything until they get HTML, right? The real HTML can match the design. And the pool guide, the site author is they can’t author any content, even they can have the content on day one, really on day one, but they can’t do that because they don’t know which component can be used. The second thing is about the deployment because at the end, you’re going to merge everything together and don’t take too long. And sometimes it requires some content to freeze. I can’t do that in the business hours if you want something like a big dynamic transaction on sites. And also, I always see a lot of big component catalog and I could see a lot of duplication of the component template that’s being created for different user cases, even they look the same. And finally, if you look at the page performance and you can see in this arrow, what has been passing by from block to block is actually the final HTML. That means the HTML has been tweaked by many people, which caused the consequence that no one would take the responsibility of that one. Because if you are the product owner, you say, hey, why my websites like Google Lighthouse is so low? And they’ll say, oh, that maybe it’s because front end guide using this library or that’s because the backend guide hasn’t created a good HTML marker for that. So that makes us to think if there are any new way to launch in our websites, then with the help or with the innovations of the AEM cloud services. So we got the idea of the site templates first and also inspired by the Azure services. We kind of like proposing a new way you can launch in your website. And you can see, so you’re going to first define some templates and of course you’re going to leverage all the out of box ones, you’ve got all the core components are ready to go. And we would like the content author to be able to create a content on day one when the content is ready. And also at the same time, we’re going to let the front end developer to focus on the presentation, the layout. And if they see anything needs to be tweaked, they will first use the web platform API, which will be the CSS or JavaScript to match the requirements. If they can match the requirement, they should be able to deploy that straight away. And finally, if some functions need extending, we’re going to look at the backend developers, our AEM developers. We’re going to ask them to customize some components and then make it as part of our repository and build and deploy. So you may heard this term today, we call no code, low code, full code. Then actually they are representing these three personas in this website launch. So for anything we think the non-technical people can do, we should encourage them, go and initialize the new page without, don’t worry about the presentation, put the content there and let your dev team worry about the presentation, worry about the integration. And on the middle, you’ll see the front end developers. Sometimes you will see people complain, oh, my front end developers, they don’t use AEM. Or they know a very limited about AEM. Can they do that development? So the answer is yes now, because the way I’m going to show you is how a front end, a pure front end developer can contribute, can making changes in your AEM projects. And then lastly, I think everyone’s familiar with that. That’s the backend developers with all the activities. They can still fully extend it and create it the site when necessary. All right. Let me go to some demonstration. This is my AEM sandbox. And you can see I’ve got a site here. It’s a coffee site, let me call the press call back. And got the homepage. It’s got the right architecture, the structure of the site. And if I open the homepage, let’s see the page looks like this. So it’s got some banner, logo, menu, and some like tile or teaser, whatever you call that, etc. But if I want to ask you a question, given everyone in the room is developers, I like to talk to developers. How many components do you think you need to create to implement that site? I’ll tell you my answer. And actually, this is a site that has been built by Mark and our team. So we actually haven’t created any new components for this website. So if I go over down, I want to add some new components, you can see everything they are all coming from the core components. The only thing we made is we create a theme and the theme can apply perfectly into this core components. Right? So what maybe you ask, how are you going to do that? Right? So let me see if I’m a front end developer, I can see they must be two components over here because this is the banner. And this is kind of like a tire. But if you are wearing the hat from the content authors team, they’re going to give you a different answer. Because no matter these three variations, in the look and feel it is, but for them, they’re the same, because I’m also in the same content, image, a button, some text, and then it kind of like in the same pattern. So that creates us thinking of what should be the contract between your content team and your development team. The usually is the HTML, it’s finally the final output. But we kind of have to switch this, because we want the contract between your content team and your development team become the model of your content. So I show you the way how I do it. So if you’re familiar with the AEM, you’re familiar with the star system. So I’ve got the star system, which is ready, and I can easily change this. I’m using the text to write and give me this variation. And I’m using the text button that give me this variation. So let’s say tomorrow, the content team say, hey, I would like to create a new variation. I don’t like the cut, I don’t like this consistent look the same, I want this part to be the top. So what we’re going to do is we’re going to go here, edit the templates. So for people who know AEM, this is what we call the policy editor or template editor interface. That allows us to define the configuration of the components. So I’m going to find a teaser component, which I’m going to be using. I got to come here and add a style. Here now there’s no implementation for that, but because I’m the content team, I know I’m going to call that Text-to-Top, and I’ll give them a name. All right, it’s ready to go. So if I save that, refresh the page, I should be able to leverage that style now, although there’s no impact, there’s no implementation. But that’s ready because that’s all I want to do because I got the same content. I just need to change some variation of that. So if I go here and change to Text-to-Top, and it just falls back to the default style, that’s fine. So now I’m going to bring you the source code of this site. So the way I implement the thing that I mentioned that can match to our whole component is like this. So if you are a front-end expert, you will find out this is a pure front-end project. It’s got the package JSON with the claims and dependencies, et cetera. If you look at the source codes, what I’m implementing here, they are all the component-based CSS in JavaScript. And then eventually they’re going to all bundle together and then deploy and then refer back to the sites. So remember, our task is to implement a new variation of this component. I go to my teaser components, and you can see that for every variation, I’m using the CSS to control it. So now I’m going to have a new one called Text-to-Top. And what I’m going to do is I’m going to paste it. Actually I copied from the bottom one because I… So the contract here is the style name, which the content team just put it, and here we’ll let the front-end team knows I’m going to use this one. And the next thing I’m going to do is to make it as part of my reference. But now my work is done. I would like to test it. The new way of testing the old debugters is from your local. And by the way, I haven’t installed any AEM on my local because I’m a front-end developer. Can I debug this? Yes, you can. So I’m going to come here, or I will restart it. So you can see that I’m using my npm command just to run a local web service, and this service is running on the 7,002 port. I forgot to mention one thing. I should define a admirable template here because that can allow me to proxy my local web server to a remote AEM instance. That’s why I don’t need to install AEM. So the result is… So if I switch to my browser and I refresh this page, this is the local host page. And this is the proxy content. So I’m going to do a rebuild of this and see how it looks like. So let me just read it. And I want to make sure I’ve got all the content ready. So this is the one I’m using, and this is the one I changed. Good. So I’m going to come here and do a bit of a refresh. There you go. It’s started working. Even I haven’t deployed anything. I’m able to debug that now with no issues. So you may see, okay, yeah, that’s a good… I can still use the component to do it. I can just use some authoring dialogue, having something, and I just have the logic on my component. But the way we say this is new is this actually doesn’t require any front backend like AEM developers involvement. Because the frontend team can do all that by itself. So if we extend this concept a little bit, so let’s look at some of the other components I’m using. So this one, you probably think this is going to be like a three tie component that I’m using, but actually it’s not. It’s a component. It’s a concept fragment list component. I just add a new variation using the JavaScript to do it. And a similar for this one, you see this is maybe another one, but if I tell you, I’m actually using a content fragment to do it. And the reason why I use the content fragment component, because it’s all out of box, all I need to do is just create a content fragment and I can get it. And then the frontend team can go and doing some banners, banner style. Or if you want a bigger one, actually have a bigger one. So again, all out of box components, but with a more involvement from your frontend team can make these things happen. And the benefits as a cause is fast. And if you go back here to look at what I’ve done for the content fragment components, it will be over here. So I got all the variations, I got its own namespace for the CSS. And you can see, I can also using the web platform API, which is the out of box JavaScript APIs to do a bit of manipulation on the DOM. Usually you’re using some framework to do it, but it’s all now possible by just using the web platform API. All right, the next thing I’m going to do, I’m going to just do something different or complicated. So now imagine I’m the content team again, let’s just make it a little bit small. So because this is about the coffee shops, I would like to have interaction components, interactive components with my customer. I call it map. So apparently you can imagine implementing a map widget on that will require some work. But because I know I’ve got the full requirement for the map and as the content, I know my front end team is going to implement it. So all I need to do is probably just to make him a container over here. And I put the text over here, I said, I wish we could have a map here. And hold on, what is the contract between myself and the backend team? That would be the ID. So I’m using the ID. So the contract being translated to, if you’ve seen a location container being put on the page, please display a map over here. No problem, front end team say, I can do it. So let’s go back to our source code. I’m going to show you how we’re going to do it. So I’m going to create a map component. And in this case, I’m going to have using some JavaScript logic to find out if there are any existence of this container. And because I know I’ve got something I can leverage, I can use in this Google Map React API. So now you can introduce a framework when needed, right? And you can just fully implement this using the React library. And the next thing you’re going to do is just to maybe include it in your JavaScript. So when you save that, you’re going to trigger some local build. And if I switch back to my local browser, ideally, you will see there’s a map component show up. I can drag and drop it. We can do some bit of search based on needed. It’s a fully interactive. The complicated component can still leveraging the framework to do it. But I only use it when I think this is needed. So back to what we just covered in this demonstration is like from the simple to the complicated components, there are ways that you can just use the no code or the low code approach to implement it. And here now I haven’t do any component, creating a new component. But then next question is, how can I get it deployed? Right? Because I’m happy with my local. So I’m going back to my AM screen over here. So for those of you who are familiar with AM cloud services, you will see we have a new panel available for your sites. You can switch to the site over here. But that actually tells you what is the front end thing this website is using. The documents talk about how you can just configure your site in the thing. But I’ll share the link later. So this is already someone I already created. But if I switch to a different site, I think that actually allows download the thing. So when you download the thing, you will see the source code I just showed you on my visual code. So once you’ve done that, all you need to do is come to your cloud manager. And instead of creating a full stack pipeline, you’re going to create a pipeline called front end pipeline. I’m going to tell you what it looks like. Similar with what you created for the normal deployment, the full stack deployment, all you need to specify here is what’s your environment, what is your repository, and what’s your branch. So that branch contains your theme code and now become a separate, an independent release artifact and managed by this front end pipeline. So if you run this pipeline, what happens is it will combine all the source code from the JavaScript and CSS and deploy it in the CDN. So in this case, your front end theme has not been deployed into your AM author publisher. It’s going into the CDN. And from the interface, what you can see here is this allows you to be able to find out what is the deployment activities of this theme. So like I’ve done this many times, you can see, you can easily roll it back. And what can also allow you to do is you can have multiple sites. They can have a multiple theme. So you only have like multi, bring the multi-tenden into the scenario. They can completely manage the separately. And you may ask how fast I can get this. So if I show you some activities I’ve done, and then normally, see, this is my full stack deployment. It takes like 20 or 30 minutes. But front end deployment pipeline is much, much faster. Six or eight minutes to get your change ready in production. So if I run my pipeline now and after six minutes, I refresh this page, I should see the new variation has been taken effect. The new map component has been also integrated. All right. So let’s back to my slide. And I’m going to just to summarize what I’ve just showed you in terms of this new way of launching the component. So remember I said rendering is all fine now. So the way we pick now is kind of like a mixed approach. So when we implement that website, what happens is when you request a page and what AM returns to the browser is what we call a semantic HTML. And this is actually inspired by the Azure services. And you can see Azure services leverage this approach to achieve 100 Google Lighthouse goals. And then after you’ve done that, you start to introduce using the CSS and JavaScript to change in the layout. So what’s the benefit of doing that? So firstly, from the backend development perspective, I’m leveraging all the out of our school components. I’ve got good reusability because if I find out the data model, the content model didn’t change, I don’t bother creating new components. My component catalog would be very minimal. I’ve got minimal customization. I can focus on the integration part, right? Because apart from the component, we also spend some time to do a lot of integration. So I can free up my time and spend more time on the integration or the extension. But the benefit for the frontend dev is firstly, I’m being able to proceed to the remote AM to test my code. I can clearly check, easily check the performance of my code, my HTML I contributed. And also if I’m going to do the change, I don’t need to wait for a big approval or something. I can easily use this frontend pipeline to do this. And no doubt mentioned, because on day one, the content team starts to contribute the content. They don’t need to wait till the end of the cycle. So we believe when we talk to the customers with this approach, we will foresee, we will see a lot of improvements on these four aspects. So this is the last slide of my presentation. I now would like to have the three key takeaways from that. So you can launch your websites with minimal backend development experience. Now you leverage all the out of box components. You can debug your AM project without AM local SDK while the frontend module. And then lastly, you should be able to start creating a new component variation using the star system if the content model hasn’t changed. With that, thanks for that. This is the end of my presentation. So all to you, Hannah. Thank you so much, James, for your amazing session. That was some great content. James, we did receive a question in the chat, which I’ll read out to you. So the first question is what will be a decoupled architecture in AM? So when we say decoupled architecture, I like this is going to be my personal opinion. I still think AM will be the source of the truth of the content and your day to day works for interface for your content team. But when we talk about delivery, now you’ve got a lot of tools available now. Using this approach, you definitely decoupled the responsibility between your backend team and the frontend team. And frontend team can focus on the performance. Backend team can focus on the integration. And also, no doubt mentioned, you want to see that in the disaster news. The edge to resurface is how can we leverage the other authoring capabilities? So the way you see now is with the tools, you can see that universal editors, you can see the document based authoring. So from the end to end, if we take the content creation as our end goal, you can see the delivery is decoupled with the authoring, which is very different with what you usually do with a content management system. I hope this answers the question. Perfect. And the second question that we received was, hi, James, which archetype is being used here and what is the front module? Okay. That’s a good question. Actually, when we’re saying archetype, it’s actually the concept of when you initialize your main project. So it’s compliant with all the versions that you were seeing. But the difference is you usually see a UI frontend module being placed or created as part of the archetype. With this approach, we actually bring it in a separate repository. I think you’re still leaving the same one, but in terms of the deployment, we’re not leveraging the UI frontend module to do it. You still have the frontend project, but now this project has been deployed via the frontend pipeline. And then the only thing you need to change is on your page template. Rather than say, referring a CSS or JavaScript from UI apps or EDC client lips. Now let’s become a new reference of a theme. That theme’s pointing to a location in the CDN. If you’re using the AEM cloud services, it’s all out of box. If you want to mimic same way on the managed services or on-prem, it’s also possible because you can just place it somewhere else static, have the version number and then make your website refer to it. So that’s completely decoupled the component deployments and the development. Thanks, James. And the last question we received was, could we use TypeScript instead of JavaScript? Yes, you can use any language or any framework. Like I said, it’s pretty open because eventually what it does is we separate the responsibility. We let the AEM only return the semantic HTML. So that in that case, that doesn’t have any language restriction. In the frontend world, we’re not restricted to any framework. Using the web platform, the out of box or the JavaScript engine, that’s fine. You don’t use the framework. It’s also fine. Yeah. Thanks, James.