IDE can barely keep up

💬 App Building
1
  1. My goal: Work smoothly with no lags whatsoever just like any desktop application.
  2. Issue: IDE is super slow when some queries and around 200+ components exist on a page. It is unbearable to keep working this way. The editor drastically needs a lot of improvement in terms of performance. Doing minor tasks like duplicating, renaming, opening queries, or dragging components into the canvas becomes super sluggish. On some pages, the app simply crashes and cannot bear the weight. Many times I have to refresh the editor again.
  3. Steps I've taken to troubleshoot: Trying to use list view repeatables as much as possible and cutting down on hardcoded components whenever possible, and using queries in the most efficient way.
  4. Additional info: Using Cloud version 3.340.0-b5a755c (Build 303799)

Total pages: 24
Current Total App size: 2422

Please don’t tell me to split the app into several ones as that is not ideal for me in the least bit. It will be harder to maintain code, switch between different apps, let alone rewire and stich everything together.

4

Thanks for the feedback. We hear you on the pain points here. Our engineers are working on a major rewrite to our layout engine which will address performance issues with the editor experience. If you’re interested in beta access to this, DM me and we can get you into that.

5

This sounds great. I have merged many components together with markdown, removing unnecessary containers and merging frames like modals, sidebars into one with dynamic values, and I currently have slashed down the app size to 1000. optimization is the key in here. now the editor and app feels way smoother and faster than before.

1 Like
6

Re-usability of modal components with dynamic values is a must for more complex applications. Glad that you were able to implement some optimization!

1 Like
7

Yes indeed for complex apps this becomes almost necessary.

8

Looking to understand better what you did to improve performance?

9

Well, I did several things to improve performance and here are some.

-Utilizing HTML by replacing native components like texts, images, and buttons everywhere like list view items, placeholder contents, etc.. which highly reduced the total app size as well as the initial speed on the DOM loading the tree graph.
-Migrated all Postgres queries and stored them directly inside the database by creating functions and procedures which was noticeably faster in fetching data and perform CRUD ops without waiting for the data to be sent and then parsed.
-Merged many variables into a single nested object variable.
–Merged many JS queries into single ones whenever possible.
-Restructured local storage hierarchy entirely to better visually organize things.
-Used dynamic values on some components.
-Used single global frames like one sidebar, one modal, and one drawer that can be dynamically resized and positioned with a variety of other attributes like background color, border radius, etc… this can only be done however with CSS.

I hope that answers your question.