Vue.js Amsterdam 2026 - Day 2 - Part 2

In this talk, Vincent Yike discusses the critical topic of tree shaking in Nux and Vue applications, emphasizing the security risks associated with improper implementation. He explains how tree shaking works to eliminate unused code during bundling, and delves into common pitfalls that can lead to vulnerabilities, such as the handling of CommonJS modules and the impact of side effects in code. Vincent also highlights real-world examples, showing how improper tree shaking can result in sensitive information being included in front-end bundles. He offers practical solutions for detecting tree shaking failures and demonstrates coding techniques to enhance the effectiveness of tree shaking. Overall, the session aims to equip developers with knowledge and strategies to secure their applications against potential risks associated with tree shaking failures.

Sold it slow You waited long enough over I can't believe strong games. Now you're taking over us. You make it I can't just Heat. Heat. Hello everyone. Welcome back the day two, final day and final set of speakers. My name is Milit Alexis. I will be your MC for the rest of the day. We have an amazing lineup of speakers from security to Astro for a from

a live sketching to a live game show when you can win amazing prizes till the end of the day. Also, let's say thank you to all sponsors who making this all happen and to remind you to go to the Astro booth. you can win a really good prizes and you can win a ticket to VueJS Amsterdam next year. Okay, are you ready for our first speaker? Yeah,

let's kick things off with a topic that touchs every single one of us. Our first speaker is a collaborator on Vue language tools, co-founder of UAI, a team member of Vue use, and a contributor to the Knox ecosystem. His talk is something we all trust but maybe shouldn't trust blindly through shaking. We think it removes your news code but what happens when it doesn't? He's here to

show us the security risk hiding in our next and view builds. Please welcome Sir Vincent. Hi So, how everyone? I'm Vincent Yike from Hong Kong and you can find me online at Circle. Thanks to Amsterdam view Amsterdam for having me. Uh, this is my first time in Europe and Amsterdam is my first uh stop. I'm really glad to be here. Thank you. Um I'm honored to have

recently become a part of Vue team for working on the Vue language tools uh in uh including the Vue uh VS code extensions and VueTSC and I'm also a Vue use team member and a co-founder of Vue AI for building some AI stuff like agent skills for Vue. I'm also a Nuxter and I contribute to the Knox ecosystem and managing some libraries too. So I'm now based

in Taiwan and I am part of the Golang Taiwan and Python Taiwan communities. So if you are interested feel free to check out my links below. So as part of the view language tool teams before we dive into today's topic I'd like to share a quick updates on view language tools from the past few months. From the end of last year, we launched an issue cleanup plan.

And after several months or of effort from our team, we have now closed nearly 80% of the issues and resolving multiple bugs that had remained open for many years. So we are now getting closer to closer to our plan uh to our goal. Next, I will highlight a few of language tools updates to share with you. First, we performed key type alignments for V4. And uh when

using v4 the for loop in the v runtime actually aligns with the javascript behavior which will convert number keys to strings. So in the recent update rest we stringify number keys in objects in the uh language tools to align with the view runtime. I believe uh many people has uh experienced some random highlight issues over the years right. We have finally fixed them and uh also improved

some syntax highlight as well. So, everyone should have noticed some uh improvement recently. And next, I I'd like to introduce our brand new features uh rich hover message. So, after you define props, emits or slots in view components. When you use the component in template, you can just hover on it and see those definition in beautiful format. And the best part is it's all autogenerated. you you

don't need to change a single line of your code and it works out of the box of all UI libraries like Nox UI or prime view. So this is uh currently an experimental features to try today just go to VS code extension settings to enable hover in uh view extensions and that's it. We'd love to hear your feedback and finally shout to Johnson for coming up with

this amazing feature. We hope to bring you a unique and better developer uh experience than any any other frameworks. Uh there's more new features and bug fix over the past few months. If you are interested, you can search view welcome inside view uh VS Code com uh command plates uh and see the full release notes and highlights of the view uh recent updates. Oh, one more thing.

We know many of you have been looking forward to TSGO support in view language tools and we feel the same way. Since TSGO doesn't yet have a complete API design for the third party plug-in, we are actively working with their teams to uh discuss the direction of the API. At the same time, we are also exploring other possible solutions and planning to build some PC's. So stay

tuned. And now let's get started with today's talk. when chaking fails, security risk in nux and view. In this talk, you'll get a complete understanding of what chaking is what happens when chaking fails and how that relates to security. I'll also introduce some common pitfalls that break shaking including what side effects uh and how they uh affect shaking. We'll review real world shaking pitfalls and examples. um

how to detect tree shaking failures and how how can we fix them. Oh sorry I'll share some uh coding techniques that makes ching works properly. So today's talk will mainly use view and nux as examples but I believe the concepts can also apply to any JavaScript or typescript project especially if you are a library maintainer. I believe today's content may be helpful to you. Let's got uh

get started from the basics and go deeper step by step. So where's shaking? Imagine you uh your project use a library that exports hundreds of functions uh features like load dash but you only use one or two of them. If you bundle the entire library into your website that waste resources and can hurt performance, right? With tree shaking only the exports you actually used are bundled. is

like shaking a tree. So the that leaves fall off leaving only the useful leaves. So what happen if tree shaking is not done well? For sure the first we can think about is larger bundles and worse performance. But the consequence can be more serious than many people uh people expect. For example, if you had test code or internal features that are not properly chicking, uh they could

end up being bundled into your front end as well. things like internal APIs, endpoints for testing, um, admin panel URLs and so on and that could potentially lead to a further issues. Uh, at a more serious level, sensitive information can leak too. Your backend logic and even secrets can leak into client bundles if shaking is not done properly. I'll explain how this happens and how to prevent

it in this talk later. So, we all know that cha is smart, right? It can remove unused code at build time. But have we really verified that all unused code is truly removed? This is the key point of this note. Shaking can be lazy. It doesn't always do everything you expect. Next, I will walk through some of the most common pitfalls that bre shaking. The first one

is CommonJS. Even though we rarely use uh common JS directly when developing view application nowadays, if your project use a library written in common JS, it may not be cheatable. Uh let's look at an example. Imagine there's a common JS library with just two exported functions. Then we have an index file that only uses add function from the library. After that, we bundle the project. You notice

that the sub function even though we never use it still gets bundled. In this example, we can make a small change to help the bundler perform static analytic more efficiently. Right now we are recurring the uh entire module. So the bundler has less information about what happened that runtime after the module is required. If we change it to unnamed required, we give a bund uh the bundler

more clues and uh it can see that we only used add from the beginning when static analytics in the list. In some bunders, it can be chaken but not everyone guarantees support for this. Also, if you move required inside a function, it becomes even harder to detect and ching may fail again. One more case. Let's say you use named required and place it at the top level.

But what if the library you are using look like this. This is actually a very common pattern speed feature into module files and we export them in in uh them or from library entries point when you import from it even with a named required at the top level it still cannot be shaken. You may wonder how common this pattern really is. If you do a quick quick

search on GitHub, you will find over 45,000 results written in this way. So, it's far from rare. If your project uses ES module bunders usually get better static analytics for tree shaking, but it's not a silver bullet. If the code is structured poorly, unused code can be used uh can you uh still be bundled. Let's convert the previous common uh JS example into DSM and use it

in a view component and bundled again. You still see an uh unused com uh function is bundled. Can you explain import? If you think uh switch to name import here, the ids reports an error. Why? Because this library only has a default export. It combines add and sub in the news uh object and export that object instead of export each function separately. This style is not chic

friendly. To be clear, I'm not saying I never used export default with objects. It's fine for many config files uh when the object is truly one unit. A GitHub search for this style returns million of results. Although many of them are valid use case, uh there are still plenty of use case where unrelated things are mixed together in one export. Back to our example, if you want

these two functions to be export individually, we can remove the default export from the library and change the uh change it to export at and export sub. Uh this that's what we call a proper named export and this uh is shake friendly. You can also place export directly before each function and this also a valid named export. Next, still in ESM after learning to use name import

and export. What if I want to uh want to import many functions for from one library and I use namespace import for the whole module? Can it still be chaken? Yes. Even with namespace namespace import if static analysts can see that only the add function is has been used bundlers can still uh [ __ ] in correctly. What if functions uh selection is dynamic can it still be analyzed?

Yes, because the code explic uh explicitly reference add and sub from the library. So the a is still uh analyzable. So one more change. If I chose uh the function named as a string key, can bundler still analyze it? At first, it looked possible, but no. Performing static analyze in this scenario becomes more complex and hard to detect. Most of bundler cannot handle So now we have

covered some basic import export pitfalls. Let's do a quick exercise. We use yesm named import and named uh export in our app and we uh only use one export system version. In theory the bundle should only include version, right? Let's check out check the output. You notice that other code from system is still bundled even though we never import it directly. Why? This leads to the next

key topic of today side effects. This is another major pitfalls for t-shirt kick. If I had to uh describe side effects in one sentence, it is affect outside scope. Let me uh quickly explain what's what's that mean. In this function, we change the count variable outside function since in uh it affects our outer scope. The line that increase count is a side effect. In other words, modifying

a global variable is also a side effect. In practice, the most common way uh side effects happen is by calling APIs with side effects such as console lock. The console object exists outside the function and the effects happens in the browser console where a text message is locked. So let's see what else APIs are also marked as have side effects by the bundlers. Any APIs that change

browsers states like console lock we mentioned before are all side effects. The APIs which assess the networks uh perform DOM interaction like changing CSS elements that affects the UI or the APIs uh affect the event loop. These API are all marked as having side effects. So next JSON pass and JSON stringify. Who thinks these APIs would have uh would be marked as have side effects by bunda

like roll up or roll down. Uh please raise up your hand. Oh, seems there's no. Okay. Um it seems doesn't have side effects, right? They really would but they really would be marked as have side effects and the reason is they can throw an error. Once an error is formed, it definitely affects the outside of program, right? And when the bundler is doing static analyze, it does

not check the input will cause the error or not. So throw and any APIs that can throw is must have side effects. So it turns out the API is actually uh more than we expect. And finally, I want to mention object assign. If you use it to change uh an object which is outside of the scope, of course the uh it there's a side effects. But if

even both uh the source and the target objects are in the same scope, the bundlers will still market as uh side effects. Although it's a bit uh unreason unreasonable. The main reason is again static analytics is hot. Uh so bundas take the worst case path here too. Uh from my observation many libraries functions that are marked as having side effects are mainly because of they use this

uh object assign like assigning some default options with an object. Uh so be careful with this one. There are actually many or more APIs that mark as side effects and uh different bunders may um make different decision also uh bunders may become smarter over time right so let's keep in mind to watch out for APIs uh or behaviors that has have side effects so um how how

the side effects impact G- shaking let's go back to the previous example uh in the no side effect version system.js JS has two exports settings and version. In our app, we only import the versions. We can see only version is bundled. Great. Since setting is not imported here, right? So the use settings function is chaken correctly. Now we add a side effect line console logs to use

settings function and bundled again. You'll see that even setting is not imported the use setting function still get bundled. Why? because you setting has been called uh and it triggers console lock which is a side effects API the bundler will keep the code that has side effects to ensure the results remain consistent before and after G-shaking. So we have talked about uh talked for a while. So

how exactly can G-shaking affect uh security risk? First in uh many modern web app uh projects nowadays we don't have only the front-end code in our codebase right for for example if you use an SSL framework like nux your front end project may share some code with your back end like configs or schemas uh once the code are shared it means if your cheese shaking goes wrong

some backend code or config can accidentally get bundled into your front end let's assume we have a shared file that contains some shared URL configs and you also put some secret data in it. So you just think oh it's fine my uh front end only import the public value so that the secret stop uh isn't is unused so cha king will handle and remove it right but

after handling you may see all the secret data is included in the output wait I only used the public URL here why did everything else get bundled the reason is inside the setup client it may throw an error so the bundler ch calling this function as SC effect call and because these calls use secret key uh as an input parameter so it gets bundle too. Of course,

this example may be a bit extreme. You probably won't h uh hackle a secret key in your uh as a string, right? Instead, you may put it in a environ environment variables or in you may use the use runtime config API. But things like private URLs or backend logics written directly in code really can leak this way. This example shows a more serious real uh real world

impact when Chish can go gets lazy. If you feel like the example I just mentioned is uh were not real enough, how about some real world uh cases? The truth is there are actually more of them uh you expect. Even in uh in libraries I personally use, I have found many of them can't be chi king because of side effects. Let me pick one. Salt. Anyone is

using salt here? Raise up your hand. Great. Many of you. So now imagine you define your user schema with sort and in some files you also define 50 more and other schemas some of them maybe just for back end only and in your front end you only import and use that single user schema. When you bundle you'll find all 50 schemas end up bundled. The reason is

the function that sod uses to define schemas like uh z.object zstring are having side effects. If someone inspect the JavaScript code of your website, they can know how your data format as are validated and combined with other information leaks mentioned earlier that may further increase the security risk of your website. So after introduce these cases, if you find that uh your own project may also uh be

affected, how can you test uh or detect it? Let's start with a more serious issue. Is there any secret data get bundled into the front end? First lo locate the file in your project where you keep secret data. Then find exact lines uh where those value are defined it. Next add a line of code that has side effects like console lock and print a very long and

unique string. Then run the bundle build. So after bundling search inside your build output folder for the that long unique string. If you find it, open that file and check the surrounding code to see whether your secret data is included. So that's this method is just that low tech, right? Uh but it's surprisingly effective. So you are if you are sure your project doesn't contain some uh

secret things but you want to see whether uh unused module uh being bundled you can use some bundler analyzer tools like nux analyze uh v bundle analyzer to visualize your bundle and see uh what got included. If you really want to go to line by line to see which part of your code were bundled, there's a a VS code extension called Chic uh visualizer that uses source

map to mark which part of your code actually uh end up in the bundle. So shout out to Anthony Fu for create this awesome tool. So if you discover that your project actually have ching issues, how do you fix them? And how can you prevent chaing from getting lazy again in the future? The simplest approach is split uh files properly. If you originally put different types or

of data in one file, see if you can separate them or you put secret and public things together. So see if you can split them into separate files. If your project is large and you can't just move files around, but you still want to fix shaking issues caused by side effects, you can try a chiking uh annotation called pure that can uh and the usage is very

simple. Just add the pure annotation command right before the function call that have side effects and telling the bundler that the falling function call has has no side effects. Then the bundler will be able to chake it away when the client export isn't used. But there's a problem. What what if I call a function with side effects many times? Doesn't my code become a full of pure

annotation? Right? In fact, you can just place it inside a function right before the line that actually cause the side effects. For example, if you put it before uh console lock, the bundler will mark console lock has have no side effects here. But what if a single function has a ton of side effects? Then the functions become ugly again, right? If this way doesn't work and that

way doesn't work, how do we solve this problem? That brings us to the second annotation. Uh if a function contains many side effects or you don't even know where the side effects are, you can just add a no side effects annotation above the function that then any any call to that function will be marked as a pure core. So that that's how chaking announce uh annotation works.

So up to this point of this talk um we've learned shish king is about uh only bundle the code or module that we actually use and when shi king fails the worst case could be uh uh secret leaks. We also uh saw how common JS and uh incorrect ESM usage can break shaking. We talk about side effects and how they impact t-shirt king and common web APIs

that marked as uh side effects. We saw how back end uh secrets could end up bundled into the front end and we looked into the real world case. Finally, we were uh learned different ways to detect chaing problems and we also learned some coding skills to make chaing works properly. So lastly, I want to share some uh story about ching in the real world. Let's start with

schema libraries. Remember the salt example I mentioned earlier. The first time I noticed this issue is was in 2024. Uh back then sort hadn't re uh released yet and I tried to optimize shaking or for sort but because of uh its API design use uh function chaining it's not really possible to optimize it with shaking annotations. Around that time I started to work on one of Anthony

fool's project and it was uh using valid bot which is a sort alternative. So uh valid bot also wasn't optimized for chiking at that time but after we reviewed the code base seems API design can be optimized. So we shipped a PR together to valid bot to optimize the chiking. I also sent another PR to further improve the chiking after that. So after that sort released version

4 in uh April last year. It introduced salt mini at uh and that API is very similar to valid bots. It also claimed to be shaking friendly but I uh I had already switched to valot at that time. So I didn't d uh d deeper into uh salt mini uh until a few months ago. I started to prepare for this talk and want to share uh use

uh sort as an That's when I found out sort mini still have ching problems and it actually exactly the same that uh valid bot had before. So I open a PR and optimized shi king for over hundreds of the APIs in sort mini and it got merged about two The last thing I want to share is um the current chich king situation in the view Luckily view

core marks most of the API's no side effects annotation. So if you define some reactive states but you never use it, it can be cheese shake away. As of the uh view ecosystem libraries in 2024, I sent a PR to pine to optimize shaking. So if you define a store in pina but you never use it it can be chish can ring out and last year I

also sent a PR to view use to optimize shisha king for over a hundred of use uh APIs for instance if you use like uh create global states to create a store uh with uh view use but you don't really use it can be taken away too. So congratulations to all view developers. The library we commonly use uh in view ecosystem are now optimized for chaking. All

right. So that's my talk for today and hopefully it creates some positive side effects for you. Thank you. Thank you, Cero. Thank you. All right, we are staying on the security track, but the next talk is going to be a really different. Our next speaker is developer advocate at Oz, Google developer expert, a woman techmaker ambassador and a Cyprus ambassador. And there is a fun part. She

is going to draw her entire talk live here on stage. Yes, live sketches, notes about view security right here on the big screen together with all of you. So get ready to learn and get creative at the same time. Please welcome Ramona. Don't take my Oh boy, it looks so great to be back again and having all of you guys here not my iPad right now. So,

please join in. Hopefully it comes with live demon praying because even though VJS Amsterdam is a like a class reunion for me I'm super happy to have so many new faces here because there's one thing which is a first time for me as well. And you see I don't have a clicker I have a small pencil. My hands are shaking. Bear with me please because this is

the first time I enter any stage without having actual slides. So, I'm a little scared, but to have you all with me give me a sense of security and I hope I can show or basically share the sense of security with you or at least a pretty handy sketch note handout later on. So, without further ado, welcome to my session. This will be my sketchbook and we

will do live sketch noting together on view security and I stop talking and start when it comes to the relevant stuff. The first thing I will draw is a castle. A castle because I think all of our applications, all of our projects, no matter if it's view or not, they are basically castled because they have lots of things which are important to protect. May it be a

feature, but especially all of the data, all of the information your user has, the identity, which is the most important thing in my opinion. And it's pretty similar in real life as well. No matter if it's in the medieval times or if it's in so in basically all media movies where a castle is castles are under siege right I don't know how many of you guys worked

with React sometimes as well at least I do however I guess some of you guys who worked with React didn't have a holy night silent night right because around like Christmas there has been a um remote server execution security issue So yes, we cannot feel safe. We need to be really careful when it comes to our application and especially when it comes the identity of our users

and all of those things because there's lots of people living inside of this castle who are worth it to be protected no matter if it's React, no matter if it's Angular And even if view has our back already, let me quickly um copy the view logo because I don't want to waste too much time drawing it and colorizing it. Um we need to protect it to keep

the cats here secure. We're going to finish that real quick. The first thing I want to do to know how can I be having a stressless Christmas with my family or a birthday or basically any other day is checking up. What does view for us? How does Vue keeps us secure? And it does have our back, right? So let's copy paste this real quick. And there's one

thing where Vue is helping us a lot. So all user provided content maybe in templates especially when it comes to the template syntax is automatically escaped. Let me quickly write that down. Content automatically. With escape I mean like if there's some weird person trying a JavaScript injection. So basically trying to inject JavaScript into an input field. this typical hey there's a script inside of my input field

and being executed. So this will be escaped automatically. You don't need to do anything. We will get to cross-ite scripting a little later as well in detection. So I will be pretty short right now. So everywhere where you see the wonderful oh it doesn't need to be perfect right now. Right. So where you see the curly braces, you know there's escaping in place, but it's also with

the render functions. So let's say template and I be quick, but also attribute bindings Attribute bindings. So the typical title one you may have used yourself is secure when it comes to cross-ite scripting as well. However, I guess it's too much of an ask to expect that view is fixing everything for us, right? So is it enough? Huh? I don't think so. It's still important for us

to be the last line of defense because we do know we can learn and we will want to keep everyone secure, right? So okay, how do I start? How do I learn about threats which I don't know yet or how do I learn what's up there? And there's a system which helps me and where I could find one or two entries connected to Vue as well. But

to stay inside of our image as our view developers or a view project as a castle, I want to start with the underground, the supply. May it be the water supply, is nutrition, all the things a castle needs to be working. In view terms, this might be all the packages you use, all the dependencies. And there I found some CVE so to say. So this is B

the CVE common vulnerability and exposures exploitations is a um system to catalog and prioritize security issues and there's two when it comes to view and two of those are connected to those water supplies it's to the supply chain so we will talk about supply chain failures right the first let me quickly check if I can show it here if the internet is kind to me and it

looks like it's kind to me is an IATN which is a package which I guess many of us use for internationalization and there was a prototype pollution inside of the handle JSON function which is pretty scary right but also there's another CVE so another security risk we would need to take a look it's connected to readers that's basically a denial of service angle caused by a regular

expression I considered that dependency as well. So yes, there could be a inefficient evaluation in parse HTML causing your server to hold the null service. So yes, supply chain is important and I would like to draw it as a well because water supply is a wonderful metafera to describe it, right? So let's get a well built up. Yeah, my hands a little shaking. I'm sorry about that,

but I guess it's okay because a well doesn't need to be perfectly aligned when it comes to the bricks, right? So, yes, we do have our There you go. It's open. And there's lots of weird dependency issues which might poison the whale. And I'm not that great at drawing um bottles. So please hopefully I'm not the only one in this room who is not able to do

that. But I hope you can still see this should be a bottle with a content which you shouldn't drink, right? We don't want to be poisoned. So there you go. It's filled with pretty ugly stuff. The ugly stuff being outdated dependencies, dependencies having security issues, or worse, not being maintained at all. Let me quickly toss the poison into the well. Bad stuff. So, yes, be really careful

when it comes to your dependencies. Do you remember like every few months there's an npm package being poisoned as well because contributors are still human and I guess being fished is pretty easy. So yes, you cannot feel secure here. So let's see what we can do there. I wanted to move it away because we can close the lid. Clothing the lid are the fixes we can hopefully

do when it comes to supply chain issues. And there I want to do a shout out to circle. In case you would you haven't been here before, check the recording of his tree shaking talk because it showcases really well what what happens and when you don't mind your build and how you can secure your build. So this is important. Mind your build. Obviously, I want to write

it down. I hope it's obvious, but mind your dependencies as well. Mind your dependencies. Please send help if you cannot read my handwriting. This means that doesn't need to mean that you need to check every of your dependency on your own or basically read through all the CVEes or be online on Twitter all the time 247. and that's not healthy. But there's a couple of tools helping

you with that and many of them are open source as well. I'm thinking about retirejs for example or the dependency checkers. There's so much dependency mapping but also if you happen to see Jakob's talk yesterday he was talking about the dependency cruisers. Visualizing your dependencies will help you as well. So consider that. And last but not least, I guess it's not new for many of you people,

but if you do AI generated code, vet it. No matter if it's by copilot, LGBT code, whatever, if it's written by a agent or written by yourself or assessed, vet your AI code. Readers attacks are my favorite example when it comes to just copy pasting regex and hoping that it works out. Vet your AI code. So yes, this is all I want you to share for now

when it comes to supply chain issues. But the word supply chain issues I already heard at another point and I was thinking okay how can I learn about general risk? How can I learn about new risk? There's an interesting project helping a lot and you might have heard the short term of it already. I want to draw it as a shield It's interesting that it's one of

the most weirdest um drawings I do, but I shouldn't be perfectionistic. The group I want to talk about has a certain name which has the word w wasp in it and I already called it out for a tool. It's called OVASP which is code for open um web application security project and as the name already implies its goal is to raise security inside of the web or

basically anywhere and they do a lot of initiatives to help us to stay secure. For example, I love their sophisticated application where I see what can go wrong basically. So it is broken by purpose if you want to call it like that. And all of those people are um open source people and um sometimes even volunteers which is super cool. But there's a nonprofit behind it as

well called is the over foundation. So yes there's lots of people taking care of us. Hopefully I can write normal eyes. Yay. So yes, the OAS people are there so we don't need to fight alone to protect our They our guide as well. And the ranking they have supply chain issues are at the I guess it's the third place right now. I want to quickly touch upon

the first rank because it's super important. Albeit it's not a completely front-end related topic, but there's still a lot of things we can do. I'm talking about um broken access control. Access control is important to make sure that your user only does the things you allow them to do. So this is basically if we take our castle analogy into account. It is basically important to have wardens

in place or I don't like to call it gatekeepers because this sounds so negative, but it's basically those serious looking people having a spear and a shield and basically block the way if you're not allowed to enter something. So, let's give our own warden a little helmet and an armor so it can really protect our entry points of our I will give it the shield we already

have. It's a little big, I think. Let's make it a little smaller. There we go. And give it a spear. So the obvious choice to help our wardens if implementing access control most of it is done server side and there's tools like the open FGA solution which is hosted by the um CNCF open CNCF which is pretty trustworthy if you ask me and you don't need to

make sure to build a complete access control layer when it comes to having relationship based ed um access control implied and stuff. You can just use this open source tool for that. But as a front-end dev in charge of our Vue application, there's a pretty easy way to do our part and it's the Vue router. Let's make it a little prettier right now. So, this is our

wonderful broken access control warden. So, it's never broken at all. And this is a simplified code of a view router where I basically went for a small snippet here to see what we can do. In our case, let's imagine we have our castle and there's an admin room and only admins are allowed to enter that room. So we put their reward in and it will look at

our token, a JWT token for example and see if we are allowed to and we will check the require admin flag. It will be set to true for the route to the admin room. It's done by this statement here. We will check it here and then if it doesn't have the check on the papers on its token we will say no we will stamp it 43 forbidden

go away please. It's important to note though that this is only client side. You still need the back end here. So please really think about going for an access control um mechanism. maybe open FGA, maybe whatever. My colleague did a wonderful session yesterday. So if you're interested to learn about access control mechanisms, authorization, authentication in this regard, please check this recording. And now we will get to

the most important part and I briefly mentioned it before. Let's go back to the castle analogy. I will quickly um copy that one. And I didn't want to go completely out, but um there. This is the problem with shaky hands, I guess. There you go. We will go for our little carel here. Copy it. And then imagine an inside job because we talked about our supply. We

talked about our personal wardens and bodyguards and all those people, but what happens if we have an inside job in our courtyard? What happens if there's an impostor who already smuggled stuff in? So, I will basically go for another cat here. And this time it doesn't look that I will I guess I will give it a um a hoodie or something so it looks even more like

an imposter like these capes you used in Halloween or in movies. Yeah, it looks a little messy right now. I will clean it up in a bit like this. Super imposter, right? I was thinking about writing uh drawing an actual impostor, but doing gaming references is sometimes a little risky. So, I'm not doing that. But this is the imposter. Please please um imagine the music to it.

So let's go. This is a evil person. And it's not only the person. It has a box and this box is filled with evil things. May it be malicious code. May it be a payload which does weird things. It can be a a script tag which the attacker wants to execute. This would be the JavaScript injection or it could be an SQL injection sneaking in some queries

being executed alongside our code. So cross scripting is basically all kinds of injection and this is super dangerous for us in because it is the entry point for that. So in really simple words um the imposter tries to trick us or to trick the castle to execute their code to to execute and there has been a CVE I guess it's not completely two years ago where this

happened in the view comp template compiler so again it was runnable to client side cross-ite scripting and we saw already in the um VM1. It was a prototype pollution and I already forgot to explain it at that point, but just to get back to that um a pro a prototype illusion is basically trying to inject um weird code to um the object prototype and I would assume

this is pretty central part of the application, right? So the same if you feel poison into water, it will trickle down. So yes, prototype pollution is pretty scary, I guess. So yes, this is a point where we really need to take care and do our homework to keep everyone and yes, Vue is already protecting us a little bit. However, there's some edge cases you need to be

aware where the automatic escaping might not be in place. The first one is an obvious one and this is taken from the view documentation but I cannot stress it enough. It is this line here. So basically trying to use a template directly and getting it executed, getting it compiled. Never do this. Never use untrusted templates because here you have an arbitrary JavaScript execution and it can get

even worse if you have serverside rendering. This is a direct server breach because if the user has this provided spring, it will write the rules. So yes, be really really careful when it comes to that. Never ever ever ever do this. Don't. Another a little more sneakier exception is the VHTML directive. it is this one When it comes to a HTML injection, which is basically this one,

this directive disables the guards, the castle guards. So the auto escaping we talked about before. So if you need to render raw HTML directly, be really really careful. See this example here. It is an image which is user provided. But if it cannot be rendered because there's no source here, it will go to the on error and there is an alert. So be careful to use it.

If you want to use it, please think about sanitization I like to go for dump purify, but there's lots of libraries you can use. So basically going here and sanitizing the input. Okay, this is a bad place to draw. Maybe here it's better. It can work like a filter. So basically doing all the sanitization for you and render any scripts unusable. There's another place which is especially

interesting for SKL injection as well. The URL injection. So I'm talking about Href here. There you need to make sure to take care of the sanitization as well. It's pretty similar. So make sure that your URL will adhere to protocols. So if it's not HTTPS, HTTP or MAC 2 um it will do sanitizing as well. So Okay, that's a little small plus um stripping out everything which

might be of risk. So, this is it when it comes to some edge cases, but there's one which is a little more tricky because the culprit is not technically our view application. It's something different, but we need to stop people using it. Imagine the fair warning things. We have an another evil cat. Not in green and black, please. So evil cat and the evil cat wants to

trick the castle into doing things but gaslighting the people doing things. So they basically do something completely different what they than what they perceive. So I will finish this impostor from before be because it's and it's basically using a mask or an invisible cloak. It has its attack vector. So basically a really dangerous and sus button we shouldn't click. But one way to make people click it

without knowing that they click it is using the cloak. Let's imagine it. It's like a curtain. So the button is still there, but it's basically covered by something looking legit and in worst case by something looking exactly like our project. Legit friendly button. So the user will click here instead of our website which means that the attacker embedded or even mimics our website. This is called click

checking and what I basically talked about right now it's one variant. There's one more recent one which was interesting especially if you're taking care of accessibility and password managers. There were some malicious sites where they the attackers hit hidden input fields listening to the autocomplete functionality of password managers and this is super scary because every one of us doesn't like to enter passwords right and for people

who have cognitive disabilities they need it. So basically getting accessibility and security into composition uh competition sorry but I will not get too deep into it because otherwise I will not mind your time. But yes these are lots of angles where clickjing could lead a user to do certain things without being aware of it. But there's something how we can block those attacks. So let's get back

to our warden. We will give him another way of keeping us safe. So there's the friendly warden. I will copy it real quick to be mindful of your time. And hopefully I find the right spot. There it is. And of course the one will keep their shield. So it's not like I really remove it. But let's imagine we will take a look at the back side of

the shield. So like a how is it called? I don't know how it's called in English. those small pieces of paper we wrote when we were in a nex right with some let's call it tips. So we have a document here for the wardens. In best case they know it by heart but they have a document as well and on it there's like requests to the world

and who is okay to be let in or to use our library or our books or whatever is inside of the console and who's not able to use and yes this is basically in the real world it's called CSP or content security policy which is our ultimate false field to try to get inside jobs under control. CSP is basically a HTTP response header that defines where the

browser is allowed to load resources from and where not and define some rules to get that it's set in store. This is a small snippet how you could do it. The first one is basically blocking everything. So this one says like we will not be allowing any other resources being load or embedded or the other one basically um specifying trusted sources. So in the um castle analogy

sister this is nothing we can um configure in plain metal view. So if you only use Vue and nothing else, you need to use your hosters configuration. But if you have next in place, you can use its configuration directly. For example, by going by Nitro's rule uh root rules, difficult word or even easier use the next security module because it gives you the opportunity in its configuration

to automatically generate strict CSP headers. So yes, there's lots of ways on how to do it. And I already see we're running out of time. So, let me wrap up real quick. And let's keep it a little more um general so it's not only ovas. There's a logo. I had a clipboard so I don't need to completely hurry up. So, our view shield. Let's define our view

shield. This is basically everything I want you to remember when you go out of our talk and need to wait for me to merge all those sketch notes into one document. So the first thing is view already has our back in a way. So it automatically escapes some user provided content. But that's not all. So we still need to be the last line of defense. It's still

important for us to do our homework. For example, especially when it comes to C XSS cross-ite scripting mind the extra mile. No matter if it's the view HTML directive or href or click checking, go the extra mile. Sometimes be a little more stricter when it comes to sanitization using tools, stuff like that. Mind your dependencies, no matter if it's in your inside of your build, inside of

all the packages you include. And don't ignore dependable. Please, I'm sometimes guilty of that too, but it's not a good idea to do that. Don't underestimate view router when it comes to access control, but be aware that it's only client side. Use content security policy and remember that there's a community helping us. We're not alone. There's OASP. They have lots of resources to help us guard our

applications. A small other shout out. If you work with you and you see something suspicious or maybe even a security issues, please don't hesitate to contact the team so they can fix it and fix it for everyone and keep us all secure. And I guess that's about it. The full sketch notes. So everything we were drawing together, I will just merge it into one big um document.

So we have actual sketch notes. You can use it as a cheat sheet. Come back in like one or two hours. As soon as I can, I will upload them on the ZQR code. And if you need something to read while waiting for the sketch notes, there's a QR code showing what I'm working on right now. So, with that being said, my name is Ramona Shraring. I'm

a developer advocate at Octa of And I'm so happy to have you here. I felt so secure to do this live thing, which was plainly scary, but you made it worth it. Thank you so much for being here. Find me somewhere around here on all social media platforms, you know. Thank you so much for being with me. Thank you so much, Ramona. That was so much fun.

I think we all want a copy of those sketches. Definitely. So, before I announce our next talk, uh just to see how many of you loves karaoke. >> Not so much. Okay. Few. Few. Okay. So just to remind you uh we will have the after party after the last talk at 6:30. We have two pank we have karaoke and the shuffle board. So I will see you

there. Okay. Our next talk is a special one because we don't have one speaker we have two speakers. Jacob has been building websites since he was 11. Teaches web performance at university and plays drum. Alen has over 10 years in software. fell in love in with Vue back in the Angular days. Together they will share the real story of a complex migration. What worked, what didn't, and

why they chose Vue and it was the right choice. Please welcome Yakob Shortter and Helian Rivera. Okay, all yours. >> Good. Thank you. >> So, everybody still awake? Good. Yeah. Woo. Yeah, that's the energy. >> Yeah. Hi. Hi, everyone. We're really excited to be here today because three years ago like Halen and myself, we were here in the audience and we thought, wow, like one day we

want to stand here on the stage and yeah, here we are. It's really cool and we want to show you how our story today um about how we migrated a desktop application to the web. And yeah, let's get started. But before, who are we? Clicker. Yep. My name is Saka and funnily enough, my initials JS fit to what I'm doing since nearly three decades. Um, because I'm

Yeah. started building websites when I was 11. And honestly, like with all these innovations happening every year, I still really enjoy doing it. Yep. And uh my name is Elan Rivera and no I have not been working in human resources since I was 11. I've been a developer. I like it a lot. My passion is in web development and I've been doing it for the past 10

to 12 years and together with Jackup we work at a company called Nime. So what is Nime? Nime is an open-source data science platform. It's got released in 2004 and over the time it grew to over 300,000 users worldwide. But beside the open source part, we also have commercial offerings which are used by more than 150 um well-known enterprises. Yeah, to me this sounds pretty interesting. And

when I joined Nime um eight years ago, my like front end friends asked me, "Hey, Jacob, what are you working on? Like can you send me a link? I want to see something." And I I didn't wanted to send them the link because back then, Nime was an 800 megabyte download looking like this. it's an Java desktop like application based on Eclipse. Um, but yeah, you get

the idea here. Like Nime is a visual data science tool tool allowing anyone to work with data basically by building workflows by connecting nodes and configuring them without coding but you can code a bit if you want. It's very powerful and established and uh because it's because it's open source like has a lot of integrations and third party integrations extensions um but its potential is a bit

limited as you can guess right um because it's like the desktop application and also our commercial customers they ask us hey it would be much easier for us to manage um this um running in-house right um if it would be a web application So this is why we and some more developers got hired for to transform this into a modern web experience. Um here you can see

uh one idea of like the early designs where we wanted to go in the direction and these of course are like just a couple of examples but you can maybe sort of guess the complexity that the tool has because uh the the nine product is not just about building workflows. You can do a lot with it. You can execute them in the background. It can run through

a lot of data. You can create visualizations, reports, uh, dashboards, interactive data apps. It's a software that's been around for a long time. Uh, so we had a lot of work ahead of us, but I mean we maybe we can bite code it. Sure, it should be easy. Um so we started the journey to build a new workflow editor and of course we first wanted to assess

what framework to use and spoiler alert we chose Vue because otherwise wouldn't be here and yeah and like I think one thing we liked a lot about Vue is the great DX and Dragon was showing it earlier this morning that there's this like special thing about Vue and once we started using it it was like really really nice and especially it's it provides like an easy onboarding

for developers that don't have a lot of experience with front end development and because we come from uh like there were a lot of developers with the Java background. This like made it a bit easier for adoption. But of course the most important uh criteria for deciding this was that the logos really fit well together and this was like we go for it. But of course when

we were getting ready to start the development of it uh something else happened and we had to >> yeah priorities shifted a bit in the company because we realized that actually we had a lot of interesting content which was only available in the desktop application. So content like example workflows showing use cases how to use nime to solve this and that right and to improve the visibility

on the market we wanted to put this content online and also make it indexable by search engines and that's why the idea of building a content platform first um came up. So we started looking into frameworks that could help us with that. And yeah, we knew we needed serverside rendering for the static content, right, for search engines, but also client side rendering because we knew also that

this likely we will add more features to this like it's not only about like a static and further the framework should be flexible for all the future upcoming things but also be a bit ofru structured right um so that when it grows um it it has a bit of structure. So since view was settled already, we of course looked into next and it was in a very

early stage. I think we started with uh next version like a beta version of KN 2 and um yeah we liked the direction it was going. It looked really promising and of course of course we did >> final sanity check. The logos also fitted really nicely together back then like now the KNX logo looks a bit more rounded. >> It's still a triangle so I think it

>> Yeah. Um so and KNX turned out to be a great choice. Um over time this platform grew to like the main entry point for many of our users and let me quickly show you how it looks today. So basically you can imagine it like GitHub for data science. It's actually called Nimhub. And so you can search for workflows, you can collaborate in teams. Um but also

we have enterprise features um in this application. Um like for example being able to deploy workflows you have created as a data app. This is what we call like some interactive um app um for business users for example, but also deploy those workflows as web services for example. We have many more features in there but uh we cannot show them all but we want to highlight some

of the challenges we faced during the development. So yeah it started small but now it's a big like enterprise front end with over 200,000 lines of code. um it's deployed to multiple environments software as a service uh on premise and with this like there comes like a high dynamic feature set right we have feature flags uh permissions licenses that you can apply um and also on the

back end we have like many microservices that we need to handle all um with one like big front end luckily with KN U Nitro came in and that helped a lot to um improve on on this side and also um to build a back end for front end layer um that we are using here with all of this and nowadays multiple teams working on the same codebase.

um ownership and architecture gets a bit tricky and this is what we are currently like facing and trying to improve with with like a feature slice design inspired architecture but after hearing Jakob's uh nice talk yesterday um and also speaking to Daniel I think we we will look into uh KNX modules and also KN layers um again again yep but now now we have the content platform

we take a step back and we go back to the UI and we want to finish the user journey. So we have this workflow. Wouldn't it be great if we have like some way to edit the workflow and that's when we came back to the workflow editor which was the original thing we wanted to start with. But before we do so we wanted to set for ourselves

a few guiding metrics. Um for example we know that we want to go to the web but of course we still have to support a desktop application. So we want one single codebase. We don't want to write everything twice. Second, we want to go for incremental adoption because the tool has been around for a long time. It has a lot of features and so it's very impractical

to migrate everything all at once. We have to figure out a way that people can start using it while still being able to use the features in the legacy application. Um, of course, we also wanted to focus not on feature parity but rather value par. What this means is like we wanted to assess what are the features that already exist and uh like individually like take them

one by one and say okay this is more aligned with the feature like with the future of the product and bring those first rather than just like yeah let's just do everything. Um importantly we also must not break any existing workflows because the tool like a lot of people are using it in their companies they're running a lot of data through it. Uh so we have to

make sure that everything that used to work before still works in the new application has to be completely backwards compatible. And of course last but not least we can innovate because this is a good opportunity. We're doing a lot of things a new so we can revise the UX uh bring new features like new quality of life improvements. So why not do that? Um but still I

mean with that said we still have this Java application that we need to bridge uh to the web. And how do we do that? And of course we need a browser to do that. Uh in the beginning what we did was like we experimented with SWT webview. This is provided by Java. And what this does is just it spin up spins up a native operating system browser.

Uh but under the hood because it's using the native OS browser and the majority of our users are in Windows that meant Internet Explorer 11. And this is this is not a good commitment to make. So of course we looked into something else. uh in this case the chromium embedded framework alias CF and for those who might not know CF is what's used uh under the hood

by electron apps but we cannot do an electron app because electron apps have a node back end we have a Java back end um so this doesn't work uh luckily we found this company from Argentina called Echo and they provide such a wrapper they provide something called Echo Chromium and this wraps around CF and interfaces very well with Java specifically in our case with an Eclipse Eclipse

an Eclipse and PD environment and it also provides the communications that you can get to to the UI. So what we did uh we added this little button here. This is the classic interface and what we added was essentially something we call the perspective switch and when you click this button what you see here it's a browser bean spin up with a basic very basic hello world

application but this is now HTML your like use in JavaScript. So now the world is your oyster essentially. And uh so next we can look a bit into rendering. So here uh these are the main primitives that we have in our application. They're called nodes nodes. And maybe from the get-go you can imagine that HTML won't really work for this. So we went for the next best

thing which is SVG. And SVG had a big advantage for us. Uh a lot of these nodes were already written in some form of another as components as view components for the content platform which was developed before. So we could reuse some of that code and um yeah using SVG in Vue it's pretty easy. It's like just like HTML you can pretty much do everything that you

can do uh in HTML. However for us this presented a challenge because set index is three in SVG essentially because there is no set index. Everything is based on the dome order. And luckily, Vue has this very nice feature called teleport, which we use heavily on the SVG canvas implementation uh to essentially retain a good component structure while still rendering the things in the order that we

wanted. Um, of course, after many iterations, this is kind of like how it looked like a bit in the future. Uh, here in the background, we can see the web UI. This is still the desktop application. Uh, you can see in the background the web UI being powered by CF. And in the foreground you can see that it integrates with the reg the legacy features that already

existed. This is a Java application. So we we get to the state of mix and match which was really good because it lets us like still develop things and just continuously improve. However, this is just a summary of the implementation of the workflow editor. There's still a few interesting challenges that we run into along the way and we want to share with you some of those. One

of those challenges are our forms because in fact we have many forms in the application. For example, if we look at the screenshot again here, um to configure those nodes, um we have a form and we have over 3,000 nodes. Most of the nodes are written in Java and some in Python. So we needed to find a way how to transform those forms into like this new

like web um web form and um most importantly the extension developers of n they should not need any front-end knowledge to do that. So we did some research and find a nice library called JSON forms. And with JSON forms, basically you define like a JSON forms schema describing the form that you want to build. And then there's a JSON forms renderer that can plug into your view

components and then you can render like your own components based on this scheme. Then again like we created like a like a little SDK for Java and for Python which allows developers to just annotate their Java and Python code and the SDK then transforms this into a JSON form schema and in the end um it will turn out into a nice web- based UI and you can

see the UI like the forms can be quite complex with some conditional logic and so on in Thanks to the mix and match Ilen explained before, we were now able to ship those modernized forms already within the like classic desk application. Right? You see in the back this is like still Java, but in the front there's a modern dialogue but also we could combine it with the

new workflow editor that we have built, right? So that we have the workflow editor, the new one and also the new forms. Nice. Yep. This is pretty cool. Uh, unfortunately, this there's still another problem. Uh, this window that you can see in the foreground is still running a separate browser instance. And because we know we want to go to the web, we still had another problem to

solve, which was how to embed them at runtime because we need to make them that they're all in the same window. And the reason why we have to do this is because, as we said before, we have a lot of extensions and we do not know at time what the extensions are. Only the user can decide what extensions they install. So a lot of these are generated

at runtime and we can we have to fetch them. Um this is kind of like what our initial approach looked like. Uh so we had the main application. It's like the application shell that is running the main view uh application. And what it would do is it would fetch uh what we call internally a UI extension built. This would be a bit library build and would be

fetched at runtime and would be registered dynamically in the main application. And this worked for a bit but slowly we started to notice some issues. uh for example, we started having like a lot of CSS coping conflicts because the reason is like uh both the main application and all of these UI extensions use a shared UI kit that we built in house and sometimes there were like

code being written that would override some of those styles uh from the shared components and because we're embedding everything into the same instance the scoping conflicts would arise and they were very tricky to debug and very tricky to predict when they would happen. So you would have like the UI loading something and then all of a sudden a button starts to look a bit funky. Um, another

problem we had was view version incompatibilities. Uh, the team that works uh my my team that we work on the like the main editor but the teams that work on the UI extensions they are separate teams and they often have like different update cycles for their dependencies. So there were come times for example where we are using Vue 3.8 eight, but they're still using 3.5 under like

extension. And when we pull that in, there's maybe like a bit of an incompatibility there. And another problem was that in order to make this work, we had to expose the application like the view instance into the global window, which did not provide like technical difficulties, but it's still a potential security issue, right? Because it's just exposed in the window object. So, we had to like take

a different approach to solve this Yeah. So we again wrote a little SDK. This time we called it Nime UI extension SDK and um this handles the embedding and the communication between the main application and those standalone um UIs. It supports two modes. One is the iframe mode and this of course has best isolation, best sandboxing and also from a security perspective is the best. So especially

for third party extensions this is um the way we wanted to to go but it has one issue and this is your that you are tied to this visual frame right you you cannot escape it which is a good thing on the one hand um but we had use cases where we for example wanted to show like a popover or a model dialogue um from out of

those standalone applications which should overlay the main application and that's why we also implemented this shadowdom mode which basically renders a view application into shadowdom. Um it also has some um JavaScript and CSS isolation. So it works pretty well and we use this for our in-house um UIs that we built. Also the nice thing with this is um like with both actually but uh mo mostly with

the iframe is that we are not tied to view right we can load any kind of application in there and that's what we use for our visualizations where we um use the Apache e- charts um framework all right so with all of this that we described so far we reached a very important milestone for us and I think This milestone deserves a little drum roll. But you

heard before that I play the drums. But unfortunately, I couldn't bring my drums here. Um, so I need all of you now to do a little drum roll with your feet, right? Can we do it? Let's start. Yeah. Yeah. Yeah. A bit louder. Bit louder. Bit louder. Yeah. And stop. Cool. Yeah. >> Thank you. Really cool. I wanted to use the web audio API for something more

or less useful one day. All right, but back to our milestone. Um, with all of this, we finally had the whole application for the first time working in the browser in a usable state, right? You see we dropped an Excel file here. Then we um you like you can see like you can expect inspect the data. You see the configuration like our forms, you also see the

visualizations. So the whole thing really is working. >> Yeah. And we also have some AI features by the way like it integrates with all the models. It does some stuff for you, but I think we've had enough of AI so we're not going to show any of that. >> All right. Um at this point we also want to point out that really like um Helen and I

we we did not develop this ourselves, right? There was like many developers at Nime um who are likely watching us here on the live stream, >> phone of us. >> Um they were all helping and it took a huge effort to migrate um this application not only on the front end side but also on the back end side infrastructure um UX the product side and so on.

So yeah because it's running on a browser now >> I can like respond to my what are you doing? No, no, don't do it. No, no. >> Why not? >> You're going to send your friends. No, no, no, no, no. >> I think there might be still problems. You have to make sure things because you know things can go wrong like Oh yeah, performance. Yes, actually this

is one of my favorite topics and we indeed had some performance issues. Alpha Nime provides like a way how to wrap like complex or split complex workflows into tiny pieces. They're called Nime components. Guess what some users do? They build huge workflows. And you might remember that we're using SVG for this rendering, right? And with SVG, yeah, every element is rendered in the DOM. So the more

elements you have, the slower it gets. And yeah, you can see here that the performance with big workflows was not acceptable at all. Luckily, Helen had a few ideas. Yes. Um so we set ourselves to replace uh this approach and of course we first looked into a canvas implementation and at this point we did not want to rewrite everything. So we wanted to look for some tools

that lets us retain the same architecture that we had inside but kind of like map from A to B and we looked into for example some tools like comjs which integrates great with Vue. Uh but unfortunately we did not have any meaningful performance wins in the PC's that we made. So we had to keep looking and then we thought okay what about WebGL and we found this

framework called PixJS and for those who don't know PixJS is like a 2D rendering engine for game development in the web. It's pretty cool very well maintained like great performance uh but it lacks a firstparty integration with Vue. But the PC that we made with this uh we had to raw dog it with vanilla pixie but it was really good. The performance was great and we said

okay what do we do now? Uh but thankfully Vue has this thing the custom render API and like I know there's some guys from TJS here at the conference so they all they know about this because Tess is like using this to work. So we had to say okay maybe we have to write one ourselves for view pixie uh for pixie in this case. Uh but the

view community also is great and this already exists. It's called view3 pixie and with this we were able to get uh working. So we're back here. Um so let me show you how that looks. Here on the left side we have uh the SVG implementation. This is a very simplified example. On the right side we have a WebGL uh snippet using Vue3 Pixie in this case. And

like most of the magic happens here. Like here in SVG normally what you would do is you would bind your paths but in the case of WebGL everything happens on the render function which is powered by watch effect. So normally you have to draw all the things but you can have your reactive dependencies in there and whenever it changes it would just schedule uh to the render

uh batches that Pixie would like redraw on its next pass and it would just get synchronized with a scene graph of Pixie. And of course again this is a very simplified example. There's many things that we had to do from scratch. For example, there was no CSS that we could reuse. So we had to style a lot of things. For some cases where performance was more critical,

we had to like go a bit around and use directly pixie but overall um I think the results were really good. Uh this is the same workflow that Jack was showing before. Uh same amount of nodes but in this case the the interaction for dragon is like very very smooth and like not only this was like a nice effort but uh it also opened the door for

future more performance optimizations because we are now in full control of the render output. So this is really good. Yeah. Thanks. Yeah. To recap our journey here like a very rough timeline of our milestones that we had. Um in reality they did partly also partially also happen in parallel, right? The development um of those milestones. Um but yeah um and now this year we are really looking

forward to finally launch the in browser editing officially. This is the me next uh big thing we are going to to release. Yeah. Yeah. And uh of course you know like not everything that we did is userf facing like there was a lot of work that was happening behind the scenes. Uh you're all developers so you know like the story. We had to do on a lot

of like view 2 to view three. This was really smooth. The API was very stable. The guide was like really easy to do. Nox two to Nox 3 was a bit of a anecdote but yeah and yeah I think we also had like a a few other things. >> Oh yes. Oh yes. Yeah. And we still need to go to next four. Yeah. >> Yeah. But I

think in general all these things are worth it like performance improved, the productivity improved, all these tools are moving in the right direction. So it was it's worth worth uh spending the effort to do that. Yeah. And we have some more learnings that we want to share with you. Um I will start with the ones that didn't go so well. Basically also like a summary. Um first

thing yeah Helian mentioned it a bit like the next tree migration was a bit tough for us honestly but partially it was also our fault because with KN 2 we and like as I said like we started with a very early version right we implemented quite a lot of custom workarounds for framework functionality and all those workarounds they fell on our feet when we wanted to upgrade.

So a lesson learned was here like try to stick to the framework. Uh try not to work it around too much. Next thing yeah we underestimated what our users would do with the app as you have seen um regarding the performance and also not isolating the embedded standalone UIs. Yeah didn't turn out that well. And one thing also I would like really like tell you or like

hope you you don't use it that much because it was a pain for us. Um in the initially we used a lot of deep styles um as Helen mentioned and they were a pain later on. Um so we try to avoid them now um everywhere. Um of course on the flip side there are many things that went well like for example we have focused on this approach

of doing things incremental. I was it's really good for us also for the users. We were able to get people testing things and this combined with this mix and match state where we are able to like let people still use the legacy features combined with the new UI. It was very good for for for feedback. Um we kind of maybe inadvertently focused on this mantra to make

it work then make it good and then make it fast as indicated by the performance section. Uh maybe in hindsight we could have looked into the performance a bit sooner, but of course we're also understanding a bit the domain and like what we wanted to implement and getting expertise implementing this like new canvas and like it was good that people could try it out and we at

least at the end discovered this use case and of course importantly listen to user feedback. Um but also don't get discouraged by it. Like we have a large forum in the community and people are very like passionate and vocal especially because the tool has been around for so long. They have opinions about like very strong opinions about like how things should work and sometimes like they're right

and we it's good to listen to that feedback but sometimes it can get you a bit depressed. Um yeah and of course we would not be here if it wasn't for like all the great many tools that exist in the tool in this community. So, I'd like us to to give it up for the open source All right, that was our journey, our story. If you have

any questions to that or you facing similar challenges and want to have a chat, um feel free to reach out to us here today or online. And in case you're curious um how we solved certain things, you can check our code um on GitHub. And yeah, thank you all for listening. See you around. Thank you guys. All right, everyone. It's time for a break. We will have

a 30 minutes break. Don't forget to stop by our sponsors booth. Also stop by the 000 octaboot for a chance to win VJ Amsterdam next year tickets. See you in Turkey. So he knows how to cook something good. He's here to give us the inside story on Aster 6, the biggest realist yet. A new Rasbased compiler, massive performance improvements, and a few things that haven't been announced

anywhere else. Exclusive. Please welcome Matt Kane. >> Hello. Um, I'm Matt. Uh, I'm on the Astro Core team and I'm here to talk about Astro 6. Um, it launched this week. Perfect timing. came out on Tuesday. Um I didn't know that when I um for when I pitched this talk. So the title that um you will see on your program is saying what's coming up in Astroex.

But now it's what has happened So who am I? I'm Matt. This is my site. Um I have been building for the web for not quite since it looked like this. Um, I'm on the Astrocore team and I maintain quite a lot of open-source projects. There's a few of them up there. Um, I used to be on the Gatsby core team as well, but now I work

at Cloudflare where my job is making frameworks. All frameworks work well. So, um, how many people here have actually used Astro before? So, it's quite a few. Quite a few. You know, I mean, I understand here that this is not an Astro conference and um Astro is not just about Vue, but there is uh quite a bit of view in there. Um but I'll give a short

intro to um Astro for people who don't really know about it too much. Astro is the web framework for content driven sites. It's uh built on Vit. We don't try to be a framework for everybody. It's not you. If you're building a dashboard or something like that or a chat app or something, you probably don't want to be building it with Astro. But if you are building

a content driven site, so blogs and um portfolios, docs, e-commerce, then we think that Astro is the best choice. And devs love it. It's number one for satisfaction in the state of JS for three years running now. Um, the downloads have just gone through the roof. I mean, been a lot, you know, people have clearly been doing a lot of vibing in since January, but we've basically

trebled the downloads in the last year. Um, and lots of sites are using it for, you know, massive global brands and weird little dev portfolio sites that supposed to look like 35y old Macs. So, what does an Astro page look like? Uh, this is an Astro page. This is a valid Astro site, an Astro page. It's just HTML. If you know HTML, you know how to write

an Astro page. But it can do more. If you add a front matter fence, that area at the top is now TypeScript that runs at build time. Um, and you can pull in components and do all kinds of stuff in there, and that just works. But if you need some interactivity, you can pull in framework components. So I've pulled in a view component here. I've told it

to hydrate when it when the page loads. Um and then you can just pull that in there. And it also supports um React, spelt, solid, and so on. But you can even mix those in um the same page if you're being want to be crazy. and if you add that, then it turns it into server side rendering. So it's rendered SSR um instead of being rendered at

build time. And um what this what this means is that Astro is really fast out of the box. I mean you you have to try hard to make Astro slow in the browser. It's it's pure HTML and you know HTML when it's just HTML is fast. So but then when you do have the interactivity you are doing it on your own terms. You're saying how much you

need. You need that little bit of interactivity in there and you'll pull that in and that will do it. So, Astro I've said is for content driven sites. So, we have some extra tools in there for helping manage content. Um, here is how you define a content collection. So, with this is content collections are a way of managing all of your content that you have on a

site from wherever it's coming from. Um, a lot of people have big folders of markdown that they use because, you know, Astro is awesome for doing docs sites. Um, and this is how you would do that. You just basically say here's pointed at a folder. These are the um the markdown files and you can define a schema. So if you do that, then it's passed um at

runtime and uh type checked and you get um you know get get all the full TypeScript types and everything in And then in your page, you just call get entry, load it, you render it, and there it is on the page. And it's it's really as simple as that. And I think, you know, it's a lot of people that keep asking me, I mean, they genuinely ask

me why is why why do people why do I think that people like using Astra? And I think it's just really easy to get into it, you know, and it it makes it easy to get started and easy to do the right thing. But loaders aren't restricted to just the file system. So here, you know, this is the one that we saw before. Um, but you can

also write a loader that pulls from any API, a CMS or database or whatever. Um, and you define it in the same way. So here we've got a a one that's loading from a store. You put the loader in there schema in the same way. And then you can just use it in the same same way. you get entry, call a product, mix and match, and it

just just works in So that's how content collections have worked up until Astro, you know, before The problem there is that obviously this all of this data is loaded at build time. And even if you're running in SSR, it's still the the data that was um loaded at the point of a build. So that's great if your pages don't change very often, but if you are using,

say you're doing something that like changes regularly or you're editing a CMS or something like that, you can't use content collections. You know, you have to you lose the benefits of having a content collection. You have to hit the APIs and stuff manually, which you know, I mean, it's it's not as nice. So um in Astro 6, we've added live collections. So these are basically exactly the

same in terms of how you use them except for they run at runtime. So you can live data that updates. And the point is that it works you can use it in just the same way and you get all of the nice developer experience that you get from other content collections like all the type safety and the the way that it's all centralized and you the way

that you can reuse all the loaders and and um you use it inside the um you define it in a very similar way. You just create the loader and there it is. And um it's just defining a live collection instead of um defining a a buildtime collection. But obviously the problem with live data is you are having to hit your API every time. So, you know, obviously

that is not going to be as fast as having a fully cached um data that is already there at runtime or pre-rendered. So, what you are going to um what you're going to run into is that you know you want to be caching this. Now, you can do caching with Astro now. You can set your response headers and cache it like that, but it's it's not very

not very ergonomic. So what we have done is um we are in Astro 6 we are adding root caching as a so this is experimental in Astro 6 um but let me just I'm going to try and show you how this um how this works. So let's get this beautiful site here I'm going to um blame on Claude. I said, "Build me a demo site." And pointed

at the docs. Um, I didn't tell it to create a every possible Dutch stereotype that you might have heard of. Um, but it saw it was for Vue.js Amsterdam. So, obviously that assumes that that's all that, um, Dutch people want to to learn about. So, anyway, here is this lovely site. Let's look at some waffles. Um, it's, you know, this got the it's got some view components

in there for adding to cart. and yeah, so you've just got that and you can see that these view islands are hydrated, but the rest of it is all static. So, but what I'm going to do is I'm going to switch us over to the code which I have got on the wrong screen. It's doing so well. really doesn't want me to drag it up to the

other monitor. Um, there we go. There you go. So, let's make this a a little bit bigger. So this is how we are loading the um this is how we're defining the live collection. This looks like how we are um how I showed it on the screen before. This is uh showing the where we're defining this product loader. Now this loader here is um a fake one

that I've created but this just shows how simple it is to define. So it's just a load. A live loader is just uh an object with two functions. load collection and load entry. Um, load entry, it literally just grabs the data, returns ID, data, and then this is the secret. This here is a cache hint. And what we've got here is a um a last modified time

coming from there and the tags. And what we're doing here is we're tagging it with the ID of the project. Um, we've also add um the product and this we're also adding a category tag there as well. Now, this has to be this ID thing here has to be unique across your across your site. Um, and then what we what we're going to um what we're going

to do there is I'm going to show you how we use this in the Now, I'm grabbing this entry here using get live entry. I'm pulling it from the products and then this part here is I am calling Astro cache set on that entry that I've just grabbed. Now what this does is this tells Astro this page uses this data. We may try and make it run

automatically but at the moment it's something that you opt into and this is basically telling Astro this is a thing that you need to depend on. Keep an eye on this. We'll look at that look at this one later. Um if we go back to our um our page here, we um we can see that this is actually cached. Um we can see this. I'm going to

make this a bit bigger so I can actually see um you can see that this one was there load was rendered at 1428. And as I reload it, nothing is nothing is changing. So here's our our waffles. there 1631 that was just now and as I reload it it's not it's not updating. So this means that this this has been cached. So obviously waffles are amazingly delicious

and there's a big been a big run on them. So you decided that we need to bump the price. So we hit on the thing to bump the price here. Price has gone up. It's pretty shockingly expensive I have to say but um people people still love them. So we go back to here. We reload it. Oh no, obviously it's cached. You know, not rocket science here.

So, what I'm going to do here is I'm going to hit invalidate. I'm going to go back there. I'm going to reload that. It's updated it. It's um invalidated the cache. Um and then if we go back to the index page, it's also invalidated this one as well. Now, um so this this here is running on a um uh just let me just switch back to my

slides. Um this this that I've been showing you there is uh the node provider. This we launched I mean this is running experimental that we launched last week or this week even. And this current one is just an in-memory cache. So it's not doing anything anything special and it only works on node because you it doesn't make any sense to have a memory cache on there. So

this is this is not so interesting but um we don't really want you to use our built-in caching that is only there for places where you can't run a proper cache. And what I mean by a proper cache is one from a CDN provider. So I've got Cloudflare there. I work there. That's not, you know, that's that's just um that's just one example. But um this isn't

ready yet. This will be sh shipping in the next few weeks. But basically the idea is that platforms like Cloudflare and Netlefi and Versell have got really um sophisticated programmable caches now and these are just you know real HTTP caches. using the web platform. Um, so instead of inventing our own caching, we are doing this thing that we always try to do with Astro, which is to

use the web platform. So we are just using headers. We are using the bog standard cache headers. Now that doesn't ne, you know, that might not be particularly interesting. We're just sending a cache header. You could do that, you know, you can do that by hand. Um, but we are also wrapping their cache invalidation. Now that is one where each platform is is different. They have all

got their own ways of pl um uh purging their cache. We are wrapping around that you just um call astroach set or you call astro cache invalidate and it does it all behind the behind the scenes. Um and they all support the same cache cache control headers there. So you can do the the ISR type thing with a stale revalidate. You can do cache tagging. you can

invalidate invalidate that really um anywhere and this works across different providers. What I would really love is that we would hope that this API this this cache API is um pluggable enough that people can implement uh uh cache providers for you know fastly or for ones like for Reddius or whatever and that is going to be um something that you know means that this can be used

absolutely everywhere. So, um I'm going to just switch back to my um and so I'm going to show what this actually looks like because what we saw just there was only the um only this inmemory thing, but we want to see the the real deal here with the with the cache header. So, what I'm going to do is I'm going to get rid of this memory cache

and I'm going to change it over to this CDN cache provider. So, I've created a CDN of my own. Um, don't tell my bosses. Um, so we this is this is a very simple one, but this is just actually showing how simple it is to implement. Um, it is basically just literally here this is the API for creating a cache provider. Set headers invalidate. So, you know,

anyone can make that. Um, and this is what I'm doing for the headers. You know, it's a bit messy. I'll put we'll make some helpers to make this easier. And then for invalidate, I'm just logging it. So, um, now I've changed this here. So, I am going to have to to rebuild because this doesn't work in dev because you don't want your caching happening while you're in

dev because that way lies madness. Um, so what I've now got is I've got this so I've now got this new CDN cache provider that I've got in there. So, um, to open my, um, my cache tools here and I'm going to go to the network tab. Um, let's go to So, I'm going to reload this. And then what we're going to see here is, um, nope.

We've got all of these cache tags that have been associated with this page. So, this is the tags for every product that's on here. So, if I then um go to another page and load this one here, you can see that um you've just got the um product and the category food. Then we've got these CDN cache control headers. I've set up stale revalidate and all that

kind of thing for it. Um, and then this isn't actually caching now because this is a fake CDN, but this would this what this would do if you had a real CDN is it would see this cache control header. If you've not seen CDN cache control, it's a it is a web standard one, but is designed just for CDN. So, your browser will ignore it. So, um,

it should be used by the CDN that that then just handles it. Um, but the point about this that I'm trying to get at is that because this abstracts everything away, you can just if you're writing some code, you don't need to think, oh, am I on Versel? do I need to use um purge cache or do I need to use um net versel cache tag or

do I want to use netleify cache tag or we and if you're writing a library so say you are writing um a loader for a CMS you don't want to have to tell them that um oh if you're on this platform you use this way of doing it that is all abstracted away all you need to do is call astro cache set or astro cache invalidate um

and it just makes makes everything uh a hell of a lot simpler And I'm just going to finally just show the way that the invalidation works. So when I was hitting that invalidate endpoint, all it was doing here was hitting this API that I've got. This is just an API endpoint. And here it is cache invalidate tags. And in realistically what you would do this for would

be say you would have a web hook from a CMS for example would call out this and it would say okay I've you've edited a page. this is the pa this is the object that has changed and we are going to invalidate everything that's on that uh that uses that object and that doesn't necessarily mean to need to be one one page to one um uh object

so you know if you are doing a complex page that uses like lots of images and um things like that from a CMS you can pass those all to astroach set and it will merge them and create the unit um the union of all of the tags and then when you edit one um icon on of one um caption of one uh thing, it will invalidate every

page that uses that image. So um that is uh the way that the live c um collections are going to be working with root caching coming very soon. So I'm going to move over next up, next feature for Astro 6, Astro 6 includes automatic content security policy support. Now if you have ever done this by hand, you will know what this is big deal this is. If

you've never done this by hand, you will be going what's a content security policy? Um it is content security policy are a browser security feature and they are bar none the best weapon that you have got against things like cross-sight scripting vulnerabilities. Basically what they are is an allow list of scripts and things like that that are allowed to run on your site and it can covers

everything. So whether you can load a font or whether um a script or styles or anything like that. um you can set it as a meta tag or an HTTP header and the browser will block any script or style or image that doesn't match that. if it's such a powerful thing, why do so many sites still get cross- sight scripting vulnerabilities? Because uh CSPs are a massive

pain to do. They are really, really annoying. Um, you've basically got to do all of these things of getting hashes of every script that has to update every time you change any of the content or you have to set a non value which has to change on every request and be applied into the HTML. It's just really annoying. And um, basically we decided that we needed to

do something better about this. And it's it's really um it's been a massive amount of work to get this going. Um, but what we have done is we now managed to keep track of every single inline script or whether it's a loaded if it's a linked script or anything like that. We keep track of everything. Um, and then this is how you enable it in Astro 6.

That's all you need. That sets everything up automatically. You can twiddle add extra bits in there if you want. So if you say want to do third party embeds or something like that, you can add them in there. But this if you just drop that in yet there your site will suddenly be blocking like 95% plus of any um vulnerabilities like that. Um so I am going

to show an extremely quick demo of this because I already have that demo there. It is the um this demo. Now you may have um spotted this already. This is the content security policy um header that came from this. Really, do you want to be generating this by hand? Um each of these here. So if we say this is the script um this is fonts are saying

you can load any fonts from this this origin scripts. These are ones that have you're only allowed to load ones that have got these hashes. And it's the same with styles and everything all like that. And it just works just literally I just added that line and it just did it. So that's pretty cool I reckon. Anyway, um, next up, fonts. So, um, I'm going to take

a sip. So, content sites. They are fonts are important. Content sites are about reading. So, typography matters. Um, this is another Claude special here. I did this on the Euro Star on the way over. Um, I said, "Show me do something that uses Google Fonts." Um, and I wanted to demonstrate it. This is real recording. This is what you can see here is the way that it

jumps around. Now, um, this is called the flash of unstyled text. Now, Google fonts are brilliant. We like, you know, they're they're great that you've got all of these fonts that you can have, but Google fonts are free. But they've got strings attached, you know, and you they are free only in as much as you are paying for them with your users privacy and it's not your

privacy to spend. So the conclusion is you shouldn't use these third party font services whether or not these these legal things stand. I mean just I think personally ethically you shouldn't be using them. So um you should self-host them and that's annoying. So what um what we can do is we can um make that easy for you and we can make it so that we can do

some extra little tricks to stop that jumping around flash of un um unstyled text. And this is how you do it. This is live in Astro 6. Now you define the font provider. Oh look, I'm using Google again. You can still use the Google fonts because it doesn't tell anything about the user. it just load downloads them as you're as you're getting them built. Um, and then

you just set all the settings for them and it um downloads them at build time. So there's no GDPR stuff and then it generates size adjusted fallbacks to make sure that the things don't jump around. So what that basically means is it will say you know you are using a fancy uh serif font that you're loading from Google. We're going to do a placeholder where we use

Georgia that we specially hint and adjust so that it um so that it fits. Um that is powered by Unifont and Capsize under the hood. Thank you, Daniel. Um it's uh the example here is Google, but it also supports loads of others um thanks to Unont. So it will it handles uh like Bunny and uh Font Source and even Adobe. Um and I'm going to show you

the fonts. I'm not going to show you the fonts because I've only got two and a half minutes. So, I'm going to skip straight forward to this one. This is a little lesson for all open source maintainers. Um, if you get the opportunity to nerd snipe somebody from E18, jump right on it. Um, I don't know how many of people know E8. I know was had some

stuff yesterday, but this is James. Um, this is what happened the next day after that. James opened a PR 11 times faster. This is an example of the other thing that we've been focusing on. We've been doing all of these optimizations of the builds and rendering of Astro going through everything from the the comp compilation and the rendering pipelines because you know Astro originally was not really

optimized for SSR or anything like that. It was you know it was you know it was good enough but not good enough but but not you know not first class. It's getting better. It's getting a lot better. So this is what we've got. But the big thing that we've done is this next new project. The the original Astro compiler was written in a weekend. Um Nate who

wrote it, it was the first Go code he'd ever written. Um this was previbe coding obviously. You know this was uh 2021. Now that considered obviously Nate is amazing. Um he's he's now does Clack which is used by absolutely everything. Um but he he wrote this and it did us really well for a long time. Um that gopher put in a lot of a lot of work.

Um but it was hard to maintain. So we've done the traditional thing. Uh we've rewritten it in Rust and we've done the newly traditional thing which is we've based it on top of OXC. Um so Erica who's built it, she's um we're actually using a fork of oxe at the moment but we should hopefully get that upstreamed. Um, we forked o o xc to add support forastro

files. Um, and obviously the nice thing about that is because it's oxc this will give us support for oxint and ox format as well. Um, so I'm really excited about those because I'm huge fans of of those projects and we all are and we decided to keep it in the tradition of before and this new one was also written in a weekend. Um, this was written by

Erica with a little help from someone called Claude. Um, as part of the work though, this was the the first thing that she did was write a proper formal spec for the Astro language, which there hadn't been this the spec was whatever worked in the um in the old compiler. And because of that, because of because she put in the hours to make the um spec, then

the the compiler worked really well. Now, this is experimental in Astro 6, we're already seeing some great benefits. So, we recommend you give it a try. And then the final thing is the Vit environment API. Now this is pretty in the weeds. I know really in terms of any audience you probably more people here know what the environment API is than anywhere else but is still pretty

much in the weeds. The important thing is that this unlocked the biggest project that we've worked on in Astro 6. The previous version um predated SSR of the dev the dev server. We've written an entirely new dev server and the previous one predated SSR in Astro and basically we've done a full rewrite of the dev server that uses full SSR all the way through it so you

don't get so many of the works on my machine things. So it's um it removes a whole class of bugs. Um, and it also unlocks some cool stuff like the fact that you can run because it's running the same thing as in SSR. You can do stuff like you can run the real Cloudflare runtime in dev. Um, so it's not being emulated. It's the real thing. Um,

and then here's a slide I had to add. So speaking of things built on Cloudflare workers, most of you probably saw Evan announce void this morning. Um, this these primitives here are the sort of thing that wouldn't have worked in dev on Astro before, but with this because of the environment API, they will be able to do this. And this applies to all platforms. Now, this is

my caveat. I haven't actually checked this with Evan. I I was going to ask him, but you know, your mileage may vary. Um, so this is and this applies to any platform. This isn't just Cloudflare. This applies to any platform that's got custom APIs that run at um uh run at runtime only and not in not in dev. So that's Astro 6 launched on Tuesday. We've had

over a thousand contributors to Astro since it started and every launch blog we thank everyone who contributed to the latest release. And for Astro 6 that list was so long I'm just going to show you their faces. Um we've had 13 over 130 I think it's more like 140 contributors to just Astro 6. Um and that doesn't include everyone who did like why do we ecosystem stuff.

So thank all of you. Um, and so yeah, that's me. Some come come by and say, "Hey, hi later." And find me on Blue Sky. Um, and I'll also find some of these limited edition Astro View mission patch stickers. So, thanks a lot, everybody. Bye. Thank you, Matt. Okay, our next talk is going to surprise you. When I say view, you think browser, right? components, templates. Well,

our next speaker is about to change that. He's a senior software engineer at directors and my favorite detail. He's also a pilot. He's going to show us how view activity system can power the back end. And it's not just a theory talk. There will be a live demo here with a QR code. So, get your phones ready. Please welcome Mark Beex. I'm just feeling >> good afternoon

everyone. So, it's one of the last talks which is always I know everyone is tired and they are not very excited to have more knowledge cramped into their brain. So this talk is by design um not that knowledge transfer but just to have fun a little bit. So uh we are going to look at how we could use Vue uh beyond the browser. Uh a little bit

about me. My name is Mark. If you want to uh ask me something just show picture uh share a picture you took at the conference or something like that. I'm very active on X. There you can find me at markba. Uh I'm a senior software engineer at directors where I love working at a super secret project. Can't tell you yet. H got me almost. So yeah, I'm

from Luxembourg. Anyone else from Luxembourg here? Last time there was someone. He's not here today. Okay, maybe he's watching live. Okay. So, uh, in my free time, I'm a private pilot, which means I fly a lawnmower with wings. I'm not a private jet pilot or something like that, but it's still pretty fun and takes a ton of uh work. So, it's main hobby, but I also do

coffee roasting. I still have a few uh bags of coffee of self-roasted coffee with me. If someone is is interested after the talk to get one uh just approach me and you get one and I make conference videos as you saw earlier today. So that's a little bit about me. Let's get into it. Okay. So what we are uh building today. So by the end of this

talk view will control a light show in this room. So if that's not a cool premise, so just stick around. It will if everything goes right, it will be very cool or at least it will be funny as my teammates say. So yeah, you might ask yourself, Mark, this is a front-end conference. Why are you talking about backend stuff? Um, yeah, but let's get I'm on the

wrong slide. Okay, doesn't matter. So uh yeah we are going to build with a bun back end with view or even with view use a few things and websocket we going to build this slideshow and yeah so why view in the back end you you might ask yourself Mark this is a front-end conference what are you talking about back end why should we uh be doing that

so um yeah a great way to deeply understand how something works is to try to use it for something that's it's not designed to do I don't know if I think this was last year or two years ago there was a guy that got Doom running on Typescript types not on type JavaScript but TypeScript types. So I'm sure I don't remember his name but I'm sure this

guy learned a ton of stuff about Typescript uh by trying to use it for something that it's not used for. So maybe this is like already good enough. But there's more. Uh yeah, you can just do things. Uh why not? Uh it's fun. Uh which is the purpose of this talk. So we have a lot of AI this AI that you have to you you if you

don't do this, you're left behind. Yeah, let's forget for 26 more minutes about that and let's just have fun with a little bit of coding. Uh this should already be enough, but there's even more. So um you can use your Vue.js JS paradigms that you are used to in the front end, you can just use it in the back end because why not? And ultimately uh yeah,

you're going to learn about a little bit about view reactivity in the process. I actually had the idea for this exact talk uh five years ago, a little bit more than five years ago, and I asked Evan like on on Twitter back then. I asked Evan, "Hey, do you think there's a problem uh by doing that?" And uh Evan answered, we get to that later, but also

Sebastian Chopan, the creator of Nux, answered. And he said, "Glad I'm not the only one thinking of this." So that's also confirmed my idea. So maybe this would be cool. But I didn't really make a talk out of it because I thought it might be a little bit stupid, but I think it will be very cool if it all works out or very funny. So let's talk

about what is reactivity actually. It's pretty easy. When something changes, we update everything that depends on it. Pretty straightforward. So uh there's this concept track. So when a value is read uh we note down who is reading it and then when uh when we trigger something so when a value is written we notify everyone that we noted down in the list that we wanted to track. So

that's basically it uh about the reactivity. So how does Vue implement reactivity? Well, uh, Vue uses JavaScript proxies, and I could give an entire talk about how this works. There's actually one I I gave it a few times, uh, building Vue from scratch. So, if you're interested in doing that, uh, it's still somewhere uh, on YouTube, but very basically, it's something like this. So we have a

proxy that if you talk to the proxy you can intercept the writing and reading of uh of an object and you can add uh additional logic to it. So for example if we uh if we log out the color what happens? So it goes to this getter. So this get and set is called traps but so it goes to this trap getter trap and then uh it

writes this down. Okay, so this function wants to be updated when uh or called when uh this object gets and then on the other side when we have something like this uh we set the color uh we go to our clipboard. Okay, so did someone wanted to be notified about this? Oh yeah, this function. So we execute it and it's updated. So this is the basis the

basic premise of how Vue implements reactivity. A few things we are going to use in the back end here. This is all uh basic stuff. You all know this. Uh we are going to use ref reactive computed watch and also watch effect uh functions. Okay. How does something without reactivity look like? So this is what it would look like and there's already like an issue. So if

we have this color and we have this function set color and after we set the color we have to do a bunch of uh maintenance. So we want to broadcast this color for example we want to update a log and then we also actually have to calculate some derivative uh value out of it. So this thing here in red, we have to do this every time we

change a color. We want to set the color. So it might work, but you can't really be sure if if it's if in a bigger codebase it's like always going to be executed because you you write another function that sort of updates the color and you forget to do this and then you figure out very late that something didn't get executed. So with reactivity um how does

this work? So the the idea here is you describe what should happen and view figures out uh when. So in practice it looks something like this. So we have the the ref here of the color and then we have two watch effects. Actually this could be in one watch effect. I don't know why I did two now that I'm looking at it but it's fine. And then

uh when we execute the uh color value set so if you set the change the color then uh these two watch effects are being executed. So my point is that you don't have to worry about when is going something going to be updated like just view takes care of it and I find it super interesting because yeah it's you can do some cool stuff with it also

in the back end. uh there are some uh backend friendly adjustments we might want to keep in mind if we work with Vue in the back So this is the answer that Evan Yu gave me when I asked him uh hey is this something I should be careful about and basically he said yeah uh maybe just make sure that you use shallow ref and shall shallow reactive

uh if not so if for example we have a bun object a node object that has a bunch of stuff for example let's say a websocket connection that has a bunch of stuff if something changes there it's all going to be rerendered which makes the performance abysmal So yeah, we note that we use shallow ref and uh shallow reactive. And then another thing is uh sync watchers.

So uh the default pre and post uh flush uh flushes for a watcher. They are uh before or after the DOM updates. But yeah, we are in the back end. We don't have a DOM. So we can do sync. If we set it to to flush sync, it's going to execute immediately because we don't need to to batch effects uh for DOM updates. Yeah, because as I

said, we Okay, it's demo time. First demo. There are two bit demos, but let's see some uh live coding to just bring you the idea a little bit closer of what I want to do. So, here we have is the code readable? Yeah, probably in in the back it's called readable. Thumbs up. Yes, perfect. Okay, so here we have it's not a very useful example, but it's

cool to to show. So, we have a a dice roll here, and every time we click it, it generates us a new uh a new number for the dice. And then we have the previous roll, and we have the score. Why doesn't this work? Oh, yeah. No, it does work. So, the game it's not Yeah, the game is, but it's actually not a game that if you

have two times in a row the same number, it deletes and then your score is zero again, but your high score stays. So, if we go through it, goes up and then we we had twice the number three, the score goes back to zero, and the high score stays. And this is all now without reactivity. And what we can do now is we can try to figure

out how to do all of So we have here a uh a variable last roll, second last roll, score, high score, and then we roll the dice. We do some dubious uh assigning of things here. And it's already a little bit messy, but let's see. So let's just throw away this entire roll dice thing. And from this I just uh I actually just want to keep the

name because so I can copy it fast and I don't forget And I want to start with import the ref watch effect from view is already installed. So I don't have issues with with the connection then. So what do we have here? Uh I want to have the uh rolls dice rolls and this is just going to be an array ref and uh then we have like

the last roll. So this could be a computer property. So the last role is actually we forgot to import this. Okay. So the computer property and this is the last row value at last row value length minus one. Okay. And then we have the second last roll which is very similar. It's just >> rolls. Oh yes, thank you. Rolls. That's why it didn't offer me the right

thing. This should look this looks better. And then minus two. Uh so we can get rid of these two. Then we have the score which is uh also a Uh computed. Now we do use a rolls and uh we reduce this accumulator and oh and the current uh this is going to be What am I doing wrong here? Okay, so this should be fine. It adds all

the values in the array. Does this look correct? Yeah, I think so. If not, we figure it out. And then the high score is just going to be another ref. I put it up here with the others. Uh high score is a ref of zero. And then we can delete that. And then we just are missing the function of roll dice. And uh what do we do

here? So we have a and let's see if I have this right in my so we have the floor of oh math random um six and then plus one so a number between one and six and then we can return the roll and also we can add it to the rolls we just push it uh roll Okay. So, this should actually already work. Let's try. Oh, great.

Oh, yes. I see I uh I pass this. Okay. So, let's do another one that is just stats. Maybe stats is a computed again. Uh we return this would be easier. so yeah, so we probably just want to do this value. Does this work? Okay, so let's try it again. Oh, I don't use it. I don't use it. Thank you. Thank you. Thank you. Life coding is

always fun. You should try sometime. Uh I don't use a stat. So this we can delete and then we just pass the stats >> thank you. So this works as intended. I think what's the the high score doesn't work but we are getting close to the time so we just ignore this uh because it's not really that part of the what I wanted to show you. What

I wanted to show you is that we can just copy all of this out. We create a new file called use dice ts. Uh, we export a function use dice and then we just put all of that in there and then we return. I think we just need the uh the roll the dice and and then we can do import dice from dice from use dice. And

then we just need to use the up. What was it? Stats and uh roll dice. Yes, thank you. Use dice. And then we should have should still work. Yes. So it still works. And you see we have the same thing. We just have a composible just as we would have in frontend Vue.js just in the back end. And it it works fine. So yeah, this is the

first demo. Thank you. So, now comes a little bit more of a fun and exhilarating part of the uh of the talk. So, um, we're going to do a light show. And for that, I can already tell you, you will need all your smartphones because the light show is going to be your smartphone, which is a little bit crazy given the shaky internet or uh Wi-Fi situation,

but we will try. So, the idea is we have an admin client, which is on my computer. it uh sends something to the back end which is view reactive. We have their size effects. These side effects uh send a websocket broadcast and it sends it back to the client to the browser client which is your phones if everything goes well. So uh light show demo. I when

I pitched this idea to a couple of colleagues, friends, I got a ton of support. For example, something like this. Like um you can see my team, they are really behind me. They did uh make a poly market of if the demo goes right or not. And uh but jokes on them, I can make a ton of money today. So yeah uh as you can see they

don't have boundaries but um yeah let's let's see how all of this goes. So the idea is you connect to the demo website. I will show you the the QR code in a in a minute. Then we chose the correct section. So the the idea is um there are sections section one two three and then when you log in when you load the site it gives you

the section to to choose. So let's make sure we are all on the on the correct page. So where's more or less one/ird let's see until here everyone until here from your I guess from your right uh is section one. So here until here section one and then from here to here section two and then the rest sections three. So let's try this. You guys are section

>> one section >> and section >> perfect. Can't go can't go uh anything wrong. So now that we know which section we have, it also helps if you put the brightness to 100%. So the idea is you log into this website and then you hold your phone up and hopefully like you remember like I'm old enough to remember when you had like lighters at concerts and then

suddenly it changed to just the the the light the flashlight on the phone which is also pretty cool. But here I want to control all of this with uh a Vue.js powered back end which I mean I'd say that at the beginning why not? So let's try this. Here's the QR code and while you try to log in there I will set up something. Where did I

put it? You probably wondered what you probably wondered what this is. Uh you will find out in a minute because the idea is you hold up the phones but you still see what I see. So this will be the mount for my camera and because my talk was not complicated enough I needed to add some like spicy thing here cable. Let's see. So this is my camera.

It's me. Hello. Okay. It's probably gonna be something like this. So, let's see. Did everyone have the code? If not, I show it in a second again. But let's see if we have already logged in. Not even. Oh, yes. We have a bunch of Oh, this is I'm going to be rich today. Okay. So cool. Uh, brightness to 100% please. And then hold up your phone. Awesome.

And now you will probably be able to also see yourselves here. Okay. This is pretty This is going a lot better than I than I planned uh than my Oh, no. Don't Don't zoom in. Thank you, Apple. But I don't know. I don't also don't want portrait. I don't want studio. Actually, studio looks pretty cool. Okay. So, let's try >> Yes. Let's turn off the section number

two. Uh, hold on. Okay. So, I see this this is working. So please hold it up. And then we have here I can set up a few um custom uh steps. So custom pres um yeah custom steps. So for example now red, green and blue. And then I could uh for example for the second one just turn off the middle section. And then we play this. All

of this is controlled from the back end. So off, on off. Actually, I can I can make it a little bit faster. Come on. It's a little bit not synchronized, but I'm not too worried about it. It should be fine. But now, let's do something like rainbow. It's a preset of colors. And let's play it. >> Yes. And if we set this to 76 uh BPM. Cool.

And then we we play a song that I know has 76 Now I need the the audio. Let's see. It works. This is by the way is AI generated song >> we can turn it upwhere together watch the eosine seats and code on our lives following along as the framework unra. This is more than a conference. It's a family we found. The loudest crowd, the most beautiful

sound. Welcome to Amsterdam, the world's biggest stage. And we're all in communion. Components and composables. The code that we ride. I hope everyone's having the time of their life tonight. >> Okay. Thank you. Sound we can turn turn down that. OKAY. >> Thank you. So this word someone from my team owes me an extra beer there, >> right? Yeah. Perfect. Okay. So we have a few minutes

left. So we can just take a look see at the code here. I actually wanted to show this before but I was too excited to see what happens. Um okay cool. So we have the back end here. This is like the the index file and then we have a bunch of like composables in the back end. For example, we have here something like use connections. And then

here we have important the shallow ref. Do we see it? Yeah, the shallow ref in order because these are going to be sockets a bun sockets. We don't want to observe all of that. We just like if something something's added there. Uh we have a few computed. I know this this could be all very like a lot easier, but just to demonstrate the computed here, I did

it We have uh what is interesting maybe the slideshow is interesting for the last few minutes. So we have uh a ref here for the sequence at which step we are. We have a bits per minute. We have an is it playing or not? So I can pause it and um we have at which current step it is. And then I can just uh pause and resume.

So we here we have the uh use interval function from uh from view use. Uh so yeah we can we can import anything from view that isn't using any DOM related stuff which is pretty cool. Um so yeah here we yeah we just keep doing this. If it's playing it sends something if not so it cycles through the steps. And yeah what else do we have here?

Yeah, we watch the colors and then we send the appropriate light signal to the uh to the referencing section so to say. So yeah, I think this is it. Uh thank you for participating and I hope you like the Just one more minute, one more thing. So this uh I have to go through the entire thing again. Hold on. Why did I put so many animations here?

Okay. One last thing. Is Alvaro here? >> Yes. Alvaro, if you can come down. Just one minute. Just I have one and a half minute more. >> Alvaro, give it up for Alvaro. So yeah, just this week Alvaro and I launched a podcast called F It Ship It. So if you want to subscribe, here's the PR code. It's now on Spotify. Uh Al, want to say a

word about F it Ship It? >> It ship it. >> F it. Ship it. So it's it's a a not so serious but also serious tech podcast. We talk a little bit about tech stuff and tech adjacent stuff. Not so not only AI stuff, not only very technical things, also things surrounding uh the tech industry. And um yeah, I I mean who needs another tech podcast, but

why why not? Today we learned why not? It worked out fantastically. So thank you Thank you Mark. That was amazing. Okay, our next speaker is taking us into the future of e-commerce. He is the co-founder and CTO of Alokai, an active member of VueJS community and a co-organizer of the Vue.js jazz meetups in Poland. He's going to show us what shopping looks like when it starts inside

or Gemini. Please welcome Philip Rakovski. I think we have to duplicate it. >> Oh yeah. Okay. I can do this. I can do this. Wait, just remove this. Yeah. What the heck happened here? >> Hello. Give me a minute. We are having a display. Uh, oh gosh. Hello everyone. Uh, so as I was introduced, uh, I'm Philip Praosski. I'm co-founder and CTO of Alokai. I've been here

I think every single edition, also the online. Uh, so it's it's an honor always. It's pretty much the best event. I'm looking always forward to the most every year. And today I wanted uh to talk about something different than usually because usually when I'm here I'm I'm talking about performance. Last year I had a soft skills talk that I think is even much more relevant today than

a year ago. So if you uh if you haven't seen it, you can check it on YouTube. But today I want to talk uh about some cool things that we are building at Alokai mostly from the perspective of a what if uh because we are living in a very interesting times. Uh you could even say that we're having a sort of dual revolution like from one perspective

AI is completely changing how we developers are building things. Uh some people are taking it really to the extreme just sitting with the codeex terminal uh or having some orchestrated agents that are doing the work for them. Some are just starting but we already know it's going to progress. It's going to be completely different kind of work uh that the one that we're used to. But also

in the e-commerce world uh it is changing a lot how customers shop and how people generally use internet right. Um so maybe the traditional way of browsing and shopping that we're having today. So we're entering from a website. We're looking for the products that we want to buy. We're adding them to the cart and then shopping further. Maybe this won't exist. Maybe this won't exist in a

year from now. Maybe everything will be happening within LLM, right? Or which is also possible future. Maybe it won't even be an LLM. Maybe it will be some kind of a different interface like maybe we'll be talking to some kind of earpod connected to our AI agent and this AI agent will be streaming things to our uh glasses the ones that Meta is building for example today

I want to talk about this future a little bit I want to give you a demo of something that we have built uh using the latest technologies available some of them are not production ready yet by open AAI uh as a glimpse of like what future could look like and really you know this is late you're probably extremely tired like the goal of this talk is not

to transfer as much knowledge as possible into you though there will be some here and there but mostly to give you a glimpse of what is possible and maybe encourage you to also experiment by yourself because to be honest it's hella fun like there are no best practices around those things like a lot of use cases it's pretty something that you're imagining for the first time ever

like no one ever did it. So there's a lot a lot of fun. Um so when we are talking about this shopping experiences of the future how I imagine this is that at least at least we'll be doing them starting with this kind of interface the the same way as we used to start with Google to look for something to search for something we'll be probably starting

uh here as well and add it's agp application that I was about in a moment. And let's say I'm looking for a red shirt. By the way, this is extremely indeterministic output of those APIs and they're changing pretty much every 3 days. So I hope it when I type this what could happen is that every kind of application every kind of vendor uh every kind of use

case will have their own application that will be actually running inside GPT. So that will be the only interface that we'll be interacting with but it will be part richer than just text. will be actually able to create applications that are running within JG GPT that understand the context of the conversation that have multiple components that we are building and let's say you know like I I

want to add this to the cart this is extremely slow but this is not my fault actually this is this is the fault of open AI we have added a product to the cart uh you know the LLM is aware of that it actually rendered another component then we can go further like we can go to the checkout the model is opening can fill the checkout details

I have some kind of auto field let's say that I'm view philip and let's go to the shipping address and let's go further and let's say again so as you can see everything is actually happening within an LLM like it's It's it's it's just an interface on top of that. But you could think like when we're having some sort of very complex configurators or this sort of

stuff like it's no longer a limitation when we are thinking about those LLMs being and pretty much operating systems right with their own app marketplaces uh with their own integrations etc. So okay we're adding payment method let's let it be a credit card. We're going to the order summary and at some point probably at some point maybe not but maybe at some point uh we'll be also

willing to go to the actual website because at some point this interface might not be rich enough right so it would also be amazing if we could go there uh and have the whole conversation actually within the LLM on our website transferred from one place to another. this is more or less how how we are envisioning this is where you're starting the conversation within the LLM but

you're doing this in a seamless way where at some point transitioning to the real application just continuing like we're having uh this products that we have added in a checkout all the details are still here we have this LLM uh that has all of the conversation right so that's going to be a start on the website itself uh obviously they're going to change and maybe I will

clear the cache first. So we are starting from scratch and you know we were thinking like okay how we can experiment with AI actually because obviously the most common use case is that okay we will be adding a chat on a site and we can actually you know play with that uh because why not and you know we can say you know instead of just having a

proper search query I can say like you know I am looking I am looking for a g for my friend for example this is the usual demo that I'm doing obviously it's not a search query so we would like AI to sometimes hop in, you know, ask some follow-up questions about, you know, what we're actually looking for. And some point, like I can say, no, he's into

snowboarding gear. Uh, show me some. And at some point, it it should propose us uh a product, right? Like, so this is what we'll be expecting from pretty much anything because the truth is like people will become ridiculously lazy. Like that's my prediction for AI. like we were trying to find shortcuts for everything with AI. Uh we actually don't even need to think anymore. Like you have

a chat, you're just asking questions, it keeps flowing, right? Um so the the interfaces of the future for sure be much lazier. But okay, so this is the most common use case. But what else we can do? Maybe we can experiment a little bit with the interface. So we're also thinking like okay so when you're looking for some stuff in the internet in general like usually how

you're doing this is that you have some use cases in mind right like you are at least some people most people I hope when you're buying something you actually have a purpose for this like you have a use case right uh so when you're browsing those things and when I'm browsing those clothes and I think like okay so maybe I would like to you know to buy

something that I can wear during winter but it would be amazing if I can still use this clothes in spring maybe and in autumn right so very particular use cases that are also quite hard hard to replicate on the filters like it's very personalized so with AI we can actually do it in a way where we can ask winter summer spring I cannot talk and type at

the same time sorry uh we can ask AI to actually go through those products look at the attributes look at the descriptions look at the images look also some at some knowledge that this has and just write it for us, right? And this way we can actually start creating more dynamic interfaces where we're not only you know having a chat on the side that can assist in

some things but we're also making the interfaces themselves more generative and it doesn't always have to look you know like a big thing. uh my point is actually completely different even the first use case that we have seen like AI should be put in the applications in a very gentle way in a situations where you know we are seeing that we can actually make some kind of

shortcut so so this is just one of those examples right uh and now the fun part I mean I hope that was the fun part at least to some degree but the fun part is like how it's made uh so let's talk a little bit about that by the way Have has any of you seen this uh series on discovery long time ago how it's made? I

was a huge huge fan. Raise your hand. Yes. Yes. So this is yeah we're this generation. I was absolutely a huge fan. I think when I was 13 or so I was spending days really watching it. Anyway, so a high level architecture like how it how the thing that we have seen work. Uh so the product that I was demoing is called Alo Compass. Compass I think

it's a cool name because it's guiding you, right? Uh so what we have up until now are pretty much four main components. One component was the storefront. I think it's quite obvious which one was this. Another one was GPT. It was also quite obvious which one of was this but they're both connected to our integration layer called allocate connect which can be any kind of middleware even

NexJS middleware as well or NexJS middleware or just a simple NodeJS application on express like uh you can think about this this way some kind of serverside code and this is connected to open a APIs but it's not exclusive to open air actually the same thing can can work in uh entropic as Now on the store, this chat on the side and pretty much every other feature

like how how we made it is that we're defining this as a workflow. So a workflow is just one AI feature. Let's let's call it like that. Uh and this workflow could have some actions uh like searching the products, we already had that. Like adding something to the cart, we already had that as well. Uh and then we can also define transitions. So tell them like okay,

so from this action you can go to this action and then to this action. uh so this way it's a little bit more guided and we're not doing some random things and it is very helpful uh for AI to actually not not be cornered. Now uh within every workflow we are defining something called an action. An action is pretty much uh a single purpose like single goal

of an app and this goal here is for example to find products like you are giving it a prompt we're giving it access to some tools and this is this is where things are getting Because the way how we've built compass in general is that it is not trained on any kind of data. Uh well a little bit but the way it works the way we're trying

it to to work is to be a translation layer between a human input and the code. So when someone is writing find me erat shirt what it is really doing it is taking this and translating this to a search query and then doing it. uh we're trying to actually have a vector database when we're putting all the products etc. and it was okayish. But when we chose

this approach and we only trained AI on the attributes, so a very small subset of data. So it only needs you know what to fill into this uh parameters. The results were actually outstanding and the best thing it works pretty much plug and play. Uh so this is how it works on the high level. Uh another problem is we have seen on this side chart that it

is also rendering some components like product sliders sometimes a card etc. Right? Uh the issue is usually the response is streamed right when we're making an API to the LLM it is streaming the response. So what with the UI like how how we going to handle this? So the way how we handled it is uh we're actually making two requests out of compass. Uh so we are

getting there. We are asking for something and we are getting one response that is being streamed. It's a text and we're also getting usually much sooner a return from the API call just in a form of of a normal uh response that is not streamed. So it can be displayed immediately. This way we can display component as fast as possible and also without streaming. So this is

the example of the code uh of the search products method. What is happening here? Well uh first of all like we are actually uh creating uh call that is getting the data of the out of the e-commerce system. Second when we're already having this data uh we are having this function called send to browser and this is exactly what we have seen here. So this is the

second request that is going directly to the browser with the response of the data and also in any information what components to render. Um and then we're also returning the data to the LLM uh itself. We are adding a schema as well because when you're thinking about you know returns from the LLM to the front end very often you would like some kind of reliability about okay

what the what would be the format of the data that I can display on the interface like this rating for example this you know to display this rating we actually need define specific format. So this is the same story we needed for the component. Um and now in the UI uh we are just using a use workflow composible. Uh we are getting this data. Uh we are

rendering the dynamic component and that's that's pretty much it. Now the part that probably not many of you have heard about because it's still developer preview the the apps SDK. So the part that I was showing at the very beginning within the charge GPT this application that was rendered in there it is actually using a feature called open apps SDK. So how many of you actually heard

about it? A few people already. Okay. How many of you build something with it? It doesn't have to be production. No one. Okay. Actually, this is completely normal because uh first of all, it's extremely unstable API. Uh I've been in multiple situation when I was just demoing this this to the customer and it got broke right before the demo because they changed something. So, it's not a

production ready API yet, but it's also a glimpse of how the feature could look like. Secondly, uh it's still developer preview. Uh which means like there's not that much utility for this outside of just playing with it, but you can use it. And there is uh there there's also a protocol called MCP applications which is much more widely used also by entropic which is serving more or

less the same purpose. So like to have some applications displaying within the LLM chart and also because more providers are doing this we can kind of expect that this is how the future will look like right like we will have those dynamic interfaces within LLMs and they will more turn like from the just chat interfaces like operating systems with your own appos own app ecosystems. Uh so

when we writing this find me at church what is happening is that on this uh alokai uh middleware uh alokai connect we are having a compass MCP server it is receiving it and this MCP server has pretty much two important pieces. One of them is tools. So these are you know the the API calls that it will be making to retrieve some external data and resources and

resources are HTML templates. Uh so this is pretty much how we are spinning the server. Uh most of this code is really available like uh you can go and check model context protocol library and this is like mostly boiler plate code out of this. But what we are seeing here is that we are registering those resources. We're registering those tools. We're returning the server. Um now we

need a post request to actually let know uh the the TGP application about what tools are available, what resources are available etc to handle everything obviously. Uh so now the whole flow will look more or less like this like we are getting into the chat GPT we're telling it okay find me a red shirt it then it is being propagated to the uh compass MCP server within

the compass MCP server we're actually based on this prompt we are choosing specific tool using search products tool calling and then out of the MCP server returning two chunks of data and this is very important like we are having a context data which is fed directly into the conversation to the LLM. It will read this. But we're also having a metadata that is not fed into the

conversation to avoid a context ro and generally you know don't set too many information to the LLM that might not be even relevant for for it that we can use in the UI and the code for this looks that looks like that. So we're having this meta object uh within the tool definition where we are having uh our products. So this is pretty much the whole product

object that then will be displayed in the component. Uh and we are also having uh this uh this this category. What is very important in here also to notice and you will see this within all the MCP applications there's a binding one to one binding between the tool and the template. So every time this tool is being called when it is actually uh returning its data it

is also telling that it should be returned within this template. So we have kind of like a matching of the data schema and the data that we are fetching with the interface and this is what we are then sending to uh to this front end. By the way it all sounds like a rocket science but in essence this is an iframe. It's just an iframe. Uh and

you even communicate with the same way as within an iframe. Uh so now one last thing one last tricky thing. uh and I'm super proud of this because it took us a lot of hacking and I don't think there's any solution in the world that I heard about that is actually doing that. So this transfer of the context so you notice this this moment when I actually

left charg application and then I went to the uh storefront like our web application and it actually persisted the whole conversation out of this right you remember that part. So how do we do how how did we uh did it like first of all we just had this idea that it would be cool to have it uh then we came up with a solution like okay so

ideally the way how it should work is because this is there is a component that we're displaying in this application we should be able to save this context somewhere uh in our case that was radius database and then using a query parameter you know in the links in this application when we're getting into this application to retrieve this context. So, uh this is exactly what we wanted

to do. But the problem was we couldn't really find a way to extract this data. Uh apparently there is and still there is no way to clearly you know word by word get the chat history out of this conversation like there are there is some context about chat history. So, Chip is summarizing it to you and there may be some differences and sometimes if you will you

know compare side by side this and that conversation there are some subtle differences but we found a very nice hack. So when we are creating this MPCP server there was this method resolve MCP tools which is pretty much running every time an MCP tool is being called and it has some it has some parameters and arguments and one of those is chat history. So every time we

are running a tool we are also passing the chat history summarized chat history and uh this is something that we have used to actually in this particular place to just save it every time a tool is being called because every time we do anything a tool is being called save it to the database and then retrieve it on and that's pretty much it. So, you know, the

goal of the talk was really, you know, not to uh teach you how to do those things because the reality is is mostly hacking these days, but more to give you a glimpse of, you know, some cool use cases that can be uh done with AI these days that are not necessarily about creating some kind of conversational agents, but more about creating those experiences are consistent from

the chat to the application and then also hacking around a little bit with uh building applications within those chats. Uh so, you know, I hope at least some of you haven't heard about this and that it inspired you to do something cool and well, thank you. Thank you, Phillip. All right, everyone. Final talk of the day and we saved us something really special for the end of

the conference. Now we will join the stage is Torston. He is a senior fullstack engineer and IT consultant who loves sharing knowledge with the developers and we will have the ultimate game quiz when you can win special prize. So please welcome to the stage star. Mama. Hello and welcome everybody to the last talk of the day. I know that you are all a little bit tired and

at some point you want to go to the afterparty. That is the last thing on the list today. But before that I want to play a little game with you because we already had some wonderful talks today. So the last thing now is an interactive one. It is the view think you know it all the ultimate view live quiz. So take out your phones please and scan

the QR code on the top right. I can see some already did because on this little application that is open source and you will find it on GitHub. You can not only spam all wonderful emojis here but you also will see the questions and you can answer them there. So my name is Thoren Sasha. I'm your host for this little quiz. I'm an IT consultant, senior fullstack

developer and conference speaker and I'm currently self-employed. So if you need some help in an awesome project, you will find all my social medias on my website to.tv. Also, there are the projects, the source codes, everything is linked there. For this quiz, I want to have a special shout out and thank you to Alex and to Gileian. Please a small applause at this point because both of

them helped me make this happen and I can see many are incoming there. Oh, I hope the GPU is making uh way fine. This is um the next big thing. You all heard all the cool stuff about AI today. The next cool thing is buckdriven development. Please don't spam too much otherwise we will not be able to play this. Um uh yeah, we let it sink a

little bit. Don't too much please. You can fully test it after this talk, after the quiz. And if you find bugs, please raise them. Other than that, buck driven. We will see if it works. So, uh there are also prizes. Everyone that can that attends here can win or just take uh little magnets. I made 3D printed magnets and keychains. I have like 300 in this box

here. So just come after the quiz down here, grab one or two and then you can leave to the party. But also, yeah, this was the table when I just glued them together. Also, there's one big prize. It's the Fangok flower uh thing from LEGO. It's in the booth there at the right. So, at the end, one person will go with this home today. If there are

multiple persons with the same score, we will just get one randomly selected. But your score is calculated in the background. So best of luck. Let's start because now you know me, I don't know you. So what's your favorite JavaScript meta framework? Just so that we can test the software that we can see that everyone could join and everyone can click something. If the websocket is not updated

automatically on your phone, you have a little refresh button at the top. So you can just refresh it because this one is triggering. So I shouldn't uh be safe here. Okay. So we are getting many things here. 66% from 157 160 persons that are taking here place. That's a nice number. Of course there's no right answer here. Just to be sure, this answer here that you give

is not a point in the final score. Okay, let's see what we have here. 64% are using KN. Perfect on a Vue conference. That is um absolutely amazing. But we also have 7% that are using others. Okay, 6% 5% are using Assembler. You're all trolling. I know that. Okay, some are not using meta frameworks. That's fair. Maybe only just Vue or something like that. Awesome. Okay, so

the software seems to work until now. Let's go to the first real question here. Okay, that is now working perfectly here. Let me just minimize it. Okay, perfect. Next question. Yeah, I I don't know if you if you find the bug in the code, please report it. Thank you very much. How many how many additions of the Vue.js Amsterdam uh J Vue.js Amsterdam have been there including

this year's 2026. You see not the the answers here are not in the order on your phone. This is a random generated order. So your first slot is not my first slot here. So don't get confused there. But I thought it might be interesting that you can see how the people are going to have this scramble edition here. So I will just also open it on my

phone that I can read for the next one as well. Perfect. I think that is enough. I think you all already googled the right answer at this point. So we will just lock it here and then we will see the most people 44% say that it's the ninth and this is correct. It is the ninth edition. You all got a point. Congrats to you. Many people thought

it's the seventh. You must think about okay I can also here just close this. Um the correct answer is the ninth. It has been there since 2018. So it is the ninth edition because there also was some online things and stuff like that. You must count that in as well. Okay. Next question here is oh the emojis are coming in. So why does type of null return

object in JavaScript? I mean you can test it out if this really is the case but I think you know it that this is the case. Is it because it's a prototype of all objects? Maybe it's an historical artifact from JavaScript's first implementation. Or is it a special object type definition in ECMAScript or is it distinguished from undefined? Okay, we have like 50% people already gave an

answer. I will just wait around 60 or 65%. Okay, 65. That was really fast. 70%. Oh, that's was a close race until now. Let's see. I will close it like now. Okay. So the most people think that it's first implementation and uh it's like 38% here. That is the correct answer at this point. You all got a point. Congrats for that because the original implementation values it

internally. So object had a tag of null and the null pointer itself also had the zero. So that is something that is not fixed because it's seen like okay if we now fix this then we will crash so many websites and so many amount of existing code will not work anymore that this is now just state-of-the-art and it's now a feature not a bug anymore. So next

question here I hope that they will not stack up until but it seems like it. So if you type in console.log new date get month and we are in March currently. What will be returned? Is it one two three or is it the string March? What do you think? Oh this is rather clear here. There's no big doubt about what people think. Okay. I will give you

just a second. Like we're at 70%. That's that's nice. 75. Okay, I give you three seconds. Two, one, last chance. Perfectly locked. Let's see. Most of the people think it is two. And this is correct because we are counting from zero up. So this is the third in row but 0 one two. So the two is the correct. But maybe this will with the temporal API change.

So with TC 39 stage three, we will eventually provide there a new approach that we can use. We will see that. But for now, it is the number two for the correct Cool. Also, new points. I I'm really excited about the leaderboard at the end. At the end, maybe there are many more people that got all the questions right. Yeah, this is this is now the thing

here. What is not shipping in Typescript V6? We have um three options here are correct, but only one is wrong. So, find the wrong one. Is it the deprecation of legacy configuration options or breaking changes to align with the native implementation or does the temporals maybe will not come or is the core porting to go not the correct one? We are searching for this. Let's see what

you think. I hope I am as fast as you cannot Google all the answers but I will always too be slow too slow for AI to answer this. So, oh, we have ducks now. What were the ducks before? Nice. Okay, 75% already voted. Okay, we're getting there. We're getting there. Like four seconds for you. Three, two, last chance. Okay, I have to close it before it crashes

here. So, most of the people think that not shipping to go is the right correct thing. And this is right at in fact because Typescript 6 so um strata continuous JS based code base and they are breaking changes to be fixed and aligned and upcoming native porting and the porting itself the go porting is for TypeScript 7 for the Corsa upcoming so this would be the correct

answer it is not in TS6 perfect you are really really good at this so that's amazing let's go to the next because I know you all want to go to the party and want to eat something and 20 questions you see they are all mixed up some questions now now we had to JavaScript and Typescript now we're getting to the Vue and KN ecosystem and also to

the um frameworks around the the community around it as well starting with what's the default port for Vue's development server is it a uh the port 1 2 3 4 Is it port 3000 or is it port 5,173 or is it port 8080? I mean it's a little bit unfair for people that are attending here that also made my quiz at Vitcon as a little hint here.

I will not say more but seems to be a very close race here. Like 41 people think it's option three. Whatever option three is here I have no idea. It is randomized but something is taking the lead. Okay, like three seconds for you more. Two, one. Let's lock it and let's see it. Most of you think it is port 5,173 and that is indeed correct. default port

for KNX is something else of course but I can explain it to you because uh Vit is running your dev server and Vit in lead speech is the so the V is the five from the Roman uh thing and the rest is just lead and then you get the 5,173 as lead from VIT and that is the default port as a little Easter egg here. Perfect. Most

of you got that. That's really nice. I'm really scared of clicking going on at the point where the emojis are getting out of hand. Okay, I can restart it at some point. No problem with everything is persisted here. So, originally it was persisted in the KV store, but thanks to Gillian, it is now the Postgress database. So, we should not lose our data. Next question here. Is

it the next one? Yeah. What does the name view mean? This uh the person it could be translated in simple, in fast, in light or in sight. Only 24% are contributing at the moment. Is my use UI not updating or are you all dropped out? Is there a technical Okay, you're just thinking. Okay, that's the also fair point. Come on. At least 75% could click here the

correct answer. Is it is it not crash? Is it cr I heard the word crashed. Now I'm shaking. What? 75. Perfect. Perfect. Thank you that you have paid attention at least someone. So I will lock it here. And the answer site is indeed correct because the French wording translate to vision view or site. So view means just translated from the French site. And it is as easy

as that. More points for you. Coming closer to your Lego set. Awesome. Okay, next question up in line. I hope you're having fun at the moment. Are you still here? Yeah, I heard nodding. Are you having fun? have you awesome. I'm not asking because I have to wait. Okay, this is the moment I have to restart, I think. No, that is okay. Yeah, the slides are made

with slide. I heard that already on my right ear here. And the wonderful thing of on slide if you did not know that it is completely made with view. So you can just copy paste your view components in slide and then you can have all these cool animation and stuff like that. It is just view code. You find it on my GitHub. You can see it there.

And it's just view code and running all these amazing thing with websockets. And let's see. Oh, it's fast. It's fast now again. Oh, nice. So the question is when was the first commit of Vue.js made? Now you had a little bit of more of time while I was fixing the slides. Maybe you have looked it up already in the git history first commit. Is it 2011, 2012,

or 2015? I hear that people are starting to debate. That's very nice. I hope I give you something to talk about later as well. So we have 80% perfect. Maybe there was really a little technical difficulty here. I will lock it and then we will see 2013 is indeed correct for you. More points. Really nice. So the first commit done by Avenue was done repository in 2013.

The last version that was shipped in 2013 was in December and it was version 0.6 and the version 1.0 Zero was released in October 2015, nearly two years later. It was uh version one then. Really nicely done. Really nicely done. Next. Ah, get this so fast now. So cool. Um, is it the next one? No, it's not the next one. Uh, oh, it is the next one.

Ah, now you saw the answer. Ah, damn it. Okay, now I want to see 100% on the correct answer. No, it's not a data leak here. No, no, we're all professionals. So which directive in Vue is used for the two-way data binding on form inputs? Is it vbind? >> Is it von? >> Is it v model? Or is it vync? Okay, now you 7%. What is with

the 7%? Didn't they pay attention? Don't sleep yet. We have still some questions left. Okay. Can we make it at least to seven? These are free points. 65%. Come on. We We can do it. Oh, I don't really The problem is that if someone reloads the page, it could be that the total number of players can drop. So maybe we have some dead uh open connections now.

But that's enough. I will lock it because of course you all did it nearly with 100%. It's vodel. Let's see what the answer is. Oh, it's vodel. How cool. V model is uh syntactically sugar combining vb bind for the values and v on for the input events. And this is the two-way binding. Vzync does not exist at all. So this is made up. Okay, I really have

to wait next time. But that's okay. Some free Next question. Which of these is not a view state management library? I think you as of course awesome developers are using many and mostly three of them most of the time or at least have heard of them. Uh but one of them is not a view state management library. Is it VueX, Pina, Harlem or Volulta? One is wrong.

The other three you should heard at some point maybe read of it. It's PA. The next core team is debating if it's PA. Okay, that's that's kind. Okay, at least two are in the race. The other two options are very obvious, I guess. No, not so obvious. 1%. Okay, I will close it in four seconds. Three, two, one. Your last chance is over. Let's see the answers.

Okay, 1% thinks it's PA, 1% thinks that is a few X, but we can assume all of them know that these two exist. So, VA or Harlem is the question. And the correct answer here is Voltaar. VueX is the classic view state machine library. Pina is officially recommended for the store in Vue 3 and Harlem is a light lightweight state management solution that exists as an alternative.

Walter does not exist as a Vue state management library at all. And this is then made up here. So the correct answer is of course we now know it. It's volta. This is the first question that not the majority had gone right. This is interesting. Maybe you are really learning something here interactively. That's cool. Okay. Um I don't have to maximize because it maximizes automatically because it's

made by an awesome developer. Of course, no bugs at all until now. I don't see slowly falling thousands of emojis at the left and a not upcoming question at the moment. Refresh the page. Okay, I will do what you say and I hope that this is okay. Now the emojis hopefully will spawn again for my pleasure. I think I have to restart it again. We are more

or less halfway through. Bear with me. We will do this. Yeah, you see the the little pro progress bar at the bottom. So the last slide of course are the resource slides and the last last slide is the login slide. So you have to decount two of Okay, now we we broke it or we did not is it not is it >> is it another question? Ah,

okay. Sorry for that. Which uh of these is not a component library for view. Okay. On my phone it was not updating. My bad. No, not my bad. Uh which is not a component library for view. Is it beautify? Is it prime view? Is it next UI? Or is it a catalyst? One of them is wrong. The other three does exist indeed. So you can ask JGPT,

you can Google, or you can just know it at the end. I don't know how you got to your answers because the prize will get the person with the most correct answers and of course the cool magnets are for everyone. So because you're all awesome. So 63% may Can we make it to 70? It's like an auction now. Can we make it to 70 here? >> No,

not really. Okay, then I will close it in three, two, one. Oh, it's 65. That's fine. Okay. Which is not a component library for Vue. Most of you think that it is Catalyst. And this is indeed correct. Catalyst um is a reactbased UI kit by Tailwind Labs and it is not for Vue. So it exists but not for Vue. A little tricky but you all did very

well or most of you but of course Vertify, Prime View and NXUI are very popular. You heard of them I guess. So that's a cool thing. Oh, that is the admin login page. Why? What is happening there? Oh [ __ ] Okay, I have to login. Can we please uh turn off the screen real quick for me? Otherwise, I have to unplug, but I don't know if that's good.

I have to copy paste the password. That's why. Pass the password. Okay, I have to unplug it. If no one is deplugging the thing here, I have to deplug it myself. That was really worse from my case. I was like, it's a USBC mate. Thank Okay, that's okay. That's okay. >> Live things. What would a live demo be without bugs and problems? I really was like, it's

USBC that's transmitting my my tape. It's okay. It's Please don't break the back end. Thank you very much. I love you all. It is already broken. What is the matter That's interesting. Give me a second. I have to debug it No, not two hours later. Be kind to me, please. That is that is really unfair >> Yeah, I refreshed the page and I restarted everything. Have you

tried to turn on off again? Yes, I did. I really like that one. >> Nice. >> So, I hope someone tracked at what uh question we were. >> Yes, I also tracked. Thank you. So, okay, we are back at the here. So, you get back the screen without my passwords. There's no environment file what whatsoever. H. Okay. Okay. Something really, really, really went downhill. This we had

>> you didn't have that one. Yeah, that's >> This should be the next one. That's right. I hope the screen uh Yes, it's it's okay. Perfect. Okay. Which modifier is not a default modifier on view model? And we're back. By the way, thanks for fixing myself. My problems. Is it lazy number trim or capitalize? Sorry. What? >> Without AI. >> Without without Oh. Oh, exactly. My buckdriven

development skills are improving at this conference. So, one of them is wrong. Um the other three are correct and existing and the only three are existing. There are not more. If you read the um documentation there are only three. So one is wrong here. people are getting back here 60%. That's Also I have no idea what what broke now but start restarting everything always helps. That's the

nice thing about the being a developer. first first rule. Okay, like 70% already done. I will close it in two one. I'll close it now. Let's see. That is a really tight race. Okay, I cannot toggle. That's all. Then we will just I love my life. what's going on here? Toggle log. Toggle log is like I have internet. I have everything. Okay. Then we just talk through

the questions and we have a winner from the first ones. That's that's fine. That's fine. as it is. So this question what is the default modifier? The correct one would be it is capitalize because the others lazy trim and number exist. Lazy listens to the chains events that you put in your input. The number casts your input to a number if it is valid of course only

and trim trims the input. So next question we only have some few left. Maybe each slide we get a new bug, a new problem. And at the last one, nothing will work anymore. We have no lights in here. >> Okay. I tried my best. >> Sorry. >> Yeah, it's okay. We will. This is exactly what I also have intended. No. >> So, the last questions uh would

be very funny, but that's not a problem. You can watch it later on the GitHub. Oh, we can just we'll just talk through them real quick. That is Let's do it that way. The next What? Refreshing. That's It's broken all the way. >> Are the servers restarted while I'm on stage and doing the quiz? Thank you. I think someone um Yeah. Okay. Okay, so the next question

or you already saw this is a free question for you just free knowledge. The next question would have been which few related postcard podcasts never existed? Then you had four funny names. Um the views on view is existing. The enjoy the view and dj view are existing or existed and the viewpoint was the wrong answer there but it exists in the ecosystem because it's the name of

the official view blog but not of a podcast. That was the twist of this question. Such a cool question. Okay, this time I will unplug the HDMI again. The USBC. Yes, that that's the thing you want to see. Okay, login failed. Wrong wrong credentials. It's getting even better and better and better. I I hope everyone is awake after this. It's more of a of a fun thing

here. No, I'm just talking through the questions. Whatever you do in the background, it is not working. Password wrong. Everything's wrong. So, reloading. Going through the questions. It is. But, but I I'm very happy that the emojis are working for you still. So, still. So, that is fine. Oh, we have no Oh, we have something. I will click it. >> Yay. >> I have to log in

for each question. No, it would be something new. No. Okay, the next question would have been what is the correct? Now it's that that is cool. That really is awesome. That is fantastic. That is I I have to screenshot that one. That is awesome. Okay, we're just going to the questions. We can read it as it is. I can't anymore. What does view vapor mode eliminate to

improve rendering performance would have been the question. A view vapor mode is a variant of view that offers rendering without the virtual DOM. And so the virtual DOM would have been the correct answer. You can look it up. You can experience it. Can you still spam emojis or is this also broken? Next slide. Next problem. Emojis not working anymore. Great. We will look at the leaderboard at

this point. Thank you for your um participation. uh we will just skip everything from now. There would have been questions like what uh is the false upgrading from view 2 to view 3. You can see it in the JSON file in the repository if you're interested in the correct answer. Or what organization does not use Vue.js because maybe you don't know that NAZA or Net Netflix are

using Vue for some of the other thing Blizzard and Versel and stuff like that. And then it's interesting to think about what companies use Vue and what does not use Vue. And there are more than you think. Is it working again? No, it's not working. Um, okay. Then we just jump to this little page there because this is the resource for the repository. So if you want

to see the answers and the questions later because then you can scan the QR code and I will now switch to the leaderboard and then we will see if at least this is working and we have a winner for the Lego set. Good. That's awesome. Is there something with Okay, it's everything is working. Dom then we will figure something out. You will get only magnets at the

moment. I have no idea. But thanks for your patience for this little rundown. But don't don't take it too harsh at this point that I wrote for Gillian. Thanks for the deployment. It is it is Gillian's server, but he really helped me a lot and it really was a wonderful help. Uh so no blames on him. Please a shout out for Gileian at this point. Thank you

for letting you use your server and then come down for your magnets and then I think this is uh the end for me. >> Leaderboard leaderboard is working. The leaderboard is working. No, really may maybe. Whoa. H we have two ones with 11 correct answers. So I will pick Marco. Is Marco here? Perfect. Marco, you won the Lego. We have a winner. Okay, perfect. Marco will get

the Lego. You all other will get the magnets and the keychains. They are here on the podium. And that's it. Thank you for your patience. >> we will figure it out in a second. >> All right, everyone. Today's incredible talks. I want to say a huge thank you to every single speaker who shared their knowledge and their passion on the stage. Thank you the organizers who organized

this amazing conference. Thank to the sponsors who made it possible. And most importantly, thank to all of you. You're the reason this conference exists. Now, just a reminder, uh we have afterparty. So, bring your dancing shoes, bring your singing voice, and I will see you at the next door at Mullen Bulls. Thank you. Have an incredible night, and I hope to see you again next Uh-huh. >>

All along the western front, people line up to receive. She got the power in her hand to shook you like you won't believe. Saw her in the boat running through her skin. Standing there with nothing on. She going to teach me how to swim. said, "Oh, girl, you shocked me like an electric deal." Baby girl, you turn on your electric field. said, "Ooh, girl, baby girl All

along the eastern shore. Put your circuits in the sea. This is what the world is for. Making electricity. You can feel it in your mind. Oh, you can do it all the time. Plug it.