[DE] Agentic Engineering: Refactoring verstaubter Angular-Komponenten

Hi, hi, hi, hello, hello. Today I am here with my dear colleague, the Alexhammer, also known as LXT, and Alex will tell us how to modernize and refactor an existing codebase. Hi Alex. So, you have also prepared a few slides for this. If you like, you can share them right away, and then we can get started. With pleasure. So, yes, as I said, as you already mentioned, Anf, I want to talk about refactoring dusty Angular components today, and it says small at the bottom, with the help of AI, but I have to say, AI will take up a relatively large amount of space in this introduction, and yes, then let's just get started. Mhm. I will also put the documents, the slides, on this website lxt.dev, and exactly, this is what our agenda looks like for today. I would like to introduce myself briefly, go into what I have done in the last 25 years, and especially the last 5 months, where I then intensively started developing with, yes, with AI agents. And of course, always with an Angular focus. So, we will first look at the, yes, favorite tools at the moment. Um, right now, I would say, second half of May 2026. So, what is currently state-of-the-art, or what do I prefer to use? And then, it continues with a project setup, an Angular project setup with AI integrated, so with the tools, with the instructions that you need. So, not many, but the essential instructions are included, with the Angular Style Guide. We have included the official Angular Style Guide plus extended it again with further best practices that also come from my Best Practices Angular Workshe. And then it continues with the topic of refactoring. I would like to briefly demonstrate with a live demo what it can look like when you use these best practices together with a skill, perhaps, to refactor an Angular component. Then we will bring everything together. Mm. So, the group plan and exactly the goals are, so I don't want to explain how to use AI. Many others have already done that. But as I said, I want to briefly present which tools I currently prefer to use for AI development, how to set up the project with these tools, and then the topic of refactoring, or these clean Angular components, what they look like or don't look like. So, we will then have a demo example with an old Angular component that has, yes, organically grown, is very confusing, and we will then use that as an example for modernization and for tidying up. Mhm. Exactly. Um, just briefly about me first, so when I sit behind the computer, I prefer to do weather reports, as you can see here. And since the season is now over, I am really motivated to work with the topic of unicorns again in the form of workshops and, um, yes, small videos like these, and I also plan to write a few blog posts in the coming weeks. Exactly. I come from Alex. My company is called Angular Softry, and I have been working as a developer in Manfred's together with the Angular Architects for 25 years, and there are about eight-year cycles. First as a web developer, then as a WordPress developer, and then as an Angular developer and coach, and now I would say as an agentic Angular developer and also as a consultant in this area. And exactly, what I also wanted to tell you about the topic of history, I started working a lot with these AI tools, let's say, about 5 months ago at Christmas. And the first tool I started with, yes, was the AI plugin for Webstorm from ChatB itself. And then I would like to open something right away and show you briefly how I started working with AI. So, in principle, we are here in this NG AI setup workspace of mine, and then I can, for example, work with the Juni plugin. That means, this is the AI Assistant, and inside here I have Juni. I could also use other plugins. Do you know this at all, Manfred, or do you already have Juni? I haven't worked with it yet, but it looks like the other AI assistants too, right? Exactly. And you can then write directly what you need. Mhm. As with all assistants, as you say, it's pretty similar everywhere. I could, for example, say, what is this about? And what is quite practical is that you can choose the model. Yes, I started with Opus 45, then 46, and I quite liked using these cloud models at the beginning. Exactly. And then you would send it off like this, and if everything works, you get an answer. Um, yes, that was the first tool that I really used intensively, with which I started to really have that AI moment because it is simply quite practical and through the integration in the IDE you get very good results very quickly and can also implement features quickly or fix bugs, for example. Exactly. What, what, what does the AI tell us in summary? It's an Angular starter combining propinting, commit hooks, style, and AI system configuration. Exactly. So teams can hit the ground running with consistent high-quality Angular code development. Not bad. Um, let's maybe look over briefly. Um, to GitHub, this is, so to speak, this project here on GitHub that we just looked at. And it's exactly about what the AI correctly identified. An Angular workspace starter kit with all sorts of things in it. Exactly. But we'll maybe look in there again later. For now, just briefly, I became more and more interested in AI development or in AI engineering, as it might be called now, and then after about two months, I switched to VS Code. Yes, that was quite funny because I've actually been working with Webstorm for the last 10 years or longer, and somehow, this cloud plugin, which you surely know too, I liked a bit better, or I'm also going to, let's close the Readme again, otherwise one might think it's just opening something else. What is the project about? Exactly. And there I then started working with this Clodef code plugin. That was a bit better, or a bit more fun too, because you always get these funny notifications, and yes, what is a big advantage of using this Clode VS Code plugin? By the way, you also have the option to switch to the Clode Agent here. So, the same thing in green in the Chatbands IDE, but I somehow liked that better too, and yes, then from mid-February to, I would say, the end of March, maybe even the beginning of April, I mainly worked with it, and exactly, I wanted to mention the big advantage, you get, when you work with this Cloudt tool, you get subsidies, I always forget what to say in German, so the, so a tropic subsidized this here with a factor of about 20 to 30. Um, and that means for the 20 euros or for me it's the 17 euro subscription, 17 euros per month, you actually get 500 euros in credits. Subsidized, or that's the German word, subsidized. Thanks, when you're talking yourself, you can't quickly look up what it's called. Exactly. Subsidized. It's massively subsidized by Tropic. Um, and because of that, you naturally have here, for the same money, yes, many more tokens, much more output, and you get much further and can use AI much more than, for example, if you use the Juni plugin, because there you actually pay the actual costs. Wait a moment, um, that means, for example, I still have 11.61 euros in credits here, and, what can we do? Shall I write something, or better not, because, um, I'm in the wrong agent now, sorry, I still need to log in, but in principle, it goes directly into my budget. Mhm. And I pay with it, while here, yes, I would be heavily subsidized by Tropic if I used the Cloud plugin. And then, so that would be the second phase, and the third and current phase is actually that I have actually completely left the IDE. Um, and I will show the tools I am using now later. So, I don't use the other two tools at all anymore. Um, both of them, the two IDEs, the classic ones, I would say, but now I am mainly working with these so-called Super Apps. Okay. Um, that was about the history of how I got into the topic. Exactly. And now I would like to go back to my agenda. I have expanded it a bit in the meantime. So, we are basically done with the About Me and History parts. And next, I would like to briefly present these AI tools, say a bit about them. Um, there are now, so to speak, these Super Apps. Most people probably know Codex and also Cloud Code, but in principle, there are now four candidates for me that can make the race for the most used app in 2026. A bit of a bold prediction, perhaps, but there are these different providers, most people will know this. There is Open AI, they have Codex and GPT 5.5. So, you can read this horizontally. Then there is Tropic with these three apps. A bit of a special case. They have Chat, Cowork, and Code. Although they say Cowork is for knowledge workers, i.e., for people who are not software developers, and Code is then really for developers. With Codex, for example, or also the other two apps, it is completely mixed. So, they don't differentiate between developers and knowledge workers, but they have, so to speak, one app for all purposes. And what is the advantage of these Super Apps compared to the classic IDEs, the advantage is, in my opinion, that these manufacturers or you can also call them Frontier Labs, build them themselves, they are actually fully integrated with AI and therefore function a bit better than the classic ones. Why do I find it difficult to say this? Simply from practical use, I have noticed that they can simply call the tools better, be it Grab or the Angular CLI, up to really taking control of the PC or, in my case, Mac. So, this tool calling, but also the context via MCPs, but also, for example, when it comes to reading the instructions in the project, using the skills in the project, then these tools are simply, these Super Apps are, after all, a bit better, function better, and can simply do much more than the classic IDEs and will therefore, I believe, replace the IDEs more. Um, there is always a lot talked about the models. Which model is the best? In my opinion, not that important. Model, the best is, they are all pretty good. So, I have written down the latest ones from the different manufacturers again. So, again, Open AI with GPT 5.5. In my opinion, currently the best all-rounder. That's why I wrote here, Fullstack Engineer, because with that you can actually cover the full stack from planning, conceptualizing, to implementing and testing. What I like to use Cloud Code or Anthropic models for is always when it comes to architecture, yes, so whenever there is a large feature or work package, or a new app, for example, or a design to create, then I like to use this Cloud Code app, also tried out the Cloud Design a bit, although that is only a web app. That bothers me a bit. I hope they will integrate it into this Super App as well. Probably when they do that. Yes, so it also depends a bit on what you are currently doing, which tool I prefer to use. There is also Google's Antigravity, you probably noticed, it was released yesterday in version 2.0. So, they have completely revised it again, and look, big surprise, Antigravity, this is what it looks like now. It looks exactly the same as Codex. And I don't know if you've seen it, but in the presentation of the tool, a Codex folder appeared, or rather in the video where they presented it. So, you can see they were heavily inspired by Codex, and Codex and Cloud Code, I would say, they are battling for the best app at the moment, and Google is now trying to catch up and play along when it comes to, yes, the best app with which you can do everything in the future. And then I have included a fourth player here, and that is Cser. Curser was originally the pioneer when it came to genetic coding. They were the first to have this agent tab, and as you probably know, they have now been acquired by XRI or by Elon Musk, and he certainly didn't do it for no reason, but he didn't have this Super App in his portfolio at Ex yet, and that's why they have now brought it in, bought it, so that he can also play at the top with the other three. Yes, that's how it is. Um, I would say the situation at the moment, there are these leaders, I have written down the links to them on the right, and you can see at Google, there is no name there. At Google, you can tell, they are a bit unguided, or that's perhaps still a positive formulation. Could also be chaotic. Um, yes, so there is no clear line, and also a bit of irritation because they have now stopped the Geminis here, for example, with June 18th, it will be abolished or shut down for all subscription users, but in the end, everything looks pretty similar. And if anyone were to ask me which of these apps is the best, then I couldn't answer that at all. I would say you can work great with all four. I personally prefer to work with Codex and Code, simply because Antigravity was not so good until recently, but I suspect they have now caught up with the new 20 update, and yes, there are also the models. With the models, it's also like JPT GPD 5.5 and Opus 4.7 were the best. Can, if anyone is interested. Model comparison is not my specialty, I have to say, but if you are interested, then I recommend Artificial Analysis.ai, and there you can see how well the different models perform. If, for example, you look at the Coding Agent Index here, then you see, yes, I would say break-even between Opus 47 and GPD 5.5. These two are clearly still in the lead, and I estimate that Gemini will catch up and join them. Exactly. What else do we have? Token usage, for example, is a topic. Cloud Code consumes a lot of tokens. So, in principle, the more tokens, the more usage you consume, the more you have to pay, for example, as an enterprise. We as with the subscription models, when you subscribe as a private user to these providers, then you are subsidized 20, 30, 40 times. So, you are kind of hooked or lured so that you then go to the company and say, hey, I want to use the model. And the company has to pay full price for it. That's the business model for providers at the moment. So, for us as private users, it's relatively cheap, for companies it's already relatively expensive. In my opinion, it's currently all about how much you get for your money. And there, JPG 55 with Codex is currently, yes, the best. Exactly. Um, I don't want to waste too much time with these statistics. You can look at them. Of course, it will change again, if someone watches the video in a month, it will probably look completely different again. But essentially, yes, there are these three or four providers, so depending on whether you want to include XRI and Curser in these frontals. And with that, you simply get the best results at the moment, if you don't work with this SuperApp, but for example, with VS Code and a plugin, it doesn't work as well anymore. If you work with a, unfortunately I have to say, with a European LM, then it simply doesn't work as well. Yes, it works, you can work with it, but if you think like me, or are like me, then you always want to work with the best solution and with the best code quality, with the best result, and in my opinion, there is no way around these providers at the moment. Yes, with all the, of course, justified data protection concerns that one might have. Yes, that was it for the tools. Do you have any more questions, Anf? No, no, I'm already excited to see how it continues, how we use these tools to achieve the goal. Exactly. Okay, then, then we come to part 3. Gen, I forgot my slides a bit. Um, we looked at the tools. Exactly. And now it's about how to make guardrails for the tools. And there I want to show my project. Let's jump back into the IDE, the good IDE. Exactly. This project NGI Setup, which you can find on GitHub at the link I already showed, simply github.com lxt, and then under repositories, you have it up here, Setup, and my intention was, I did this on short notice, I think the day before yesterday, I set up the project. Simply to explain step by step how to set up such a project. That means, you can do this from scratch, so a new project, or you can simply do a comparison with your own Angular project in a private or company context and see how we did it. Yes, you know all this, Manfred. I have briefly mentioned the Prettier here, then Husky, just like in your new codebase, that the whole thing is then linted and prettified with every commit. So, these guardrails are included here. Then I extended the lint configuration, and specifically with a best practice rule set for lint rules. Why is this important? The better or stricter the lint rules and the agent instructions are, the better the output from the AI, the better the quality, because the code that the AI produces is automatically always linted by the AI itself. So, you don't have to do anything. It does it all itself, and then it immediately recognizes, okay, with the code that I added, I don't know, for example, I also forgot the Change Shad Strategy and Push, and the lint rules say that I should always use the Change Dedction Strategy and Push, now it's called 22, I think it will be released in two weeks, it will be the Default Change Dedection and I should always use it. I'll take a quick look here, for example, in the Lint Config. Exactly, line 36, it says that, for example. Oh, is my screenshot dead now? Exactly, it just died. Yes. Okay, let's see. Is it back? No. Yes, there it is again. Ah, there it is. Yes, perfect. Cool. Yes, let me know if that happens again. I just noticed it myself, luckily. Okay. Um, exactly. Have a few more modern rules in there, yes, and also a lot of code quality rules. It doesn't have to be ideal for every team or every Angular developer. It's just a suggestion from me with perhaps a few too many rules. If you add it for the first time to an existing project, you will definitely get some warnings and errors, but it would be my best practice, the recommended one. Exactly. Also with the Accessibility Tablet from Angolain included, of course, and yes, a few rules that make it easier to work cleanly, let's say, and especially also easier for the AI. So, if you have the rules in place and the AI adheres to them, then those are already good guardrails, I would say. Let's go back to the Readme briefly. Yes, what else is there? There is also an, I call it an Angular Coding Style Guide in the Style Guide folder, where it is then really recorded in detail how Angular should look, so, in our opinion, and exactly, there are just many things mentioned again that are important. Such as, this comes from the original Angular V20 Style, also go protected for symbols that should be accessible in the component view template user only by default unless property needs to be reassigned. These are, for example, two rules that come directly from the Angular Death Style Gate, scroll all the way down. Exactly. Read only for properties should not change and use protected class members only used by components template. And I have, so to speak, built upon these rules that are stated there and tried to improve and refine the whole thing. For example, for RXGS, prefer using the Acing pipe, or if you subscribe yourself in the component, then it's best to use the Take until Destroyed operator. Exactly. We don't have time to go through all of this in detail now, but whoever wants to can take a detailed look at it. As I said, feel free to copy it, adapt it to your own needs. Yes, I like to work with strict guardrails, it starts with Pretty, it continues with Lint and a bit of interven style, and as the AI said, somewhere it said it. Exactly. It's essentially a golden path Angular starter. Exactly. So, it's of course an empty project without code, but you have all these guardrails for the AI already included. So, on the one hand, these best practices, linting and style here. And what we haven't discussed yet, the second part, we also have the agent instructions in there. Agent instructions are in this agent MD. Exactly. And, um, there we have the whole thing again for the tools in a compact MD format. So, not divided into separate files as in the style guide, but here written down as compactly as possible. This exists once as Agents MT for most tools, and then it also exists in the Cloud folder as Cloud MT. Yes, and specifically in the variant where you simply link the Agents MP, because from what I know, Cloud does not find it yet, does not use it yet, and therefore you have to say, yes, this file is a primary instruction. Exactly. Exactly. So that it's from the Agance MD Cloud. Exactly. Exactly. Cloud doesn't find it on its own. All other tools that we have shown here can handle the standard agent MT format. Something similar also exists with the skills, but I would like to mention them in more detail later. So, skills can also be in the Cloud folder for Cloud, or in the root folder or .agents folder, you can also put them in there, for example. The skills then in there. Oops, that was not a Fer. Sorry, I wanted to make a F. There are also these variants. Yes. Um, but as I said, we'll come to the skills later. Cloud is a bit of a princess when it comes to all of this. So, it always wants, or it always wants you to specify everything extra. The other tools can handle the standard. But as I said, Cloud is pretty cool, especially if you want to do architecture, something like we have, or for example, design. Okay. Um, I think we're done with that now. Yes, exactly. On the topic of secrets, generally, most tools, correctly also in the Gitignore. If you, for example, have a secret with credentials, you write it in the Gitignore. Yes. No guarantee that the tool won't somehow leak it anyway. That's a bit of a risk that you always have to weigh, of course. Or you write them in a dot file and preferably don't put it in the folder where the AI tools are working. So, depending on how much security you need. I, for example, need this Pun AI Ignore for Juni. That's another copy of the Gitgnore, but most tools actually respect the Gitgnore. That's, so to speak, the new standard for the tools. Okay. Um, then I think we are also done with that point, and exactly, we have shown. Yes. Um, so, what is, what is important in my opinion when setting up an Angular project? You should definitely keep Angular up to date. I haven't mentioned that yet, simply for security reasons and so that you get the latest features. And what is also very important is to incorporate the migrations. Exactly. We haven't discussed the Angular migrations, but there are, for example, standalone migrations, control from migration. Most people will have heard of them or know them well. Especially the signal input and output migration is something that sometimes doesn't work quite right with the script, and you can also get great help from AI for that, but I don't think I need to go into that separately. Exactly. Follow the coding style guide, also very important, and with these ES Lint rules, both together create the guardrails with the AI, and also good quality in the output, it's easier, I would say. Okay, exactly. Then it's already the next topic, part 4, to talk about the skills. Um, there are various, so there is a huge market, a huge ecosystem of skills now. I myself use very, very few skills, but I would like to mention a few, and I have a few in here, and I also want to work with my two favorite skills at the moment in the demo or in the fifth part. Both are from Mat Bcock, and, yes. Yes, let's take a quick look in the Skills folder. So, I've put it in here. So, for an overview, let me say right away, there are, I've made about seven, or seven Angular-specific skills and seven general skills, and, yes, I'll start with a favorite skill right away. So, there's this Grill Me and Grill with Dogs. That is, the Grill Me went quite viral about, I don't know, two months ago or whenever that was, and the point is that when you use it, you can look inside, what does a skill look like, what is a skill at all, maybe I should start here. A skill is, so to speak, a mini instruction for the AI, a prepared prompt, a reusable prompt with which you try to give the AI a certain skill, so a certain ability. Yes, and that's a good example, because there are just three sentences in this skill, and the first sentence is, so to speak, interview me, relevant aspect of this plan, understanding, that's actually the most important sentence. So, the AI should ask questions until this shared understanding is reached, and many people might know this. You write a prompt, and then you write below it, ask me for clarification if needed. I used to do that extremely often, and yes, this skill, it's like, it's the whole thing exaggerated to the maximum. So, not ask me for clarification if needed, so ask me questions if you're not completely sure, but ask me questions until you are completely sure that you know what I mean. And why do I like to use this skill? Actually, you get the best results with AI when the prompt is perfectly specified, when you really think a lot about it. Many people also use these voice-to-text tools nowadays, such as Whisperflow, so that they can write really long and detailed prompts. And I, for example, am always too lazy. Yes, so I prefer to have the prompt work after one or two sentences, and that's why I quite like to use these skills so that the prompt is developed interactively, and that also works. Let's do another example. Um, what else is in there? We have a Handoff skill, with which you can, so to speak, create a handoff, a handover document from the current commit history, and we also have, for example, this Improve Codebase Architecture, which is a bit of an architecture improvement, a refactoring skill. That's why I have it in there, because it's interesting for our topic here, refactoring. And I also have, as a last one, Write the Skill. With that, you can actually, the idea of skills is that they are all just a kind of template that every developer can adapt for their own custom needs. The same applies, by the way, to these Agents MD. Yes, so the Agents MD, that's something that changes again, where new things are constantly added, things are written in, things are removed again. So, it's always a permanent work in progress, and if you have a problem with AI multiple times, a similar problem that keeps occurring, for example, tests are being executed, or tests are not being executed. Then, the second or third time you tell the AI this, it's a good idea to simply put that into these instructions so that you don't have to give the same feedback over and over again. Yes, with AI, it's like this, it's not a colleague who learns from day to day, who works with us, but it's, in principle, with every new prompt, it always starts from scratch. So, without having learned significantly, it always starts from scratch with every prompt. And that's why it's, um, so that

One builds up a wealth of experience for their own workflow, and that's what these Agent Instructions and Skills are for. Yes, both really need to be customized, adapted to one's own needs, and all of this, both the Agents themselves and all the skills within them, are actually a start, a starting point, and this WR Skill also helps if you want to create a new skill, for example. Yes, exactly. Um, do you have any more questions about the answer? But what I also noticed, are the skills written yourself or copied in, or do you use a manager to install the skills? They are um, well, there are three sources, maybe I should just thank you for asking me, I forgot to mention that. So these seven general skills come from um, from Mat Pocock, who calls himself AI Hero. And then we have um two more skills from the Angular from the Angular team and five skills from Angular GS. Um, exactly. So from the Angular team comes this Angular Developer with a bunch of references in it. Yes, so how do you make the career into a good Angular developer in principle with the skill and then we have Angular New App. Uh, both of those come from the team. Uh, I've minimally adapted them. So um, what did I change? I've, of course, incorporated my style into these skills. Yes, so for example, when creating upskilling skills in is repository follow Style Guide MT, so this Style Guide that I have. That's how you have to imagine it. You find a skill somewhere online. So either you find a skill online that you need, then you copy it in. Copy-paste, as you said. Exactly. Um, and start customizing it perhaps. So I would recommend customizing it. You can adapt it to your own needs, to your own coding guidelines and so on. Or you skip the search for the skill and make it yourself right away. Yes, so you make a skill yourself and then you can use this Skill Creator Skill again, so to speak. Yes, or you can also do without it and just start without a skill with the skill. Exactly. So, as I said, these different sources exist here. Yes. And the idea is simply to take it all as inspiration, as a starting point, and to see what's possible. To get a few ideas, to adapt them to your own needs, and ideally, you'll then get involved with the idea or ideas and then start creating your own skills. Exactly. Okay, then I would say we're done with the topic of skills for now. That means we're already making great progress. We've looked at how to set up an Angular AI project. We've looked at how to bring skills into the project. So just into the Ah yes, by the way, you can of course, these skills, you know this from VS Code, for example. There are VS Code Project Settings and User Settings, and you can also copy these skills into the project here, for example, with the Git repository to share with colleagues, or you can also save these skills in the user directory. So there's the Cloud User Directory, the Codex User Directory, the Agents User Directory. So you have different options where you can store these skills. Either for all projects you do, then they go into the User Directory, or project-specific, then they go into the project. Okay. And in the next step, I want to try out exactly two of these skills, and that's using this dusty component, or this legacy component, I would say, which was really very, very rudimentary and very, very dirty. And there we will look at how to use a skill. And at the same time, I also want to show how I came to the conclusion that Codex and Code, for example, are the best tools for me, by simply doing the same prompt with several of these tools. But before we do that, the final live demo, let's briefly look at the project in code. I'll go back to my IDE. Yes, I would now have to have the other one, there is a second project, I call it NGI Refactoring. You can also find it on Github with me, just instead of setup, refactoring. Yes, and this is now in principle the NG AII setup plus actually already a source, and that's a difference to the other project. The other project is a pure Angular CLI project. Here I have used Nx again. So you can recognize that by the apps and libs folders here. So, the whole thing works with Nx exactly the same way. Again, we have these AI tools in there, again we have the skills in there, again we have the style guide in there, everything we've already discussed. And in here, under Angular Components, I now have this demo legacy component, which is a wrapper component AG Grid. So, you have a component wrapper around the AG Grid table, and what we can see here, actually, you should start from the top when you look at the whole thing. Um, exactly, it starts right away. We have a lot of inputs. Imports, I mean. We have Legacy Decorator Imports, Decorator Outputs, Decorator Child or Your Children are also all marked here by our linting rules, and then we have, for example, an unused field, an unused field should not be there either. And then we have, for example, for the classic Angular lifecycle hooks like Ang and Angit, where a lot of things happen, where you don't know exactly what's happening in there, why it's happening, and at what time it's happening. For example, at first glance, you might think there are two lifecycle hooks used, but we also have changes up there. If you scroll down a bit, you can see, yes, indeed, there is also Onchanges, and yes, that's just classically organically grown with good intentions at some point. But if I, for example, as an external developer or as a new developer, come into the team, I'll throw my hands up in the air and think, what the hell is going on here? Yes, it's just all very confusing. There are many methods that do things. There are methods that are large, and if you scroll through them, you see there's no end. It just doesn't stop. Do you know that, Manfred, when you look at large components at customers? Exactly. So, it takes a relatively long time to get into it and understand what the component does. That's a, I would say, bad example of an unorganized, too large, too complex Angular component that urgently needs refactoring. So, that's what I mean by refactoring in general, when we have dusty, unmaintained, large, difficult-to-understand components in our codebase. So, whenever something is not completely clear and understandable at first glance, then in my opinion, it needs to be refactored sooner or later. So. Exactly. The AI can help us wonderfully with this now, actually for a few months, but it's also getting better and better and it's really fun and at the end of the day, it's more organized, more understandable, more maintainable, you can add new features quickly, and overall, it's just more fun to work with, and then end this component. So, that's the starting point based on which we want to see how this works. Exactly. Alright, then, let's go over it again. These are now our candidates, who are playing along here, where we'll see where the beam comes out. Yes, okay. Then I would say, let's start with our demo prompt. Um, okay. Now, briefly consider using Whisper Flow, but for typing, it's just better to do it normally, and then I'll say Refactor the table component and then I'll say, do a planning phase. It's always good to start with either a good purpose or if you don't know exactly what you want, start with a planning phase. So I'll say, please create a plan, and then I'll also say, using m, this is the first of these skills. Then I'll copy it, of course, so that I don't have to type it again. And now I would send it, so to speak. Yes, now we're doing this comparison. Can we go into Plan Mode? But it should actually know. Are you working on different branches, or how do you ensure that you don't get in each other's way? Exactly, exactly. You would have to think about that, but we have the planning mode, so to speak, and that means I'll assume that they won't be so disobedient and start working right away, and that's why I'm on the same branch. But if you were actually doing multiple tasks side by side, you would need a solution for that, of course. Yes, so you can use these Git Workflows. I think that's the state of the art at the moment when you do multiple tasks in parallel. Although I have to say, I don't really like that. Yes, I like working on one task, parallelizing it often overwhelms me, to be honest. Although it will certainly become more important in the future. But I would say it's not in the scope of the topic of how to orchestrate parallel agents. Exactly, that will be covered in the workshop, but not here in this short input. Um, exactly. I just want to quickly trigger the other tools a bit. So. Exactly. So, you can see that it works exactly the same everywhere. If you don't know the tools, you could never say which one is Codex, which one is Cloud, which one is Antigravity. Because everything looks exactly the same. Yes, I've never used Cursor at all. Um, so I have to admit, you gain experience with it, but I assume it's exactly the same. I also don't have a subscription with Cursor, so it might not be as good because we don't get the best models there. It's a bit of an unfair comparison, of course. But as I said, just to show that the tool works the same way in principle. Yes, we can't compare the result of Cursor. Um, what does it want from me, something to update? Okay. Um, exactly. Okay. Um, there I probably would have had to go to m load all somewhere. Okay. And above, above we are already, the first question is coming. So, we'll do two things again. Recap. We compare the tools, at first glance they all look the same, everything works similarly, and secondly, in parallel, we'll try this Crelm script right away, and with the Prelm script, we said it asks you questions until it's sure or until the AI is sure that it knows what we want. And that's exactly where we are now. Question one: Should refactor be public API compatible, meaning existing components keep the same input names? And my recommended answer is yes. Yes, of course. We want to keep the API the same externally. So that was the first question from Codex. To the right, the first question from Crowd Code, and the first question was: What's driving this refactor? What pain are you trying to solve? Um, I have to honestly say, I like it a bit better, because while on the left we're immediately going into a technical detail and to a second question, okay, should we modernize or not, on the right, where it asks me, do you want to modernize Angular first? Yes. Um, do you just want to modernize? M, do you want to do Structural Decomposition, i.e., break down this huge component, but keep the old decorators, or do you want to change the behavior or something else? Yes, personally, I would say, for example, I just want to modernize, but you can already see that the result is completely different. It depends now not on the skill and not on the codebase, but it really depends on the model in the background, on the left we use GPT 3.5, and on the other hand, on this Harx Harness, so on the one hand Codex and on the other hand Cloud Code. So you have a completely different mix, even though you have the same prompt. And then on the bottom left, for example, with Antigravity, we see a bit of a UI for the first time. It's now giving me, for example, really options to choose from, which of these three answers I want to give. It's cool by the way, because it looks at, this is the first one that comes with my Seven Step Blueprint from the Readme. The other two didn't find it at all. Pretty cool. You might be wondering, what is this Seven Step Blueprint? I've written it here, for example, in this Ang Refactor NG AI Refactor. Um, exactly, the seven-step approach, that's also something that will be part of this workshop. So in this workshop, we'll cover many other topics, like Wipe Coding, UX Prototypes, Angular Prototypes, but also this refactoring with AI, and I've created a seven-step plan, a seven-step approach on how to deal with legacy codebases. Exactly. And it found that. I like that. And it seems to be following this seven-step plan. So, yes, please follow the seven-step plan. Exactly. And then on the right, we have the variant from Cursor. What is the primary goal of this refactor? Exactly. And then again, a) modern Angular, b) decompose the God Component. God sounds a bit too positive. Exactly. Recommendation B and A together. Yes, I like that. A B C. So you see, even though we have exactly the same starting situation and exactly the same prompt with the same skill, four completely different experiences. Yes, what is the best tool? You can't really say that, but it depends on what you want to do. It depends on how you like to work. It's a bit of a matter of taste. Yes, for me, I must also say, Antigravity 2.0, which came out yesterday, I can't really assess it with experience yet. The first impression is good. Why is it good? Because it looks exactly like Codex, and I currently prefer using Codex. So it can score points with me if it copies Codex. And secondly, what I really liked is that it actually read this Readme and is actually following my seven-step plan, even though I didn't tell it to. So that was really a cool experience. What do you say, Manfred? What do you like best? I've worked most with Cloud and also with HTZ AI recently. Okay, right side. Okay, exactly. I understand. Yes. Um, maybe you should try Antigravity too, after we've relaunched it. Mhm. Okay. Yes, I want to do a second topic. And that's the same prompt. So, actually, Antigravity cheated a bit because it already used the docs, and that was actually the second skill I wanted to show. So, there's another variant that's even cooler than Grillm, and that's Grill with Dogs. That's like Grillm, but it also uses the coding style. So in our case, of course, my coding style that I have in the project. This means that anything that has already been answered there will no longer be asked. Yes, this means that the AI or the LM fetches this coding style guide into the context, checks if the questions have already been answered there before asking us. So with this, you can answer many questions in advance, so to speak, and then you get an even better output if you use this skill. Let's hope so. Uh, so in this topic, I mean, otherwise I've had really very good experiences with this skill. With copy and paste, it doesn't work so well with this skill yet. I found out. Skill grills the exact same prompt, but now with this style referenced. Oops. Um, okay. Exactly. Let's see what Antigravity does now. Ah, okay. It doesn't find the skill. That's interesting. Fascinating. Okay, it has already brought these other skills with it, including Grillmy. Interesting, interesting, interesting. Okay, let's try it here. Yes, I would probably have to tell it where to find my local skills. Maybe they also need to be copied into the Gemini folder, similar to how it's done with Cloud. But in principle, exactly, then let's look at the two of them. Okay, so now we're getting a bit further than with the previous prompt, because the working plan, I remember, the draft plan, it wasn't as well-developed as this. Yes. Yes, so the whole thing is already formulated a bit better, or on the right we still have to allow it. Exactly. Pass permission is always good for a demo. Yes. Um, in principle, exactly, what then more or less. What would be the next steps? You answer your healing tool, no matter which of the four, I would say all four work really well, and can now use this coding guidelines skill to work on a plan with the tool together, and then, when you're happy with the plan or have convinced the AI that all ambiguities have been cleared up, then you simply start letting the AI work through this plan. And, um, exactly, what I always do then. I'm a fan of Human in the Loop. So for me, the whole thing is then reviewed, and only when I give the okay, is it committed. So I never let my tools commit themselves or create PRs themselves. There are others who do that exclusively, who no longer do a review, but I'm actually only active in the enterprise sector. Exactly. Uh, yes, the niche of Angular, I would say, and exactly. Cool. Um, and I'm a big fan of human review, because I've experienced so often that sloppiness comes out, very often experienced that the AI implements things too complex again, and thus builds up technical debt again. Into the code, into the projects, which then actually have to be refactored again. Yes, and that's why I usually check really all the code with my Git tools, for example, with Fork or Tower or also Source Tree. Let's go one step further, and exactly, that's my workflow. I either write the spec or I speak it in with Whisper Flow or something similar. Then, if I'm not sure yet what the spec looks like, I use one of these skills quite gladly to formulate the spec a bit better. Then, when we're done with this interview or with the spec, we create a plan, and if the plan is okay, then we let it be implemented. So you can say, in principle, it's usually a two or three-step workflow. So either you start, you just write the spec in, for example, the ticket description, and then let the planner create the plan and get started. Or you do this intermediate step first, work on the spec, then work on the plan, and then implement. This leads to the best results. Yes, exactly. And when you are of the opinion that the AI knows enough, then you can say, for example, stop asking, implement. Let's see if it does it. Um, it's of course far too little, actually the interview. Then we would want to answer ten more questions or so, and then let it work, and then at the end I like to look at it with the Git tool of choice, what came out. Mhm. Okay. Um, then we're actually exactly, I mentioned the blueprint. So, and I like to do it like this with these steps: first analyze, how does the code look, how does the component look, then declutter, throw away things that are no longer needed, then rewrite to modern Angular, then replace with typing if necessary, then the actual refactoring, and finally the review, and everything works as before. We've also briefly discussed the seven-step plan. Yes, okay, then I'm actually done, Manfred. Ahaing. Very good. Shall we talk a bit more about your workshop, what awaits us there? Yes, exactly. Gladly, gladly. So at I'll bring up the website. Yes. I have to stop now. Moment. So, here we are. And that's ORF. We don't want that. We want the website, we do want that. F. Yes, in principle, but not at this moment. Exactly. Agent Engineering, that's me. Supported workflow, and then we have the agenda. Can you explain a bit about these four parts, what awaits us there? Exactly. So the four parts are made up of Part 1, where we'll work on the setup together again. Mhm. So the guardrails, which we briefly looked at together today, will be made a bit more detailed. So the first half-day, and the second half-day is then engineering in general. How do you work with these tools? So again, the basics, prompting, writing specs, writing plans, then the workflow, as I've shown it now, of course, also the topic you asked about, how to orchestrate parallel agents, how to execute multiple tasks simultaneously, for example, or work with Git workflows. Exactly. So, the fundamental craft of working, and then in the third half-day, it's a bit, yes, intended as a catch-up. Wipe Coding, maybe many people have or say, I'm not interested in it, because everyone can do it, they don't even have to be developers. But in principle, I've noticed that companies find it very interesting. Companies need it because they say, yes, I want to develop something as a boss, for example, or I want to as a designer, that also happens quite often, that designers immediately create HTML CSS prototypes, no longer work with Figma or whatever, maybe still with Figma, but also implement these technical prototypes. Maybe there's an Angular Component Library, an Angular Design System that you work with. Why not, as a designer, also implement prototypes with this design system, for example? Um, it might not be at the top of the agenda for senior developers, this coding, but I've noticed that companies would like to use it, and how to provide a good solution so that everyone in the company can use it well. And then, of course, it's about how to do it right, from the further course or also in the further course from the third half-day to the fourth half-day, it's actually about how to do it right, so how not to wipe code with a prompt app, but how to really build and extend production enterprise apps with AI agents, which of course builds on the other three half-days, because we need these guardrails. Um, as quality assurance. We also need new skills from the developers, so the developers who, like me, have been web developers for 25 years, still need to refresh their knowledge, so to speak, and simply learn how to work with these tools. Especially for me, for example, the break from going out of the IDE into these super apps was hard. I resisted it myself for a long time because I liked working with the IDE, yes, for the last 25 years in principle. And there, I also want to show exactly how to manage this big change or, yes, this big change in habit well. And of course, the whole thing will be rounded off with tools. I've mentioned Whisper Flow two or three times. Um, I've shown Excali Draw, the tools that you can also use well, how to round off the whole thing. Yes, so not just these coding or AI tools, but also additional tools that help you with inputting prompts. Super. Yes, and for those who find this exciting, just go to the website and book your ticket for the next session. Exactly. We have a workshop planned in 5 weeks, and then another one in English shortly after. Yes, exactly. Super. Yes, thank you very much, Alex, for all these insights. Do you have anything else you'd like to share before we officially close today? Yes, I'd like to point out again that you should follow our blog in the coming weeks and months. Something is coming, yes, because a lot will come from you and a bit from me. Mhm. And I think we'll bring out some exciting things together, and yes, definitely stay tuned. Things are just moving fast right now, and yes, it's an exciting year, I think. Everything is going very fast. I'm excited about Gemini 3.5 Pro. We'll also be releasing it soon. Maybe everything will change again. We'll see. So, in any case, a lot will happen this year. Super, perfect. Yes, thank you very much again, and yes, we'll see each other at another event. See you soon and take care. Have fun with AI. Sure.