FragSalat's Blog

Hey folks :) Today at work we made some changes in our Aurelia application which lead to some unforseen changes. The model setup is a parent class which holds a list of child classes. The parent class have a getter which returns true or false based on all children having a certain property or not. (Quelltext, 21 Zeilen) This worked previously because the children array was itself modified and therefore the getter re-evaluated. Now the code changed so that only the specific property of the children change and the getter isn't called in this case. After wasting some time with Google and even ask the community in discourse I've found NO acceptable solution. So I checked how the computedFrom decorator works and wanted to create my own. How it works First of all I want to say that I might miss something here as I only had a shorter look. As far as I can see it tThe original computedFrom decorator just takes your string parameter list and puts it into the property dependencies on the…

Everyone of us is using some kind of logging in our applications. I actually didn't thought that logging can be evil to me... Recently I recognized that my lovely Aurelia app was getting slower and slower and that it struggled with big data tables in some cases. Once I got some time and analyzed the problem and found quite fast some things to improve. The Performance tab in Chrome gave me nice insights about load times, memory consumption and performance of single functions and their call stack. After some navigation through my Aurelia application I found a quite interesting memory leak. There were actually quite many places where I sadly kept references to some view models and custom elements which lead to a huge dom tree and other objects not being garbage collected. Luckily all of those were easy to fix by adjusting my self written annotations and subscription management to use the bind and unbind lifecycle of the view models and custom elements. After I ensured that all…

Recently I wanted to watch a series hosted on different platforms like streamcloud or vivo. So I searched for this series and opened the first video on streamcloud and was abused by tons of porn advertisements. Ok I could install a Adblocker, which I don't like because it steals smaller websites like mine the money, but there are sites out there where you can't start the video with enabled adblocker. After I passed the 10 seconds delay I clicked the button to proceed to the video. Again I was bombed with advertisement. Even though this is already absolutely annoying, I was super pissed off after four times a popup opened when I clicked the start button. Incredibly the video finally started after the 5th click. To watch one episode which has around 20 minutes play time I had to see 8 advertisement blocks and 4 popups. Holy shit was I annoyed when I thought about that one series like fairy tail has over 250 episodes and I have to do this every 20 - 40 minutes!!! The idea was born So i…

Today I recognized an, at least in my eyes, weird behavior of the BindingBehavior in Aurelia. My use case was a group of badges showing the current filter criteria sent to the backend. Instead of showing a list of unreadable codes the API expected, I wanted to lookup the name in my master data dynamically. So I created a BindingBehavior which expects as value the filtered code and as additional parameter the type of master data where to look at. (Quelltext, 8 Zeilen) This seem to work or doesn't it? When the order of the filter types in the list remains the same this works quite well but when the order can change during user interaction the results become wrong. The problem here is that Aurelia reuses already rendered elements and just binds a listener to it's value to re-render the text node. This leads to the problem that the value for the lookup BindingBehavior will change but the additional parameter won't. In my use case this happens all the time because the user can remove…

As stated in my last article, Web Components are a relative new way to build modern and reusable components. Even if the Web Components specifications are not implemented in some browsers like Firefox and Edge, there are ways to support them by using a polyfill. Aurelia itself is a single page application framework (SPA) which is based on the idea of Web Components. Some of you might ask: "Why do I need native Web Components when Aurelia provides the ability to use some of the main benefits out of the box?". The answer for this is pretty simple... Reusability :) Since Web Components are native browser standards you can use them in general with any framework or library like Aurelia, Angular or even with React. This makes it easy for companies with multiple applications and frameworks to build components only once. So how can we use Web Components in Aurelia? In our example we will use one of the prepared aurelia skeletons ESNext + JSPM…