Engineering Agentic UI: Standards, Safety, and the Future of Angular

00:00:10: Hello, I'm your host Michael Doughton and here with me today is Manfred Steyer a well-known expert in Angular.

00:00:17: Manfred thank you so much for joining me

00:00:19: today.

00:00:20: Yeah thanks for having me.

00:00:22: It's always good to see you.

00:00:23: we've met i don't even know years ago at various different conferences.

00:00:28: um So we've known each other over the years.

00:00:30: but can you tell me what you've been working on recently?

00:00:34: yeah...so In general I am helping companies with Angular for large-scale enterprise applications.

00:00:42: And of course, recently a lot of those companies are thinking how to use AI for their products?

00:00:50: To improve the user experience and streamline processes of users.

00:00:58: What I'm currently doing a lot is helping customers with taking those possibilities, large language model give us and put it into their applications.

00:01:11: As mainly focused on Angular this will also influence the front end quite a lot.

00:01:18: so some people call these a genetic UI.

00:01:21: So it's less about using LLMs for development.

00:01:25: Of course, this is always part of the game but in my case It's especially using llms In your application.

00:01:33: nice I think that's an important distinction when we have these conversations as to how we're approaching us.

00:01:39: so When you talk about a gentek UI what are some examples?

00:01:45: You can give on how that might work.

00:01:47: Yeah, there are several possibilities and I really like to look at early adopters, like Salesforce who have been in this business for quite a time.

00:02:01: In general we can distinguish between the process that is autonomous So they are the entire agentic process runs in that back end and then suddenly it shows you some results like well, It would be a good idea to call this customer and discuss this and that opportunity with them.

00:02:22: This is one possibility when it comes more to the frontend than quite often its conversational And there people first of all think about chats.

00:02:36: somehow don't like chats anymore because there is this wall of text, you know?

00:02:41: And no one wants to see a wall of texts.

00:02:44: However, that's not the only possibility.

00:02:47: when it comes to conversational UIs Of course they are good reasons why sometimes we need a wall-of-text.

00:02:54: Think about customer support.

00:02:56: The customers have questions and want them to be settled.

00:03:00: They just need a short textual answer.

00:03:04: But besides this, an agentic UI can also display components on demand that help you to understand the response of the model or a model can invoke tools.

00:03:19: To get more context about the current user looking into what they use it did recently which products have purchased and licensed.

00:03:31: This is one possibility, chats and a bit more.

00:03:35: However it goes far beyond this.

00:03:38: What I really like currently Is what i'm calling co-creation Where your conversation It's only the starting point but not the result.

00:03:50: Your wall of text is not the result.

00:03:52: The result isn't in the main working area, like perhaps a marketing plan or perhaps work flow and you see there.

00:04:03: modify it by clicking here and there.

00:04:07: But you can also tell the system via some sentences, please now modify it here in their which is quite often easier than just kicking around in such a deep data structure.

00:04:19: this somehow visualized And perhaps another possibility Perhaps do more.

00:04:28: One of them is natural language queries or natural language comments.

00:04:35: We see this in products like SAP, but also other products for instance where you just ask a question and get the diagram And this can also be extended to something like a dashboard.

00:04:51: I have several customers who worked on very dynamic dashboard where the user describes what they now need, and last but not least information extraction.

00:05:03: you know uploading an invoice.

00:05:07: then their system starts understanding what is in voice about processing it checking whether the invoice is justified.

00:05:19: And if it's justified, finding out when needs to be paid and scheduling everything also in their accounting?

00:05:26: Nice!

00:05:28: So what would some implementation techniques make this dynamic UI work?

00:05:34: because you're really talking about both making UIs easier for people to interact with but also very, very personalized to exactly what they're looking for right at this moment.

00:05:50: So one of the techniques that sounds really hard to implement?

00:05:53: Yeah so in the back end you need some kind.

00:05:58: let's call it a genetic framework or agent framework.

00:06:02: there are several possibilities like Microsoft Agent Framework or Google Agent Development Kit Spring AI, of course Lung Graph, Lunge Chain stuff like this.

00:06:18: However in the front end we should not depend on these.

00:06:23: In the front-end it really shouldn't matter what you are using at your backhand.

00:06:28: We don't want to couple ourselves with a technology that is more flexible and of course do an LLM.

00:06:41: But if we loosely couple to the agendic framework, we also loosely coupled everything behind it which is the LLm.

00:06:49: so what I'm using a lot are standards like HUI which defines messages that are exchanged between backhand and front-end, messages that tell the front end whats going on there in the backend with agent Like hey, I'm thinking now a bit or no.

00:07:09: I am looking up your license products.

00:07:12: Please give me a second.

00:07:14: Now i'm looking at further possibilities perhaps better licenses and compare it And then I tell you know?

00:07:21: I have an information for you here some text and Here You Have A Component With The Comparison Of All the Possible Licenses That Might Be Interesting For You.

00:07:32: And yeah, for this we need a protocol and the protocol here is eGUI.

00:07:38: when it comes to communication that's loosely coupled.

00:07:43: Okay!

00:07:44: So what is the difference between the protocol in the framework?

00:07:52: Yeah so the framework really sits on the back end anything.

00:07:58: And also the framework already will expose some messages doing this, doing that.

00:08:04: but those messages are always of course framework dependent.

00:08:07: so what you usually do is converting these messages to an official standard which is HUI and your frontend can consume it without needing about a backend.

00:08:23: And those messages not only tell you what's going on, but they can also tell you now please.

00:08:28: On the front end do this!

00:08:30: Please change our plan and diagram or whatever our license proposal is in that way.

00:08:42: It also describes how we can convert and first and foremost transfer a blob, like an image or some voice recording.

00:08:55: And it describes how to interrupt a process because perhaps in the middle of the process we need some further data from the user.

00:09:07: So for people like me who spend a lot of time at UX space and working with accessibility.

00:09:13: one of the concerns that I've had Agenda UI is that it seems to be running arbitrary code.

00:09:24: There's no standards or controls over what necessarily displayed for the user, how does a protocol like ATUI get around?

00:09:35: That's an important question because at end of day model is non-deterministic so its powerful but can also heavily screw up And that's why we usually combine this non-deterministic power with some kind of harness, with deterministic checks.

00:09:56: This is where engineering comes back so it's not all about prompting and also shows us as engineers are still needed to be responsible for implementing these harnesses the model is requesting, that it's checking whether their current user is even allowed to trigger this tool.

00:10:23: Because a traditional customer usually not allow us find out about licenses from another customers so we need to check these.

00:10:34: We also needed to check if they are there or all data provided for calling the Duel.

00:10:43: and when it comes to executing code that is generated on demand, we need some kind of sandbox.

00:10:51: which is also one of the possible techniques for implementing a harness or guard rails.

00:10:59: A sandbox that can execute let's say JavaScript code in an safe environment, a sandbox that might only get four functions from you- four functions that can be called by the code in there but nothing else so it cannot

00:11:17: screw up.

00:11:20: How does the LLM know about the ATUI protocol or whatever protocol

00:11:25: you're using?

00:11:27: Well, the Llm doesn't really knows it.

00:11:31: When it comes to ATUI The llm is just answering with text Sometimes its just prose sometimes It's a more structured text or dual calling which means supported at least by the API docking to the LLM and then your framework will convert or something around your framework, we'll convert this text into HE UI messages.

00:12:03: When it comes Do UI, which is a different protocol.

00:12:08: There there is one operation mode where you teach your model generating A-DoUI.

00:12:17: when it comes to A-DooUI the model might emit some JSON that dynamically describes a piece of UI and this is usually done.

00:12:29: then people want to generate a dynamic dashboard.

00:12:33: And also, there are several possibilities.

00:12:36: One possibility is to give the LLM a description of an entire A-II UI standard.

00:12:45: like here you have a description and Jason's schema... ...and then your context is already full!

00:12:51: The weak model has many issues with following that schema.

00:12:56: A bad approach which is something known meanwhile for several years which is eternity in this space of AI, it's one shot prompting or a few shots prompting.

00:13:10: Even weak models are really good to do something similar to an example.

00:13:16: they got upfront and possibility.

00:13:20: And a third possibility, and this is interesting because this ties back into your former question where we discussed about the harness making sure that these powerful AI are not screwing up.

00:13:32: perhaps you're not teaching your model a dual UI, this standard for describing a piece of UI but maybe just teach it to your personal DSL.

00:13:45: Your personal DSL that is shrinks down to just the things you want in your application.

00:13:53: And then, the agent is responsible for translating this little tiny limited DSL which is doing what we need so that a client does not need upfront what they will see and so clients can render it.

00:14:15: So, who is this a good fit for?

00:14:19: This type of

00:14:20: approach.

00:14:22: Of course... We cannot say we have a lot of cool features.

00:14:27: Let's try to implement them, you know what developers do quite often?

00:14:33: We have our solution.

00:14:34: now let's find the problem for it but I think that It should be the other way around.

00:14:40: so i Think it should get started with looking at What your users need where they leave A lot Of time Where they also invest a lot of time and where uh, They could benefit because perhaps they have to do the same stuff.

00:14:58: Time and again or searching data from here and there And combining it.

00:15:03: so its first of all finding out about Bain points stuff that can be improved by something like this and then you can start implementing it, not the other way around.

00:15:17: So usually customer support obviously benefits a lot from conversational AIs or LLMs systems but also if you have to deal with different documents put in an offer into your system or a purchase order, or invoice that you could also benefit alot.

00:15:47: Or when it comes to doing a larger process.

00:15:51: so one really cool case study I have seen is refunds for social security agencies.

00:15:59: i did not know before but its really quiet an effort to find out if a request for a refund is justified.

00:16:10: And sometimes it might be justified, but It may already be invoiced because perhaps the Physician himself or herself already invoices and then also the customer says oh I have this additional insurance i want too invoice it so they don't know about each other.

00:16:31: There, a nice idea was to take those requests.

00:16:38: To look at the request partially via deterministic queries, partially by an agent and then come up with a proposal.

00:16:48: what do you want?

00:16:50: And how does this result to someone who works in social security company.

00:16:57: And of course this person does not just blindly say, yeah we do it as you see.

00:17:02: My beloved AI know they read through the arguments and They don't only read through their comments.

00:17:09: now that can chat with the system about the arguments.

00:17:13: Did he also draw this into account or did to draw that in two accounts?

00:17:17: After this conversation The person there says okay I do it a super posted Or let's change this a bit.

00:17:26: You get the partial refund or Let's do it completely differently,

00:17:31: right?

00:17:32: It sounds to me like you're describing a human in the loop pattern.

00:17:36: Yeah, yeah, it's it's a human.

00:17:38: and they look bad on one of many that hopefully go far beyond just Rubing stuff saying yes or no twenty times, you know No one nobody can cease this anymore And I don't know about you.

00:17:52: but if I see a lot of such dialogues at the end of today.

00:17:57: I'm just kicking Yes, please do it and I will check out.

00:18:01: Well then

00:18:02: that are the worst in AI aside.

00:18:06: The worst is if you get prompted as to question when we're in the middle Of different tasks You're just gonna dismiss it so you can keep doing what your already doing.

00:18:16: Yeah, timing is such an important factor there as well.

00:18:19: And context switching is hard!

00:18:22: So the approval thing can be quite annoying.

00:18:25: what alternatives do we have?

00:18:29: For me human in-the-loop starts already upfront before we come to a possible improve and it goes far beyond that.

00:18:40: for this I have nice metaphor from my mouth.

00:18:44: I had a dentist, you know?

00:18:46: I grew up at the countryside.

00:18:47: It was brilliant dentist in general.

00:18:50: The fisicans and dentists of the country side are all great because they're everyone knows everybody else.

00:18:57: so if one screw-up in some seconds... Everyone knows it!

00:19:02: So they have to be brilliant.

00:19:04: And he did really sustainable stuff what he didn't really lasted long term.

00:19:10: However this dentist is everything but talkative.

00:19:14: So I told him what i have, and then he started working in my mouth.

00:19:19: I was sitting there on the chair for let's say twenty minutes... ...I had no idea of whats going on!

00:19:27: And this created not exactly good feeling in my stomach you can imagine And this is something we need to prevent when the implement a chanted user interfaces.

00:19:41: You just don't want that your idol say, okay I'm now settling this for you and then they don't wanna AI do work for half an hour without telling what's going on.

00:19:53: It does not give me a good feeling.

00:19:55: You don't know, did it screw up or is already I don't sell your house?

00:20:01: No one knows!

00:20:02: Or perhaps its doing the right thing.

00:20:05: So what we really need transparency in terms of hey i'm now do this and that This also where HUI helps to show you whats going on Perhaps even cuts down the entire conversation in several phases and we see which phase is currently worked on.

00:20:28: And if you need more information, can click a button to say let's say a protocol stuff like this.

00:20:35: This where it starts.

00:20:37: then of course sometimes We need approval.

00:20:40: but one thing that is far better than approval Is asking the user a question with several options.

00:20:49: I found out when i get several options, I read it more often because then its quite individual to my case.

00:20:57: It's not just yes no and there cannot even just click Yes or No Because they have choose one of three or four option.

00:21:04: This is a bit better.

00:21:06: Another thing that is even better Is Just Doing But Allowing the user to undo it.

00:21:16: I call this action card so showing each and every process The LLM is doing in a little tiny cart with what has been done there And then undo button on so that at each time, I can say okay?

00:21:30: I like it or no Let's let's undo it where perhaps we also need these this red stop but now This is going out of hands.

00:21:38: Let's stop their entire process.

00:21:40: Yeah, and last but not least co-planning where we first of all create a plan together.

00:21:48: And only when the plan is sound, I say now please do it and i'm going for lunch or co-creation Where...I see immediately the result Of what's going on there in my main window and I can communicate with the LLM.

00:22:03: Now let switch this.

00:22:05: Let's switch

00:22:05: that.

00:22:08: Okay That makes a lot sense.

00:22:10: So one other thing.

00:22:12: Look!

00:22:13: I want to back up just little bit.

00:22:15: so Human in the Loop I think is an important pattern for how we implement, especially on the UI.

00:22:21: How are going to implement different things?

00:22:24: Especially if you're turning it over into an

00:22:26: LLM?

00:22:28: We talked a little bit about protocols but there's another major technology that we use a lot from the front and that would be MCP.

00:22:37: So what difference in how we're going to leverage a protocol like HGUI-HTUI UI compared to utilizing an MCP server, for example.

00:22:52: What are the roles these different technologies is gonna play for us?

00:22:56: Yeah, so important question and the good message up front.

00:23:00: All of those protocols nicely go together.

00:23:04: they are developed at different companies And somehow there are competitors but nevertheless day to work together.

00:23:12: So do bring us all a bit further?

00:23:16: They really try to add something on top instead of competing with another protocol Something some big companies did in the nineties.

00:23:28: This is not a case, fortunately anymore.

00:23:31: so when it comes to MCB then its all about calling tools from a third body you know?

00:23:39: From another system over there and those tools originally didn't have any UI.

00:23:49: It was more about triggering a function there or getting some resources from over there.

00:23:55: Meanwhile, on top of MCP we have something that's called mcp apps and mcps is basically just um layer on top.

00:24:09: This layer says, well you can visualize the results of this tool with these little tiny app or applets not in a sense of a Java applet.

00:24:20: More in the sense of it's little tiny HTML based application.

00:24:24: and so its first off all about metadata.

00:24:27: please find this piece of html and javascript over there, on demand load it into your application to visualize the results.

00:24:38: However as already discussed before usually we don't want to load foreign code in our applications.

00:24:47: so And this is what mcpapps is doing.

00:24:52: Mcp apps using a sandbox in your browser and we all know, but I'm referring to when you think the term Sandbox In The Browser?

00:25:01: it's a good high frame.

00:25:06: They really treat this iframe as a component.

00:25:09: And for these reasons, the mcbapps protocol defines several messages for sending in properties into this Iframe.

00:25:20: so data structures... ...if we look at the iframes and its components it's properties that are sent to Indole.

00:25:28: This protocol also defined messages that are coming out from there, can be treated as events.

00:25:35: And this is really funny.

00:25:37: we don't want such an application to feel alien in our applications when it's embedded and thats why theres a part of the protocol about messages for theming, setting primary colors secondary color fonts and font sizes, so that it really feels more or less at something that belongs to your application.

00:26:04: Sure!

00:26:06: So I'm gonna ask a little bit of a philosophical question.

00:26:11: to piggyback on all these really cool technologies... All the technologies together essentially work fundamental technology we have and doing it in a way that is largely platform or framework, or technology agnostic.

00:26:35: Right?

00:26:36: So if you combine this protocol with... That feels like something we've needed for a long time right there would be very helpful.

00:26:44: obviously It helps LLMs AI agentic development but it would have helped us before.

00:26:50: also Do you have thought as to why now's the moment were getting all these things?

00:26:56: Yeah, so the answer is yes.

00:27:00: So it would have also helped us before.

00:27:04: why do we get it now?

00:27:05: Well because there was a lot of traction in this space and saw a lot off.

00:27:09: Also huge companies that have to let's say they power their markets power to set standards on our on this topic.

00:27:19: But even before stuff like this was interesting, because we always had something long-running processes where they needed to send some progress information.

00:27:31: We also have something human in the loop were a long process sometimes stopped and someone said let's do it that way or you get this medicine but not covered by your contract.

00:27:46: And we always had the need.

00:27:51: for executing something from a different, let's call it application business domain whatever in yours.

00:28:00: So this is what people do with microservices and more with micro front ends so that the need was always there.

00:28:08: And finally all of these the set has now invented by community around agents.

00:28:15: It also interesting in those spaces

00:28:19: Absolutely Okay.

00:28:22: What is next, do you think for the UI space especially from a context of Angular?

00:28:30: Which is where I spend a lot your time.

00:28:33: or Is this The state that we're going to be in for awhile?

00:28:37: Or Do You see A Lot Of Change Happening In Your Future?

00:28:42: Well...I See This Answer Two Fold.

00:28:47: First Of All It's all About Telling coding agents how to produce sound angular code and this is something the Angular team really invests a lot with skills, with an mcp server teaching your agent about best practices showing it good examples because good examples are quite often more important than a sound description.

00:29:13: This is where the Angular Team really, Angola a bit more straightforward because the thing is when it's straight forward It's not only good for us people.

00:29:30: It's also good for an LLM Because yeah, then there are less surprises in their and it works.

00:29:37: so this one one branch The other branches, and I really notice because they have some contact to the Angular team.

00:29:45: They are investing into two things currently.

00:29:49: one thing is a do UI this standard that allows you to describe dynamic UI with JSON.

00:29:57: By the way, ATO UI comes from Google.

00:30:00: And so it's not a big question whether the Angular team supports this.

00:30:05: There is even an official renderer for Angular made by Google and the Angular Team helped build these renderers So that they feel like good integrated part of Angular and not like a foreign body.

00:30:21: And another thing that is currently a bit music of the future, The Angular team invested into his web MCB where your web application loaded in to a browser becomes as set off tools for you're let's say general.

00:30:43: AI client, your chat.

00:30:46: Perhaps you have installed something like cloud code or GPTD and then you can also say in the chat now please make this application there loaded into this browser window doing this or that so you can remote control it but don't click around a lot.

00:31:04: This is good.

00:31:06: support already landed with Angular twenty two, saying this webmcp is still experimental and not supported by all browsers.

00:31:17: But it's proven by Google.

00:31:19: of course the Angular team is supporting you to get also the conversation out off your browser window into your generic chat window where you can combine the possibilities of your browser application with possibilities for other applications.

00:31:38: You become an illustrator!

00:31:41: Sure, so I feel like some things we've been talking about might have been covered in our new book.

00:31:50: Yeah, yeah.

00:31:51: That's right.

00:31:52: Can you talk to us about that a little bit?

00:31:54: I'd like to hear more!

00:31:55: Sure sure.

00:31:56: so i'm currently super motivated as you can see and i'm writing a book about all of this about a genetic UI with Angola And it covers all those topics.

00:32:09: we start a standard spaced approach.

00:32:15: We first of all apply all the standards and use it in sound way, an Angular application Saying this for all those protocols.

00:32:24: There is an SDK, but usually this SDK Is on a very low level.

00:32:30: so in order to make it usable In your Angular application you need to abstract It somehow.

00:32:37: that's why the first chapters be combining these with angular stuff like resources and signals To have really high-level implementation of all this that fills right in your Angular application.

00:32:52: Afterall, you don't want to implement infrastructure code on your business applications!

00:32:59: And then we go on, when it comes to standards.

00:33:02: We talk about HGUI and A-II UI for dynamic dashboards and MCP apps.

00:33:08: We also talked human in the loop patterns.

00:33:11: We implement several of them... ...and we talk some advanced patterns and guardrails and safety making sure that power is not causing harm showing how we can harness this, this power with you know sand boxing and checks here.

00:33:35: Checks their transparency sub agents workflows and so

00:33:39: on.

00:33:39: nice that sounds really exciting.

00:33:42: do You have an idea when?

00:33:44: That will be available for us to grab a copy?

00:33:47: Yeah So it will be in fall after the summer break.

00:33:53: It should be available somewhere through out September.

00:33:56: I guess I'm already pretty far, really confident.

00:34:01: I have some chapters and now during the summer break in the summer of two thousand twenty six i will work on it.

00:34:10: so yeah in four thousand thirty-six

00:34:12: people that's amazing!

00:34:15: Having written a couple books...I know how much effort is going into this but Yeah, yeah.

00:34:22: It's a lot of work.

00:34:23: I always say writing a book is perhaps not that much fun but having written it

00:34:32: absolutely agree.

00:34:35: and then also through with all my examples which also was a lot of fun implementing this example.

00:34:42: Also from my technical standpoint, finding out how much minimum amount of examples can cover the maximum of what I want to show because it has been as simple and possible for teaching purposes and complex as needed to show their concepts.

00:35:01: Nice!

00:35:02: And there's also overlaps with some of the talks in workshops you give going to be at in the near future where people might be able to get a sneak preview

00:35:21: of some Buster in Germany and that Chucks in Germany.

00:35:38: And at Front and Mania, in the Netherlands there is also a workshop that is covering this.

00:35:48: Besides these I have some remote workshops if you're not on site.

00:35:54: So we've covered a lot.

00:35:56: What do think of what we missed so far?

00:36:00: Well,

00:36:04: what did we miss?

00:36:06: I think that we covered the topics quite nicely from the protocols to the harness and also other safety concerns like sandboxes.

00:36:18: Also human in a loop.

00:36:20: so this is really the main stuff there.

00:36:25: Of course, we can go deeper in each and every topic because for instance a discussion has quite a lot of my examples is how much to delegate to the LLM?

00:36:40: And there's no general answer here.

00:36:44: as in software architecture it always about trade-offs.

00:36:50: If I delegate a bit more to the LLM, then perhaps I have less performance because the Llm spends more time, spends more token.

00:37:00: However it can more easily adopt two things we haven't thought up front.

00:37:07: so let's say if all of freedom when generating dashboard that can come out with everything and this is also somehow powerful, but somehow dangerous because there are more possibilities where it can screw up.

00:37:24: And if I harness it when i say it well you can only show this and that and that style!

00:37:30: You can only parameterize in those three ways of course then have more control burn less tokens.

00:37:39: The answer of the LLM will be shorter and cheaper.

00:37:42: It cannot screw up that easily, however it also can not adopt that easy on-the-fly to stuff we did not foresee upfront.

00:37:53: so its always a trade off.

00:37:57: finding this balance is perhaps more arts than science Science and engineering comes back when we have a protocol of conversations, of course anonymized where you can see.

00:38:14: then the model did great job.

00:38:16: And it didn't do a good job so that improve the harness on the lamera

00:38:25: It seems to me, one of the things I always like do in these conversations is ask a lot of context questions.

00:38:32: And we've already answered a lot those kind of why now?

00:38:36: Right and what's coming down the future?

00:38:39: but also who was this for...and i think that's interesting because

00:38:43: even

00:38:44: if you don't have an immediate use case for LLMs You can still start adopting some adopting MCP, and maybe you'll find some improvements.

00:38:57: It's not because you're doing an agentic based decision engine right now that you can't use other decision engines to gain benefits from adopting the same technologies.

00:39:10: So I think what is something i often advocate for which first figure out your use case.

00:39:18: why would I adopt this?

00:39:20: And if you are still in process You're developing Angular UIs.

00:39:25: Go ahead and start thinking about how am I going to implement some of these protocols?

00:39:28: How can i pull an mcp, how can it be ready for the next phase of development without necessarily having a game plan?

00:39:35: but don't go all in until you have this concrete... This is absolutely what I'm trying to accomplish with it right!

00:39:43: Is that makes sense?

00:39:46: yeah totally so somehow connects what I always say about patterns in general.

00:39:54: You need, as an engineer you need to download those patterns into your brain so that you recognize situations where they can be applied and really provide a benefit from learning perspective.

00:40:09: of course we should play around with these technologies.

00:40:13: Perhaps as you say, perhaps we even find some good ways to adopt it without a chance or LLM because As mentioned before those needs have been there.

00:40:24: Even for LLMs long running processes micro frondens and so on.

00:40:30: So now is the time To download those possibilities through your brain lay around with its.

00:40:35: perhaps you do a toy project Or showcase.

00:40:40: You then really recognize when you can use it to provide more value.

00:40:45: do your customers.

00:40:46: Yes, well that might be so high That the Customers are ready To purchase Your product or a higher license of your Product and not the product Of some competitors.

00:40:58: So what would

00:41:03: you say is The key skill Somebody should focus on developing?

00:41:09: if they're wanting to level up

00:41:12: in

00:41:13: Angular development, in general or in agentic developments?

00:41:17: In particular.

00:41:19: Yeah so also here usually start playing around with it install some harness like cloud code or cursor AIS quite nice or Codex play a round with it and then you will quite soon run into some issues,

00:41:40: some

00:41:41: big falls.

00:41:43: And then your brain is ready for absorbing more knowledge.

00:41:47: going to do some conferences about vibe coding reading some articles about vibe coating how to solve all those pain points so become a bit more concrete when it comes to Angola development usually bypass those pain points that come up quite early.

00:42:09: people should install the official skills for Angola.

00:42:13: The Angola team is maintaining and installing the MCB server, which not a big deal because it ships with the Angola CLI and you just need to activate it in your development environment so that your agent asks the MCP server about a documentation or good correlated examples.

00:42:40: And then, next step is... ...to give an automated feedback loop through your coding agent!

00:42:51: So this isn't just giving your code, no?

00:42:54: something where it can check at the end if It is really done and this Is also their engineering comes back because they are.

00:43:02: suddenly we need sound unit tests Which is a great source of feedback not only to us developers, but also do the LLM But Also linting Where We Can Check Against Best Practices?

00:43:22: of mine, making sure we have a sound architecture in the front end because quite often architecture is unfortunately ignored.

00:43:33: Or at least not taken that seriously.

00:43:36: for quite a long time it was a thing on the back-end but I'm quite sure and I am practicing this more than a decade now if needed on the front-end.

00:43:46: such Linda can check whether When you think in terms of vertically slices or business domains, is it good that this business domain has direct access to code and that's business domain?

00:44:03: The answer might be no.

00:44:04: And then such a linting check might tell us as human but also the coding agent know your did something that worked But you screwed up our architecture.

00:44:15: now everything depends on Everything else.

00:44:20: And if we go one step further, We can also implement unit tests that check your architecture.

00:44:28: tools like ArcUnit and the Chabaspace or DSR, a counterpart in the TypeScript space that is checking for conventions.

00:44:39: Is it good idea to date access layout accessing your components?

00:44:45: Or should be rather other way around?

00:44:48: stuff like this can be checked there.

00:44:50: so give your LLM automated feedback.

00:44:56: Yes There's a case to be made that if you don't have feedback system, it is not really engineering.

00:45:06: I actually took some non-computer engineering courses in university and lesson number one building your feedback systems.

00:45:16: Yeah, this makes a lot of sense.

00:45:18: And it is also the key learning off the entire age.

00:45:21: child movement isn't its getting early feedback.

00:45:24: start with your conversation.

00:45:25: get feedback on a regular basis.

00:45:28: So you gave in number examples for unit tests and I think we all agree that unit testing has always been important.

00:45:34: It's particularly important For agents because provides not only to feed back and verification but Also kind of mechanism the agent to understand what it's allowed and not allowed.

00:45:50: Beyond, I think that just completely blanks on the name of the Java architecture testing framework.

00:46:00: are there other tools?

00:46:02: ArcUnit?

00:46:03: thank you.

00:46:03: they're in the TS unit so those were fantastic.

00:46:07: Are their best practices for testing in Angular space?

00:46:12: because Sometimes unit tests are very hard on the front end.

00:46:19: Do you leverage end-to-end testing?

00:46:21: Do you leverge UI testing, do you leverage unit testing like kind of?

00:46:24: what's that mix for you?

00:46:26: That's really a crucial question and a crucial topic because we have all been taught... ...that we need something like a testing pyramid you know, a lot of unit tests and only little small amount of end-to-end tests.

00:46:44: And this might work in the backhand.

00:46:48: however it does not work that well because front-end code is different!

00:46:56: When speaking about testing pyramid there's another piece then, but somehow it got lost or it is mainly ignored.

00:47:07: Namely that unit test fits the best for logic.

00:47:10: they does not fit that well for persistence code or code dealing with persistence.

00:47:17: It doesn't fit as well for UI.

00:47:20: so when I was teaching at university already more than twenty years ago this one of topics we were telling our students So... In the front end, meanwhile we came to a conclusion with VVMA, I mean VFN as an industry that you need something in between of unit tests and end-to-end test.

00:47:47: End-to‑end tests are usually a bit too coarse grained And unit tests have been too fine grained.

00:47:53: Another issue is if you treat your component just like a function or a class You test their components in non realistic circumstances because at runtime there is always a framework and the framework is adding something like life cycle hooks or perhaps changing that timing a bit, postponing some calculations when it comes to signals so on.

00:48:20: So what we really need are those component tests where you treat components as black box the user interaction with this component where we say, well let's now mount just this component not entire use case.

00:48:38: Just these components here and send some signals into it in terms of simulating user clicks and keystrokes and so on.

00:48:50: And lets see what is coming out there.

00:48:56: Also there Of course We need some kind of mocking.

00:49:01: we want to usually mock the backhand away.

00:49:05: But this is on another granularity level, and it also helps us reach a sweet spot of testing not too much.

00:49:21: So you just gave an excellent answer in the test composition for Angular which Fantastic.

00:49:37: What would you say to... what's the best way to get started with testing?

00:49:44: So nowadays, it is really easy in Angular.

00:49:49: for quite a long time The testing story was not that sound.

00:49:55: It kind of worked but at this point ended and works.

00:50:01: But it was never that convenient.

00:50:03: Usually you needed some layer on top of it from some third-party vendors, perhaps commercial or open source to make its sound and also allow this level of component testing.

00:50:17: Meanwhile It's straightforward because the Angola team moved to Vtest And if we look at vtest as a first glance it looks like what he had before Like a big difference.

00:50:32: However, if you realize You can put the test into something they're calling that browser mode?

00:50:38: You immediately get a sound story for component testing for free.

00:50:44: So just activate the browser modes.

00:50:46: there is a schematic meanwhile That it's just adding one line to your Angle adjacent.

00:50:52: then browser mode is on and Then you can use this page object to simulate user interactions with your component, and you don't need to know about what's going on internally in Angular when we wait for the change detection or then do wait for some asynchronous process like that.

00:51:16: their promise is resolved which only happens at the next microdusk.

00:51:21: You just use this page object as a user would interact.

00:51:26: so yeah it really feels great.

00:51:29: That's fantastic.

00:51:30: Because I old school Angular testing, I saw so many projects where you were effectively either testing Angular instead of your own code or making such big assumptions about what Angular was doing that you weren't testing your code in a realistic scenario.

00:51:52: So i'm glad to know the state of testing there has improved alot.

00:51:57: So it was really a good move to bring in.

00:52:00: the test is established.

00:52:03: with this known out there.

00:52:04: It has vibrant community.

00:52:06: So, that's what I smart move.

00:52:08: nice All right.

00:52:11: so we've talked about a ton of stuff from from UI protocols two MCP servers human the loop pattern.

00:52:20: How do you testing an angular?

00:52:22: A little bit about your book which i'm super excited about.

00:52:26: What is your number one takeaway for the audience out of this conversation?

00:52:30: Yeah.

00:52:31: So I think, The Number One takeaway is For a Chantic UI.

00:52:35: you need protocols because You don't want to couple yourselves through the technologies on the backhand and be free from that.

00:52:45: And the good messages are some established protocols like HGUI by the way.

00:52:55: UI is meanwhile supported by a huge amount of agent frameworks.

00:53:01: Some have a wrapper, some baked it in natively.

00:53:06: so if you look at Microsoft they had their own implementation as part of the Microsoft agent toolkit for something like Spring AI.

00:53:16: there's a wrapper around that and its really easy to get started Because you have such many adoptions and SDKs.

00:53:24: You don't need to start implementing your protocol by yourself, which is nothing we usually want to do as application developers.

00:53:34: The next step would be To look at how to harness the power of Your model And also bring in some dynamic stuff with perhaps something like a two UI where your UI is dynamically tinkered together by an LLM.

00:53:54: Nice, well Manfred thank you so much for talking with me today.

00:53:58: appreciate your being here.

00:54:00: I Thank You For Having Me and have a nice one.

00:54:04: yeah take care.