Break the problem

Rubin Elezi — Tue, 16 Aug 2022 13:18:16 +0000

When I was starting with programming, every time I wanted to build something I got scared. I started overthinking the problem and the complexity, saying how much work is to be done.

And I didn’t just say it because I was lazy or something, but it really felt overwhelming at the time. Even if it was a small thing to be built. And I believe that also happened to everyone when starting out.

That's why today I want to share with you how to break the “problem” and walk you through my process of work.

NOTE: Through this article, when I say “problem”, it can also be a feature, an app, a website, or anything that you build/code.

First things first, coding is the last thing you should do, yes, and also probably the easiest. It will make sense in a moment, as you go through the process:

Understand the problem and do the research
This seems obvious, but depending on the complexity of the problem, take your time to analyse it, and don’t be afraid to ask questions. If it is a feature, take some time and look for solutions online (DO NOT COPY PASTE 😂), purpose is to take inspiration and ideas. If possible review multiple solutions and follow the best approach you can find.
By doing this step you will start to feel less “scared” because you will see that it can be done and the blur starts to come off.
Solve it in your mind
Then you should think of the solution from your app viewpoint, think of how your app is structured, and how you can start applying the solution based on this. What will be the components, and how will the data flow? Usually, it is best if you use a piece of paper or something to write on.
You should not write the code on paper, only the idea, for example:
You have to create a button that deletes items from an array. In this step, you think about where this button component will be placed, how it will get the data from the main component, etc You don’t have to write the actual code that deletes the data from the array
Code it
And this part is straightforward and usually the easiest, but it requires work. By now you understand the problem, you have the solution on mind/paper, and now you implement it. (Here you write the function to delete the item from the array 😅)

Stop touching the DOM, damn it!

Rubin Elezi — Sat, 06 Feb 2021 12:21:23 +0000

DOM operations are expensive.

Leaving the DOM alone is a big topic in JavaScript optimization. The classic example is appending an array of list items: if you append each of these to the DOM individually, it is considerably slower than appending them all at once.

Reflow

DOM operations are resource-heavy because of reflow. Reflow is basically the process by which the browser re-renders the DOM elements on the screen. For instance, if you change the width of a div with JavaScript, the browser has to refresh the rendered page to account for this change. Meaning every time you change something on the DOM with javascript the whole page will be rerendered, and you can avoid this by using, documentFragment.

documentFragment

You can view this as a container holding all the node elements that you want to add to the DOM. You store them on this "container" and after you have finished all the changes that you want, you append that container to the DOM. Imagine if you wanted to add 100 div tags if you append them directly the browser would have to rerender the page 100 times, expensive, but if you use documentFragment the browser would need to render only once.

Do you go to the store 100 times to buy 100 things, or do you buy them all at once?

Example

Before

var trash = document.getElementById("trash");
// ... Modify trash
document.getElementById("target").appendChild(trash);
After

var trash = document.getElementById("trash");
var frag = document.createDocumentFragment();
frag.appendChild(trash);
// ... Modify trash
document.getElementById("target").appendChild(frag.cloneNode(true));

Conclusion

The speed improvements might not be so obvious on browsers, as modern computers are so powerful, but javascript does not run only on modern and powerful devices. I develop applications for smartTV-s at my current job, using HTML, CSS, JS, the performance impact it had on the old model of TV-s is subsectional. I had to make changes to a library we were using to implement this behavior, the results were good for me and I thought to share it with others.

Thank You!

PS: this is my first blog post :P