The Adalo team has always been committed to giving Makers the maximum amount of flexibility in terms of using the builder to create apps. As part of our effort to improve performance we’ve come to learn that this flexibility can sometimes be a double-edged sword, with the most notable observation being that certain approaches to building screens and logic are far more performant than others.
Over the past few months we’ve met with hundreds of Makers and reviewed countless apps, and have identified five specific workflow improvements Makers can implement to immediately improve performance. We’ve highlighted these five tips in a newly published blog post:
In the days and weeks ahead I’ll be returning here frequently to provide updates regarding infrastructure- and application-specific improvements we’re making in an effort to improve performance, as well as additional tips and tricks that you can immediately incorporate into your own workflows to make your apps scream!
January 30 update: We have added a companion video to the blog post!
Thanks for this, Jason! Helpful hints. Biggest standout for me is obviously the custom vs. native lists. Although some of the custom use is mainly aesthetics, many of them are to enable more robust displays of information without burying important content behind additional clicks/taps. Hoping that you guys can build out some more advanced lists for us to leverage (more modern social media feeds would be great). And please bring them to both legacy and 2.0 editors since many of us are still trying to navigate the difficult transfer of apps to 2.0.
Thanks a lot, these hints will help many Makers to improve the app performance!
One note about lists within a lists. In a lot of cases it’s been used not because we don’t know how to design apps, but because we simply don’t have other choice (especially single-item lists). There is no way to access a record from any collection, so we have to add list to be able to do it.
A very simple example: imagine a collection of Tasks and collection of Statuses (backlog → todo → in_progress → done). Each task has one status. We need to allow a manager to view task list and change statuses from the list. Status flow is defined as above.
So we can add multiple buttons with different visibility conditions, for each status, and these buttons should progress the task to the next status. However, we will have to wrap each button in a list of Statuses filtered by a next status, because there is no way to get record from Statuses in another fashion (I’m not talking about custom actions and API calls here). You can imagine that for the list with 100 tasks it will be quite inefficient from the backend perspective. Of course there are workarounds (e.g. use text for status), but this is just one example.
So if there will be a way to get a single record from any collection, some kind of an action, this would solve a lot of issues like these.
Again, thanks for all the improvements and hopefully we’ll see more of them!
As a matter of fact just yesterday we were just talking about adding social media-specific list variants! Do you have anything specific in mind regarding candidate layouts?
Apologies for cutting in on this one @victor@wjgilmore. My app is now published to iOS and Android and the home screen uses a custom list, basically as stripped as it can be. Personally, to have that social look about it, the simple list just isn’t up to scratch. This one needs space for a post title, post text, the poster’s profile image, their business title, distance from the logged in user and date posted. The sessions button is just a shortcut to a page, without a list element. It’s just not doable with a simple list. I’ve used imgix on the avatar type pics, but there’s still a notable delay. Something similar as an inbuilt list would be great. Thank you. Tony
@wjgilmore thanks for posting these tips - it’s a useful sense check to align on best practices (I learnt something new on the photo tip!).
I can’t say I agree with the comment made in the “Use Adalo’s native lists” section, mentioning users are creating custom lists due to “minor cosmetics reasons”. In my opinion, the native lists aren’t up to scratch in terms of design. Design isn’t minor, it’s core to people’s brand.
Additionally, the video under tip no.5 was super useful, because it showed the best approach to solving a problem. A similar video would be helpful for the other tips, instead of just advising against it. For example, I use lists within lists because it’s the only way I know how to solve my problem. But, if for example you could explain to me how most people are doing something wrong, and the workaround (maybe it’s a better set up DB?), then I’d find that super useful!
Thanks for these tips. The image tips works well for me. I only have one image per user & that is the profile image. I currently take out each image and compress them and then load to database. I compress each image to 100kb max. Some images uploaded can be as large as 5Mb! I intend to try the image tip so as to remove the manual compression.
As for the “load as your scroll” option, it does not work for me. I am building a tutoring app & expect a large tutor database, about 2000 tutors. With filters engaged optimally, I can output a list of about 200 tutors that fit student’s tutoring requirement. Clients will need to scroll through this list, view details, return to the list and scroll to the next record. Using “load as you scroll” will always return the list to the first record after viewing details on another screen. This will be terrible for the user experience. I can imagine being on record 25 and after viewing details, get reset to record 1 and having to scroll to record 26…etc
For now I have tried a horizontal card list, the horizontal card list preserves the scroll position even after viewing details. I have also tried a simple list without load as you scroll. This grinds when the number of records exceed 200.
A list is not much use if you cannot show list record details on another screen. Lists can be 10 records or 100 or more records. If the list resets to position number 1 after viewing details, it becomes a chore to use for larger lists.
Is this an issue to stay or can there be a solution?
I very much appreciate jumping in the forum and interacting with the actual users @wjgilmore.
Very excited for the future of Adalo.
Where I find the native lists falling short is in the lack of in depth options, usually available on other blocks;
Custom visibility - Useful for showing notification buttons of unread messages)
More styling options - In card lists, if you want to use pills, you are forced to use a button but on the button functionality you cannot specify font sizes / if you want an ‘X’ icon to close, it can only appear bottom right which isn’t a desired UX pattern)
Font styling - My regular font and font size is spaced differently between letters when using native lists, leading to a disjointed experience, not in line with the other screens/branding
In general, native lists currently feel very MVP app-like. I agree with what was mentioned prior; design is vital to a brand and an app’s identity. It’s a bummer that a trade-off between design/UX and performance needs to be made.
I think it would be amazing to create some social templates that do the things that users are expecting social feeds to do, all built specifically for speed in adalo. This includes potentially both the backend post uploader and the front-end experience for users. Things that stand out as essential:
Ability to show images or videos in the feed without jumping to a separate page (can be tap to play videos of course)
Ability to upload and display multiple images/videos in a post
Slick/fast/broad range of emoji reactions
Simple status tags based on upload time (New!, etc.)
Ability to jump into a post and then return to the place you left off in a list
Built in measurement (number of views etc.)
Must work for both legacy and 2.0 apps
For me these are going to be the essentials. We are also allowing inclusion of links and pdfs (maybe there are creative ways to tackle that. Others may want things like commenting, etc., but that seems to be things that would add weight to the posts/feed. Also, once you get deep linking in place, the ability to share the posts would be ideal.
hey @wjgilmore
thank you very much for the guide, I applied everything you wrote and it really helped.
Along with this, some points:
I still get many complaints from users about the speed of my app.
I would appreciate your help because I have already tried everything you recommended:
first screen -
I have to load 3 different lists (no choice) - I reduced the size of images, it’s a normal list and the loading is lazy - it’s still slow.
The second screen-
You have to update 2 records at the same time (no choice) and it takes a very long time.
Hi @AliM I just wanted to let you know we created a companion video per your request! This is a pretty expansive addition to the blog post. Kyle (Adalo customer advocate) introduces the performance tips while walking through two of his own apps (recipe and budget managers)!
Thanks for the video. I see the page list is the way to go for displaying large lists. I am currently building my app all with Adalo standard components. I am kind of afraid of 3rd party components as there are developers that create components & do not maintain them over time. I guess I need to take a leap of faith.
@wjgilmore this was a great watch - thanks to both you and Kyle for creating it. Excited to see more of these. Here’s some thoughts I had based on the video:
The real life app walk through was super useful. Seeing Kyle’s database setup is a good sense check for an Adalo builders DB setup.
Having these tips regularly would be useful. New components great, but equally how to optimise existing components. Adalo-built pagination for example sounds good.
The nested list topic still confuses me. I completely understand the performance side, but essentially Adalo have built a product and recommend not using it? I’d love to get 15 minutes with Kyle to see if there’s a way for me to avoid using a nested list. It could be a good future video for anyone facing the same issue as me.
