I implemented a simple crud application in two ways.
One with Laravel and Vue and one with Laravel, Vue and Inertia.
When rendering a simple user list in my Vue/Laravel application (either with routing or initial page load), Vue renders the whole page instantly and loads the user list as soon as it receives it from the server. -> good user experience, possibility to implement a loading indication
When rendering the same thing in my inertia application, Vue renders the whole page after the data has been received from the server. Which is a very bad thing for applications with large amounts of data.
Even in my really small/slim application, I felt the difference and figured this out with a simple sleep(3) before returning the view (or Inertia::render) in my UserController.
Is this normal/is there a way to prevent this? Or did I possibly implement inertia poorly?
I'm using inertia.js 0.8.5, inertia-vue 0.5.5 and Vue 2.6.12
Normally, if you want to display lists of users with Inertia, you'd paginate the list server-side with Laravel's built-in pagination. If the page load time is slow, you're probably trying to load too much data/missing eager loads/missing DB indexing/doing some calculation that can be optimized.
You can use Progress Indicator to improve the UX when navigating between Inertia views. Does it make a difference to the user if they see an empty table in an SPA with ajax calls before the data loads vs. seeing a progress bar before the view reloads? IMO not really.
If for some reason in a particular view it's really important to have the table layout (or some other empty data container) displayed, even if it's empty for some time, you can always load the data with ajax in that one-off case. Not all data in an Inertia app needs to be "pushed" to the view from the controller, you can also "pull" it from Vue/React side.
Related
I'm trying to understand when and how to mix the Laravel and Vue components in a web app.
MPA where each blade view consists of a Vue component
Is it ok to have server-side routing and each view to consist of a Vue component ? Or in this case it would be better to make an SPA ? ( More specifically, here the question is whether there is a benefit of having server-side routing instead of client-side routing ? )
Taking as a reference stack overflow.
When you click on a Question the page refreshes which means that a GET request is sent to the back-end and where a new html file is sent to front-end.
When you create a Question, a new file is sent from the back-end and the page again reloads.
However, the content of the Question itself, seems to be dynamic because you can edit the Question or a Reply, but then again when you save the change, the page reloads.
In this case, what is the benefit of communicating with the server with a GET/POST instead of making an AJAX call, taking into consideration that the content of the page is rendered on the client-side with JS which is not SEO-friendly ?
What are the upsides and downsides of this approach ?
In Laravel when we using forms to store or delete a resource, the page is refreshed. What is the best technology to avoid refreshing the page while the request is being processed? AJAX, Vue.js, etc?
There are two main ways to handle http requests: synchronously and asynchronously.
Laravel is a PHP framework and therefore uses... PHP, which is a synchronous language. This implies a page refresh for every requests you make. The point is, every PHP framework have this behavior, this is the way PHP works.
So let's answer your question: indeed, you need an asynchronous technology to make a request to the server and get the response without refreshing the page. The technolodgy of choice in this case is Javascript, which will be able to make AJAX calls.
An AJAX (asynchronous JavaScript and XML) will, as stated in its name, make an asynchronous request. But an AJAX request is just the way of doing it, it's not really a technology. Yes, javascript frameworks like Vue.js are using AJAX, but that is overkill to just make some AJAX requests.
Using Axios or even jQuery is much easier and will allow you to make a request, grab the answer and modify your page without refresh very quickly :)
[EDIT]
The process to achieve what you are looking for is pretty simple:
Use Axios or jQuery to make an AJAX call (an asynchronous request)
Handle this request with Laravel, as you do for every other request
Returns something (or not, it depends of you) to alert your user that something happened
This response will be handled by Javascript
Vue is suitable for small projects where you just want to add a little bit of reactivity, submit a form with AJAX, show the user a modal, display the value of an input as the user is typing, or many other similarly straightforward things. It's scalable and also fantastic for huge project.
I am creating a cms app where a user can post their own, of course!
The problem I am facing is when using Carbon. I am using Carbon to make the created_at readable to humans using diffForHumans(). However, the time updates only when I refresh the page.
How can I dynamically refresh the time (Carbon) without having to refresh the page?
Carbon is a PHP package, and PHP renders your templates into HTML/CSS only once as a response when the user requests for a particular page.
What you're looking for instead is to implement this counter in Javascript. Javascript actually runs on the client's browser, whereas PHP is only run on the server itself.
I will just provide a hypothetical case to understand the point. Let's assume I am creating a mailing application. If I refresh the data every time the user returns to the main mail list page from viewing a particular mail, is there an advantage to make this navigation on the client side via AJAX? Or does it make more sense to actually navigate to a new url for viewving a particular mail and a separate url for the main page?
The same question applies to other cases such as a shopping website. What are the advantages/disadvantages of making each product page a separate url rather than navigating to that product using AJAX?
With a one page app the navigation after the page load is quicker, and you can add effects for the page change, but if you have a lot of items to show, you should load data about it also, so the other approach should be better.
In the past I have developed large extjs single page applications. Many users get frustrated for not being able to use the Back or Fwd buttons or reload the page.I would also like to warn the user if they navigate away from a page without completing a work flow, and enable users to directly access particular views.
For the next application, I am thinking of using the Codeigniter php MVC framework. It is possible to something similar to this example. I am stucked thinking about the navigation. If I load the ExtJs for each view, that is a significant slowdown.
How best to approach this?
Have a look at the Ext.History class (Ext.util.History on Ext4). With it you can register listeners for changes to the hash:
Ext.History.on('change', function( token ) {
console.log('token changed to: ', token);
});
The Ext.History singleton includes forward() and back() methods for triggering navigation from within the client-side code.
By having only the hash part of the URL change the browser stays on the same page, thus eliminating the need to reload the Ext library.
How this would integrate with your PHP framework I cannot say. I am not familiar with CodeIgniter and your example link goes to a dead page.
Also, do note a caveat with History in that under Ext3 at least it may give you issues with newer browsers. If this is the case an alternative is to code your own History-like solution using the 'hashchange' browser event as illustrated in this answer.