9.7 Understanding the flow of information - caligrafy/caligrafy-quill GitHub Wiki
Caligrafy leverages the power of server-side programming with the sophistication of client-side programming to help you build modern and powerful applications. With that philosophy in mind, Caligrafy was built to reinforce the separation of concern and let PHP and Javascript do what they do best by respecting an MVC structure.
Vue.js is a progressive Javascript framework that was built from the ground up to help build powerful and sophisticated user experiences. Vue acts on the View layer (thus the name) of an MVC structure and relies on other technologies to serve the Model and Controller layers. All those were compelling reasons to create a seamless bind between the two frameworks.
In every framework integration, it is important to know what role and what responsibilities are played by each framework.
The application logic or in other words the server-side logic - mainly the Model and Controller layers - are fundamentally built in PHP and use all the powerful features that Caligrafy brings to help build them more efficiently. Database, Models, Controllers and Routes are examples of server-side logic that are built using PHP in Caligrafy.
The application user interface or in other words the client-side logic - mainly the View layer - is where the integration with Vue takes place. Caligrafy has other mechanisms for building views in PHP that were covered earlier in the documentation. Vue is an alternative to building the views but this time using Javascript and Markup (HTML).
The user interface that your users will be interacting with is designed and built using Vue. This gives the ultimate power to create delightful experiences on the browser. Every time a user wants to send or receive information from your services (posting a picture for example), that information exchange is handled by Caligrafy.
So, whether it is getting, creating, updating or deleting information, Vue initiates them and Caligrafy performs them. In a more technical way, Vue sends asynchronous requests (GET, POST, PUT, DELETE) to Caligrafy and Caligrafy handles these requests and returns a response to Vue to render the result to the user.
Given that all of this is happening within the code of Caligrafy, it is important to understand how Caligrafy is structured to do that.