Layout actually working as a layout

Hello,

It would be such a great improvement if the layout could load just one time and after this only the content of the page load after every URL change.

Hi @Thiago_Andrey_Zils,

Could you give me more information on what you would like to see changed? Maybe a screenshot or a screen recording?

Are you referencing Losant Experiences? Or the Losant Platform itself?

Any additional information would be very helpful.

Thank you,
Heath

Hey,

It’s the Experience Layouts, they could act like SPA pages, changing only the content of the page.

Instead of reloading the entire page or redirecting the user to a new page, only the main content is updated asynchronously, keeping the entire page structure static.

Now, we import all of our libraries on the layout, every time we change page, they need to be reloaded.

Now, the pages are working like the tradicional page

image

It could bring better performance to pages.

Hey @Thiago_Andrey_Zils,

I would highly recommend that you check out Turbo and Stimulus. They are designed to work on server-side rendered web pages and work well with Losant Experiences.

Importing your libraries via a CDN will also allow caching to happen. This will make the websites more performant, as well.

Thank you,
Heath

Nice!

There is a example application on losant with Turbo and Stimulus ?

So, its better to import our libraries using CDN instead the Files ?

@Thiago_Andrey_Zils we actually do not have an example application that utilizes Turbo and Stimulus quite yet. Even with an example to start from, it requires some more advanced web development skills to implement those libraries, especially when utilizing additional JavaScript to change the page behavior. But, using those libraries does give your application the snappy feeling of a single page application while being rendered server-side.

FYI, it is also possible to host a single-page application within your experience. Our internal solutions team does this quite frequently. So if you’d like to develop a more advanced UI, you could …

  • Utilize experience endpoints and workflows to build a JSON data API. (Check out our how-to-guide on the subject.)
  • Develop your single page application in your local environment using, for example, React.js.
  • Upload the built JavaScript bundles to your application files.
  • Serve your main index.html page from your experience, which pulls in the JS bundles.

To elaborate on the CDN point, Losant does cache application files for five minutes. But what Heath was referring to was the loading of external libraries (jQuery, Google Maps, etc.) from public CDNs as those are cached for much longer periods of time, and it is possible the user would have the file in their browser cache already if they came across another site that utilized the same library served from the same CDN.

1 Like