search

odan / slim4-tutorial

Slim 4 Tutorial - Source Code
98 stars 25 forks source link

What should be and should NOT be loaded with AJAX #30

Closed samuelgfeller closed 3 years ago

samuelgfeller commented 3 years ago

At first, I was working on my example project as RESTful API and separated frontend (other frontend project folder). I built the frontend in a way that the whole content was generated dynamically with AJAX calls. Then I realized with your help that it was not suited for what I wanted to do.

Now that I'm working with PHP-Templates I generate the content with them, but I have this question, should I still update the content dynamically (without page load). An example would be: User edits a post. The post form is loaded with js in a modal box. When the user clicks on the submit form an AJAX put request is made. The modal box closes. In the background a new request is made to refresh this post in the list so that it contains the newly made changes. All that happened without a page reload.

I intend to do a PWA later and not refreshing the whole page on certain form submits feels more like a native app or not?

At the time I was quite happy about how I had done it, but now I stumbled across the Wikipedia page about AJAX, and I was baffled on how many drawbacks it has.

The "new pages" would still be loaded (when clicking on an internal link or navigating with the menu). I'm not much worried about the browser navigation (go back, forward, history, bookmark) as either it'll be a new page so new link or I can add # which is the workaround mentioned on Wikipedia. But how about those:

Any user whose browser does not support JavaScript or XMLHttpRequest, or has this functionality disabled

Some Web applications that use Ajax are built in a way that cannot be read by screen-reading technologies

dynamic page updates may disrupt user interactions, particularly if the Internet connection is slow or unreliable.

So, now I'm wondering, is to cool to have a webapp that doesn't always reload the page when doing things on the same page or is it only great for (privileged) people with modern browsers and fast internet and annoying for the others? Also on reddit I see a lot of people calling out the "overengineered websites" that don't work with js disabled.

What is your personal opinion on this? What is the "industry recommendation"? Or maybe do you know frontend devs that would have an interesting opinion on this?

Note: I'm not asking for a simple info website but a web application.

odan commented 3 years ago

I would first distinguish between a website and web application, because the requirements are very different in each case.

For optimal SEO a website must be loaded and rendered as fast as possible. For this reason, you should render the website as much as possible on the server (SSR) and not overload it with JavaScript. Building a website as SPA would be completely wrong or overengineered in my opinion. A website has to be extremely fast and still has the character of a document and not of an application.

For web applications it may be a bit more JavaScript to make the user interface more comfortable.

In general, I wouldn't worry about the mentioned disadvantages of Ajax, because nowadays, nothing would work on the web without Ajax. Much more important is the question of how to make a web application fast and lean but also easy to use. For this, I think, you definitely need Ajax and of course JavaScript.

There are two extremes in today's web development. 1. the classic approach with a complete page reload and 2. SPA's where everything is loaded only once and the UI is rendered only in the frontend. I personally prefer the golden middle to get the advantages of both approaches.