Laravel Kahoot clone: Livewire or Inertia?

Using javascript frameworks (vueJS, react, angular etc.) to create dynamic web apps, come withcomplexity. These frameworks made many things possible which were not possible to implement using backend frameworks such as the concept of SPA (single page application), dynamic UI, complex user interface and better user experience etc. If you are a backend developer, then you need to completely learn a new frontend framework and related technologies.

So Livewire and inertia came with solutions using which backend developers (e.g. php laravel developers) can make such complex apps without needing to learn a frontend framework. Both are backend develoeprs friendly. Using these two technologies, you can create high performance applications.

Livewire ✅

• Livewire is aframework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel. Meaning, in order to make "dynamic user interface", you don't have to leave laravel and learn some front end framework from scratch.
• What laravel does is, when a user interacts with the UI, it loads the components dynamically. So lets say a user clicks on a modal button, then livewire will make an AJAX request to the backend, fetch and render component, and bring it to the webpage then.
• Whenever user interacts with any data, livewire can also make an ajax request to save those changes.
• In a traditional approach, we would reload a page, but with livewire framework, your application can perform faster.

InertiaJS ✅

If you are working on a project that has a frontend and a backend (e.g. CMS) system, what you can do is create two projects, one in laravel and one in some javascript framework. You can also create both app in one (e.g. Laravel + VueJS concept) by creating and API. In both the cases what happens is, frontend pages/components gets the data from backend using API.

• With inertiaJS, you can Build single-page apps, without building an API
• InertiaJS is like a glue that connects backend technologies and frontend framework components (vue, angular, react)
• Using inertiaJS You use your framework's existing functionality for routing, controllers, middleware, authentication, authorization, data fetching, and more.
• The only difference is the view layer. With backend frameworks, the views get rendered on the server-side. But with inertiaJS, the views are JavaScript page components that gets loaded dynamically.

I suggest you to learn both of these, because it is very easy to learn. I learned both within a week and implemented it in dummy projects as well. Once you learn it, you will realise the power of these technologies and you yourself will be able to decide which one can do the job for your project. Good luck ! @jeroenvanrensen

Hi @gitwithravish,

Thanks for your detailed answer! Okay, I'm gonna learn both of them.

Do you have a recommendation for this kahoot project? Which of these would you use?

Jeroen

I dont know what kahoot is mate...

@gitwithravish okay let me give you a quick description:

Kahoot is a quiz game where people can create and host quizzes. The quiz host shares its screen with all the players.

Other people, the players, can join the quiz using a digital pincode and answer the questions.

So it needs live refreshing.

I hope you understand me. Jeroen

If I had to choose, then I would use inertiaJS.

You can create vue components and use inertiaJS to load those components dynamically. You can use the power of vueJS to achieve reactivity. It is fast in performance, as many things take place on the client side, where as livewire requests to server for any kind of changes, which might be comparitively slow.

But again, as i have mentioned in my answer, you should take an overview of both rather than relying on the answers from the community.

You can also try discord servers of livewire and inertiaJS. You can get some good help from there as well.

@gitwithravish okay thanks for your answer!