FragSalat's Blog

Blog Articles Tagged with “aurelia”

    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.


    Read More

    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

    Read More

    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

    Read More

    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.


    HTML: filter-list.html
    1. <template>
    2. <div class="filter-list">
    3. <div class="filter" repeat.for="filter on filterGroups">
    4. <span class="text">${filter.value & lookup:filter.type}
    5. <span class="icon icon-close" click.delegate="removeFilter($index)"></span>
    6. </div>
    7. </div>
    8. </template>

    Read More

    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 which you just can copy to have a ready to use

    Read More