All topics

Dashboard & Navigation

Trojan

13 hours ago

Hi Team, Can you tell me I am using Spark Core to build a dashboard view I pretty much understood the working of it as well? Just wanted to confirm one thing since I come from weweb where I have used Multi-Page sections by which Sidebar becomes common for the pages so what will be the best practice to achieve the same thing in toddle?
Max

12 hours ago

Sounds like you want to create a SPA. That is way easier in toddle. You can create each screen as a component and then just use the Show/Hide formula to display/hide based on a page parameter, for example
Max

12 hours ago

So you basically just have one page. I believe that @ shows this concept in his video: https://youtu.be/S_qwRBWbVPg?feature=shared
This video is 8 hours well spent 😉
Trojan

11 hours ago

Thanks @Max But then I have a quick question at the same time if we have lots of components which have their own API calls then don't you think it will impact the performance (until and unless show/hide is working on the concept of Conditional Rendering as in weweb)

As you can see I am creating pages like this which are clone of one of the page with its own content-wrapper on the ight and sidebar on the left which have the logic of setting the menu active based on the current path from the URL in comparison with my path value coming from the _MENU variable.

What will be the ideal approach to deal with this?

In my case the approach which this tutorial shows is you have everything on one single page?

So what will be the best approach to go ahead with?
@Trojan
Thanks @Max But then I have a quick question at the same time if we have lots of components which have their own API calls then don't you think it will impact the performance (until and unless show/hide is working on the concept of Conditional Rendering as in weweb)

As you can see I am creating pages like this which are clone of one of the page with its own content-wrapper on the ight and sidebar on the left which have the logic of setting the menu active based on the current path from the URL in comparison with my path value coming from the _MENU variable.

What will be the ideal approach to deal with this?

In my case the approach which this tutorial shows is you have everything on one single page?

So what will be the best approach to go ahead with?
Jay | DRAGXN

11 hours ago

If I’m understanding correctly, you want to have the sidebar on all of these pages.

You can create a wrapper component that has the sidebar on the left with a Slot on the right for the page content.
Max

11 hours ago

That is conditional rendering and toddle can easily handle that 😊
We create almost all our apps that way
@Jay | DRAGXN
If I’m understanding correctly, you want to have the sidebar on all of these pages.

You can create a wrapper component that has the sidebar on the left with a Slot on the right for the page content.
Max

11 hours ago

That works as well. But then this is a multi page setup. Great as well! But you will lose the scroll position of the menu when you navigate
Trojan

7 hours ago

@Max Correct, for this scenario too, I think we can get the access to it if we have our URL with a hashtag symbol in the end which will work as the bookmark of that page if we can give an ID to our wrapper element.

But question is still that which approach will have better performance? considering not only dashboards but blogs, ecommerce sites or marketplace sites.
- Mulitpage approach which I implemented
- Conditional rendering approach
- @Jay | DRAGXN approach which is kind of similar to mine I can use that component on different page as well.

cc: @Andreas Møller
Tod

7 hours ago

Great energy @Trojan! Your continuous contribution to the toddle Community just made you advance to Community Level 1!
@Trojan
@Max Correct, for this scenario too, I think we can get the access to it if we have our URL with a hashtag symbol in the end which will work as the bookmark of that page if we can give an ID to our wrapper element.

But question is still that which approach will have better performance? considering not only dashboards but blogs, ecommerce sites or marketplace sites.
- Mulitpage approach which I implemented
- Conditional rendering approach
- @Jay | DRAGXN approach which is kind of similar to mine I can use that component on different page as well.

cc: @Andreas Møller
Max

7 hours ago

"Better performance" is very broad. It always depends on your focus and what you are building. There is no "one approach fits all."

If you build an SPA, the initial loading time tends to be higher, because on average, you have to load more JavaScript than in an MPA setup. But the navigation between pages is faster. Also, you have more control over the navigation behavior.

MPAs tend to scale better, because only the JavaScript that you need on the current page is loaded. That usually also reduces the initial load time.

If you want an app-like feeling, in my opinion SPAs are still the best choice. For blogs, e-commerce, etc., MPAs might be a better choice.

Long story short: It depends very much on the experience that you want to achieve.
gazinhio

3 hours ago

I agree with Max on this, SPAs have a slightly heavier load time - but users expect that when logging into an app so its usually not a big deal, as long as you can load in under 3 seconds then you're good and then after that your app is going to be a lot snappier. MPAs are coming along and for public-facing apps like ecommerce etc then an MPA is the way to go as SSR means better SEO. Personally I wouldn't want to be involved in writing an MPA, I have yet to hear a good state management story for them and that kills it for me.
💪1

Dashboard & Navigation

Trojan

Max

Max

Trojan

Jay | DRAGXN

Max

Max

Trojan

Tod

Max

gazinhio

Stop scrolling. Start building.

Chat with @team-toddle

Video call our CEO

Get in touch!

Product

Company

Resources

Community