[Steemia] - Performance & UI

After few testing on the application I noticed something making the app slower. Angular was trying to track each single change that can occur in the app where most of our data are static. This was dropping all the FPS trying to track those changes.

Changes Made

---

• One of the most important changes that I did was to run the functions in charge of populating posts to the respective UI. I decide to call these functions outside the Angular changes detection context just because this data is not intended to change constantly. So, a constantly detection of changes is not needed for this kind of data.

• The most second important change was to implement the pagination correctly. Before, we were just increasing the limit and calling the whole array each again (worst decision). By doing this, Angular will have to recalculate and redraw all the post even if the user does not notice it. Now, we are using offsets to retrieve the next chunk of posts.

• Also, instead of re assigning the array of posts, we are now pushing data into the array so older already painted post will not be affected.

• Images were also a big issue in this app. We use to call images directly from the URL because we didn't know that we can call images already resized from one endpoint of Steemit. By doing this, we can get a fix size of images and a reduced size of them giving the user a better experience.

• In addition to images, images are now cached for 7 days with a concurrency of 10 images at the time to avoid overloading. In addition, the cache limit is set up to 20 MB (we are still thinking to reduce it to 10mb or 5mb). And images load in a different thread outside the UI thread.

• The old http module was replaced by the new httpClient. So now we do not need to convert the response to json since it is already done by default.

• Update the old dependences in the project.

• Remove lazyload from the tabs page and the sections in the tab itself to improve the load time of these pages since they are loaded first.

• Change main templates from html to a single string to avoid http calls of these files.

• Split the post renderer component into two to reduce the size of the files and have an easier escalation. Now, there is a component called post-card which can be editable and reused in any place of the app.

• Create a single scss shared file to be used in all tab's sections

• Add some styles to the design and start resizing things for tablets.

Screenshots

---

Here are some Screenshots of the app:

---

Posted on Utopian.io - Rewarding Open Source Contributors

---